feat: initial cypress setup

common.config.ts

@@ -0,0 +1,31 @@
+import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
+
+export const CypressE2eCommonConfig = {
+  excludeSpecPattern: "*.ts",
+  testIsolation: true,
+  async setupNodeEvents(
+    on: Cypress.PluginEvents,
+    config: Cypress.PluginConfigOptions
+  ): Promise<Cypress.PluginConfigOptions> {
+    await addCucumberPreprocessorPlugin(on, config);
+    return config;
+  },
+};
+
+export const CypressCommonConfig = {
+  video: true,
+  screenshotOnRunFailure: true,
+  defaultCommandTimeout: 30000,
+  pageLoadTimeout: 150000,
+  requestTimeout: 150000,
+  watchForFileChanges: false,
+  numTestsKeptInMemory: 50,
+  viewportHeight: 900,
+  viewportWidth: 1440,
+  chromeWebSecurity: false,
+  retries: {
+    runMode: 2,
+    openMode: 0,
+  },
+  e2e: CypressE2eCommonConfig,
+};

cypress.config.local.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "cypress";
+import { CypressCommonConfig, CypressE2eCommonConfig } from "./common.config";
+
+export default defineConfig({
+  ...CypressCommonConfig,
+  projectId: "6ipboc",
+  e2e: {
+    ...CypressE2eCommonConfig,
+    specPattern: "cypress/e2e/journeys/**/*.dev.feature",
+    baseUrl: "http://localhost:3000",
+  },
+});

cypress.config.prod.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "cypress";
+import { CypressCommonConfig, CypressE2eCommonConfig } from "./common.config";
+
+export default defineConfig({
+  ...CypressCommonConfig,
+  projectId: "6ipboc",
+  e2e: {
+    ...CypressE2eCommonConfig,
+    specPattern: "cypress/e2e/journeys/**/*.prod.feature",
+    baseUrl: "https://meetthecountries.com",
+  },
+});

cypress/e2e/journeys/navigation/navigation.beta.feature

@@ -0,0 +1,6 @@
+Feature: Platform Navigation
+    @smoke
+    Scenario Outline: Login, navigation ( Track / Plan / Report ) and logout
+        When I perform a full login with user "<userIdentifier>"
+        # Header navigation
+        Then I should see the text "Meet the countries" on header

cypress/e2e/pageDescriptors/homePage.ts

@@ -0,0 +1,10 @@
+export const pageDescriptor = {
+  url: "/track",
+  getTrackLink: () => cy.get("a[href='/track']"),
+  getTitle: () => cy.get("[data-cy='page-header-title']"),
+  getLogoTitle: () => cy.get("h1"),
+  getUsernameInput: () => cy.get("input[name='username']"),
+  getPasswordInput: () => cy.get("input[name='password']"),
+  getFirstSigninButton: () => cy.get("button[class~=_button-login-id]"),
+  getSecondSigninButton: () => cy.get("button[class~=_button-login-password]"),
+};

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,5 @@
+import "@testing-library/cypress/add-commands";
+
+Cypress.Commands.add("ignoreThirdpartyRequests", () => {
+  cy.intercept(/.+sentry.+/, {}); // stubbed, never goes to the server
+});

cypress/support/e2e.ts

@@ -0,0 +1 @@
+import "./commands";

cypress/support/index.d.ts

@@ -0,0 +1,9 @@
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Custom command to select DOM element by data-cy attribute.
+     * @example cy.dataCy('greeting')
+     */
+    ignoreThirdpartyRequests(): Chainable<Element>;
+  }
+}

cypress/support/step_definitions/commonStepDefinitions.ts

@@ -0,0 +1,53 @@
+import { Then, When, Before } from "@badeball/cypress-cucumber-preprocessor";
+import { pageDescriptor as homePageDescriptor } from "../../e2e/pageDescriptors/homePage";
+
+const pages = {
+  Home: homePageDescriptor,
+};
+
+/*
+  RTL descriptors and commands
+*/
+function findByText(text: string) {
+  return cy.findAllByText(new RegExp(text));
+}
+
+function clickOnText(text: string) {
+  return cy.findAllByText(new RegExp(text)).click();
+}
+
+function textPresence(text: string) {
+  findByText(text);
+}
+
+Before(() => {
+  // cy.interceptPageLoad();
+  cy.ignoreThirdpartyRequests();
+});
+
+When("I perform a full login with user {string}", (userIdLiteral: string) => {
+  cy.visit("/");
+
+  pages.Home.getLogoTitle().should("be.visible");
+
+  cy.login(userIdLiteral);
+});
+
+When("I go to url {string}", (url: string) => {
+  cy.visit(url, { failOnStatusCode: false });
+});
+
+When("I go to the {string} page", (pageName: string) => {
+  cy.visit(pages[pageName].url);
+});
+
+When("I login with user {string}", async (userIdLiteral: string) => {
+  cy.login(userIdLiteral);
+});
+
+Then("I should see the text {string}", textPresence);
+
+
+When("I click on the text {string}", (text: string) => {
+  clickOnText(text);
+});

package.json

@@ -12,7 +12,11 @@
     "lint:eslint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
     "lint:ts": "tsc --noEmit",
     "preview": "vite preview",
-    "compile:gql": "graphql-codegen"
+    "compile:gql": "graphql-codegen",
+    "e2e:local": "cypress run --config-file ./cypress.config.local.ts",
+    "e2e:start:local": "cypress open --config-file ./cypress.config.local.ts",
+    "e2e:prod": "cypress run --config-file ./cypress.config.prod.ts",
+    "e2e:start:prod": "cypress open --config-file ./cypress.config.prod.ts"
   },
   "dependencies": {
     "@apollo/client": "^3.9.6",
@@ -42,11 +46,13 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "^20.0.2",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/client-preset": "^4.2.4",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@hookform/devtools": "^4.3.1",
     "@redux-devtools/extension": "^3.3.0",
+    "@testing-library/cypress": "^10.0.1",
     "@types/mapbox-gl": "2.7.20",
     "@types/node": "20.9.2",
     "@types/react": "18.2.19",
@@ -58,6 +64,7 @@
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.18",
+    "cypress": "^13.7.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -77,4 +84,4 @@
     "vite": "5.1.5",
     "vite-tsconfig-paths": "4.3.1"
   }
-}
+}