test(e2e): cypress support typescript (#657)

.github/workflows/end-to-end.yml

@@ -138,7 +138,7 @@ jobs:
           build: npm run build:assets
           start: npx dotenvx run -f cypress/e2e/${{ matrix.e2e_test }}/env.conf --overload -- npm start
           install: false
-          spec: cypress/e2e/${{ matrix.e2e_test }}/index.cy.js
+          spec: cypress/e2e/${{ matrix.e2e_test }}/index.cy.ts
         env:
           NODE_ENV: production
       # Store tests runs in case of failure

cypress.config.js → cypress.config.ts

@@ -1,4 +1,10 @@
-export default {
+//
+
+import { defineConfig } from "cypress";
+
+//
+
+export default defineConfig({
   chromeWebSecurity: false,
   defaultCommandTimeout: 60000,
   pageLoadTimeout: 60000,
@@ -17,4 +23,4 @@ export default {
       return config;
     },
   },
-};
+});

cypress/README.md

@@ -37,7 +37,7 @@ On your host, run the tests
 
 ```bash
 export CYPRESS_MAILSLURP_API_KEY=ask_a_teammate
-npx cypress run --headed --spec "cypress/e2e/redirect_after_session_expiration/index.cy.js"
+npx cypress run --headed --spec "cypress/e2e/redirect_after_session_expiration/index.cy.ts"
 ```
 
 ## About test client used in e2e test

cypress/e2e/join_org_with_trackdechets_domain/index.cy.js → cypress/e2e/join_org_with_trackdechets_domain/index.cy.ts

@@ -1,5 +1,9 @@
 //
 
+import { MatchOptionFieldEnum, MatchOptionShouldEnum } from "mailslurp-client";
+
+//
+
 describe("join organizations", () => {
   before(() => {
     return cy.mailslurp().then((mailslurp) =>
@@ -38,8 +42,8 @@ describe("join organizations", () => {
             {
               matches: [
                 {
-                  field: "SUBJECT",
-                  should: "EQUAL",
+                  field: MatchOptionFieldEnum.SUBJECT,
+                  should: MatchOptionShouldEnum.EQUAL,
                   value: "Votre compte MonComptePro a bien été créé",
                 },
               ],

cypress/e2e/join_org_with_verified_domain/index.cy.js → cypress/e2e/join_org_with_verified_domain/index.cy.ts

@@ -1,29 +1,27 @@
 //
 
+import { MatchOptionFieldEnum, MatchOptionShouldEnum } from "mailslurp-client";
+
+//
+
 describe("join organizations", () => {
   before(() => {
-    return cy
-      .mailslurp()
-      .then((mailslurp) =>
+    return cy.mailslurp().then((mailslurp) =>
+      Promise.all([
         mailslurp.inboxController.deleteAllInboxEmails({
           inboxId: "c6c64542-5601-43e0-b320-b20da72f6edc",
         }),
-      )
-      .then((mailslurp) =>
         mailslurp.inboxController.deleteAllInboxEmails({
           inboxId: "34c5063f-81c0-4d09-9d0b-a7502f844cdf",
         }),
-      )
-      .then((mailslurp) =>
         mailslurp.inboxController.deleteAllInboxEmails({
           inboxId: "04972db5-2c62-460e-8a88-848317acfe34",
         }),
-      )
-      .then((mailslurp) =>
         mailslurp.inboxController.deleteAllInboxEmails({
           inboxId: "869c78e6-196d-4e95-9662-44d25f801b06",
         }),
-      );
+      ]),
+    );
   });
   beforeEach(() => {
     cy.login(
@@ -69,8 +67,8 @@ describe("join organizations", () => {
             {
               matches: [
                 {
-                  field: "SUBJECT",
-                  should: "EQUAL",
+                  field: MatchOptionFieldEnum.SUBJECT,
+                  should: MatchOptionShouldEnum.EQUAL,
                   value: "Votre organisation sur MonComptePro",
                 },
               ],

cypress/e2e/join_with_code_sent_to_official_contact_email/index.cy.js → cypress/e2e/join_with_code_sent_to_official_contact_email/index.cy.ts

@@ -1,6 +1,6 @@
 //
 
-import { getVerificationWordsFromEmail } from "#cypress/support/get-from-email.js";
+import { getVerificationWordsFromEmail } from "#cypress/support/get-from-email";
 
 describe("join organizations", () => {
   before(() => {
@@ -44,7 +44,7 @@ describe("join organizations", () => {
         ),
       )
       // extract the verification code from the email subject
-      .then(getVerificationWordsFromEmail)
+      .then((email) => getVerificationWordsFromEmail(email))
       // fill out the verification form and submit
       .then((code) => {
         cy.get('[name="official_contact_email_verification_token"]').type(code);

cypress/e2e/join_with_code_sent_to_official_educ_nat_contact_email/index.cy.js → cypress/e2e/join_with_code_sent_to_official_educ_nat_contact_email/index.cy.ts

@@ -1,6 +1,6 @@
 //
 
-import { getVerificationWordsFromEmail } from "#cypress/support/get-from-email.js";
+import { getVerificationWordsFromEmail } from "#cypress/support/get-from-email";
 
 describe("join organizations", () => {
   before(() => {

cypress/e2e/join_with_sponsorship/index.cy.js → cypress/e2e/join_with_sponsorship/index.cy.ts

@@ -1,5 +1,9 @@
 //
 
+import { MatchOptionFieldEnum, MatchOptionShouldEnum } from "mailslurp-client";
+
+//
+
 describe("join organizations", () => {
   before(() => {
     cy.mailslurp().then((mailslurp) =>
@@ -129,8 +133,8 @@ describe("join organizations", () => {
           {
             matches: [
               {
-                field: "SUBJECT",
-                should: "EQUAL",
+                field: MatchOptionFieldEnum.SUBJECT,
+                should: MatchOptionShouldEnum.EQUAL,
                 value: "Votre organisation sur MonComptePro",
               },
             ],

cypress/e2e/reset_password/index.cy.js → cypress/e2e/reset_password/index.cy.ts

@@ -49,7 +49,9 @@ describe("sign-in with magic link", () => {
       // extract the connection link from the email subject
       .then((email) => {
         const matches =
-          /.*<a href="([^"]+)" class="r13-r default-button".*/.exec(email.body);
+          /.*<a href="([^"]+)" class="r13-r default-button".*/.exec(
+            email.body ?? "",
+          );
         if (matches && matches.length > 0) {
           return matches[1];
         }

cypress/e2e/set_info_after_account_provisioning/index.cy.js → cypress/e2e/set_info_after_account_provisioning/index.cy.ts

@@ -1,6 +1,6 @@
 //
 
-import { getVerificationCodeFromEmail } from "#cypress/support/get-from-email.js";
+import { getVerificationCodeFromEmail } from "#cypress/support/get-from-email";
 
 describe("set info after account provisioning", () => {
   before(() => {

cypress/e2e/signin_with_email_verification_renewal/index.cy.js → cypress/e2e/signin_with_email_verification_renewal/index.cy.ts

@@ -1,6 +1,6 @@
 //
 
-import { getVerificationCodeFromEmail } from "#cypress/support/get-from-email.js";
+import { getVerificationCodeFromEmail } from "#cypress/support/get-from-email";
 
 describe("sign-in with email verification renewal", () => {
   before(() => {

cypress/e2e/signin_with_magic_link/index.cy.js → cypress/e2e/signin_with_magic_link/index.cy.ts

@@ -3,7 +3,7 @@
 import {
   getMagicLinkFromEmail,
   getVerificationCodeFromEmail,
-} from "#cypress/support/get-from-email.js";
+} from "#cypress/support/get-from-email";
 
 describe("sign-in with magic link", () => {
   before(() => {

cypress/e2e/signup_entreprise_unipersonnelle/index.cy.js → cypress/e2e/signup_entreprise_unipersonnelle/index.cy.ts

@@ -1,6 +1,6 @@
 //
 
-import { getVerificationCodeFromEmail } from "#cypress/support/get-from-email.js";
+import { getVerificationCodeFromEmail } from "#cypress/support/get-from-email";
 
 describe("Signup into new entreprise unipersonnelle", () => {
   before(() => {

cypress/support/a11y/checkA11y.js → cypress/support/a11y/checkA11y.ts

@@ -1,6 +1,11 @@
+//
+
+import type { NodeResult, Result, UnlabelledFrameSelector } from "axe-core";
 import { config as hasPageTitleCheck } from "./checks/has-page-title";
 import { config as pageTitleRule } from "./rules/page-title";
 
+//
+
 /**
  * add custom rules to our axe instance
  *
@@ -23,7 +28,9 @@ const configureAxe = (win) => {
  * - improve both UI logs and console logs
  * - removes default cypress-axe logs that are not as useful as ours
  */
-export const checkA11y = (
+export const checkA11y: Parameters<
+  typeof Cypress.Commands.overwrite<"checkA11y">
+>[1] = (
   originalCheckA11y,
   context,
   options,
@@ -85,7 +92,7 @@ const injectAxeIfNeeded = () => {
  * @param violations array of results returned by Axe
  * @link https://github.com/jonoliver/cypress-axe-demo/blob/after-a11y-fixes/cypress/support/commands.js
  */
-const cypressLog = (violations) => {
+const cypressLog = (violations: Result[]) => {
   violations.forEach((violation) => {
     const targets = violation.nodes.map(({ target }) => target);
     const domElements = Cypress.$(targets.join(","));
@@ -104,10 +111,7 @@ const cypressLog = (violations) => {
       Cypress.log({
         $el: el,
         consoleProps,
-        message: getElementString(
-          el.get(0),
-          Array.isArray(target) ? target[0] : target,
-        ),
+        message: getElementString(el.get(0), target),
         name: "dom element:",
       });
     });
@@ -120,7 +124,7 @@ const cypressLog = (violations) => {
  * @param violations array of results returned by Axe
  * @link https://github.com/component-driven/cypress-axe#in-your-spec-file
  */
-const terminalLog = (violations) => {
+const terminalLog = (violations: Result[]) => {
   if (!violations?.length) {
     return;
   }
@@ -154,12 +158,12 @@ const terminalLog = (violations) => {
  *
  * @param violations array of results returned by Axe
  */
-const displayViolations = (violations) => {
+const displayViolations = (violations: Result[]) => {
   terminalLog(violations);
   cypressLog(violations);
 };
 
-const getTerminalViolationElements = ({ nodes }) => {
+const getTerminalViolationElements = ({ nodes }: { nodes: NodeResult[] }) => {
   const targets = nodes.map(({ target }) => target);
   const domElements = Cypress.$(targets.join(","));
   return domElements
@@ -169,7 +173,10 @@ const getTerminalViolationElements = ({ nodes }) => {
     .get();
 };
 
-const getElementString = (el, defaultSelector) => {
+const getElementString = (
+  el: HTMLElement,
+  defaultSelector: UnlabelledFrameSelector,
+) => {
   const selector = el.id ? `#${el.id}` : defaultSelector;
   if (el.textContent && !["html", "body"].includes(el.tagName.toLowerCase())) {
     let content = el.textContent.replace(/\n/g, " ").trim();

cypress/support/a11y/checks/has-page-title.js → cypress/support/a11y/checks/has-page-title.ts

@@ -18,7 +18,7 @@ const hasPageTitle = (ruleNode, { defaultTitle, win }) => {
   return title !== defaultTitle && title.includes(defaultTitle);
 };
 
-export const config = (defaultTitle, win) => ({
+export const config = (defaultTitle: string, win: Window) => ({
   id: "mcp-has-page-title",
   evaluate: hasPageTitle,
   options: {

cypress/support/a11y/rules/page-title.js → cypress/support/a11y/rules/page-title.ts

@@ -3,7 +3,7 @@
  *
  * @link https://github.com/dequelabs/axe-core/blob/develop/lib/rules/document-title.json
  */
-export const config = (defaultTitle) => ({
+export const config = (defaultTitle: string) => ({
   id: "mcp-page-title",
   impact: "serious",
   selector: "html",

cypress/support/commands.ts

@@ -0,0 +1,33 @@
+//
+
+import { checkA11y } from "./a11y/checkA11y";
+
+//
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      login(email: string, password: string): Chainable<void>;
+    }
+  }
+}
+
+//
+
+Cypress.Commands.overwrite("checkA11y", checkA11y);
+
+Cypress.Commands.add("login", (email, password) => {
+  cy.session([email, password], () => {
+    // Visit the signup page
+    cy.visit(`/users/start-sign-in`);
+
+    // Sign in with the existing inbox
+    cy.get('[name="login"]').type(email);
+    cy.get('[type="submit"]').click();
+
+    cy.get('[name="password"]').type(password);
+    cy.get('[action="/users/sign-in"]  [type="submit"]')
+      .contains("S’identifier")
+      .click();
+  });
+});