Add component tests

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: Playwright Tests
+on:
+  push:
+  pull_request:
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    # Use a container to significantly speed up the workflow. The downside is
+    # that the playwright version needs to be manually kept in sync.
+    container:
+      image: mcr.microsoft.com/playwright:v1.35.1
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run Playwright tests
+        # BUG: firefox tests fail in container. To fix, we manually set HOME variable: https://github.com/microsoft/playwright/issues/6500#issuecomment-1577284385
+        run: env HOME=/root pnpm run test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -9,3 +9,6 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+.cache
+test-results
+playwright-report

package.json

@@ -47,7 +47,8 @@
 		"svelte": "^3.57.0 || ^4.0.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.31.2",
+		"@playwright/experimental-ct-svelte": "^1.35.1",
+		"@playwright/test": "^1.35.1",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.5",
 		"@sveltejs/package": "^2.1.0",

playwright.config.ts

@@ -1,11 +1,31 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/experimental-ct-svelte';
 
-const config: PlaywrightTestConfig = {
-	webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
+export default defineConfig({
+	testDir: './tests/components',
+	timeout: 10 * 1000,
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: process.env.CI ? [['github'], ['html']] : [['html', { open: 'never' }]],
+	use: {
+		trace: 'retain-on-failure',
+		video: 'retain-on-failure',
+		ctPort: 3100,
+		ctTemplateDir: './tests/components/boilerplate'
 	},
-	testDir: 'tests'
-};
-
-export default config;
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] }
+		},
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] }
+		},
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] }
+		}
+	]
+});

src/lib/components/ToastWrapper.svelte

@@ -19,7 +19,7 @@
 	$: factor = toast.position?.includes('top') ? 1 : -1;
 	$: justifyContent =
 		(toast.position?.includes('center') && 'center') ||
-		(toast.position?.includes('right') && 'flex-end') ||
+		((toast.position?.includes('right') || toast.position?.includes('end')) && 'flex-end') ||
 		null;
 </script>
 

src/lib/core/types.ts

@@ -1,13 +1,24 @@
 import type { SvelteComponent } from 'svelte';
 
 export type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
+/** Specifies the toast's position on the screen
+ *
+ * Logical positions (`start`, `end`) are recommended over absolute positions
+ * (`left`, `right`), as they automatically adjust based on the text direction
+ * of the locale (LTR or RTL). Examples:
+ * - Use `top-start` instead of `top-left`.
+ * - Use `top-end` instead of `top-right`. */
 export type ToastPosition =
 	| 'top-left'
 	| 'top-center'
 	| 'top-right'
 	| 'bottom-left'
 	| 'bottom-center'
-	| 'bottom-right';
+	| 'bottom-right'
+	| 'top-start'
+	| 'top-end'
+	| 'bottom-start'
+	| 'bottom-end';
 
 export type Renderable = typeof SvelteComponent | string | null;
 

tests/components/boilerplate/App.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Toaster from '../../../src/lib/components/Toaster.svelte';
+	import toast from '../../../src/lib/core/toast';
+	import type { ToastProps } from './types';
+
+	export let toastProps: ToastProps;
+
+	onMount(() => {
+		toast(toastProps[0], toastProps[1]);
+	});
+</script>
+
+<Toaster />

tests/components/boilerplate/index.html

@@ -0,0 +1,6 @@
+<html lang="en">
+	<body>
+		<div id="root"></div>
+		<script type="module" src="./index.ts"></script>
+	</body>
+</html>

tests/components/boilerplate/index.ts

@@ -0,0 +1,2 @@
+// Apply theme here, add anything your component needs at runtime here.
+// import '../src/common.css';

tests/components/boilerplate/types.ts

@@ -0,0 +1,3 @@
+import type toast from '$lib';
+
+export type ToastProps = Parameters<typeof toast>;