test: init component tests

kbrgl · Jun 29, 2023 · ee6bfed · ee6bfed
1 parent 60cb3e2
commit ee6bfed
Show file tree

Hide file tree

Showing 11 changed files with 283 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,6 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+.cache
+test-results
+playwright-report
diff --git a/package.json b/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",

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -1,11 +1,23 @@
-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'] }
+		}
+	]
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/components/boilerplate/App.svelte b/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 />
diff --git a/tests/components/boilerplate/index.html b/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>
diff --git a/tests/components/boilerplate/index.ts b/tests/components/boilerplate/index.ts
@@ -0,0 +1,2 @@
+// Apply theme here, add anything your component needs at runtime here.
+// import '../src/common.css';
diff --git a/tests/components/boilerplate/mount-toast.ts b/tests/components/boilerplate/mount-toast.ts
@@ -0,0 +1,15 @@
+import App from './App.svelte';
+import type { Mount, ToastProps } from './types';
+
+/** Helper function to mount a toast component with a given set of props. */
+export const mountToast = async ({
+	mount,
+	toastProps
+}: {
+	mount: Mount;
+	/** A tuple of props to pass to the `toast()` function. */
+	toastProps: ToastProps;
+}) => {
+	const component = await mount(App, { props: { toastProps: toastProps } });
+	return component;
+};
diff --git a/tests/components/boilerplate/types.ts b/tests/components/boilerplate/types.ts
@@ -0,0 +1,5 @@
+import type toast from '$lib';
+import type { test } from '@playwright/experimental-ct-svelte';
+
+export type Mount = Parameters<Parameters<typeof test>[1]>['0']['mount'];
+export type ToastProps = Parameters<typeof toast>;
diff --git a/tests/components/direction.spec.ts b/tests/components/direction.spec.ts
@@ -0,0 +1,118 @@
+import { expect, test } from '@playwright/experimental-ct-svelte';
+import { mountToast } from './boilerplate/mount-toast';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test.describe('LTR', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.evaluate(() => {
+			document.documentElement.lang = 'en';
+			document.documentElement.dir = 'ltr';
+		});
+	});
+
+	test('top-start', async ({ mount }) => {
+		const component = await mountToast({
+			mount,
+			toastProps: ['Hello world!', { position: 'top-start' }]
+		});
+
+		const toast = component.getByRole('status');
+		// toast should be top left
+		const toastRect = await toast.boundingBox();
+		expect(toastRect?.x).toBeLessThan(150);
+	});
+
+	test('top-end', async ({ mount }) => {
+		const component = await mountToast({
+			mount,
+			toastProps: ['Hello world!', { position: 'top-end' }]
+		});
+
+		const toast = component.getByRole('status');
+		// toast should be top right
+		const toastRect = await toast.boundingBox();
+		expect(toastRect?.x).toBeGreaterThan(350);
+	});
+
+	test('bottom-start', async ({ mount }) => {
+		const component = await mountToast({
+			mount,
+			toastProps: ['Hello world!', { position: 'bottom-start' }]
+		});
+
+		const toast = component.getByRole('status');
+		// toast should be bottom left
+		const toastRect = await toast.boundingBox();
+		expect(toastRect?.x).toBeLessThan(150);
+	});
+
+	test('bottom-end', async ({ mount }) => {
+		const component = await mountToast({
+			mount,
+			toastProps: ['Hello world!', { position: 'bottom-end' }]
+		});
+
+		const toast = component.getByRole('status');
+		// toast should be bottom right
+		const toastRect = await toast.boundingBox();
+		expect(toastRect?.x).toBeGreaterThan(350);
+	});
+});
+
+test.describe('RTL', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.evaluate(() => {
+			document.documentElement.lang = 'ar';
+			document.documentElement.dir = 'rtl';
+		});
+	});
+
+	test('top-start', async ({ mount }) => {
+		const component = await mountToast({
+			mount,
+			toastProps: ['مرحبا', { position: 'top-start' }]
+		});
+
+		const toast = component.getByRole('status');
+		// toast should be top right
+		const toastRect = await toast.boundingBox();
+		expect(toastRect?.x).toBeGreaterThan(350);
+	});
+
+	test('top-end', async ({ mount }) => {
+		const component = await mountToast({
+			mount,
+			toastProps: ['مرحبا', { position: 'top-end' }]
+		});
+
+		const toast = component.getByRole('status');
+		// toast should be top left
+		const toastRect = await toast.boundingBox();
+		expect(toastRect?.x).toBeLessThan(150);
+	});
+
+	test('bottom-start', async ({ mount }) => {
+		const component = await mountToast({
+			mount,
+			toastProps: ['مرحبا', { position: 'bottom-start' }]
+		});
+
+		const toast = component.getByRole('status');
+		// toast should be bottom right
+		const toastRect = await toast.boundingBox();
+		expect(toastRect?.x).toBeGreaterThan(350);
+	});
+
+	test('bottom-end', async ({ mount }) => {
+		const component = await mountToast({
+			mount,
+			toastProps: ['مرحبا', { position: 'bottom-end' }]
+		});
+
+		const toast = component.getByRole('status');
+		// toast should be bottom left
+		const toastRect = await toast.boundingBox();
+		expect(toastRect?.x).toBeLessThan(150);
+	});
+});
diff --git a/tests/components/toast.spec.ts b/tests/components/toast.spec.ts
@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/experimental-ct-svelte';
+import { mountToast } from './boilerplate/mount-toast';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('should render', async ({ mount }) => {
+	const component = await mountToast({ mount, toastProps: ['Hello world!'] });
+	await expect(component.getByText('Hello world!')).toBeVisible();
+});