feat(test): move from cypress to playwright

.eslintrc.json

@@ -5,7 +5,7 @@
     {
       "files": ["*.ts"],
       "parserOptions": {
-        "project": ["tsconfig.json", "cypress/tsconfig.json"],
+        "project": ["tsconfig.json"],
         "createDefaultProgram": true
       },
       "extends": [
@@ -16,6 +16,13 @@
       "rules": {
         "@typescript-eslint/consistent-type-definitions": "error",
         "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/quotes": [
+          "off",
+          "single",
+          {
+            "allowTemplateLiterals": true
+          }
+        ],
         "@typescript-eslint/explicit-member-accessibility": [
           "off",
           {

.github/workflows/tests.yaml

@@ -16,6 +16,10 @@ jobs:
         run: npm install
       - name: Run lint and spec tests
         run: npm run-script ci:test
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
   e2e-tests:
     runs-on: ubuntu-latest
     # Stop the occasional rogue instance before the 6h GitHub limit
@@ -29,12 +33,13 @@ jobs:
           node-version: 18
       - name: Install everything
         run: npm install
-      - name: Cypress run
-        uses: cypress-io/github-action@v6
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx npm run-script e2e
+      - uses: actions/upload-artifact@v3
+        if: always()
         with:
-          install: false
-          start: |
-            npm start
-          wait-on: "http://localhost:4200/assets/data/fr/v1/options.json"
-          wait-on-timeout: 180
-          command: npm run-script cypress:run
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -7,4 +7,7 @@ projects/word-weaver/src/assets/trim.*
 scripts/poeditor_api_token.txt
 scripts/*.json
 /.angular/cache
-coverage
+coverage
+/test-results/
+/playwright-report/
+/playwright/.cache/

.prettierignore

@@ -1,3 +1,2 @@
-package-lock.json
 dist/word-weaver/
-dist_toy/
+dist_toy/

README.md

@@ -47,11 +47,15 @@ $ npm install
 
 Then, you can create a new repo on GitHub and reset the origin remote to your new repo:
 
-`git remote set-url origin https://github.com/<yourusername>/<yourrepo>`
+```sh
+git remote set-url origin https://github.com/<yourusername>/<yourrepo>
+```
 
 Then, add a new repo and set the url to this:
 
-`git remote add ww https://github.com/roedoejet/wordweaver.git`
+```sh
+git remote add ww https://github.com/roedoejet/wordweaver.git
+```
 
 That way, you can make changes in your repo, push them to your origin, but still pull new changes to the gui using `git pull ww main`
 
@@ -81,6 +85,27 @@ Feel free to dive in! [Open an issue](https://github.com/roedoejet/wordweaver/is
 
 This repo follows the [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/) Code of Conduct.
 
+### Running the test suites
+
+To execute the unit test suites, run:
+
+```
+npm run-script test      # regular mode
+npm run-script ci:test   # alternative, headless mode
+```
+
+To execute the end-to-end test suite, you must first install Playwright by running:
+
+```
+npx playwright install --with-deps
+```
+
+and then you can execute the suite with:
+
+```
+npm run-script e2e
+```
+
 ### Contributors
 
 This project exists thanks to all the people who contribute.

angular.json

@@ -152,53 +152,6 @@
               "projects/word-weaver/**/*.html"
             ]
           }
-        },
-        "cypress-run": {
-          "builder": "@cypress/schematic:cypress",
-          "options": {
-            "devServerTarget": "word-weaver:serve",
-            "configFile": "projects/word-weaver/cypress.config.ts"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "word-weaver:serve:production"
-            }
-          }
-        },
-        "cypress-open": {
-          "builder": "@cypress/schematic:cypress",
-          "options": {
-            "watch": true,
-            "headless": false,
-            "configFile": "projects/word-weaver/cypress.config.ts"
-          }
-        },
-        "ct": {
-          "builder": "@cypress/schematic:cypress",
-          "options": {
-            "devServerTarget": "word-weaver:serve",
-            "watch": true,
-            "headless": false,
-            "testingType": "component"
-          },
-          "configurations": {
-            "development": {
-              "devServerTarget": "word-weaver:serve:development"
-            }
-          }
-        },
-        "e2e": {
-          "builder": "@cypress/schematic:cypress",
-          "options": {
-            "devServerTarget": "word-weaver:serve",
-            "watch": true,
-            "headless": false
-          },
-          "configurations": {
-            "development": {
-              "devServerTarget": "word-weaver:serve:development"
-            }
-          }
         }
       }
     }
@@ -208,7 +161,6 @@
     "analytics": false,
     "schematicCollections": [
       "@angular-eslint/schematics",
-      "@cypress/schematic",
       "@schematics/angular"
     ]
   }

e2e-tests/coverage.spec.ts

@@ -0,0 +1,34 @@
+import { test } from "@playwright/test";
+import { attachCoverageReport } from "monocart-reporter";
+const HOME = "localhost:4200";
+
+test("Take V8 and Istanbul coverage report", async ({ page, browserName }) => {
+  if (browserName === "chromium") {
+    await Promise.all([
+      page.coverage.startJSCoverage({
+        resetOnNavigation: false,
+      }),
+      page.coverage.startCSSCoverage({
+        resetOnNavigation: false,
+      }),
+    ]);
+
+    await page.goto(HOME);
+
+    // delay for mock code execution
+    await new Promise((resolve) => {
+      setTimeout(resolve, 500);
+    });
+
+    const [jsCoverage, cssCoverage] = await Promise.all([
+      page.coverage.stopJSCoverage(),
+      page.coverage.stopCSSCoverage(),
+    ]);
+    await page.close();
+
+    const coverageList = [...jsCoverage, ...cssCoverage];
+
+    const v8 = await attachCoverageReport(coverageList, test.info(), {});
+    console.log(v8.summary);
+  }
+});

e2e-tests/e2e.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from "@playwright/test";
+const HOME = "localhost:4200";
+
+test("has title", async ({ page }) => {
+  await page.goto(HOME);
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/WordWeaver/);
+});
+
+test("navigate to tableviewer", async ({ page }) => {
+  await page.goto(HOME + "/tableviewer");
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.url()).toContain("tableviewer");
+});
+
+test("get started link", async ({ page }) => {
+  await page.goto(HOME);
+
+  // Click the get started link.
+  await page.getByTestId("start").click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.url()).toContain("stepper");
+});