test(frontend): add e2e tests for notes functionality

- Add tests for note creation, editing, and linking - Configure Playwright for cross-browser testing - Ensure reliable test execution with proper waits - Use single worker due to shared database state
2025-02-21 13:26:18 +01:00 · 2025-02-21 13:26:18 +01:00 · c1873066eb
commit c1873066eb
parent 26bfc9c5d6
10 changed files with 436 additions and 35 deletions
--- a/.cursor/rules/bulma-usage.mdc
+++ b/.cursor/rules/bulma-usage.mdc
@ -0,0 +1,107 @@
+---
+description: Standards for using Bulma CSS framework consistently across the application
+globs: **/*.{svelte,css,html}
+---
+<rule>
+When styling components:
+
+1. Use Bulma's Built-in Classes:
+   - Prefer Bulma utility classes over custom CSS
+   - Use spacing utilities (m*, p*) for margins and padding
+   - Use color utilities for consistent theming
+   - Use responsive helpers for different screen sizes
+   - Use flexbox utilities for layout
+
+2. Component Structure:
+   - Follow Bulma's component structure exactly
+   - Use proper nesting (e.g., navbar > navbar-brand > navbar-item)
+   - Keep modifier classes consistent with Bulma's patterns
+   - Use semantic Bulma classes (e.g., 'button is-primary' not custom colors)
+
+3. Custom Styles:
+   - Only add custom CSS when Bulma doesn't provide the functionality
+   - Document why custom CSS is needed
+   - Use Bulma's CSS variables for theming
+   - Keep custom styles minimal and focused
+
+4. Dark Mode:
+   - Use Bulma's CSS variables for theming
+   - Override colors using CSS variables, not direct colors
+   - Maintain consistent contrast ratios
+   - Test dark mode for all components
+
+5. Responsive Design:
+   - Use Bulma's responsive classes (is-*-mobile, is-*-tablet, etc.)
+   - Test all breakpoints
+   - Maintain consistent spacing across screen sizes
+   - Use proper container classes
+
+6. Common Patterns:
+   - Forms: field > label + control > input
+   - Buttons: button + is-* modifiers
+   - Cards: card > card-header + card-content + card-footer
+   - Navigation: navbar with proper structure
+   - Grid: columns > column with proper sizes
+
+7. Performance:
+   - Don't duplicate Bulma styles
+   - Minimize custom CSS
+   - Use Bulma's minified version
+   - Remove unused Bulma features if size is a concern
+
+metadata:
+  priority: high
+  version: 1.0
+</rule>
+
+examples:
+  - input: |
+      # Bad: Custom styles for spacing
+      <style>
+        .my-component {
+          margin-bottom: 20px;
+          padding: 15px;
+        }
+      </style>
+    output: |
+      <!-- Good: Bulma utilities -->
+      <div class="mb-5 p-4">...</div>
+
+  - input: |
+      # Bad: Custom color styles
+      <style>
+        .custom-button {
+          background: #3273dc;
+          color: white;
+        }
+      </style>
+    output: |
+      <!-- Good: Bulma color classes -->
+      <button class="button is-primary">...</button>
+
+  - input: |
+      # Bad: Custom responsive styles
+      <style>
+        @media (max-width: 768px) {
+          .hide-mobile { display: none; }
+        }
+      </style>
+    output: |
+      <!-- Good: Bulma responsive classes -->
+      <div class="is-hidden-mobile">...</div>
+
+  - input: |
+      # Bad: Inconsistent form structure
+      <div>
+        <label>Name</label>
+        <input type="text">
+      </div>
+    output: |
+      <!-- Good: Bulma form structure -->
+      <div class="field">
+        <label class="label">Name</label>
+        <div class="control">
+          <input class="input" type="text">
+        </div>
+      </div>
+</rewritten_file> 
--- a/.cursor/rules/frontend-testing.mdc
+++ b/.cursor/rules/frontend-testing.mdc
@ -0,0 +1,80 @@
+---
+description: Frontend testing standards using Playwright for end-to-end testing
+globs: **/*.{ts,js,svelte}
+---
+<rule>
+When working on frontend features:
+
+1. Test Coverage Requirements:
+   - All new features must have e2e tests
+   - Critical user flows must be tested
+   - Test both success and error paths
+   - Test responsive behavior for mobile/desktop
+   - Test accessibility where applicable
+
+2. Test Structure:
+   - Use descriptive test names
+   - Group related tests in describe blocks
+   - Use beforeEach for common setup
+   - Clean up test data after each test
+   - Keep tests focused and atomic
+
+3. Testing Best Practices:
+   - Test user interactions, not implementation
+   - Use data-testid for test-specific selectors
+   - Test across different viewport sizes
+   - Test across multiple browsers
+   - Verify visual and functional aspects
+
+4. Required Test Cases:
+   - Navigation flows
+   - Form submissions
+   - Error handling
+   - Loading states
+   - Responsive behavior
+   - Cross-browser compatibility
+
+5. Running Tests:
+   - Run tests before committing: `bun test`
+   - Debug tests with UI: `bun test:ui`
+   - Debug specific test: `bun test:debug`
+   - Install browsers: `bun test:install`
+
+6. CI Integration:
+   - Tests must pass in CI
+   - Screenshots on failure
+   - HTML test reports
+   - Retry failed tests
+   - Parallel execution where possible
+
+metadata:
+  priority: high
+  version: 1.0
+</rule>
+
+examples:
+  - input: |
+      # Bad: No tests for new feature
+      git commit -m "feat: add note search"
+    output: |
+      # Good: Feature with tests
+      bun test
+      git commit -m "feat: add note search with e2e tests
+      
+      Tests added:
+      - Search functionality
+      - Empty results handling
+      - Error states
+      - Mobile layout"
+
+  - input: |
+      # Bad: Testing implementation details
+      test('internal state is correct', () => {
+        expect(component.state.value).toBe(true)
+      })
+    output: |
+      # Good: Testing user interaction
+      test('user can toggle feature', async ({ page }) => {
+        await page.click('[data-testid=toggle]')
+        await expect(page.locator('.status')).toHaveText('Enabled')
+      }) 
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@ -11,6 +11,7 @@
      "devDependencies": {
        "@eslint/compat": "^1.2.5",
        "@eslint/js": "^9.18.0",
+        "@playwright/test": "^1.40.0",
        "@sveltejs/adapter-static": "^3.0.8",
        "@sveltejs/kit": "^2.5.27",
        "@sveltejs/vite-plugin-svelte": "^5.0.0",
@ -124,6 +125,8 @@

    "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],

+    "@playwright/test": ["@playwright/test@1.50.1", "", { "dependencies": { "playwright": "1.50.1" }, "bin": { "playwright": "cli.js" } }, "sha512-Jii3aBg+CEDpgnuDxEp/h7BimHcUTDlpEtce89xEumlJ5ef2hqepZ+PWp1DDpYC/VO9fmWVI1IlEaoI5fK9FXQ=="],
+
    "@polka/url": ["@polka/url@1.0.0-next.28", "", {}, "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw=="],

    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.34.8", "", { "os": "android", "cpu": "arm" }, "sha512-q217OSE8DTp8AFHuNHXo0Y86e1wtlfVrXiAlwkIvGRQv9zbc6mE3sjIVfwI8sYUyNxwOg0j/Vm1RKM04JcWLJw=="],
@ -390,6 +393,10 @@

    "picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],

+    "playwright": ["playwright@1.50.1", "", { "dependencies": { "playwright-core": "1.50.1" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-G8rwsOQJ63XG6BbKj2w5rHeavFjy5zynBA9zsJMMtBoe/Uf757oG12NXz6e6OirF7RCrTVAKFXbLmn1RbL7Qaw=="],
+
+    "playwright-core": ["playwright-core@1.50.1", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-ra9fsNWayuYumt+NiM069M6OkcRb1FZSK8bgi66AtpFoWkg2+y0bJSNmkFrWhMbEBbVKC/EruAHH3g0zmtwGmQ=="],
+
    "postcss": ["postcss@8.5.2", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-MjOadfU3Ys9KYoX0AdkBlFEF1Vx37uCCeN4ZHnmwm9FfpbsGWMZeBLMmmpY+6Ocqod7mkdZ0DT31OlbsFrLlkA=="],

    "postcss-load-config": ["postcss-load-config@3.1.4", "", { "dependencies": { "lilconfig": "^2.0.5", "yaml": "^1.10.2" }, "peerDependencies": { "postcss": ">=8.0.9", "ts-node": ">=9.0.0" }, "optionalPeers": ["postcss", "ts-node"] }, "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg=="],
@ -488,6 +495,8 @@

    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],

+    "playwright/fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
+
    "svelte-eslint-parser/eslint-scope": ["eslint-scope@7.2.2", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg=="],

    "svelte-eslint-parser/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
--- a/frontend/package.json
+++ b/frontend/package.json
@ -11,11 +11,16 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint ."
+		"lint": "prettier --check . && eslint .",
+		"test": "playwright test",
+		"test:ui": "playwright test --ui",
+		"test:debug": "playwright test --debug",
+		"test:install": "playwright install"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
+		"@playwright/test": "1.50.1",
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.5.27",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@ -0,0 +1,55 @@
+/// <reference types="node" />
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	testDir: './tests',
+	fullyParallel: false,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	workers: 1,
+	reporter: 'html',
+	timeout: 10000,
+	expect: {
+		timeout: 10000
+	},
+	use: {
+		baseURL: 'http://localhost:3000',
+		trace: 'on-first-retry',
+		screenshot: 'only-on-failure',
+		actionTimeout: 10000
+	},
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] }
+		},
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] }
+		},
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] }
+		},
+		{
+			name: 'mobile-chrome',
+			use: { ...devices['Pixel 5'] }
+		},
+		{
+			name: 'mobile-safari',
+			use: { ...devices['iPhone 12'] }
+		}
+	],
+	webServer: [
+		{
+			command: 'cd .. && go run main.go > /dev/null 2>&1',
+			port: 3000,
+			reuseExistingServer: !process.env.CI,
+			stdout: 'pipe',
+			stderr: 'pipe'
+		}
+	]
+};
+
+export default config;
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@ -9,37 +9,58 @@
 		/>
 		<link rel="stylesheet" href="/css/bulma.min.css" />
 		<style>
+			/* Dark mode theme using Bulma's CSS variables */
 			body.dark-mode {
-				background-color: #1a1a1a;
-				color: #e6e6e6;
+				--bulma-scheme-main: #1a1a1a;
+				--bulma-scheme-main-bis: #242424;
+				--bulma-scheme-main-ter: #2f2f2f;
+				--bulma-background: #1a1a1a;
+				--bulma-text: #e6e6e6;
+				--bulma-text-strong: #ffffff;
+				--bulma-border: #4a4a4a;
+				--bulma-link: #3273dc;
+				--bulma-link-hover: #5c93e6;
 			}
+
 			body.dark-mode .button.is-light {
-				background-color: #363636;
-				color: #e6e6e6;
+				--bulma-button-background-color: #363636;
+				--bulma-button-color: #e6e6e6;
+				--bulma-button-border-color: transparent;
 			}
+
 			body.dark-mode .input,
 			body.dark-mode .textarea {
-				background-color: #2b2b2b;
-				color: #e6e6e6;
-				border-color: #4a4a4a;
+				--bulma-input-background-color: #2b2b2b;
+				--bulma-input-color: #e6e6e6;
+				--bulma-input-border-color: #4a4a4a;
 			}
+
+			body.dark-mode .box {
+				--bulma-box-background-color: #2b2b2b;
+				--bulma-box-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3);
+			}
+
+			body.dark-mode .card {
+				--bulma-card-background-color: #2b2b2b;
+				--bulma-card-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3);
+			}
+
+			body.dark-mode .notification.is-info {
+				--bulma-notification-background-color: #1d4ed8;
+				--bulma-notification-color: #e6e6e6;
+			}
+
 			body.dark-mode .notification.is-danger {
-				background-color: #ff3860;
-				color: #fff;
-			}
-			body.dark-mode .title {
-				color: #e6e6e6;
-			}
-			body.dark-mode .label {
-				color: #e6e6e6;
-			}
-			body.dark-mode .content {
-				color: #e6e6e6;
+				--bulma-notification-background-color: #dc2626;
+				--bulma-notification-color: #e6e6e6;
 			}
+
+			/* Responsive adjustments */
 			@media (max-width: 768px) {
 				.section {
 					padding: 1.5rem 1rem;
 				}
+
 				.textarea {
 					min-height: 200px;
 				}
@ -47,6 +68,7 @@
 		</style>
 		%sveltekit.head%
 	</head>
+
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
--- a/frontend/src/lib/components/Navigation.svelte
+++ b/frontend/src/lib/components/Navigation.svelte
@ -23,7 +23,7 @@
 <svelte:window onresize={checkMobile} />

 {#if isMobile}
-	<nav class="navbar is-fixed-bottom p-0">
+	<nav class="navbar is-fixed-bottom">
 		<div class="navbar-brand is-justify-content-space-around is-flex-grow-1">
 			{#each routes as route}
 				<a
@ -33,7 +33,7 @@
 				>
 					<div>
 						<span class="icon">{route.icon}</span>
-						<p class="is-size-7">{route.label}</p>
+						<p class="is-size-7 mt-1 mb-0">{route.label}</p>
 					</div>
 				</a>
 			{/each}
@ -55,25 +55,41 @@
 {/if}

 <style>
+	/* Only keep styles that can't be achieved with Bulma utilities */
 	.is-fixed-left {
 		position: fixed;
 		top: 0;
 		left: 0;
 		bottom: 0;
 		width: 200px;
-		background: inherit;
 		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+		background-color: var(--bulma-scheme-main-bis, #f5f5f5);
 	}

-	@media (max-width: 768px) {
-		:global(body) {
-			padding-bottom: 60px;
-		}
+	/* Use Bulma's spacing utilities in the markup instead */
+	:global(body) {
+		padding-bottom: var(--bulma-navbar-height, 60px);
 	}

 	@media (min-width: 769px) {
 		:global(body) {
 			padding-left: 200px;
+			padding-bottom: 0;
 		}
 	}
+
+	/* Dark mode styles */
+	:global(body.dark-mode) .navbar,
+	:global(body.dark-mode) .is-fixed-left {
+		background-color: var(--bulma-scheme-main-bis, #242424);
+	}
+
+	:global(body.dark-mode) .navbar-item,
+	:global(body.dark-mode) .button.is-light {
+		color: var(--bulma-text, #e6e6e6);
+	}
+
+	:global(body.dark-mode) .navbar-item.is-active {
+		background-color: var(--bulma-scheme-main-ter, #2f2f2f);
+	}
 </style>
--- a/frontend/src/routes/notes/[id]/+page.svelte
+++ b/frontend/src/routes/notes/[id]/+page.svelte
@ -56,7 +56,7 @@
 <Navigation />

 {#if note}
-	<div class="container">
+	<div class="container is-max-desktop px-4">
 		<section class="section">
 			<div class="level">
 				<div class="level-left">
@ -134,11 +134,3 @@
 		</section>
 	</div>
 {/if}
-
-<style>
-	.container {
-		max-width: 800px;
-		margin: 0 auto;
-		padding: 2rem;
-	}
-</style>
--- a/frontend/tests/notes.test.ts
+++ b/frontend/tests/notes.test.ts
@ -0,0 +1,109 @@
+import { test, expect } from '@playwright/test';
+
+test('can create a new note', async ({ page }) => {
+	// Reset the database before test
+	await page.goto('/');
+	await page.request.post('/api/test/reset');
+
+	await page.goto('/notes/new');
+
+	// Fill in the note details
+	await page.fill('#title', 'Test Note');
+	await page.fill('#content', 'This is a test note');
+	await page.click('button[type="submit"]');
+
+	// Should redirect to the note page
+	await expect(page).toHaveURL(/\/notes\/[^/]+$/);
+	await expect(page.locator('h1')).toHaveText('Test Note');
+});
+
+test('can edit an existing note', async ({ page }) => {
+	// Reset the database before test
+	await page.goto('/');
+	await page.request.post('/api/test/reset');
+
+	// Create a note first
+	await page.goto('/notes/new');
+	await page.fill('#title', 'Original Title');
+	await page.fill('#content', 'Original content');
+	await page.click('button[type="submit"]');
+
+	// Click edit button and modify the note
+	await page.click('button:text("Edit")');
+	await page.fill('input.input', 'Updated Title');
+	await page.fill('textarea.textarea', 'Updated content');
+	await page.click('button:text("Save")');
+
+	// Verify changes
+	await expect(page.locator('h1')).toHaveText('Updated Title');
+	await expect(page.locator('.content')).toContainText('Updated content');
+});
+
+test('can create and navigate note links', async ({ page }) => {
+	// Reset the database before test
+	await page.goto('/');
+	await page.request.post('/api/test/reset');
+
+	// Create first note
+	await page.goto('/notes/new');
+	await page.fill('#title', 'First Note');
+	await page.fill('#content', 'This links to [[Second Note]]');
+	await page.click('button[type="submit"]');
+
+	// Wait for redirect and verify we're on the right page
+	await expect(page).toHaveURL(/\/notes\/[^/]+$/);
+	await expect(page.locator('h1')).toHaveText('First Note');
+	const firstNoteUrl = page.url();
+
+	// Create second note
+	await page.goto('/notes/new');
+	await page.fill('#title', 'Second Note');
+	await page.fill('#content', 'This is referenced by First Note');
+	await page.click('button[type="submit"]');
+	// Wait for second note to be created
+	await expect(page).toHaveURL(/\/notes\/[^/]+$/);
+	await expect(page.locator('h1')).toHaveText('Second Note');
+
+	// Go back to first note and wait for load
+	await page.goto(firstNoteUrl);
+	await expect(page.locator('h1')).toHaveText('First Note');
+	// Wait for content and links to be rendered
+	await page.waitForSelector('.content:not(:empty)');
+	await page.waitForSelector('.note-link');
+
+	// Check links
+	const noteLink = page.locator('.note-link');
+	await expect(noteLink).toBeVisible();
+	await expect(noteLink).toHaveText('Second Note');
+	await noteLink.click();
+
+	// Verify navigation to second note
+	await expect(page).toHaveURL(/\/notes\/[^/]+$/);
+	await expect(page.locator('h1')).toHaveText('Second Note');
+
+	// Check backlinks after ensuring they're loaded
+	await page.waitForSelector('.tag.is-info');
+	await expect(page.locator('.tag.is-info')).toBeVisible();
+	await expect(page.locator('.tag.is-info')).toHaveText('First Note');
+});
+
+test('handles mobile navigation correctly', async ({ page }) => {
+	// Set viewport to mobile size
+	await page.setViewportSize({ width: 375, height: 667 });
+	await page.goto('/');
+
+	// Check that mobile navigation is visible
+	await expect(page.locator('.navbar.is-fixed-bottom')).toBeVisible();
+
+	// Navigate between sections
+	await page.click('text=Feeds');
+	await expect(page).toHaveURL('/feeds');
+
+	await page.click('text=Read Later');
+	await expect(page).toHaveURL('/readlist');
+
+	await page.click('text=Notes');
+	await expect(page).toHaveURL('/');
+});
+
+export {};
--- a/scripts/pre-commit.sh
+++ b/scripts/pre-commit.sh
@ -54,6 +54,12 @@ $BUN_CMD check || {
    exit 1
 }

+echo -e "\n${GREEN}Running frontend tests...${NC}"
+$BUN_CMD run test || {
+    echo -e "${RED}Frontend tests failed!${NC}"
+    exit 1
+}
+
 echo -e "\n${GREEN}Building frontend...${NC}"
 $BUN_CMD run build || {
    echo -e "${RED}Frontend build failed!${NC}"