From 54f42fdabe36d8b1233b1737e601b23c70bfd28f Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 18 Oct 2024 22:20:57 +0100
Subject: [PATCH] chore: add basic test configuration

---
 .github/workflows/autofix.yml | 36 ++++++++++++++++++
 .github/workflows/ci.yml      | 69 +++++++++++++++++++++++++++++++++++
 .gitignore                    |  4 ++
 app/app.vue                   |  8 ++++
 nuxt.config.ts                |  9 +++++
 package.json                  | 13 ++++++-
 renovate.json                 |  7 ++++
 test/browser/index.test.ts    | 11 ++++++
 test/nuxt/index.test.ts       | 14 +++++++
 test/unit/index.test.ts       |  7 ++++
 vitest.config.ts              | 12 ++++++
 vitest.nuxt.config.ts         |  8 ++++
 12 files changed, 197 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/autofix.yml
 create mode 100644 .github/workflows/ci.yml
 create mode 100644 renovate.json
 create mode 100644 test/browser/index.test.ts
 create mode 100644 test/nuxt/index.test.ts
 create mode 100644 test/unit/index.test.ts
 create mode 100644 vitest.config.ts
 create mode 100644 vitest.nuxt.config.ts

diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
new file mode 100644
index 0000000..f3119dc
--- /dev/null
+++ b/.github/workflows/autofix.yml
@@ -0,0 +1,36 @@
+# needed to securely identify the workflow
+name: autofix.ci
+
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  code:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 🔠 Fix lint errors
+        run: pnpm lint --fix
+
+      - name: 🧪 Update unit test snapshots
+        run: pnpm test:unit -u
+
+      - name: 🏃 Update component test snapshots
+        run: pnpm test:runtime -u
+
+      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..12f9cfe
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,69 @@
+name: ci
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 🔠 Lint project
+        run: pnpm lint
+
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 💪 Type check
+        run: pnpm test:types
+
+      - name: 🧪 Unit test
+        run: pnpm test:unit
+
+      - name: 🏃 Component tests
+        run: pnpm test:runtime
+
+  e2e:
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.48.0-focal
+
+    steps:
+      - uses: actions/checkout@v4
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 🧪 Test project (e2e)
+        run: pnpm test:e2e
diff --git a/.gitignore b/.gitignore
index 4a7f73a..2defe53 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ dist
 
 # Node dependencies
 node_modules
+.pnpm-store
 
 # Logs
 logs
@@ -22,3 +23,6 @@ logs
 .env
 .env.*
 !.env.example
+
+# Testing
+test-results
diff --git a/app/app.vue b/app/app.vue
index 2b1be09..6ceb990 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+defineOgImage()
+
+useSeoMeta({
+  title: 'Nuxt Starter',
+})
+</script>
+
 <template>
   <div>
     <NuxtPage />
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a0d0772..3eb1109 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,6 +11,11 @@ export default defineNuxtConfig({
     '@nuxt/test-utils/module',
   ],
   devtools: { enabled: true },
+  app: {
+    head: {
+      htmlAttrs: { lang: 'en' },
+    },
+  },
   future: {
     compatibilityVersion: 4,
   },
@@ -23,4 +28,8 @@ export default defineNuxtConfig({
       stylistic: true,
     },
   },
+  // Ensure that any HTML validation errors are treated as build errors
+  htmlValidator: {
+    failOnError: true,
+  },
 })
diff --git a/package.json b/package.json
index 3085903..16208b7 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,24 @@
 {
   "name": "nuxt-app",
+  "license": "MIT",
   "private": true,
   "type": "module",
+  "author": {
+    "name": "Daniel Roe",
+    "email": "daniel@roe.dev",
+    "url": "https://roe.dev"
+  },
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare && simple-git-hooks"
+    "postinstall": "nuxt prepare && simple-git-hooks",
+    "test:types": "vue-tsc --noEmit",
+    "test:unit": "vitest",
+    "test:runtime": "vitest -c vitest.nuxt.config.ts",
+    "test:browser": "playwright test test/browser",
+    "test:browser:update": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.48.0-focal bash -c 'corepack enable && pnpm i && pnpm playwright test test/browser --update-snapshots'"
   },
   "dependencies": {
     "@nuxt/eslint": "^0.6.0",
diff --git a/renovate.json b/renovate.json
new file mode 100644
index 0000000..f9fa65a
--- /dev/null
+++ b/renovate.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "prCreation": "immediate",
+  "extends": [
+    "github>danielroe/renovate"
+  ]
+}
diff --git a/test/browser/index.test.ts b/test/browser/index.test.ts
new file mode 100644
index 0000000..4753c0a
--- /dev/null
+++ b/test/browser/index.test.ts
@@ -0,0 +1,11 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+
+test('home page', async ({ page }) => {
+  await page.goto('/')
+  await expect(page).toHaveScreenshot()
+})
+
+test('og image for home page', async ({ page }) => {
+  await page.goto('/__og-image__/image/og.png')
+  await expect(page).toHaveScreenshot()
+})
diff --git a/test/nuxt/index.test.ts b/test/nuxt/index.test.ts
new file mode 100644
index 0000000..5a7d7cc
--- /dev/null
+++ b/test/nuxt/index.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+
+describe('runtime environment', () => {
+  it('should work', () => {
+    expect(useRuntimeConfig().app).toMatchInlineSnapshot(`
+      {
+        "baseURL": "/",
+        "buildAssetsDir": "/_nuxt/",
+        "buildId": "test",
+        "cdnURL": "",
+      }
+    `)
+  })
+})
diff --git a/test/unit/index.test.ts b/test/unit/index.test.ts
new file mode 100644
index 0000000..3577ca8
--- /dev/null
+++ b/test/unit/index.test.ts
@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest'
+
+describe('work', () => {
+  it('should ', () => {
+    expect(true).toBe(true)
+  })
+})
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..1d2a4fe
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig, defaultExclude } from 'vitest/config'
+
+export default defineConfig({
+  //
+  test: {
+    exclude: [
+      ...defaultExclude,
+      'test/browser/**',
+      'test/nuxt/**',
+    ],
+  },
+})
diff --git a/vitest.nuxt.config.ts b/vitest.nuxt.config.ts
new file mode 100644
index 0000000..fb355c9
--- /dev/null
+++ b/vitest.nuxt.config.ts
@@ -0,0 +1,8 @@
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
+export default defineVitestConfig({
+  test: {
+    dir: './test/nuxt',
+    environment: 'nuxt',
+  },
+})
-- 
2.51.2