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

@@ -29,12 +29,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/

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");
+});