Add playwright tests

Can only be run in Chrome and in headed mode at the moment, but it's
better than nothing! 🚀

.gitignore

@@ -10,3 +10,7 @@ node_modules
 .env
 .dev.vars
 .sentryclirc
+
+playwright-report
+test-results
+

package.json

@@ -18,6 +18,7 @@
 		"typecheck:watch": "npm run typecheck -- --watch",
 		"test": "vitest",
 		"test:ci": "vitest --watch false",
+		"test:e2e": "playwright test --headed",
 		"check": "npm run lint && npm run typecheck && npm run test:ci"
 	},
 	"dependencies": {
@@ -59,6 +60,7 @@
 		"@cloudflare/vitest-pool-workers": "^0.4.19",
 		"@cloudflare/workers-types": "^4.20240806.0",
 		"@peculiar/webcrypto": "^1.5.0",
+		"@playwright/test": "^1.46.1",
 		"@remix-run/dev": "2.11.1",
 		"@remix-run/eslint-config": "2.11.1",
 		"@types/react": "^18.3.3",

playwright.config.ts

@@ -0,0 +1,92 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './tests',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: 'html',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: 'http://localhost:8787',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: {
+				video: 'on-first-retry',
+				...devices['Desktop Chrome'],
+				launchOptions: {
+					args: [
+						'--disable-web-security',
+						'--use-fake-ui-for-media-stream',
+						'--use-fake-device-for-media-stream',
+					],
+				},
+			},
+		},
+
+		// {
+		// 	name: 'firefox',
+		// 	use: {
+		// 		...devices['Desktop Firefox'],
+		// 	},
+		// },
+
+		// {
+		// 	name: 'webkit',
+		// 	use: {
+		// 		...devices['Desktop Safari'],
+		// 	},
+		// },
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: 'npm run dev',
+		url: 'http://localhost:8787',
+		reuseExistingServer: !process.env.CI,
+	},
+})

tests/joining-room.spec.ts

@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test'
+
+test('Two users joining the same room', async ({ browser }) => {
+	// can't use nanoid here :(
+	const location = `http://localhost:8787/${crypto.randomUUID()}`
+
+	const context = await browser.newContext()
+	const page = await context.newPage()
+	await page.goto(location)
+	await page.getByLabel('Enter your display name').fill('kevin')
+	await page.getByLabel('Enter your display name').press('Enter')
+	await expect(page.getByRole('button', { name: 'Join' })).toBeVisible()
+	await page.getByRole('button', { name: 'Join' }).click()
+	await expect(page.getByRole('button', { name: 'Leave' })).toBeVisible()
+
+	const pageTwo = await context.newPage()
+	await pageTwo.goto(location)
+	await pageTwo.getByRole('button', { name: 'Join' }).click()
+	await expect(pageTwo.getByRole('button', { name: 'Leave' })).toBeVisible()
+
+	await expect
+		.poll(async () => page.locator('video').count(), { timeout: 10_000 })
+		.toBe(2)
+
+	await expect
+		.poll(async () => pageTwo.locator('video').count(), { timeout: 10_000 })
+		.toBe(2)
+})