feat: tests (#4)

- [x] install + configure Vitest
- [x] install + configure Playwright
- [x] configure GH actions
- [x] write basic component tests fror SlipmatButton
- [x] write basic e2e tests for SlipmatButton
- [x] configure automatic NPM publishing
- [x] update CHANGELOG
- [x] bump version

Fixes slipmatio/slipmatio#82

.github/renovate.json

@@ -2,7 +2,12 @@
   "extends": [
     "config:base",
     "group:all",
-    "schedule:weekly"
+    "schedule:weekly",
+    "automergeAll",
+    "automergeRequireAllStatusChecks:success",
+    "automergePr",
+    "widenPeerDependencies",
+    "schedule:automergeWeekly"
   ],
   "enabledManagers": [
     "npm"
@@ -12,6 +17,7 @@
       "matchManagers": [
         "npm"
       ],
+      "automerge": true,
       "stabilityDays": 2
     },
     {

.github/workflows/e2e.yml

@@ -0,0 +1,62 @@
+name: E2E Test
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '.github/workflows/e2e.yml'
+      - 'pnpm-lock.yaml'
+      - 'src/**/*.ts'
+      - 'src/**/*.vue'
+      - 'tests/e2e/**/*.spec.ts'
+  pull_request:
+    paths:
+      - '.github/workflows/e2e.yml'
+      - 'pnpm-lock.yaml'
+      - 'src/**/*.ts'
+      - 'src/**/*.vue'
+      - 'tests/e2e/**/*.spec.ts'
+  workflow_dispatch:
+
+concurrency:
+  group: e2e-${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  e2e-tests:
+    runs-on: ubuntu-latest
+
+    env:
+      DEBUG: 0
+      PLAYWRIGHT_BROWSERS_PATH: 0
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/cache@v3
+        with:
+          path: /home/runner/.local/share/pnpm/store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: true
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run e2e tests
+        run: pnpm test:ci-e2e
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: test-results/
+          retention-days: 30

.github/workflows/release.yml

@@ -0,0 +1,25 @@
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - run: |
+          pnpm i --frozen-lockfile
+          pnpm build
+
+      - uses: JS-DevTools/npm-publish@v2
+        with:
+          token: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,60 @@
+name: Build + Test
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '.github/workflows/test.yml'
+      - 'pnpm-lock.yaml'
+      - 'src/**/*.ts'
+      - 'src/**/*.vue'
+  pull_request:
+    paths:
+      - '.github/workflows/test.yml'
+      - 'pnpm-lock.yaml'
+      - 'src/**/*.ts'
+      - 'src/**/*.vue'
+  workflow_dispatch:
+
+concurrency:
+  group: test-${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    env:
+      DEBUG: 0
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
+
+      # - name: Install playwright browsers
+      #   run: pnpm i
+      #   working-directory: front
+
+      - name: Build front
+        run: pnpm build
+
+      - name: Test front
+        run: pnpm coverage
+
+      - name: Component Coverage
+        uses: davelosert/[email protected]
+        if: ${{ always() }}
+        with:
+          working-directory: ./
+          vite-config-path: ./vite.config.ts

.gitignore

@@ -28,4 +28,6 @@ pnpm-debug.log*
 *.sln
 *.sw?
 
+test-results
+
 LOCAL_NOTES.md

CHANGES.md

@@ -1,5 +1,13 @@
 # @slipmatio/ui
 
+## 0.1.1 (2023-06-26)
+
+- Chore: added tests, GitHub actions.
+
+## 0.1.0 (2023-06-25)
+
+- Refactor: new repo configuration based on current Vite / Vue best practices.
+
 ## 0.0.8 (2021-02-02)
 
 - Bumped deps.

README.md

@@ -33,7 +33,7 @@ pnpm dev
 pnpm build
 ```
 
-#### TBA: Run end-to-end tests
+#### Run end-to-end tests
 
 ```
 pnpm test:e2e

index.html

@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>Slipmat UI DEV</title>
   </head>
-  <body>
+  <body class="bg-slate-950">
     <div id="app"></div>
     <script type="module" src="/src/dev.ts"></script>
   </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slipmatio/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "Common UI components for Slipmat.io projects",
   "author": {
@@ -43,19 +43,27 @@
   "scripts": {
     "rebuild": "bash scripts/rebuild.sh",
     "dev": "DEBUG=0 vite dev",
-    "serve": "DEBUG=0 vite preview",
-    "build": "DEBUG=0 vue-tsc && vite build"
+    "build": "DEBUG=0 vue-tsc && vite build",
+    "test": "DEBUG=0 vitest",
+    "test:e2e": "DEBUG=0 playwright test --ui",
+    "test:ci-e2e": "DEBUG=0 playwright test",
+    "coverage": "DEBUG=0 vitest run --coverage"
   },
   "devDependencies": {
+    "@playwright/test": "^1.35.1",
     "@slipmatio/tailwind-config": "3.0.0",
     "@types/node": "20.3.1",
     "@vitejs/plugin-vue": "4.2.3",
+    "@vitest/coverage-v8": "^0.32.2",
+    "@vue/test-utils": "2.4.0",
     "autoprefixer": "10.4.14",
+    "happy-dom": "9.20.3",
     "postcss": "8.4.24",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.3",
     "vite": "4.3.9",
     "vite-plugin-dts": "2.3.0",
+    "vitest": "0.32.2",
     "vue": "3.3.4",
     "vue-tsc": "1.8.1"
   },
@@ -64,6 +72,6 @@
     "vue": "3"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   }
 }

playwright.config.ts

@@ -0,0 +1,57 @@
+import type { PlaywrightTestConfig } from '@playwright/test'
+import { devices } from '@playwright/test'
+
+const config: PlaywrightTestConfig = {
+  testDir: './tests/e2e',
+  timeout: 15 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 3000,
+  },
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 1 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 2 : undefined,
+  use: {
+    actionTimeout: 0,
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+    // headless: !!process.env.CI,
+  },
+  webServer: {
+    command: 'vite dev',
+    port: 5173,
+    reuseExistingServer: !process.env.CI,
+  },
+  projects: [
+    {
+      name: 'iPhone 6',
+      use: {
+        browserName: 'webkit',
+        ...devices['iPhone 6'],
+      },
+    },
+    {
+      name: 'Macbook 11',
+      use: {
+        browserName: 'firefox',
+        ...devices['Macbook 11'],
+        video: 'on-first-retry',
+      },
+    },
+    {
+      name: 'Desktop',
+      use: {
+        browserName: 'chromium',
+        ...devices['Macbook Pro'],
+      },
+    },
+  ],
+}
+
+export default config