test: add tests for AppYearGrid

package.json

@@ -59,7 +59,7 @@
     "lint": "eslint src --ext .js,.ts",
     "lint:build": "npm run lint -- --config .build.eslintrc.json",
     "prepublishOnly": "npm run lint && npm run build:prod",
-    "serve": "npm x --no @web/dev-server@latest -- wds --node-resolve -dw -p 4343 -a index.html",
+    "serve": "npm x --no @web/dev-server@latest -- wds --node-resolve -dw -p 3000 -a index.html",
     "ts": "tsc",
     "test:helpers": "TEST_HELPERS=1 npm run wtr -- --config wtr.config.mjs",
     "test:elements": "npm run wtr -- --config wtr.config.mjs",

src/tests/helpers/adjust-out-of-range-value.test.ts

@@ -44,4 +44,5 @@ describe(adjustOutOfRangeValue.name, () => {
       expect(result).deep.equal(expected);
     });
   });
+
 });

src/tests/helpers/dispatch-custom-event.test.ts

@@ -45,4 +45,5 @@ describe(dateValidator.name, () => {
       }
     );
   });
+
 });

src/tests/helpers/focus-element.test.ts

@@ -22,4 +22,5 @@ describe(focusElement.name, () => {
 
     expect(document.activeElement).dom.equal(focusedElement);
   });
+
 });

src/tests/helpers/is-in-current-month.test.ts

@@ -31,4 +31,5 @@ describe(isInCurrentMonth.name, () => {
       }
     );
   });
+
 });

src/tests/helpers/nullish-attribute-converter.test.ts

@@ -25,4 +25,5 @@ describe(nullishAttributeConverter.name, () => {
       }
     );
   });
+
 });

src/tests/helpers/to-closest-target.test.ts

@@ -50,4 +50,5 @@ describe(toClosestTarget.name, () => {
       }
     );
   });
+
 });

src/tests/helpers/to-date-string.test.ts

@@ -10,4 +10,5 @@ describe(toDateString.name, () => {
 
     expect(result).equal(testDateStr);
   });
+
 });

src/tests/helpers/to-day-diff-inclusive.test.ts

@@ -30,4 +30,5 @@ describe(toDayDiffInclusive.name, () => {
       }
     );
   });
+
 });

src/tests/helpers/to-formatters.test.ts

@@ -26,4 +26,5 @@ describe(toFormatters.name, () => {
         expect(result).haveOwnProperty(n)
     );
   });
+
 });

src/tests/helpers/to-multi-calendars.test.ts

@@ -152,4 +152,5 @@ describe(toMultiCalendars.name, () => {
       }
     );
   });
+
 });

src/tests/helpers/to-next-selectable-date.test.ts

@@ -197,4 +197,5 @@ describe(toNextSelectableDate.name, () => {
       }
     );
   });
+
 });

src/tests/helpers/to-resolved-date.test.ts

@@ -29,4 +29,5 @@ describe(toResolvedDate.name, () => {
       }
     );
   });
+
 });

src/tests/helpers/to-year-list.test.ts

@@ -25,4 +25,5 @@ describe(toYearList.name, () => {
       }
     );
   });
+
 });

src/tests/year-grid-button/year-grid-button.test.ts

@@ -2,7 +2,7 @@ import '../../year-grid-button/app-year-grid-button';
 
 import { expect, fixture, html } from '@open-wc/testing';
 
-import { APP_YEAR_GRID_BUTTON_NAME } from '../../year-grid-button/constants.js';
+import { APP_YEAR_GRID_BUTTON_NAME } from '../../year-grid-button/constants';
 
 describe(APP_YEAR_GRID_BUTTON_NAME, () => {
   it('renders', async () => {
@@ -12,4 +12,5 @@ describe(APP_YEAR_GRID_BUTTON_NAME, () => {
 
     expect(el.shadowRoot?.querySelector(`button[aria-label="test"]`)).exist;
   });
+
 });

src/tests/year-grid/to-next-selected-year.test.ts

@@ -96,4 +96,5 @@ describe(toNextSelectedYear.name, () => {
       }
     );
   });
+
 });

src/tests/year-grid/year-grid.test.ts

@@ -0,0 +1,186 @@
+import '../../year-grid/app-year-grid';
+
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+
+import type { confirmKeySet } from '../../constants';
+import { toFormatters } from '../../helpers/to-formatters';
+import type { InferredFromSet, YearUpdatedEvent } from '../../typings';
+import type { AppYearGrid } from '../../year-grid/app-year-grid';
+import { APP_YEAR_GRID_NAME } from '../../year-grid/constants';
+import type { YearGridData } from '../../year-grid/typings';
+import { messageFormatter } from '../test-utils/message-formatter';
+
+describe(APP_YEAR_GRID_NAME, () => {
+  const data: YearGridData = {
+    date: new Date('2020-02-02'),
+    formatters: toFormatters('en-US'),
+    max: new Date('2021-03-03'),
+    min: new Date('2019-01-01'),
+  };
+  const elementSelectors = {
+    yearGrid: '.year-grid',
+    yearGridButton: '.year-grid-button',
+  };
+
+  it('renders', async () => {
+    const el = await fixture<AppYearGrid>(html`<app-year-grid .data=${data}></app-year-grid>`);
+
+    const yearGridButtonAttrsList = Array.from(
+      el.shadowRoot?.querySelectorAll(elementSelectors.yearGridButton) ?? []
+    ).map<[string, string, string, string]>(n => [
+      n.getAttribute('data-year') ?? '',
+      n.getAttribute('label') ?? '',
+      n.getAttribute('tabindex') ?? '',
+      n.getAttribute('aria-selected') ?? '',
+    ]);
+
+    expect(el.shadowRoot?.querySelector(elementSelectors.yearGrid)).exist;
+    expect(yearGridButtonAttrsList).deep.equal([
+      ['2019', '2019', '-1', 'false'],
+      ['2020', '2020', '0', 'true'],
+      ['2021', '2021', '-1', 'false'],
+    ]);
+  });
+
+  type A = null | undefined;
+  const cases: A[] = [null, undefined];
+  cases.forEach((a) => {
+    it(
+      messageFormatter('renders nothing (formatters=%s)', a),
+      async () => {
+        const el = await fixture<AppYearGrid>(html`<app-year-grid .data=${{
+          ...data,
+          formatters: a as never,
+        }}></app-year-grid>`);
+
+        expect(el.shadowRoot?.querySelector(elementSelectors.yearGrid)).not.exist;
+      }
+    );
+  });
+
+  it('focuses new year with keyboard', async () => {
+    const el = await fixture<AppYearGrid>(html`<app-year-grid .data=${data}></app-year-grid>`);
+
+    const newSelectedYear = el.shadowRoot?.querySelector<HTMLButtonElement>(
+      `${elementSelectors.yearGridButton}[data-year="${data.date.getUTCFullYear()}"]`
+    );
+
+    newSelectedYear?.focus();
+
+    await sendKeys({
+      down: 'ArrowDown',
+    });
+
+    await el.updateComplete;
+
+    const yearGridButtonAttrsList = Array.from(
+      el.shadowRoot?.querySelectorAll(elementSelectors.yearGridButton) ?? []
+    ).map<[string, string, string, string]>(n => [
+      n.getAttribute('data-year') ?? '',
+      n.getAttribute('label') ?? '',
+      n.getAttribute('tabindex') ?? '',
+      n.getAttribute('aria-selected') ?? '',
+    ]);
+
+    expect(yearGridButtonAttrsList).deep.equal([
+      ['2019', '2019', '-1', 'false'],
+      ['2020', '2020', '-1', 'true'],
+      ['2021', '2021', '0', 'false'],
+    ]);
+  });
+
+  type A2 = ['click' | 'keyup', InferredFromSet<typeof confirmKeySet>, number];
+  const cases2: A2[] = [
+    ['click', ' ', data.max.getUTCFullYear()],
+    ['keyup', ' ', data.date.getUTCFullYear()],
+    ['keyup', 'Enter', data.date.getUTCFullYear()],
+  ];
+  cases2.forEach(a => {
+    const [testEventType, testKey, testNewSelectedYear] = a;
+
+    it(
+      messageFormatter('selects new year (event.type=%s, key=%s)', a),
+      async () => {
+        const el = await fixture<AppYearGrid>(html`<app-year-grid .data=${data}></app-year-grid>`);
+
+        const yearUpdatedEventTask = new Promise((resolve) => {
+          function fn(ev: Event) {
+            resolve((ev as CustomEvent<YearUpdatedEvent>).detail);
+            el.removeEventListener('year-updated', fn);
+          }
+
+          el.addEventListener('year-updated', fn);
+        });
+
+        const newSelectedYear = el.shadowRoot?.querySelector<HTMLButtonElement>(
+          `${elementSelectors.yearGridButton}[data-year="${testNewSelectedYear}"]`
+        );
+
+        newSelectedYear?.focus();
+
+        if (testEventType === 'click') {
+          newSelectedYear?.click();
+        } else {
+          await sendKeys({
+            down: 'ArrowDown',
+          });
+
+          // keypress triggers click event
+          await sendKeys({
+            press: testKey,
+          });
+        }
+
+        await el.updateComplete;
+        const yearUpdatedEvent = await yearUpdatedEventTask;
+
+        const yearGridButtonAttrsList = Array.from(
+          el.shadowRoot?.querySelectorAll(elementSelectors.yearGridButton) ?? []
+        ).map<[string, string, string, string]>(n => [
+          n.getAttribute('data-year') ?? '',
+          n.getAttribute('label') ?? '',
+          n.getAttribute('tabindex') ?? '',
+          n.getAttribute('aria-selected') ?? '',
+        ]);
+        const expectedYearUpdatedEvent: YearUpdatedEvent = { year: data.max.getUTCFullYear() };
+
+        expect(yearGridButtonAttrsList).deep.equal([
+          ['2019', '2019', '-1', 'false'],
+          ['2020', '2020', '-1', 'true'],
+          ['2021', '2021', '0', 'false'],
+        ]);
+        expect(yearUpdatedEvent).deep.equal(expectedYearUpdatedEvent);
+      }
+    );
+  });
+
+  it('does not focus/ select new year when click on irrelevant element', async () => {
+    const el = await fixture<AppYearGrid>(html`<app-year-grid .data=${data}></app-year-grid>`);
+
+    const newSelectedYear = el.shadowRoot?.querySelector<HTMLButtonElement>(
+      elementSelectors.yearGrid
+    );
+
+    newSelectedYear?.focus();
+    newSelectedYear?.click();
+
+    await el.updateComplete;
+
+    const yearGridButtonAttrsList = Array.from(
+      el.shadowRoot?.querySelectorAll(elementSelectors.yearGridButton) ?? []
+    ).map<[string, string, string, string]>(n => [
+      n.getAttribute('data-year') ?? '',
+      n.getAttribute('label') ?? '',
+      n.getAttribute('tabindex') ?? '',
+      n.getAttribute('aria-selected') ?? '',
+    ]);
+
+    expect(yearGridButtonAttrsList).deep.equal([
+      ['2019', '2019', '-1', 'false'],
+      ['2020', '2020', '0', 'true'],
+      ['2021', '2021', '-1', 'false'],
+    ]);
+  });
+
+});