chore(tests): add Playwright configuration and initial tests

.github/workflows/test.yml

@@ -0,0 +1,52 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test-logs:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+
+    # env:
+    #   SECRET_MONGODB_CONNECTION: ${{ secrets.SECRET_MONGODB_CONNECTION }}
+    #   SECRET_JWT_KEY: ${{ secrets.SECRET_JWT_KEY }}
+    #   SECRET_EMAIL_PASSWORD: ${{ secrets.SECRET_EMAIL_PASSWORD }}
+    #   SECRET_COOKIE_SECURE_SETTING: ${{ secrets.SECRET_COOKIE_SECURE_SETTING }}
+    #   SECRET_INTERNAL_API_KEY: ${{ secrets.SECRET_INTERNAL_API_KEY }}
+    #   SECRET_VALID_AUTH_TOKEN: ${{ secrets.SECRET_VALID_AUTH_TOKEN }}
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install dependencies
+        run: |
+          npm i
+
+      #   - name: Test Jest API
+      #     run: |
+      #       npm run test:unit
+
+      - name: Test Playwright API
+        run: |
+          npx playwright install --with-deps chromium
+          npx playwright test --project="Google Chrome"
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -19,3 +19,7 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/example.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});

package.json

@@ -1,31 +1,35 @@
 {
-	"name": "@realgolfgames/realgolfgames-logs",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check .",
-		"format": "prettier --write ."
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.8.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.2.8",
-		"svelte": "^4.2.7",
-		"svelte-check": "^4.0.5",
-		"typescript": "^5.6.3",
-		"vite": "^5.4.11"
-	},
-	"type": "module",
-	"packageManager": "[email protected]+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1",
-	"dependencies": {
-		"@sveltejs/adapter-node": "^5.2.9",
-		"mongoose": "^8.8.0"
-	}
+  "name": "@realgolfgames/realgolfgames-logs",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check .",
+    "format": "prettier --write ."
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.0",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.8.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/node": "^22.9.1",
+    "playwright": "^1.49.0",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.2.8",
+    "svelte": "^4.2.7",
+    "svelte-check": "^4.0.5",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
+  },
+  "type": "module",
+  "packageManager": "[email protected]+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1",
+  "dependencies": {
+    "@sveltejs/adapter-node": "^5.2.9",
+    "dotenv": "^16.4.5",
+    "mongoose": "^8.8.0"
+  }
 }

playwright.config.ts

@@ -0,0 +1,84 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+import dotenv from 'dotenv';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './e2e',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* 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 ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: 'html',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/v1/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: 'http://localhost:5173',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry'
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] }
+		},
+
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] }
+		},
+
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] }
+		},
+
+		/* Test against mobile viewports. */
+		{
+			name: 'Mobile Chrome',
+			use: { ...devices['Pixel 5'] }
+		},
+		{
+			name: 'Mobile Safari',
+			use: { ...devices['iPhone 12'] }
+		},
+
+		/* Test against branded browsers. */
+		{
+			name: 'Microsoft Edge',
+			use: { ...devices['Desktop Edge'], channel: 'msedge' }
+		},
+		{
+			name: 'Google Chrome',
+			use: { ...devices['Desktop Chrome'], channel: 'chrome' }
+		}
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: 'npm run dev',
+		url: 'http://localhost:5173',
+		reuseExistingServer: !process.env.CI
+	}
+});