re-structure project environment (#380)

* chore: use pnpm

* chore: pass params to test:unit

* fix: re-structure e2e and example

* add todo memo

* add more task

* fix: use pnpm on github actions

Author: kazupon

.github/workflows/build.yml

@@ -26,12 +26,18 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup Node.js ${{ matrix.node }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
-      - name: Install
-        run: yarn --immutable
-      - name: Build
-        run: yarn build
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Building
+        run: pnpm build

.github/workflows/lint.yml

@@ -26,12 +26,18 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup Node.js ${{ matrix.node }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
-      - name: Install
-        run: yarn --immutable
-      - name: Lint
-        run: yarn lint
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Linting
+        run: pnpm lint

.github/workflows/test.yml

@@ -26,12 +26,35 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup Node.js ${{ matrix.node }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
-      - name: Install
-        run: yarn --immutable
-      - name: Test
-        run: yarn test
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      # https://github.com/vitejs/vite/blob/main/.github/workflows/ci.yml#L62
+      # Install playwright's binary under custom directory to cache
+      - name: Set Playwright path
+        run: echo "PLAYWRIGHT_BROWSERS_PATH=$HOME/.cache/playwright-bin" >> $GITHUB_ENV
+
+      - name: Cache Playwright's binary
+        uses: actions/cache@v4
+        with:
+          # Playwright removes unused browsers automatically
+          # So does not need to add playwright version to key
+          key: ${{ runner.os }}-playwright-bin-v1
+          path: ${{ env.PLAYWRIGHT_BROWSERS_PATH }}
+
+      - name: Install Playwright
+        # does not need to explicitly set chromium after https://github.com/microsoft/playwright/issues/14862 is solved
+        run: pnpm playwright install chromium
+
+      - name: Testing
+        run: pnpm test

.yarn/releases/yarn-3.1.1.cjs

@@ -0,0 +1,4 @@
+# TODO
+- [ ] upgrade vitest 1.0 (need to fix `checkInstallPackage` issue in test env)
+- [ ] drop fully jest pupeeter for rollup-plugin-vue-i18n, vue-i18n-loader, and vite-plugin-vue-i18n
+- [ ] ESLint: migrate flat config style

TODO.md

@@ -0,0 +1,9 @@
+import type { Page } from 'playwright'
+
+export async function getText(
+  page: Page,
+  selector: string,
+  options?: Parameters<Page['locator']>[1]
+) {
+  return (await page.locator(selector, options).allTextContents())[0]
+}

e2e/helper.ts

@@ -0,0 +1,24 @@
+import { getRandomPort, waitForPort } from 'get-port-please'
+import { ChildProcess, spawn } from 'node:child_process'
+
+export type ServerContext = {
+  serverProcess: ChildProcess
+  url: (val: string) => string
+}
+export async function startServer(): Promise<ServerContext> {
+  const host = '127.0.0.1'
+  const port = await getRandomPort(host)
+
+  const serverProcess = spawn(
+    'pnpm',
+    ['play:vite', '--port', String(port), '--host', host],
+    { stdio: 'inherit', env: { ...process.env } }
+  )
+
+  await waitForPort(port, { retries: 32, host })
+
+  return {
+    serverProcess,
+    url: (val: string) => `http://${host}:${port}${val}`
+  }
+}

e2e/setup-server.ts

@@ -0,0 +1,45 @@
+import { startServer } from './setup-server'
+import { getText } from './helper'
+
+import type { ServerContext } from './setup-server'
+import type { Browser, Page } from 'playwright'
+
+// TODO: extract to shim.d.ts
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace global {
+  let browser: Browser
+  let page: Page
+}
+
+let ctx: ServerContext
+describe('vite', () => {
+  beforeAll(async () => {
+    ctx = await startServer()
+    await global.page.goto(ctx.url('/'))
+  })
+
+  afterAll(async () => {
+    ctx.serverProcess.kill()
+  })
+
+  test('initial rendering', async () => {
+    expect(await getText(global.page, '#lang label')).toMatch('言語')
+    expect(await getText(global.page, '#fruits label')).toMatch(
+      'バナナが欲しい？'
+    )
+    expect(await getText(global.page, '#msg')).toMatch('こんにちは、世界！')
+    expect(await getText(global.page, '#custom-directive')).toMatch('やあ！')
+  })
+
+  test('change locale', async () => {
+    await global.page.selectOption('#lang select', 'en')
+    expect(await getText(global.page, '#lang label')).toMatch('Language')
+    expect(await getText(global.page, '#msg')).toMatch('hello, world!')
+    expect(await getText(global.page, '#custom-directive')).toMatch('Hi!')
+  })
+
+  test('change banana select', async () => {
+    await global.page.selectOption('#fruits select', '3')
+    expect(await getText(global.page, '#banana')).toMatch('バナナ 3 個')
+  })
+})

e2e/vite.spec.ts

@@ -1,13 +1,13 @@
 <template>
-  <form>
+  <form id="lang">
     <label>{{ t('language') }}</label>
     <select v-model="locale">
       <option value="en">en</option>
       <option value="ja">ja</option>
     </select>
   </form>
-  <p>{{ t('hello') }}</p>
-  <p v-t="'hi'"></p>
+  <p id="msg">{{ t('hello') }}</p>
+  <p id="custom-directive" v-t="'hi'"></p>
   <Banana />
 </template>