diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
new file mode 100644
index 0000000..157edc6
--- /dev/null
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+ push:
+ branches: [ main, master ]
+ pull_request:
+ branches: [ main, master ]
+jobs:
+ test:
+ timeout-minutes: 60
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version: 18
+ - name: Install dependencies
+ run: yarn
+ - name: Install Playwright Browsers
+ run: yarn playwright install --with-deps
+ - name: Run Storybook tests
+ run: yarn test-storybook:ci
+ - uses: actions/upload-artifact@v3
+ if: always()
+ with:
+ name: playwright-report
+ path: playwright-report/
+ retention-days: 30
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
new file mode 100644
index 0000000..dfed69c
--- /dev/null
+++ b/.storybook/test-runner.ts
@@ -0,0 +1,29 @@
+import type { TestRunnerConfig } from "@storybook/test-runner";
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+const customSnapshotsDir = `${process.cwd()}/__snapshots__`;
+
+
+const config: TestRunnerConfig = {
+ setup() {
+ expect.extend({ toMatchImageSnapshot });
+ },
+ async postRender(page, context) {
+ // DOM Snapshot
+ const elementHandler = await page.$('#storybook-root');
+ if (elementHandler) {
+ const innerHTML = await elementHandler.innerHTML();
+ expect(innerHTML).toMatchSnapshot();
+ }
+ // Image Snapshop
+ const image = await page.screenshot();
+ expect(image).toMatchImageSnapshot({
+ customSnapshotsDir,
+ customSnapshotIdentifier: context.id,
+ failureThresholdType: 'percent',
+ failureThreshold: 0.002,
+ });
+ },
+};
+
+export default config;
diff --git a/__snapshots__/navbar--default.png b/__snapshots__/navbar--default.png
new file mode 100644
index 0000000..640fa06
Binary files /dev/null and b/__snapshots__/navbar--default.png differ
diff --git a/__snapshots__/navbar--nip-07-exists.png b/__snapshots__/navbar--nip-07-exists.png
new file mode 100644
index 0000000..4dcce3e
Binary files /dev/null and b/__snapshots__/navbar--nip-07-exists.png differ
diff --git a/__snapshots__/navbar--no-nip-07.png b/__snapshots__/navbar--no-nip-07.png
new file mode 100644
index 0000000..6e05587
Binary files /dev/null and b/__snapshots__/navbar--no-nip-07.png differ
diff --git a/package.json b/package.json
index 13db204..490d080 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"storybook": "storybook dev -p 6006",
- "build-storybook": "storybook build"
+ "build-storybook": "storybook build",
+ "test-storybook": "test-storybook",
+ "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --maxWorkers=2\""
},
"devDependencies": {
"@storybook/addon-a11y": "^7.4.5",
@@ -19,12 +21,16 @@
"@storybook/blocks": "^7.4.5",
"@storybook/svelte": "^7.4.5",
"@storybook/sveltekit": "^7.4.5",
+ "@storybook/test-runner": "^0.13.0",
"@storybook/testing-library": "^0.2.1",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-node": "^1.2.3",
"@sveltejs/kit": "^1.5.0",
"@tailwindcss/typography": "^0.5.10",
+ "@types/jest-image-snapshot": "^6.2.1",
+ "@types/node": "^20.8.2",
"autoprefixer": "^10.4.16",
+ "jest-image-snapshot": "^6.2.0",
"postcss": "^8.4.30",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -46,4 +52,4 @@
"resolutions": {
"jackspeak": "2.1.1"
}
-}
\ No newline at end of file
+}
diff --git a/src/lib/components/__snapshots__/Navbar.stories.ts.snap b/src/lib/components/__snapshots__/Navbar.stories.ts.snap
new file mode 100644
index 0000000..cb27b76
--- /dev/null
+++ b/src/lib/components/__snapshots__/Navbar.stories.ts.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navbar Default smoke-test 1`] = `
+
+
+
+
+ git
+
+
+ together
+
+
+ .xyz
+
+
+
+
+
+ Sign up
+
+
+
+
+
+
+
+ git
+
+
+ together
+
+
+ .xyz
+
+
+
+
+
+
+
+
+
+
+ git
+
+
+ together
+
+
+ .xyz
+
+
+
+
+
+ Sign up
+
+
+
+