Add first integration test

.env.development

@@ -1,2 +1,3 @@
 VITE_API_BASE_URL=https://api.dev.zoo.dev
 VITE_SITE_BASE_URL=https://dev.zoo.dev
+PLAYWRIGHT_SESSION_COOKIE='0f93cf23-6604-43dd-911a-c98e2c641848'

.gitignore

@@ -8,3 +8,7 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+
+# playwright artifacts
+test-results

README.md

@@ -42,3 +42,13 @@ CookieDate.setFullYear(CookieDate.getFullYear() + 10)
 document.cookie =
 	'__Secure-next-auth.session-token=YOUR_TOKEN;Secure;expires=' + CookieDate.toUTCString() + ';'
 ```
+
+### Running Playwright E2E tests locally
+
+In order to run our Playwright testing suite locally, please set the `PLAYWRIGHT_SESSION_COOKIE` variable within `.env.development` to a token from a logged in local development session. You can retrieve it by:
+
+1. logging in to the project locally using the method outlined above
+2. opening the Application tab in your browser developer tools
+3. copying out the value of the cookie titled `__Secure-next-auth.session-token` with the domain of `localhost`
+
+Now you should be able to run the `yarn test:integration` and `yarn test` commands successfully.

package.json

@@ -27,6 +27,7 @@
 		"@typescript-eslint/parser": "^6.0.0",
 		"@vitest/ui": "^1.1.2",
 		"autoprefixer": "^10.4.16",
+		"dotenv": "^16.3.1",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",

playwright.config.ts

@@ -1,12 +1,42 @@
 import type { PlaywrightTestConfig } from '@playwright/test'
+import { AUTH_COOKIE_NAME } from './src/lib/cookies'
+import dotenv from 'dotenv'
+import path from 'path'
+
+dotenv.config({ path: path.resolve(path.dirname('.'), '.env.development') })
+const expiration = new Date()
+expiration.setFullYear(expiration.getFullYear() + 1)
 
 const config: PlaywrightTestConfig = {
+	use: {
+		baseURL: 'https://localhost:3000',
+		storageState: {
+			cookies: [
+				{
+					name: AUTH_COOKIE_NAME,
+					value: process.env.PLAYWRIGHT_SESSION_COOKIE ?? '',
+					domain: 'localhost',
+					path: '/',
+					expires: expiration.getTime() / 1000,
+					httpOnly: true,
+					secure: true,
+					sameSite: 'None'
+				}
+			],
+			origins: [
+				{
+					origin: 'https://localhost:3000',
+					localStorage: []
+				}
+			]
+		}
+	},
 	webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
+		command: 'yarn dev',
+		port: 3000
 	},
 	testDir: 'tests',
-	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+	testMatch: /(.+\.)?(playwright)\.[jt]s/
 }
 
 export default config

src/components/AccountMenu.svelte

@@ -41,7 +41,7 @@
 				(shouldDisplayInitial || shouldDisplayImage ? 'rounded-full' : 'rounded')}
 		>
 			<img
-				src={user.image}
+				src={user?.image}
 				alt="Avatar"
 				class="object-fill"
 				style={`display: ${shouldDisplayImage ? 'block' : 'none'}`}

src/components/PromptForm.svelte

@@ -74,9 +74,11 @@
 <form on:submit={submitForm} class="flex border items-stretch text-lg">
 	<label class="flex-1 grid place-items-center">
 		<span class="sr-only">Enter a text-to-CAD prompt:</span>
+		<!-- svelte-ignore a11y-autofocus -->
 		<textarea
 			autocapitalize="false"
 			name="prompt"
+			autofocus
 			placeholder="e.g. Create a plate with 4 holes and rounded corners"
 			required
 			spellcheck="false"

src/hooks.server.ts

@@ -1,4 +1,4 @@
-import { redirect } from '@sveltejs/kit'
+import { error, redirect } from '@sveltejs/kit'
 import { AUTH_COOKIE_NAME } from '$lib/cookies'
 import { users, Client } from '@kittycad/lib'
 import { SIGN_OUT_PARAM } from '$lib/paths'
@@ -21,7 +21,9 @@ export const handle = async ({ event, resolve }) => {
 		process.env.BASE_URL = import.meta.env.VITE_API_BASE_URL + '/'
 	}
 	const client = new Client(token)
-	const currentUser = await users.get_user_self({ client })
+	const currentUser = await users.get_user_self({ client }).catch((e) => {
+		throw error(500, e)
+	})
 
 	if (currentUser) {
 		event.locals.user = currentUser

tests/e2e.playwright.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test'
+
+test('Redirects to the dashboard from home when logged-in', async ({ page }) => {
+	// Go to the home page
+	await page.goto('https://localhost:3000')
+
+	// Assert that we are now on the dashboard
+	await page.waitForURL('**/dashboard', { waitUntil: 'domcontentloaded' })
+	await expect(page.locator('h1')).toHaveText('Text-to-CAD')
+	await expect(page.locator('textarea')).toBeFocused()
+})

yarn.lock

@@ -1553,6 +1553,11 @@ dom-accessibility-api@^0.6.1, dom-accessibility-api@^0.6.3:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8"
   integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==
 
+dotenv@^16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
+
 electron-to-chromium@^1.4.535:
   version "1.4.557"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.557.tgz#f3941b569c82b7bb909411855c6ff9bfe1507829"