feat!: lit 3 update, migrate to vitest with browser mode (#220)

* feat: migrate to vitest + browser mode
* chore: update dependencies and minor test cleanup
* chore: update vitest
* test: refactor tests in date-picker-dialog/*
* ci: fix linting that breaks ci
* ci: update Playwright command in ci
* feat: add @testing-library/jest-dom for DOM assertions
* test: fix test to always query newly attached node
* test: update tests to use custom jest matchers
* test: update tests of InputSurface and clampValue
* test: update tests of dateValidator
* test: update tests of focusElement
* test: refactor tests of isInCurrentMonth
* fix: fix .toMatchInlineSnapshot throws uncaught error
* test: refactor tests of nullishAttributeConverter
* test: refactor tests of splitString
* test: refactor tests of toClosestTarget & toDateString
* test: refactor tests of toDayDiffInclusive
* test: refactor tests of toFormatters
* test: refactor tests of toMultiCalendars
* test: refactor tests of toNextSelectableDate
* test: refactor tests of toNextSelectedDate
* test: refactor tests of toResolvedDate
* test: refactor tests of toYearList
* test: refactor tests of warnUndefinedElement
* test: refactor tests of AppIconButton
* test: refactor tests of monthCalendar
* test: refactor tests of AppYearGrid
* test: refactor tests of AppYearGridButton
* test: exclude some files that do not need to be coverage collected
* test: refactor tests of AppDatePickerInput
* test: fix imports in tests that violate ESLint rules
* test: fix imports that import node.js modules
* chore: update dependencies
* ci: remove unused ci-helpers.yml
* chore: remove wtr, update README
* chore: remove .js extension in test file

Signed-off-by: Rong Sen Ng (motss) <[email protected]>

Author: motss

.build.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "./.eslintrc.json"
+  ],
+  "rules": {
+    "import/named": "off"
+  }
+}

.eslintrc.json

@@ -1,5 +1,9 @@
 {
   "extends": [
     "./node_modules/@reallyland/tools/browser/lit/.eslintrc.json"
-  ]
+  ],
+  "rules": {
+    "import/named": "off",
+    "import/no-duplicates": "off"
+  }
 }

.github/workflows/ci-helpers.yml

@@ -16,11 +16,13 @@ defaults:
     shell: bash
 
 env:
-  COVERAGE: false
+  FORCE_COLOR: 3
   IS_UBUNTU: false
   NODE_VERSION: v0.0.0
   NPM_CACHE_DIR: ~/.npm
   NPM_VERSION: 0.0.0
+  PNPM_STORE_PATH: .pnpm-store
+  PNPM_VERSION: 0.0.0
 
 jobs:
   test:
@@ -33,17 +35,29 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        target: [18.x]
+        target: [20.x]
 
     steps:
       - name: Checkout
         uses: actions/checkout@v3
 
+      - name: Install pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: latest
+
+      - name: Set node version to ${{ matrix.target }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.target }}
+
       - name: List versions
         run: |
           echo "NODE_VERSION=$(node -v)" >> $GITHUB_ENV
           echo "NPM_CACHE_DIR=$(npm config get cache)" >> $GITHUB_ENV
           echo "NPM_VERSION=$(npm -v)" >> $GITHUB_ENV
+          echo "PNPM_STORE_PATH=$(pnpm store path)" >> $GITHUB_ENV
+          echo "PNPM_VERSION=$(pnpm -v)" >> $GITHUB_ENV
 
           echo "${{ github.workflow }}-${{ github.ref || github.run_id }}"
           pwd
@@ -52,41 +66,42 @@ jobs:
           # npm x -y -- envinfo@latest
 
       - name: Cache dependencies
-        id: npm-cache
+        id: pnpm-cache
         uses: actions/cache@v3
         with:
           # See this glob workaround at https://github.com/actions/toolkit/issues/713.
           path: |
             ${{ env.NPM_CACHE_DIR }}/*
             !${{ env.NPM_CACHE_DIR }}/_npx
-          key: ${{ matrix.os }}-node-${{ env.NODE_VERSION }}-npm-${{ env.NPM_VERSION }}-${{ hashFiles('**/package-lock.json') }}
+            ${{ env.PNPM_STORE_PATH }}
+          key: ${{ matrix.os }}-node-${{ env.NODE_VERSION }}-pnpm-${{ env.PNPM_VERSION }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ matrix.os }}-node-${{ env.NODE_VERSION }}-npm-${{ env.NPM_VERSION }}
+            ${{ matrix.os }}-node-${{ env.NODE_VERSION }}-pnpm-${{ env.PNPM_VERSION }}
 
       - name: Install dependencies
         run: |
-          npm ci
-          sh $(npm root)/@reallyland/tools/list-npx-cache.sh
+          npm pkg delete scripts.postinstall
+          pnpm install --frozen-lockfile
+          # sh $(npm root)/@reallyland/tools/list-npx-cache.sh
 
       - name: Setup Playwright
         run: |
-          npx playwright install-deps
+          pnpm exec playwright install
 
       - name: Lint
         run: |
-          npm run lint:build
+          pnpm lint:build
 
       - name: Test
         if: env.IS_UBUNTU == 'false'
         run: |
-          npm run wtr
+          pnpm test:pw --no-coverage
 
       - name: Test with coverage
         if: env.IS_UBUNTU != 'false'
         run: |
-          npm run wtr
-        env:
-          COVERAGE: true
+          pnpm test:pw --color
 
       - name: Upload coverage to codecov
         if: env.IS_UBUNTU != 'false' && success()

.github/workflows/ci.yml

@@ -36,7 +36,7 @@
     - [my-app.js](#my-appjs)
     - [index.html](#indexhtml)
 - [Browser compatibility](#browser-compatibility)
-- [Q&A](#qa)
+- [Q\&A](#qa)
 - [API references](#api-references)
 - [Demo](#demo)
 - [Older versions](#older-versions)
@@ -67,17 +67,17 @@ The following are the list of tools used that makes it shine:
     - [my-app.js](#my-appjs)
     - [index.html](#indexhtml)
 - [Browser compatibility](#browser-compatibility)
-- [Q&A](#qa)
+- [Q\&A](#qa)
 - [API references](#api-references)
 - [Demo](#demo)
 - [Older versions](#older-versions)
 - [License](#license)
 
 ## Pre-requisite
 
-- [ES2019] _(The element is compiled with features targeting ES2019, so it might not work properly without transpilation on older browsers.)_
-- [lit] >= 2.2.0
-- [OPTIONAL] [TypeScript] >= 4.5.5 _(TypeScript users only)_
+- [ES2021] _(The element is compiled with features targeting ES2021, so it might not work properly without transpilation on older browsers.)_
+- [lit] >= 3.1.0
+- [TypeScript] >= 5.3.3 _(Note: TypeScript users only)_
 
 ## Installation
 
@@ -242,7 +242,7 @@ Not tested on the following browsers but it should work with all the polyfills n
 [AppDatePickerInput]: /docs/app-date-picker-input.md
 [Array.prototype.find]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
 [awesome-lit-html]: https://github.com/web-padawan/awesome-lit-html#individual-components
-[ES2019]: https://kangax.github.io/compat-table/es2016plus/#test-Object.fromEntries
+[ES2021]: https://compat-table.github.io/compat-table/es2016plus
 [esm-sh-url]: https://esm.sh/app-datepicker@next?target=es2019
 [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=next&utm_source=github.com&utm_medium=referral&utm_content=motss/app-datepicker