From e381aec48e1938e341ba581870174f6bc79039d2 Mon Sep 17 00:00:00 2001
From: Geoff Rich <4992896+geoffrich@users.noreply.github.com>
Date: Sun, 30 Oct 2022 21:53:12 -0700
Subject: [PATCH] test: add E2E tests with Playwright (#95)
---
...tatic-web-apps-polite-desert-00b80111e.yml | 24 +++
.github/workflows/test.yml | 2 +-
demo/package-lock.json | 148 ++++++++++--------
demo/package.json | 4 +-
demo/playwright.config.js | 11 ++
demo/src/routes/Header.svelte | 8 +-
demo/src/routes/sverdle/+page.svelte | 18 ++-
.../routes/sverdle/how-to-play/+page.svelte | 7 +-
demo/tests/test.js | 17 ++
package-lock.json | 2 +-
10 files changed, 170 insertions(+), 71 deletions(-)
create mode 100644 demo/playwright.config.js
create mode 100644 demo/tests/test.js
diff --git a/.github/workflows/azure-static-web-apps-polite-desert-00b80111e.yml b/.github/workflows/azure-static-web-apps-polite-desert-00b80111e.yml
index 8f61be3..8f8bdb1 100644
--- a/.github/workflows/azure-static-web-apps-polite-desert-00b80111e.yml
+++ b/.github/workflows/azure-static-web-apps-polite-desert-00b80111e.yml
@@ -44,6 +44,30 @@ jobs:
api_location: 'demo/api' # Api source code path - optional
output_location: 'build/static' # Built app content directory - optional
###### End of Repository/Build Configurations ######
+ outputs:
+ preview_url: ${{ steps.builddeploy.outputs.static_web_app_url }}
+ test:
+ needs: build_and_deploy_job
+ if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+ name: Run E2E Tests
+ timeout-minutes: 10
+ runs-on: ubuntu-latest
+ defaults:
+ run:
+ working-directory: demo
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v2
+ with:
+ node-version: '16.x'
+ - name: Install dependencies
+ run: npm ci
+ - name: Install Playwright
+ run: npx playwright install --with-deps
+ - name: Run Playwright tests
+ run: npm test
+ env:
+ PLAYWRIGHT_TEST_BASE_URL: ${{ needs.build_and_deploy_job.outputs.preview_url }}
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 80e9b2f..018d0c9 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -7,7 +7,7 @@ on:
branches: [main]
jobs:
- build:
+ test:
runs-on: ubuntu-latest
steps:
diff --git a/demo/package-lock.json b/demo/package-lock.json
index 86bfede..913897e 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -1,15 +1,16 @@
{
- "name": "demo",
- "version": "0.0.1",
+ "name": "sveltekit-azure-swa-demo",
+ "version": "0.1.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
- "name": "demo",
- "version": "0.0.1",
+ "name": "sveltekit-azure-swa-demo",
+ "version": "0.1.0",
"devDependencies": {
"@fontsource/fira-mono": "^4.5.0",
"@neoconfetti/svelte": "^1.0.0",
+ "@playwright/test": "^1.25.0",
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"@types/cookie": "^0.5.1",
@@ -25,18 +26,21 @@
}
},
"..": {
- "version": "0.10.0",
+ "version": "0.11.0",
"dev": true,
"license": "MIT",
"dependencies": {
- "esbuild": "^0.15.7"
+ "esbuild": "^0.15.7",
+ "set-cookie-parser": "^2.5.1"
},
"devDependencies": {
"@azure/functions": "^1.2.3",
"@sveltejs/kit": "^1.0.0-next.395",
"@types/node": "^17.0.5",
+ "@types/set-cookie-parser": "^2.4.2",
"@vitest/coverage-c8": "^0.23.4",
"prettier": "^2.4.1",
+ "typescript": "~4.8.4",
"vitest": "^0.23.4"
},
"peerDependencies": {
@@ -179,25 +183,28 @@
"node": ">= 8"
}
},
- "node_modules/@polka/url": {
- "version": "1.0.0-next.21",
- "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
- "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
- "dev": true
- },
- "node_modules/@rollup/pluginutils": {
- "version": "4.2.1",
- "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
- "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+ "node_modules/@playwright/test": {
+ "version": "1.27.1",
+ "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.27.1.tgz",
+ "integrity": "sha512-mrL2q0an/7tVqniQQF6RBL2saskjljXzqNcCOVMUjRIgE6Y38nCNaP+Dc2FBW06bcpD3tqIws/HT9qiMHbNU0A==",
"dev": true,
"dependencies": {
- "estree-walker": "^2.0.1",
- "picomatch": "^2.2.2"
+ "@types/node": "*",
+ "playwright-core": "1.27.1"
+ },
+ "bin": {
+ "playwright": "cli.js"
},
"engines": {
- "node": ">= 8.0.0"
+ "node": ">=14"
}
},
+ "node_modules/@polka/url": {
+ "version": "1.0.0-next.21",
+ "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
+ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
+ "dev": true
+ },
"node_modules/@sveltejs/adapter-auto": {
"version": "1.0.0-next.80",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.80.tgz",
@@ -242,13 +249,13 @@
}
},
"node_modules/@sveltejs/kit": {
- "version": "1.0.0-next.510",
- "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.510.tgz",
- "integrity": "sha512-i96sRqEzNP1dOaQQ2aR38H6emdQJhc1qr5KqNyjqi3Wb0sDAG49cQxMRUOdydkVKZkG/o7PvC5qdyblVfalAdA==",
+ "version": "1.0.0-next.528",
+ "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.528.tgz",
+ "integrity": "sha512-zUtXzWU4+EgT9cw5s7laPM6jgLQatGui+pCxUyQzEpMwDAOeNWduYl4bEFCRyfQTSNzQK+nnpkR+e5X+TO8BHA==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
- "@sveltejs/vite-plugin-svelte": "^1.0.5",
+ "@sveltejs/vite-plugin-svelte": "^1.1.0",
"@types/cookie": "^0.5.1",
"cookie": "^0.5.0",
"devalue": "^4.0.0",
@@ -259,7 +266,7 @@
"set-cookie-parser": "^2.4.8",
"sirv": "^2.0.2",
"tiny-glob": "^0.2.9",
- "undici": "^5.11.0"
+ "undici": "5.12.0"
},
"bin": {
"svelte-kit": "svelte-kit.js"
@@ -273,16 +280,15 @@
}
},
"node_modules/@sveltejs/vite-plugin-svelte": {
- "version": "1.0.8",
- "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.8.tgz",
- "integrity": "sha512-1xkVTB4pm6zuign858FzVYE9Fdw9MQBOlxrdd85STV0NvTDmcofcRpcrK+zcIyT8SZ2dseHLu8hvDwzssF6RfA==",
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.1.0.tgz",
+ "integrity": "sha512-cFRfEdztubtj1c/rYh7ArK7XCfFJn6wG6+J8/e9amFsKtEJILovoBrK0/mxt1AjPQg0vaX+fHPKvhx+q8mTPaQ==",
"dev": true,
"dependencies": {
- "@rollup/pluginutils": "^4.2.1",
"debug": "^4.3.4",
"deepmerge": "^4.2.2",
"kleur": "^4.1.5",
- "magic-string": "^0.26.3",
+ "magic-string": "^0.26.7",
"svelte-hmr": "^0.15.0"
},
"engines": {
@@ -1306,9 +1312,9 @@
}
},
"node_modules/magic-string": {
- "version": "0.26.6",
- "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.6.tgz",
- "integrity": "sha512-6d+3bFybzyQFJYSoRsl9ZC0wheze8M1LrQC7tNMRqXR4izUTDOLMd9BtSuExK9iAukFh+s5K0WAhc/dlQ+HKYA==",
+ "version": "0.26.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
+ "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
"dev": true,
"dependencies": {
"sourcemap-codec": "^1.4.8"
@@ -1605,6 +1611,18 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
+ "node_modules/playwright-core": {
+ "version": "1.27.1",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.27.1.tgz",
+ "integrity": "sha512-9EmeXDncC2Pmp/z+teoVYlvmPWUC6ejSSYZUln7YaP89Z6lpAaiaAnqroUt/BoLo8tn7WYShcfaCh+xofZa44Q==",
+ "dev": true,
+ "bin": {
+ "playwright": "cli.js"
+ },
+ "engines": {
+ "node": ">=14"
+ }
+ },
"node_modules/postcss": {
"version": "8.4.17",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.17.tgz",
@@ -2191,9 +2209,9 @@
}
},
"node_modules/undici": {
- "version": "5.11.0",
- "resolved": "https://registry.npmjs.org/undici/-/undici-5.11.0.tgz",
- "integrity": "sha512-oWjWJHzFet0Ow4YZBkyiJwiK5vWqEYoH7BINzJAJOLedZ++JpAlCbUktW2GQ2DS2FpKmxD/JMtWUUWl1BtghGw==",
+ "version": "5.12.0",
+ "resolved": "https://registry.npmjs.org/undici/-/undici-5.12.0.tgz",
+ "integrity": "sha512-zMLamCG62PGjd9HHMpo05bSLvvwWOZgGeiWlN/vlqu3+lRo3elxktVGEyLMX+IO7c2eflLjcW74AlkhEZm15mg==",
"dev": true,
"dependencies": {
"busboy": "^1.6.0"
@@ -2404,22 +2422,22 @@
"fastq": "^1.6.0"
}
},
+ "@playwright/test": {
+ "version": "1.27.1",
+ "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.27.1.tgz",
+ "integrity": "sha512-mrL2q0an/7tVqniQQF6RBL2saskjljXzqNcCOVMUjRIgE6Y38nCNaP+Dc2FBW06bcpD3tqIws/HT9qiMHbNU0A==",
+ "dev": true,
+ "requires": {
+ "@types/node": "*",
+ "playwright-core": "1.27.1"
+ }
+ },
"@polka/url": {
"version": "1.0.0-next.21",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
"dev": true
},
- "@rollup/pluginutils": {
- "version": "4.2.1",
- "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
- "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
- "dev": true,
- "requires": {
- "estree-walker": "^2.0.1",
- "picomatch": "^2.2.2"
- }
- },
"@sveltejs/adapter-auto": {
"version": "1.0.0-next.80",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.80.tgz",
@@ -2464,12 +2482,12 @@
}
},
"@sveltejs/kit": {
- "version": "1.0.0-next.510",
- "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.510.tgz",
- "integrity": "sha512-i96sRqEzNP1dOaQQ2aR38H6emdQJhc1qr5KqNyjqi3Wb0sDAG49cQxMRUOdydkVKZkG/o7PvC5qdyblVfalAdA==",
+ "version": "1.0.0-next.528",
+ "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.528.tgz",
+ "integrity": "sha512-zUtXzWU4+EgT9cw5s7laPM6jgLQatGui+pCxUyQzEpMwDAOeNWduYl4bEFCRyfQTSNzQK+nnpkR+e5X+TO8BHA==",
"dev": true,
"requires": {
- "@sveltejs/vite-plugin-svelte": "^1.0.5",
+ "@sveltejs/vite-plugin-svelte": "^1.1.0",
"@types/cookie": "^0.5.1",
"cookie": "^0.5.0",
"devalue": "^4.0.0",
@@ -2480,20 +2498,19 @@
"set-cookie-parser": "^2.4.8",
"sirv": "^2.0.2",
"tiny-glob": "^0.2.9",
- "undici": "^5.11.0"
+ "undici": "5.12.0"
}
},
"@sveltejs/vite-plugin-svelte": {
- "version": "1.0.8",
- "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.8.tgz",
- "integrity": "sha512-1xkVTB4pm6zuign858FzVYE9Fdw9MQBOlxrdd85STV0NvTDmcofcRpcrK+zcIyT8SZ2dseHLu8hvDwzssF6RfA==",
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.1.0.tgz",
+ "integrity": "sha512-cFRfEdztubtj1c/rYh7ArK7XCfFJn6wG6+J8/e9amFsKtEJILovoBrK0/mxt1AjPQg0vaX+fHPKvhx+q8mTPaQ==",
"dev": true,
"requires": {
- "@rollup/pluginutils": "^4.2.1",
"debug": "^4.3.4",
"deepmerge": "^4.2.2",
"kleur": "^4.1.5",
- "magic-string": "^0.26.3",
+ "magic-string": "^0.26.7",
"svelte-hmr": "^0.15.0"
}
},
@@ -3179,9 +3196,9 @@
}
},
"magic-string": {
- "version": "0.26.6",
- "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.6.tgz",
- "integrity": "sha512-6d+3bFybzyQFJYSoRsl9ZC0wheze8M1LrQC7tNMRqXR4izUTDOLMd9BtSuExK9iAukFh+s5K0WAhc/dlQ+HKYA==",
+ "version": "0.26.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
+ "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
"dev": true,
"requires": {
"sourcemap-codec": "^1.4.8"
@@ -3389,6 +3406,12 @@
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true
},
+ "playwright-core": {
+ "version": "1.27.1",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.27.1.tgz",
+ "integrity": "sha512-9EmeXDncC2Pmp/z+teoVYlvmPWUC6ejSSYZUln7YaP89Z6lpAaiaAnqroUt/BoLo8tn7WYShcfaCh+xofZa44Q==",
+ "dev": true
+ },
"postcss": {
"version": "8.4.17",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.17.tgz",
@@ -3661,9 +3684,12 @@
"@azure/functions": "^1.2.3",
"@sveltejs/kit": "^1.0.0-next.395",
"@types/node": "^17.0.5",
+ "@types/set-cookie-parser": "^2.4.2",
"@vitest/coverage-c8": "^0.23.4",
"esbuild": "^0.15.7",
"prettier": "^2.4.1",
+ "set-cookie-parser": "^2.5.1",
+ "typescript": "~4.8.4",
"vitest": "^0.23.4"
}
},
@@ -3775,9 +3801,9 @@
"dev": true
},
"undici": {
- "version": "5.11.0",
- "resolved": "https://registry.npmjs.org/undici/-/undici-5.11.0.tgz",
- "integrity": "sha512-oWjWJHzFet0Ow4YZBkyiJwiK5vWqEYoH7BINzJAJOLedZ++JpAlCbUktW2GQ2DS2FpKmxD/JMtWUUWl1BtghGw==",
+ "version": "5.12.0",
+ "resolved": "https://registry.npmjs.org/undici/-/undici-5.12.0.tgz",
+ "integrity": "sha512-zMLamCG62PGjd9HHMpo05bSLvvwWOZgGeiWlN/vlqu3+lRo3elxktVGEyLMX+IO7c2eflLjcW74AlkhEZm15mg==",
"dev": true,
"requires": {
"busboy": "^1.6.0"
diff --git a/demo/package.json b/demo/package.json
index b8cbc7d..ccab660 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -7,7 +7,8 @@
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+ "test": "playwright test"
},
"engines": {
"npm": ">=8.7.0 < 9",
@@ -16,6 +17,7 @@
"devDependencies": {
"@fontsource/fira-mono": "^4.5.0",
"@neoconfetti/svelte": "^1.0.0",
+ "@playwright/test": "^1.25.0",
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"@types/cookie": "^0.5.1",
diff --git a/demo/playwright.config.js b/demo/playwright.config.js
new file mode 100644
index 0000000..9abc75b
--- /dev/null
+++ b/demo/playwright.config.js
@@ -0,0 +1,11 @@
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+ webServer: process.env.CI
+ ? undefined
+ : {
+ command: 'npm run build && npm run preview',
+ port: 4173
+ }
+};
+
+export default config;
diff --git a/demo/src/routes/Header.svelte b/demo/src/routes/Header.svelte
index db29882..368b721 100644
--- a/demo/src/routes/Header.svelte
+++ b/demo/src/routes/Header.svelte
@@ -16,13 +16,13 @@