refactor: minor update and cleanup to improve test coverage

motss · Nov 7, 2021 · 5b418eb · 5b418eb
1 parent ae387ac
commit 5b418eb
Show file tree

Hide file tree

Showing 18 changed files with 188 additions and 207 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <div align="center" style="text-align: center;">
   <h1 style="border-bottom: none;">app-datepicker</h1>
 
-  <p>Datepicker element built with lit-element and Material Design 2</p>
+  <p>Datepicker element built with lit and Material Design 2</p>
 </div>
 
 <hr />
@@ -11,7 +11,7 @@
 [![Follow me][follow-me-badge]][follow-me-url]
 
 [![Version][version-badge]][version-url]
-[![lit-element][lit-element-version-badge]][lit-element-url]
+[![lit][lit-version-badge]][lit-url]
 [![Node version][node-version-badge]][node-version-url]
 [![MIT License][mit-license-badge]][mit-license-url]
 
@@ -41,7 +41,7 @@ Today, `app-datepicker` has been completely rewritten to adapt to the best of bo
 The following are the list of tools used that makes it shine:
 
   1. [TypeScript]
-  2. [lit-element][lit-element-url]
+  2. [lit]
 
 ## Table of contents <!-- omit in toc -->
 
@@ -58,7 +58,7 @@ The following are the list of tools used that makes it shine:
 ## Pre-requisite
 
 - [ES2019] _(The element is compiled with features targeting ES2019, so it might not work properly without transpilation on older browsers.)_
-- [lit-element][lit-element-url] >= 2.2.1
+- [lit] >= 2.2.1
 - [OPTIONAL] [TypeScript] >= 3.8.3 _(TypeScript users only)_
 
 ## Installation
@@ -112,9 +112,9 @@ The following snippet shows a simple script used in the demo to load polyfills v
 ```ts
 /**
  * Say you've already installed the element via NPM, simply import the package to your application.
- * Here I'm using `lit-element` for developing my application.
+ * Here I'm using `lit` for developing my application.
  */
-import { css, customElement, html, LitElement } from 'lit-element';
+import { css, customElement, html, LitElement } from 'lit';
 import 'app-datepicker';
 
 @customElement(MyApp.is)
@@ -248,7 +248,8 @@ Meantime, feel free to check the older version out at:
 [Configurable demo powered by Firebase]: https://motss-app.web.app/demo/app-datepicker.html
 [Intl.DateTimeFormat]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
 [jsdelivr-url]: https://www.jsdelivr.com/package/npm/app-datepicker?version=latest&amp;utm_source=github.com&amp;utm_medium=referral&amp;utm_content=motss/app-datepicker
-[lit-element-url]: https://github.com/Polymer/lit-element?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=motss/app-datepicker
+[lit]: https://github.com/lit/lit?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=motss/app-datepicker
+[lit-url]: https://github.com/lit/lit?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=motss/app-datepicker
 [material-design-2-url]: https://material.io/design/?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=motss/app-datepicker
 [polymer-2-url]: https://polymer-library.polymer-project.org/2.0/docs/devguide/feature-overview?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=motss/app-datepicker
 [polymer-3-url]: https://polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=motss/app-datepicker
@@ -282,7 +283,7 @@ Meantime, feel free to check the older version out at:
 [follow-me-badge]: https://flat.badgen.net/twitter/follow/igarshmyb?icon=twitter
 
 [version-badge]: https://flat.badgen.net/npm/v/app-datepicker/latest?icon=npm
-[lit-element-version-badge]: https://flat.badgen.net/npm/v/lit-element/latest?icon=npm&label=lit-element
+[lit-version-badge]: https://flat.badgen.net/npm/v/lit/latest?icon=npm&label=lit
 [node-version-badge]: https://flat.badgen.net/npm/node/app-datepicker
 [mit-license-badge]: https://flat.badgen.net/npm/license/app-datepicker
 

diff --git a/src/__demo__/demo-app.ts b/src/__demo__/demo-app.ts
@@ -1,11 +1,13 @@
-import '../date-picker/app-date-picker.js';
 import '../date-picker-input/app-date-picker-input.js';
+import '../date-picker/app-date-picker.js';
 
-import { css, html, LitElement } from 'lit';
+import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
+import { RootElement } from '../root-element/root-element.js';
+
 @customElement('demo-app')
-export class DemoApp extends LitElement {
+export class DemoApp extends RootElement {
   public static override styles = [
     css`
     :host {

diff --git a/src/__tests__/date-picker/app-date-picker.test.ts b/src/__tests__/date-picker/app-date-picker.test.ts
@@ -55,21 +55,17 @@ describe(appDatePickerName, () => {
     it(
       messageFormatter('renders (startView=%s)', a),
       async () => {
-        const el = await fixture(
+        const el = await fixture<AppDatePicker>(
           html`<app-date-picker .startView=${testCalendarView as never}></app-date-picker>`
         );
 
         testElementsShouldRender.forEach((n) => {
-          const element = el.shadowRoot?.querySelector(
-            elementSelectors[n]
-          );
+          const element = el.query(elementSelectors[n]);
 
           expect(element).exist;
         });
         testElementsShouldNotRender.forEach((n) => {
-          const element = el.shadowRoot?.querySelector(
-            elementSelectors[n]
-          );
+          const element = el.query(elementSelectors[n]);
 
           expect(element).not.exist;
         });
@@ -92,7 +88,7 @@ describe(appDatePickerName, () => {
           html`<app-date-picker .locale=${testLocale as never} min="1970-01-01" value=${testValue}></app-date-picker>`
         );
 
-        const selectedYearMonth = el.shadowRoot?.querySelector<HTMLParagraphElement>(
+        const selectedYearMonth = el.query<HTMLParagraphElement>(
           elementSelectors.selectedYearMonth
         );
 
@@ -141,7 +137,7 @@ describe(appDatePickerName, () => {
         a
       ),
       async () => {
-        const el = await fixture(
+        const el = await fixture<AppDatePicker>(
           html`<app-date-picker
             .max=${testMax}
             .min=${testMin}
@@ -150,16 +146,12 @@ describe(appDatePickerName, () => {
         );
 
         testElementsShouldRender.forEach((n) => {
-          const element = el.shadowRoot?.querySelector(
-            elementSelectors[n]
-          );
+          const element = el.query(elementSelectors[n]);
 
           expect(element).exist;
         });
         testElementsShouldNotRender.forEach((n) => {
-          const element = el.shadowRoot?.querySelector(
-            elementSelectors[n]
-          );
+          const element = el.query(elementSelectors[n]);
 
           expect(element).not.exist;
         });
@@ -188,7 +180,7 @@ describe(appDatePickerName, () => {
           ></app-date-picker>`
         );
 
-        const element = el.shadowRoot?.querySelector<HTMLButtonElement>(
+        const element = el.query<HTMLButtonElement>(
           elementSelectors[testMonthNavigationElementSelector]
         );
 
@@ -197,7 +189,7 @@ describe(appDatePickerName, () => {
 
         await elementUpdated(el);
 
-        const selectedYearMonth = el.shadowRoot?.querySelector<HTMLParagraphElement>(
+        const selectedYearMonth = el.query<HTMLParagraphElement>(
           elementSelectors.selectedYearMonth
         );
 
@@ -224,7 +216,7 @@ describe(appDatePickerName, () => {
       ></app-date-picker>`
     );
 
-    const yearDropdown = el.shadowRoot?.querySelector<HTMLButtonElement>(
+    const yearDropdown = el.query<HTMLButtonElement>(
       elementSelectors.yearDropdown
     );
 
@@ -233,13 +225,13 @@ describe(appDatePickerName, () => {
 
     await elementUpdated(el);
 
-    const yearGrid = el.shadowRoot?.querySelector<AppYearGrid>(
+    const yearGrid = el.query<AppYearGrid>(
       elementSelectors.yearGrid
     );
 
     expect(yearGrid).exist;
 
-    const newSelectedYear = yearGrid?.shadowRoot?.querySelector<HTMLButtonElement>(
+    const newSelectedYear = yearGrid?.query<HTMLButtonElement>(
       `${elementSelectors.yearGridButton}[data-year="${newSelectedDate.getUTCFullYear()}"]`
     );
 
@@ -250,13 +242,13 @@ describe(appDatePickerName, () => {
 
     await elementUpdated(el);
 
-    const calendar = el.shadowRoot?.querySelector<AppMonthCalendar>(
+    const calendar = el.query<AppMonthCalendar>(
       elementSelectors.calendar
     );
 
     expect(calendar).exist;
 
-    const selectedYearMonth = el.shadowRoot?.querySelector<HTMLParagraphElement>(
+    const selectedYearMonth = el.query<HTMLParagraphElement>(
       elementSelectors.selectedYearMonth
     );
 
@@ -270,7 +262,7 @@ describe(appDatePickerName, () => {
     const newSelectedDate2Label = formatters.fullDateFormat(newSelectedDate2);
 
     const newSelectedCalendarDay =
-      calendar?.shadowRoot?.querySelector<HTMLTableCellElement>(
+      calendar?.query<HTMLTableCellElement>(
         `${elementSelectors.calendarDay}[aria-label="${newSelectedDate2Label}"]`
       );
 
@@ -293,7 +285,7 @@ describe(appDatePickerName, () => {
     await elementUpdated(el);
 
     const selectedCalendarDay =
-      calendar?.shadowRoot?.querySelector<HTMLTableCellElement>(
+      calendar?.query<HTMLTableCellElement>(
         elementSelectors.selectedCalendarDay
       );
 
@@ -328,11 +320,11 @@ describe(appDatePickerName, () => {
     );
     const newSelectedDateLabel = formatters.fullDateFormat(newSelectedDate);
 
-    const calendar = el.shadowRoot?.querySelector<AppMonthCalendar>(
+    const calendar = el.query<AppMonthCalendar>(
       elementSelectors.calendar
     );
     const newSelectedCalendarDay =
-      calendar?.shadowRoot?.querySelector<HTMLTableCellElement>(
+      calendar?.query<HTMLTableCellElement>(
         `${elementSelectors.calendarDay}[aria-label="${newSelectedDateLabel}"]`
       );
 
@@ -349,7 +341,7 @@ describe(appDatePickerName, () => {
     await elementUpdated(calendar as AppMonthCalendar);
     await elementUpdated(el);
 
-    const selectedDate = calendar?.shadowRoot?.querySelector<HTMLTableCellElement>(
+    const selectedDate = calendar?.query<HTMLTableCellElement>(
       elementSelectors.selectedCalendarDay
     );
 
@@ -376,7 +368,7 @@ describe(appDatePickerName, () => {
       ></app-date-picker>`
     );
 
-    const yearDropdown = el.shadowRoot?.querySelector<HTMLButtonElement>(
+    const yearDropdown = el.query<HTMLButtonElement>(
       elementSelectors.yearDropdown
     );
 
@@ -385,7 +377,7 @@ describe(appDatePickerName, () => {
 
     await elementUpdated(el);
 
-    const yearGrid = el.shadowRoot?.querySelector<AppYearGrid>(
+    const yearGrid = el.query<AppYearGrid>(
       elementSelectors.yearGrid
     );
 
@@ -396,10 +388,10 @@ describe(appDatePickerName, () => {
 
     await elementUpdated(el);
 
-    const calendar = el.shadowRoot?.querySelector<AppMonthCalendar>(
+    const calendar = el.query<AppMonthCalendar>(
       elementSelectors.calendar
     );
-    const yearGrid2 = el.shadowRoot?.querySelector<AppYearGrid>(
+    const yearGrid2 = el.query<AppYearGrid>(
       elementSelectors.yearGrid
     );
 
@@ -434,10 +426,10 @@ describe(appDatePickerName, () => {
           ></app-date-picker>`
         );
 
-        const calendar = el.shadowRoot?.querySelector<AppMonthCalendar>(
+        const calendar = el.query<AppMonthCalendar>(
           elementSelectors.calendar
         );
-        const selectedDate = calendar?.shadowRoot?.querySelector<HTMLTableCellElement>(
+        const selectedDate = calendar?.query<HTMLTableCellElement>(
           elementSelectors.selectedCalendarDay
         );
 
@@ -454,10 +446,10 @@ describe(appDatePickerName, () => {
         await elementUpdated(calendar as AppMonthCalendar);
         await elementUpdated(el);
 
-        const calendar2 = el.shadowRoot?.querySelector<AppMonthCalendar>(
+        const calendar2 = el.query<AppMonthCalendar>(
           elementSelectors.calendar
         );
-        const newSelectedDate = calendar2?.shadowRoot?.querySelector<HTMLTableCellElement>(
+        const newSelectedDate = calendar2?.query<HTMLTableCellElement>(
           elementSelectors.selectedCalendarDay
         );
 
@@ -504,11 +496,11 @@ describe(appDatePickerName, () => {
           ></app-date-picker>`
         );
 
-        const calendar = el.shadowRoot?.querySelector<AppMonthCalendar>(
+        const calendar = el.query<AppMonthCalendar>(
           elementSelectors.calendar
         );
 
-        const minDate = calendar?.shadowRoot?.querySelector<HTMLTableCellElement>(
+        const minDate = calendar?.query<HTMLTableCellElement>(
           `${elementSelectors.calendarDay}[aria-label="${
             formatters.fullDateFormat(expectedMinDate)
           }"]`
@@ -526,7 +518,7 @@ describe(appDatePickerName, () => {
           )
         );
         const oneDayBeforeMinDate =
-          calendar?.shadowRoot?.querySelector<HTMLTableCellElement>(
+          calendar?.query<HTMLTableCellElement>(
             `${elementSelectors.calendarDay}[aria-label="${
               formatters.fullDateFormat(expectedOneDayBeforeMinDate)
             }"]`
@@ -543,11 +535,11 @@ describe(appDatePickerName, () => {
         await elementUpdated(calendar as AppMonthCalendar);
         await elementUpdated(el);
 
-        const calendar2 = el.shadowRoot?.querySelector<AppMonthCalendar>(
+        const calendar2 = el.query<AppMonthCalendar>(
           elementSelectors.calendar
         );
 
-        const minDate2 = calendar2?.shadowRoot?.querySelector<HTMLTableCellElement>(
+        const minDate2 = calendar2?.query<HTMLTableCellElement>(
           `${elementSelectors.calendarDay}[aria-label="${
             formatters.fullDateFormat(expectedNewMinDate)
           }"]`
@@ -560,7 +552,7 @@ describe(appDatePickerName, () => {
         expect(minDate2?.fullDate).deep.equal(expectedNewMinDate);
 
         const previousMonthNavigationButton =
-          el.shadowRoot?.querySelector<HTMLButtonElement>(
+          el.query<HTMLButtonElement>(
             elementSelectors.previousMonthNavigationButton
           );
 
@@ -574,7 +566,7 @@ describe(appDatePickerName, () => {
             )
           );
           const oneDayBeforeMinDate2 =
-            calendar?.shadowRoot?.querySelector<HTMLTableCellElement>(
+            calendar?.query<HTMLTableCellElement>(
               `${elementSelectors.calendarDay}[aria-label="${
                 formatters.fullDateFormat(expectedOneDayBeforeMinDate2)
               }"]`
@@ -628,11 +620,11 @@ describe(appDatePickerName, () => {
           ></app-date-picker>`
         );
 
-        const calendar = el.shadowRoot?.querySelector<AppMonthCalendar>(
+        const calendar = el.query<AppMonthCalendar>(
           elementSelectors.calendar
         );
 
-        const selectedDate = calendar?.shadowRoot?.querySelector<HTMLTableCellElement>(
+        const selectedDate = calendar?.query<HTMLTableCellElement>(
           elementSelectors.selectedCalendarDay
         );
 
@@ -654,7 +646,7 @@ describe(appDatePickerName, () => {
           const isSameCalendarMonth = toResolvedDate(date).getUTCMonth() === expectedDate.getUTCMonth();
 
           if (isSameCalendarMonth) {
-            const maxDate = calendar?.shadowRoot?.querySelector<HTMLTableCellElement>(
+            const maxDate = calendar?.query<HTMLTableCellElement>(
               `${elementSelectors.calendarDay}[aria-label="${
                 formatters.fullDateFormat(expectedDate)
               }"]`
@@ -683,7 +675,7 @@ describe(appDatePickerName, () => {
               )
             );
             const oneDayAfterMaxDate =
-              calendar?.shadowRoot?.querySelector<HTMLTableCellElement>(
+              calendar?.query<HTMLTableCellElement>(
                 `${elementSelectors.calendarDay}[aria-label="${
                   formatters.fullDateFormat(expectedOneDayAfterMaxDate)
                 }"]`