add very simple e2e tests

.github/workflows/tests.yml

@@ -20,7 +20,13 @@ jobs:
           node-version: 16
       - name: Install dependencies
         run: npm ci
-      - run: npm run build
-      - run: npm run check
-      - run: npm run lint
-      - run: npm test
+      - name: Build Console
+        run: npm run build
+      - name: Svelte Diagnostics
+        run: npm run check
+      - name: Linter
+        run: npm run lint
+      - name: Unit Tests
+        run: npm test
+      - name: E2E Tests
+        run: npm run e2e

package.json

@@ -9,39 +9,42 @@
 		"build": "svelte-kit build",
 		"package": "svelte-kit package",
 		"preview": "svelte-kit preview",
+		"prepare": "svelte-kit sync",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint .",
 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
 		"test": "jest tests",
 		"test:watch": "npm run test -- --watch",
+		"e2e": "playwright test tests/e2e",
 		"vitebook:dev": "vitebook dev",
 		"vitebook:build": "vitebook build",
 		"vitebook:preview": "vitebook preview"
 	},
 	"dependencies": {
-		"aw-labs-ui": "^0.0.6"
+		"aw-labs-ui": "^0.0.7"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "1.0.0-next.31",
-		"@sveltejs/kit": "1.0.0-next.295",
-		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.39",
+		"@playwright/test": "^1.20.0",
+		"@sveltejs/adapter-auto": "1.0.0-next.33",
+		"@sveltejs/kit": "1.0.0-next.302",
+		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.40",
 		"@testing-library/dom": "^8.11.3",
 		"@testing-library/jest-dom": "^5.16.2",
-		"@testing-library/svelte": "^3.0.3",
+		"@testing-library/svelte": "^3.1.0",
 		"@testing-library/user-event": "^13.5.0",
-		"@typescript-eslint/eslint-plugin": "^5.14.0",
-		"@typescript-eslint/parser": "^5.14.0",
+		"@typescript-eslint/eslint-plugin": "^5.16.0",
+		"@typescript-eslint/parser": "^5.16.0",
 		"eslint": "^8.11.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^3.4.1",
 		"jest": "^27.5.1",
 		"pre-commit": "^1.2.2",
-		"prettier": "^2.4.1",
+		"prettier": "^2.6.0",
 		"prettier-plugin-svelte": "^2.6.0",
 		"sass": "^1.49.9",
 		"svelte": "^3.46.4",
-		"svelte-check": "^2.4.3",
+		"svelte-check": "^2.4.6",
 		"svelte-jester": "^2.3.2",
 		"svelte-preprocess": "^4.10.4",
 		"ts-jest": "^27.1.3",

playwright.config.js

@@ -0,0 +1,9 @@
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 3000
+	}
+};
+
+export default config;

src/routes/__layout.svelte

@@ -28,49 +28,3 @@
 <Notifications />
 
 <slot />
-
-<style>
-	:global(:root) {
-		--main-color-hue: 343;
-		--color-primary: var(--main-color-hue) 87% 56%; /*#f02e65*/
-		--color-primary-hover: var(--main-color-hue) 100% 72%; /*#ff729b*/
-		--color-secondary: var(--main-color-hue) 44% 81%;
-
-		/* status colors - TEMP HEX COLOR (from old project) */
-		--color-dafault: 0 0% 62%;
-		--color-disabled: 0 0% 62%;
-		--color-pending: 36 100% 47%;
-		--color-danger: 0 74% 42%;
-		--color-ok: 36 100% 47%;
-		--color-success: 146 75% 43%;
-		/* need to update to HSL colors */
-
-		--color-warning: #fffbdd;
-		--color-info: #386fd2;
-
-		/** grays **/
-		--color-neutral-0: 0 0% 100%; /* #ffffff */
-		--color-neutral-100: 210 17% 95%; /* #f1f3f5 */
-		--color-neutral-200: 0 0% 89%; /* #e2e2e2 */
-		--color-neutral-600: 0 0% 56%; /* #8f8f8f */
-		--color-neutral-700: 0 0% 43%; /* #6e6e6e */
-		--color-neutral-900: 0 0% 19%; /* #313131 */
-		--color-neutral-950: 0 0% 9%; /* #181818 */
-		--color-neutral-1000: 0 0% 0%; /* #000000 */
-
-		/* blues */
-		--color-blue-50: 206 21% 94%; /* #EBEFF2 */
-		--color-blue-75: 211 35% 87%; /* #d2dde9 */
-		--color-blue-100: 212 47% 85%; /* #c7d8eb */
-		--color-blue-300: 229, 10%, 65%; /* #9ea1af */
-		--color-blue-700: 215 14% 34%; /* #40404c */
-		--color-blue-900: 192 68% 37%; /* #1e849e */
-
-		/* common dark theme colors */
-		--color-dark-100: 231 33% 23%; /* #272D4E */
-		--color-dark-700: 229 32% 17%; /* #1D2238 */
-
-		/* transparent */
-		--transparent: 0 0 0 / 0;
-	}
-</style>

tests/e2e/login.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test';
+
+test('login page has inputs', async ({ page }) => {
+	await page.goto('/login');
+	const mail = page.locator('id=email');
+	const pass = page.locator('id=password');
+	expect(await mail.isVisible());
+	expect(await pass.isVisible());
+});

tests/e2e/register.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+
+test('register page has inputs', async ({ page }) => {
+	await page.goto('/login');
+	const name = page.locator('id=name');
+	const mail = page.locator('id=email');
+	const pass = page.locator('id=password');
+	expect(await name.isVisible());
+	expect(await mail.isVisible());
+	expect(await pass.isVisible());
+});

tsconfig.json

@@ -1,24 +1,6 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
-		"moduleResolution": "node",
-		"module": "es2020",
-		"lib": ["es2020", "DOM", "webworker"],
-		"target": "es2020",
-		"importsNotUsedAsValues": "error",
-		"isolatedModules": true,
-		"resolveJsonModule": true,
-		"sourceMap": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"baseUrl": ".",
-		"allowJs": true,
-		"checkJs": true,
-		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"]
-		}
-	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+		"lib": ["webworker"]
+	}
 }