Issue #2220: Set up Cypress locally

#2220

.eslintignore

@@ -1,2 +1,34 @@
-/build/**
-/src/__tests__/__setup__/data.json
+# Build outputs
+build/
+dist/
+out/
+.next/
+coverage/
+
+# Dependencies
+node_modules/
+**/node_modules/
+
+# Config files
+*.config.js
+
+# Public assets
+public/
+
+# Cache
+.cache/
+.eslintcache
+
+# Environment files
+.env*
+!.env.example
+
+# Test files (optional, depending on your needs)
+/src/__tests__/__setup__/data.json
+# **/*.test.js
+# **/*.spec.js
+# **/*.cy.js
+
+# Generated files
+*.min.js
+*.bundle.js

.eslintrc.json

@@ -3,13 +3,15 @@
     "browser": true,
     "node": true,
     "es2021": true,
-    "jest/globals": true
+    "jest/globals": true,
+    "cypress/globals": true
   },
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
     "react-app",
-    "plugin:jsx-a11y/recommended"
+    "plugin:jsx-a11y/recommended",
+    "plugin:cypress/recommended"
   ],
   "globals": {
     "process": true
@@ -30,7 +32,7 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["react", "jest", "jsx-a11y"],
+  "plugins": ["react", "jest", "jsx-a11y", "cypress"],
   "rules": {
     // suppress errors for missing 'import React' in files
     "react/react-in-jsx-scope": "off",

.gitignore

@@ -1,37 +1,46 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Production
+build/
+dist/
+out/
+.next/
+coverage/
+
 # dependencies
-/node_modules
-/.pnp
+node_modules/
+.pnp
 .pnp.js
 
-## vscode settings
-/.vscode
+# IDE settings
+.vscode/
+.idea/
 
 # testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+coverage/
+cypress/screenshots
+cypress/videos
+cypress/downloads
+src/__tests__/__setup__/data.json
+
+# Cache and logs
+.cache/
+*.log
+logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-/.gcloudignore
-/app.yaml
-/main.py
-/requirements.txt
+.pnpm-debug.log*
+.eslintcache
+.stylelintcache
 **/__pycache__
-.env
-/src/__tests__/__setup__/data.json
-.idea
 
-venv/*
+# environment variables
+.env*
+
+# Misc
+.DS_Store
+.gcloudignore
+app.yaml
+main.py
+requirements.txt

.prettierignore

@@ -11,13 +11,10 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
 
 npm-debug.log*
 yarn-debug.log*

.prettierrc.json

@@ -1 +1,14 @@
-{}
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "arrowParens": "avoid",
+  "endOfLine": "auto",
+  "bracketSameLine": false
+}

cypress.config.js

@@ -0,0 +1,20 @@
+const { defineConfig } = require("cypress");
+require("dotenv").config({
+  path: `.env.${process.env.STAGE_ENV || "development"}`,
+});
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: process.env.REACT_APP_POLICYENGINE_DOMAIN,
+    supportFile: "cypress/support/e2e.js",
+    specPattern: "cypress/tests/**/*.cy.js",
+  },
+  setupNodeEvents(on, config) {
+    on("task", {
+      log(message) {
+        console.log(message);
+        return null;
+      },
+    });
+  },
+});

cypress/support/commands.js

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tests/us/home.cy.js

@@ -0,0 +1,32 @@
+import { checkCountryRedirect } from "../../utils/checkCountryRedirect";
+
+describe("PolicyEngine Homepage", () => {
+  const regexArg = /the\s(us|u\.s\.|usa|united states)/;
+
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  afterEach(() => {
+    Object.defineProperty(window.navigator, "language", {
+      value: window.navigator.language,
+      configurable: true,
+    });
+  });
+
+  it("should redirect from root to US homepage by default", () => {
+    Object.defineProperty(window.navigator, "language", {
+      value: "",
+      configurable: true,
+    });
+    checkCountryRedirect("us", regexArg);
+  });
+
+  it("should redirect from root to US homepage if browser language is en-US", () => {
+    Object.defineProperty(window.navigator, "language", {
+      value: "en-US",
+      configurable: true,
+    });
+    checkCountryRedirect("us", regexArg);
+  });
+});

cypress/utils/checkCountryRedirect.js

@@ -0,0 +1,12 @@
+export const checkCountryRedirect = (country, regexArg = "") => {
+  cy.location("pathname").should((loc) => {
+    const path = loc.split("/");
+    expect(path[1]).to.equal(country);
+  });
+
+  cy.get("#home-used-by").then(($ele) => {
+    const text = $ele.text()?.toLowerCase();
+    const regex = new RegExp(regexArg, "i");
+    expect(regex.test(text)).to.equal(true);
+  });
+};