diff --git a/.gitignore b/.gitignore index 6dbbd72..94da96c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +/coverage /dist /node_modules /test-results diff --git a/README.md b/README.md index 6c7092d..5e2958c 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,7 @@ _Intermediate understanding of the web platform is required to follow through._ - [3.3. Drag & Drop](#33-drag--drop) - [3.4. Animations](#34-animations) - [4. Testing](#4-testing) + - [4.1. Code Coverage](#41-code-coverage) - [5. Assessment](#5-assessment) - [5.1. User Experience](#51-user-experience) - [5.2. Code Quality](#52-code-quality) @@ -533,7 +534,7 @@ Reference: ## 4. Testing -I've implemented one end-to-end test and one unit test +I've implemented some end-to-end and unit tests using [Playwright](https://playwright.dev/). This was straightforward besides small details like the `*.mjs` extension and the fact that you cannot use named imports when importing from @@ -543,10 +544,12 @@ There's a lot more to explore here, but it's not much different from testing other frontend stacks. It's actually simpler as there was zero configuration and just one dependency. -However, it's currently lacking code coverage. Playwright provides some -[code coverage facilities](https://playwright.dev/docs/api/class-coverage) -but it's not straight-forward to produce a standard LCOV report from that, -and it would probably be difficult to unify end-to-end and unit test coverage. +Reference: + +- [addItem.test.mjs](./test/e2e/addItem.test.mjs) +- [util.test.mjs](./test/unit/util.test.mjs) + +--- To run the tests, you'll need a running web server, e.g. through @@ -557,15 +560,29 @@ To run the tests, you'll need a running web server, e.g. through Then, to run the tests: -- `npm test` for headless tests +- `npm run test` for headless tests - `npm run test-ui` for interactive mode -The commands might ask you to install Playwright; just the follow instructions. +The commands might ask you to install Playwright; just follow the instructions. + +### 4.1. Code Coverage + +I was able to set up code coverage (at least for end-to-end tests) via +[Playwright's code coverage feature](https://playwright.dev/docs/api/class-coverage) +and [c8](https://github.com/bcoe/c8). +This introduced another dependency and was slightly more involved to get right, +e.g. mapping localhost URLs to file URLs. + +Use `npm run test-coverage` to run the tests and produce an LCOV test coverage +report in `./coverage`. + +Note that the implementation is specific to the project structure, +(e.g. `/public` as web root and `8080` as port are hard-coded), but hackable. Reference: -- [addItem.test.mjs](./test/e2e/addItem.test.mjs) -- [util.test.mjs](./test/unit/util.test.mjs) +- [test-coverage.sh](./scripts/test-coverage.sh) +- [coverage.mjs](./test/coverage.mjs) ## 5. Assessment @@ -649,6 +666,7 @@ and some opinionated statements based on my experience in the industry. - Low coupling - The result is literally just a bunch of HTML, CSS, and JS files. - Straight-forward, zero-config testing with Playwright + - Including code coverage All source files (HTML, CSS and JS) combine to **under 2400 lines of code**, including comments and empty lines. @@ -697,7 +715,6 @@ would reduce the comparably low code size (see above) even further. continuously monitor regressions with extensive test suites. The cost of browser testing is surely a lot higher when using a vanilla approach. -- No code coverage from tests --- @@ -871,6 +888,7 @@ Feedback is highly appreciated. ### 11/2023 +- Added support for [code coverage](#41-code-coverage) - Added [local development server](#83-local-development-server) with hot reloading - Fixed some visual issues - Updated dependencies diff --git a/package-lock.json b/package-lock.json index 341772b..183e742 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "ISC", "devDependencies": { "@playwright/test": "^1.33.0", + "c8": "^8.0.1", "eslint": "^8.20.0", "eslint-plugin-compat": "^4.0.2", "mime": "^3.0.0", @@ -210,6 +211,12 @@ "node": ">=4" } }, + "node_modules/@bcoe/v8-coverage": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", + "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", + "dev": true + }, "node_modules/@csstools/css-parser-algorithms": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.2.tgz", @@ -385,6 +392,40 @@ "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", "dev": true }, + "node_modules/@istanbuljs/schema": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz", + "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz", + "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", + "dev": true + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.20", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz", + "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, "node_modules/@mdn/browser-compat-data": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.4.0.tgz", @@ -441,6 +482,12 @@ "node": ">=16" } }, + "node_modules/@types/istanbul-lib-coverage": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz", + "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==", + "dev": true + }, "node_modules/@types/minimist": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz", @@ -622,6 +669,41 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/c8": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/c8/-/c8-8.0.1.tgz", + "integrity": "sha512-EINpopxZNH1mETuI0DzRA4MZpAUH+IFiRhnmFD3vFr3vdrgxqi3VfE3KL0AIL+zDq8rC9bZqwM/VDmmoe04y7w==", + "dev": true, + "dependencies": { + "@bcoe/v8-coverage": "^0.2.3", + "@istanbuljs/schema": "^0.1.3", + "find-up": "^5.0.0", + "foreground-child": "^2.0.0", + "istanbul-lib-coverage": "^3.2.0", + "istanbul-lib-report": "^3.0.1", + "istanbul-reports": "^3.1.6", + "rimraf": "^3.0.2", + "test-exclude": "^6.0.0", + "v8-to-istanbul": "^9.0.0", + "yargs": "^17.7.2", + "yargs-parser": "^21.1.1" + }, + "bin": { + "c8": "bin/c8.js" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/c8/node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true, + "engines": { + "node": ">=12" + } + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -709,6 +791,20 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -739,6 +835,12 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true + }, "node_modules/cosmiconfig": { "version": "8.3.6", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", @@ -1242,6 +1344,25 @@ "deprecated": "flatten is deprecated in favor of utility frameworks such as lodash.", "dev": true }, + "node_modules/foreground-child": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz", + "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==", + "dev": true, + "dependencies": { + "cross-spawn": "^7.0.0", + "signal-exit": "^3.0.2" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/foreground-child/node_modules/signal-exit": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", + "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", + "dev": true + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -1271,6 +1392,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "dev": true, + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -1430,6 +1560,12 @@ "node": ">=10" } }, + "node_modules/html-escaper": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", + "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", + "dev": true + }, "node_modules/html-tags": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", @@ -1615,6 +1751,42 @@ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "dev": true }, + "node_modules/istanbul-lib-coverage": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz", + "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-report": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz", + "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==", + "dev": true, + "dependencies": { + "istanbul-lib-coverage": "^3.0.0", + "make-dir": "^4.0.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-reports": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.6.tgz", + "integrity": "sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==", + "dev": true, + "dependencies": { + "html-escaper": "^2.0.0", + "istanbul-lib-report": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -1745,6 +1917,21 @@ "node": ">=10" } }, + "node_modules/make-dir": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz", + "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==", + "dev": true, + "dependencies": { + "semver": "^7.5.3" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/map-obj": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz", @@ -2319,6 +2506,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/require-from-string": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", @@ -2761,6 +2957,20 @@ "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", "dev": true }, + "node_modules/test-exclude": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", + "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==", + "dev": true, + "dependencies": { + "@istanbuljs/schema": "^0.1.2", + "glob": "^7.1.4", + "minimatch": "^3.0.4" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -2866,6 +3076,20 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/v8-to-istanbul": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz", + "integrity": "sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.12", + "@types/istanbul-lib-coverage": "^2.0.1", + "convert-source-map": "^2.0.0" + }, + "engines": { + "node": ">=10.12.0" + } + }, "node_modules/validate-npm-package-license": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", @@ -2891,6 +3115,23 @@ "node": ">= 8" } }, + "node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", @@ -2931,12 +3172,39 @@ } } }, + "node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/yargs-parser": { "version": "20.2.9", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", @@ -2946,6 +3214,15 @@ "node": ">=10" } }, + "node_modules/yargs/node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true, + "engines": { + "node": ">=12" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index 9eb818d..5031d91 100644 --- a/package.json +++ b/package.json @@ -25,13 +25,15 @@ "dev": "node ./dev/server.mjs public", "format": "prettier --write .", "format-check": "prettier --check .", - "lint": "eslint public", + "lint": "eslint public test", "lint-styles": "stylelint public/styles/*", "test": "playwright test", - "test-ui": "playwright test --ui" + "test-ui": "playwright test --ui", + "test-coverage": "bash scripts/test-coverage.sh" }, "devDependencies": { "@playwright/test": "^1.33.0", + "c8": "^8.0.1", "eslint": "^8.20.0", "eslint-plugin-compat": "^4.0.2", "mime": "^3.0.0", diff --git a/scripts/test-coverage.sh b/scripts/test-coverage.sh new file mode 100644 index 0000000..a71dc48 --- /dev/null +++ b/scripts/test-coverage.sh @@ -0,0 +1,4 @@ +set -e +rm -rf coverage +COVERAGE=true playwright test $1 +c8 report --src public --reporter text --reporter lcov diff --git a/test/.eslintrc.json b/test/.eslintrc.json new file mode 100644 index 0000000..c8d8a39 --- /dev/null +++ b/test/.eslintrc.json @@ -0,0 +1,10 @@ +{ + "extends": "../.eslintrc.json", + "env": { + "node": true + }, + "parserOptions": { + "ecmaVersion": 2022, + "sourceType": "module" + } +} diff --git a/test/coverage.mjs b/test/coverage.mjs new file mode 100644 index 0000000..af252ae --- /dev/null +++ b/test/coverage.mjs @@ -0,0 +1,36 @@ +import { randomUUID } from 'crypto'; +import { promises as fs } from 'fs'; +import * as path from 'path'; +import { test } from 'playwright/test'; + +// See also https://playwright.dev/docs/api/class-coverage + +if (process.env.COVERAGE) { + test.beforeEach(async ({ page }) => { + await page.coverage.startJSCoverage(); + }); + + test.afterEach(async ({ page }) => { + const coverage = await page.coverage.stopJSCoverage(); + + const output = { + result: coverage.map((entry) => ({ + ...entry, + url: resolveFileUrl(entry.url), + })), + }; + + await fs.mkdir('coverage/tmp', { recursive: true }); + await fs.writeFile( + `coverage/tmp/coverage-${randomUUID()}.json`, + JSON.stringify(output), + ); + }); +} + +function resolveFileUrl(url) { + return url.replace( + 'http://localhost:8080', + `file://${path.resolve('public')}`, + ); +} diff --git a/test/e2e/addCustomList.test.mjs b/test/e2e/addCustomList.test.mjs index b2a1141..32810d7 100644 --- a/test/e2e/addCustomList.test.mjs +++ b/test/e2e/addCustomList.test.mjs @@ -1,4 +1,5 @@ import { expect, test } from '@playwright/test'; +import '../coverage.mjs'; test('Add custom to-do list', async ({ page }) => { await page.goto('http://localhost:8080'); diff --git a/test/e2e/addItem.test.mjs b/test/e2e/addItem.test.mjs index 8b723b8..152623a 100644 --- a/test/e2e/addItem.test.mjs +++ b/test/e2e/addItem.test.mjs @@ -1,4 +1,5 @@ import { expect, test } from '@playwright/test'; +import '../coverage.mjs'; test("Add item to today's to-do list (Enter)", async ({ page }) => { await page.goto('http://localhost:8080'); diff --git a/test/unit/util.test.mjs b/test/unit/util.test.mjs index 2c3b9f2..fc4143f 100644 --- a/test/unit/util.test.mjs +++ b/test/unit/util.test.mjs @@ -1,5 +1,6 @@ import { expect, test } from '@playwright/test'; import util from '../../public/scripts/util.js'; +import '../coverage.mjs'; test('formatDate', () => { expect(util.formatDate(new Date(0))).toEqual('January 1st 1970');