test: add tests for title in YearGrid, update ESLint to enforce semi

.eslintrc.json

@@ -60,6 +60,8 @@
         "disallowTypeAnnotations": false
       }
     ],
+    "semi": "off",
+    "@typescript-eslint/semi": ["error", "always"],
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error"
   }

.github/workflows/ci-helpers.yml

@@ -101,7 +101,8 @@ jobs:
         if: env.CI_SKIP == 'false' && env.IS_UBUNTU != 'false'
         run: |
           export COVERAGE=true
-          npm run test:helpers
+          export TEST_HELPERS=true
+          npm run wtr
 
       - name: Upload coverage to codecov
         if: env.CI_SKIP == 'false' && env.IS_UBUNTU != 'false' && success()

.github/workflows/ci.yml

@@ -107,7 +107,7 @@ jobs:
         if: env.CI_SKIP == 'false' && env.IS_UBUNTU != 'false'
         run: |
           export COVERAGE=true
-          npm run test:elements
+          npm run wtr
 
       - name: Upload coverage to codecov
         if: env.CI_SKIP == 'false' && env.IS_UBUNTU != 'false' && success()

package.json

@@ -91,17 +91,16 @@
   "scripts": {
     "build": "npm run clean && tsc",
     "clean": "rm -rf .*cache *.log .swc/ coverage/ dist/ logs/",
-    "dev": "npm x -y @web/dev-server@latest -- wds --node-resolve -dw -p 3000 -a index.html",
+    "dev": "npm run serve & npm run watch",
     "postinstall": "bash postinstall.bash",
     "lint": "eslint src --ext .js,.ts",
     "lint-commit": "npm x -y -- commitlint@latest --edit",
     "lint:build": "npm run lint -- --config .build.eslintrc.json",
     "pre-commit": "package-check && nano-staged && tsc --noEmit",
     "prepublishOnly": "npm run lint:build && npm run build",
-    "test": "npm run test:helpers && npm run test:elements",
-    "test:coverage": "export COVERAGE=true && npm run test:helpers && npm run test:elements",
-    "test:elements": "npm run wtr",
-    "test:helpers": "export TEST_HELPERS=true && npm run wtr",
+    "serve": "npm x -y @web/dev-server@latest -- wds --node-resolve -dw -p 3000 -a index.html",
+    "test": "wtr --config wtr.config.mjs --update-snapshots",
+    "test:helpers": "TEST_HELPERS=true npm run test",
     "watch": "npm run clean && tsc --watch",
     "wtr": "node --max-old-space-size=8192 --trace-deprecation node_modules/@web/test-runner/dist/bin.js --config wtr.config.mjs"
   },

src/__tests__/date-picker-dialog/app-date-picker-dialog.test.ts

@@ -229,7 +229,7 @@ describe(appDatePickerDialogName, () => {
 
         const newValueDate = new Date(testNewValue);
         const newSelectedDate =
-          monthCalendar?.query(elementSelectors.calendarDay(formatter.format(newValueDate)))
+          monthCalendar?.query(elementSelectors.calendarDay(formatter.format(newValueDate)));
 
         const dateUpdatedTask = eventOnce<
           AppDatePicker,
@@ -292,7 +292,7 @@ describe(appDatePickerDialogName, () => {
         expect(el.valueAsDate).deep.equal(new Date(expectedDatePickerDialogValue));
         expect(el.valueAsNumber).equal(+new Date(expectedDatePickerDialogValue));
       }
-    )
+    );
   });
 
 });

src/__tests__/helpers/clamp-value.test.ts

@@ -21,6 +21,6 @@ describe(clampValue.name, () => {
 
         expect(result).equal(expected);
       }
-    )
+    );
   });
 });

src/__tests__/year-grid/app-year-grid.test.ts

@@ -6,6 +6,7 @@ import { sendKeys } from '@web/test-runner-commands';
 import type { confirmKeySet} from '../../constants';
 import { labelSelectedYear, labelTodayYear } from '../../constants';
 import { toFormatters } from '../../helpers/to-formatters';
+import { toResolvedDate } from '../../helpers/to-resolved-date';
 import type { CustomEventDetail, InferredFromSet } from '../../typings';
 import type { AppYearGrid } from '../../year-grid/app-year-grid';
 import { appYearGridName } from '../../year-grid/constants';
@@ -22,6 +23,8 @@ describe(appYearGridName, () => {
     todayYearLabel: labelTodayYear,
   };
   const elementSelectors = {
+    selectedYear: '.year-grid-button[aria-selected="true"]',
+    todayYear: '.year-grid-button.year--today',
     yearGrid: '.year-grid',
     yearGridButton: '.year-grid-button',
   };
@@ -180,4 +183,60 @@ describe(appYearGridName, () => {
     ]);
   });
 
+  type TestTitle = [
+    testSelectedYearLabel: string | undefined,
+    testTodayYearLabel: string | undefined,
+    expectedSelectedYearLabel: string | undefined,
+    expectedTodayYearLabel: string | undefined
+  ];
+  const testTitleCases: TestTitle[] = [
+    [undefined, undefined, undefined, undefined],
+    ['', '', '', ''],
+    ['選擇年份', '選擇月份', '選擇年份', '選擇月份'],
+  ];
+  testTitleCases.forEach(a => {
+    const [
+      testSelectedYearLabel,
+      testTodayYearLabel,
+      expectedSelectedYearLabel,
+      expectedTodayYearLabel,
+    ] = a;
+
+    it.only(
+      messageFormatter('renders title correctly when hovered (selectedYearLabel=%s, todayYearLabel=%s)', a),
+      async () => {
+        const dataMax = new Date(data.max);
+        const dataMin = new Date(data.min);
+        const todayFullYear = toResolvedDate().getUTCFullYear();
+
+        const min = new Date(dataMin.setUTCFullYear(todayFullYear - 2));
+        const testData: YearGridData = {
+          ...data,
+          max: new Date(dataMax.setUTCFullYear(todayFullYear + 1)),
+          min,
+          date: min,
+          selectedYearLabel: testSelectedYearLabel as string,
+          todayYearLabel: testTodayYearLabel as string,
+        };
+
+        const el = await fixture<AppYearGrid>(html`<app-year-grid .data=${testData}></app-year-grid>`);
+
+        const selectedYear = el.query<HTMLButtonElement>(elementSelectors.selectedYear);
+        const todayYear = el.query<HTMLButtonElement>(elementSelectors.todayYear);
+
+        expect(selectedYear).exist;
+        expect(todayYear).exist;
+
+        if (expectedSelectedYearLabel == null && expectedTodayYearLabel == null) {
+          expect(selectedYear).not.attr('title');
+          expect(todayYear).not.attr('title');
+        } else {
+          expect(selectedYear).attr('title', expectedSelectedYearLabel);
+
+          expect(todayYear).attr('title', expectedTodayYearLabel);
+        }
+      }
+    );
+  });
+
 });

src/date-picker-input/date-picker-input.ts

@@ -81,7 +81,7 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
 
           if (!isTabInsideInputSurface) this.closePicker();
         }
-      }
+      };
       const onClick = () => this._open = true;
       const onKeyup = (ev: KeyboardEvent) => {
         if ([keySpace, keyEnter].some(n => n === ev.key)) {

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

@@ -56,7 +56,7 @@ export function toNextSelectableDate({
       iaAfterMaxTime = newSelectableDateTime > maxTime;
 
       if (iaAfterMaxTime) {
-        newSelectableDate = new Date(maxTime)
+        newSelectableDate = new Date(maxTime);
         d = newSelectableDate.getUTCDate();
       }
     }

src/swipe-tracker/swipe-tracker.ts

@@ -66,7 +66,7 @@ export class SwipeTracker {
     }
 
     this.#element = element;
-    this.#move = onMove
+    this.#move = onMove;
     this.#up = onUp;
     this.disconnect = (): void => {
       if (element?.removeEventListener) {

wtr.config.mjs

@@ -10,11 +10,13 @@ const {
   CI = 'false',
   COVERAGE = 'false',
   TEST_HELPERS = 'false',
+  WATCH = 'false',
 } = process.env;
 
 const isCI = CI === 'true';
 const isCoverage = COVERAGE === 'true';
 const isTestHelpersOnly = TEST_HELPERS === 'true';
+const isWatch = WATCH === 'true';
 
 /** @type {import('@web/test-runner').TestRunnerConfig} */
 const config = {
@@ -75,6 +77,7 @@ const config = {
       }),
     }
   },
+  watch: isWatch,
 };
 
 export default config;