Configure Cypress for local UI testing (#8)

.eslintrc.json

@@ -4,7 +4,8 @@
     "airbnb",
     "prettier",
     "next",
-    "next/core-web-vitals"
+    "next/core-web-vitals",
+    "plugin:cypress/recommended"
   ],
   "plugins": [
     "prettier",

cypress.config.ts

@@ -0,0 +1,17 @@
+import { loadEnvConfig } from '@next/env';
+import { defineConfig } from 'cypress';
+
+const { combinedEnv } = loadEnvConfig(process.cwd());
+export default defineConfig({
+  env: combinedEnv,
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    retries: {
+      runMode: 3,
+    },
+    viewportHeight: 1080,
+    viewportWidth: 1920,
+    video: false,
+    screenshotOnRunFailure: false,
+  },
+});

cypress/e2e/pages/auth/login.cy.ts

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+
+describe('Login Page', () => {
+  beforeEach(() => {
+    cy.visit('/login');
+  });
+
+  it('Can login with valid credentials', () => {
+    cy.fixture('accounts').then(accounts => {
+      const { admin } = accounts;
+      cy.get('input[name="email"]').type(admin.username);
+      cy.get('input[name="password"]').type(admin.password);
+      cy.contains('Sign In').click();
+
+      cy.location().should(loc => {
+        expect(loc.pathname).to.eq('/');
+      });
+    });
+  });
+});

cypress/fixtures/accounts.json

@@ -0,0 +1,6 @@
+{
+  "admin": {
+    "username": "[email protected]",
+    "password": "password"
+  }
+}

cypress/support/commands.ts

@@ -0,0 +1 @@
+export {};

cypress/support/e2e.ts

@@ -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/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "es5",
+      "dom"
+    ],
+    "types": [
+      "cypress",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}

package.json

@@ -18,16 +18,20 @@
     "dev": "yarn type-css & yarn lint && next dev",
     "build": "next build",
     "start": "next start",
-    "prod": "yarn type-css && yarn lint && next build && next start"
+    "prod": "yarn type-css && yarn lint && next build && next start",
+    "test": "yarn cypress run",
+    "test:ui": "yarn cypress open"
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.11.6",
+    "@next/env": "^13.2.4",
     "@svgr/webpack": "^6.5.1",
     "axios": "^1.1.3",
     "axios-middleware": "^0.3.1",
     "cookies-next": "^2.1.1",
+    "cypress": "^12.9.0",
     "lodash": "^4.17.21",
     "next": "^13.2.5-canary.30",
     "next-themes": "^0.2.1",
@@ -52,6 +56,7 @@
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-next": "12.3.1",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-cypress": "^2.13.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsdoc": "^39.3.13",
     "eslint-plugin-node": "^11.1.0",