test(headless-example): added an e2e smoke test - catches instances o…

…f blank white page

in response to cases where there are logs in devtools and the app still runs

examples/headless-example/.gitignore

@@ -23,3 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 .env
+/test-results/
+/playwright-report/
+/playwright/.cache/

examples/headless-example/e2e/smoke.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('should keep basic functionality #e2e #smoke', async () => {
+ test('when navigating to the root page the sign up form renders', async ({ page }) => {
+ await page.goto('/');
+
+ const welcome = page.getByText(/welcome/i);
+
+ const firstInput = page.getByLabel(/first\sname|business\sname/i);
+ const secondInput = page.getByLabel(/last\sname|registration\snumber/i);
+
+ const signUpBtn = page.getByRole('button', { name: /sign\sup/i });
+
+ await expect(welcome).toBeVisible();
+
+ await expect(firstInput).toBeVisible();
+ await expect(secondInput).toBeVisible();
+
+ await expect(signUpBtn).toBeVisible();
+ });
+
+ test('when navigating to the root page clear user button renders', async ({ page }) => {
+ await page.goto('/');
+
+ const clearUserBtn = page.getByRole('button', { name: /clear\suser/i });
+
+ await expect(clearUserBtn).toBeVisible();
+ });
+});

examples/headless-example/package.json

@@ -9,12 +9,15 @@
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
- "check": "svelte-check --tsconfig ./tsconfig.json"
+ "check": "svelte-check --tsconfig ./tsconfig.json",
+ "test:e2e": "playwright test"
  },
  "devDependencies": {
  "@felte/core": "^1.3.7",
+ "@playwright/test": "^1.35.1",
  "@sveltejs/vite-plugin-svelte": "^2.0.2",
  "@tsconfig/svelte": "^3.0.0",
+ "@types/node": "^20.3.2",
  "@xstate/inspect": "^0.7.1",
  "autoprefixer": "^10.4.7",
  "postcss": "^8.4.21",

examples/headless-example/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: './e2e',
+ /* 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://127.0.0.1:5173',
+
+ /* 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: { ...devices['Desktop Chrome'] },
+ },
+
+ {
+ 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 start',
+ // url: 'http://127.0.0.1:3000',
+ // reuseExistingServer: !process.env.CI,
+ // },
+});

examples/headless-example/src/components/SignUp.svelte

@@ -47,7 +47,7 @@
  <input type="text" id="bname" name="bname" />
  </div>
  <div>
- <label for="rnum">Regestration Number</label>
+ <label for="rnum">Registration Number</label>
  <input type="text" id="rnum" name="rnum" />
  </div>
  {/if}

examples/headless-example/tsconfig.json

@@ -25,6 +25,6 @@
  "@/*": ["src/*"]
  }
  },
- "include": ["src", "public"],
+ "include": ["src", "public", "e2e"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }