test: add e2e test suite

.github/workflows/e2e-tests.yml

@@ -0,0 +1,68 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+  workflow_dispatch:
+
+jobs:
+  e2e_tests:
+    name: 'E2E Tests'
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+      - uses: oven-sh/setup-bun@4bc047ad259df6fc24a6c9b0f9a0cb08cf17fbe5 # v2
+
+      - name: Set up env
+        run: cp .env.example .env && sed -i 's/password@db/password@localhost/' .env
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        id: cache-dependencies
+        with:
+          path: node_modules
+          key: packages-${{ hashFiles('bun.lockb') }}
+
+      - name: Install dependencies
+        if: steps.cache-dependencies.outputs.cache-hit != 'true'
+        run: bun install --frozen-lockfile
+
+      - name: Build the app
+        run: bun run build
+
+      - name: Start Services
+        run: bun run dx:up
+
+      - name: Cache playwright
+        id: cache-playwright
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.cache/ms-playwright
+            ${{ github.workspace }}/node_modules/playwright
+          key: playwright-${{ hashFiles('bun.lockb') }}
+          restore-keys: playwright-
+
+      - name: Install playwright
+        if: steps.cache-playwright.outputs.cache-hit != 'true'
+        run: bunx playwright install --with-deps
+
+      - name: Create the database
+        run: bun run db:migrate-dev
+
+      - name: Seed the database
+        run: bun run db:seed
+
+      - name: Run Playwright tests
+        run: bun run test:e2e
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: test-results
+          path: '${{github.workspace}}/test-results/*'
+          retention-days: 30

.github/workflows/test.yml → .github/workflows/unit-tests.yml

@@ -27,4 +27,4 @@ jobs:
         run: bun install --frozen-lockfile
 
       - name: Run tests
-        run: bunx vitest run
+        run: bun test:unit

.gitignore

@@ -2,6 +2,10 @@
 
 /build
 
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
 ### macOS ###
 # General
 .DS_Store

CONTRIBUTING.md

@@ -24,7 +24,7 @@ We would love your help! We want to make contributing to this project as easy an
 2. Copy the `.env.example` file to `.env`.
    - Change the `ORIGIN` variable to `http://localhost:5173`.
    - Change `db` to `localhost` in the `DB_URL`.
-3. Run `bun d` to install dependencies, start the database, run the migrations and run the application.
+3. Run `bun setup` to install dependencies, start the database, run the migrations and run the application.
 4. From now on, you can run `bun d` to run the application.
 
 ## Summary of the contribution flow
@@ -88,12 +88,14 @@ Please use our issues templates that provide you with hints on what information
 ## Pull Requests
 
 **Please, make sure you open an issue before starting with a Pull Request, unless it's a typo or a really obvious error.**
-Pull requests are the best way to propose changes to the specification. Take time to check the current working branch
-for the repository you want to contribute on before working :wink:
+Pull requests are the best way to propose changes to the specification. Take time to check the current working branch before working :wink:
+
+Ensure that your code follows the code style and that you have run the tests before submitting a pull request. If you
+are adding a new feature, make sure to add tests for it.
 
 ## Conventional commits
 
-Our repositories follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) specification.
+Our repository follows [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) specification.
 
 Pull requests should have a title that follows the specification, otherwise, merging is blocked. If you are not familiar
 with the specification simply ask maintainers to modify. You can also use this cheatsheet if you want:

eslint.config.js

@@ -18,6 +18,7 @@ export default ts.config(
       globals: {
         ...globals.browser,
         ...globals.es2017,
+        process: true,
       },
     },
   },

package.json

@@ -11,13 +11,20 @@
     "dx": "bun i && bun run dx:up && bun run db:migrate-dev",
     "dx:up": "docker compose -f docker/development/compose.yml up -d --wait",
     "dx:down": "docker compose -f docker/development/compose.yml down",
+    "setup": "bun run dx && bun run db:seed && bun run dev",
     "lint": "prettier --check \"src/**/*.{js,ts,html,svelte,css}\" --ignore-path ./.prettierignore && eslint ./src",
     "format": "prettier --write \"src/**/*.{js,ts,html,svelte,css}\" --ignore-path ./.prettierignore && eslint ./src --fix",
-    "test": "vitest --run --passWithNoTests",
-    "test:watch": "vitest --watch --passWithNoTests",
+    "test:unit": "vitest --run --dir src --passWithNoTests",
+    "test:unit:watch": "vitest --watch --dir src --passWithNoTests",
+    "test:e2e": "start-server-and-test \"bun run preview --port 3000\" http://localhost:3000 \"bunx playwright test\"",
+    "pretest:e2e:dev": "bun scripts/other/confirm.js \"Are you sure you want to run e2e tests? This will reset your database (yes/no)\"",
+    "test:e2e:dev": "bun run db:reset && bunx playwright test && bun run db:reset",
+    "test:e2e:results": "bunx playwright show-report",
     "coverage": "vitest --run --coverage --passWithNoTests",
-    "db:migrate-dev": "prisma migrate dev",
+    "db:migrate-dev": "prisma migrate dev --skip-seed",
     "db:migrate-deploy": "prisma migrate deploy",
+    "db:reset": "prisma migrate reset --force",
+    "db:seed": "prisma db seed",
     "db:push": "prisma db push"
   },
   "dependencies": {
@@ -69,6 +76,7 @@
     "@eslint/js": "^9.12.0",
     "@melt-ui/pp": "^0.3.2",
     "@melt-ui/svelte": "^0.86.0",
+    "@playwright/test": "^1.49.0",
     "@sveltejs/adapter-auto": "^3.2.5",
     "@sveltejs/adapter-node": "^5.2.5",
     "@sveltejs/kit": "^2.7.1",
@@ -96,6 +104,7 @@
     "prettier-plugin-tailwindcss": "^0.6.8",
     "prisma": "^5.20.0",
     "prisma-kysely": "^1.8.0",
+    "start-server-and-test": "^2.0.8",
     "svelte": "^5.0.0",
     "svelte-adapter-bun": "^0.5.2",
     "svelte-check": "^4.0.4",
@@ -104,5 +113,8 @@
     "typescript-eslint": "^8.8.0",
     "vite": "^5.4.8",
     "vitest": "^2.1.4"
+  },
+  "prisma": {
+    "seed": "bun ./prisma/seed"
   }
 }

playwright.config.ts

@@ -0,0 +1,76 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests/e2e',
+  /* Required as some tests reset the database. */
+  workers: 1,
+  /* 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 : 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI ? 'github' : 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    video: 'retain-on-failure',
+  },
+
+  timeout: 30_000,
+
+  /* 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 start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

prisma/seed.ts

@@ -0,0 +1,49 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { CamelCasePlugin, Kysely, PostgresDialect } from 'kysely';
+import pg from 'pg';
+
+import type { DB } from '$lib/db/schema';
+
+const pool = new pg.Pool({ connectionString: process.env.DB_URL });
+const dialect = new PostgresDialect({ pool });
+
+const db = new Kysely<DB>({
+  dialect,
+  plugins: [new CamelCasePlugin()],
+});
+
+const main = async () => {
+  const files = fs.readdirSync(path.join(__dirname, './seed'));
+
+  for (const file of files) {
+    const stat = fs.statSync(path.join(__dirname, './seed', file));
+
+    if (stat.isFile()) {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const mod = require(path.join(__dirname, './seed', file));
+
+      if ('seedDatabase' in mod && typeof mod.seedDatabase === 'function') {
+        console.log(`[SEEDING]: ${file}`);
+
+        try {
+          await mod.seedDatabase(db);
+        } catch (e) {
+          console.log(`[SEEDING]: Seed failed for ${file}`);
+          console.error(e);
+        }
+      }
+    }
+  }
+};
+
+main()
+  .then(() => {
+    db.destroy();
+  })
+  .catch((e) => {
+    console.error(e);
+    db.destroy();
+    process.exit(1);
+  });

prisma/seed/flight.ts

@@ -0,0 +1,17 @@
+import { format } from 'date-fns';
+import { Kysely } from 'kysely';
+
+import { createFlightPrimitive } from '../../src/lib/db/queries';
+import type { DB } from '../../src/lib/db/schema';
+
+export const seedFlight = async (db: Kysely<DB>, userId: string) => {
+  await createFlightPrimitive(db, {
+    seats: [
+      { userId, seat: 'window', seatNumber: '11F', seatClass: 'economy' },
+    ],
+    from: 'EKCH',
+    to: 'ESSA',
+    date: format(new Date(), 'yyyy-MM-dd'),
+    duration: 70 * 60,
+  });
+};

prisma/seed/initial-seed.ts

@@ -0,0 +1,11 @@
+import { Kysely } from 'kysely';
+
+import type { DB } from '../../src/lib/db/schema';
+
+import { seedFlight } from './flight';
+import { seedUser } from './user';
+
+export const seedDatabase = async (db: Kysely<DB>) => {
+  const user = await seedUser(db);
+  await seedFlight(db, user.id);
+};

prisma/seed/user.ts

@@ -0,0 +1,25 @@
+import { Kysely } from 'kysely';
+import { generateId } from 'lucia';
+
+import type { DB } from '../../src/lib/db/schema';
+import { hashPassword } from '../../src/lib/server/utils/password';
+
+export const SEED_USER = {
+  username: 'test',
+  password: 'password',
+  displayName: 'Test User',
+  role: 'owner',
+  unit: 'metric',
+} as const;
+
+export const seedUser = async (db: Kysely<DB>) => {
+  return await db
+    .insertInto('user')
+    .values({
+      ...SEED_USER,
+      id: generateId(15),
+      password: await hashPassword(SEED_USER.password),
+    })
+    .returning('id')
+    .executeTakeFirstOrThrow();
+};

scripts/other/confirm.js

@@ -0,0 +1,20 @@
+import readline from 'readline';
+
+const args = process.argv.slice(2);
+const message = args[0] || 'Are you sure you want to proceed? (yes/no)';
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+rl.question(`${message}: `, (answer) => {
+  if (answer.toLowerCase() === 'yes') {
+    rl.close();
+    process.exit(0);
+  } else {
+    console.log('Operation aborted.');
+    rl.close();
+    process.exit(1);
+  }
+});

src/lib/components/NavigationDock.svelte

@@ -43,6 +43,7 @@
   const settingsItem = {
     label: 'Settings',
     icon: Settings,
+    id: 'settings-button',
     onClick: () => {
       openModalsState.settings = true;
     },