add unit/integration/e2e testing

Author: DaltheCow

.github/workflows/ui-development.yml

@@ -41,3 +41,35 @@ jobs:
         run: |
           cd ui
           npx husky run pre-commit
+
+  unit-tests:
+    permissions:
+      contents: "read"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: |
+          cd ui
+          npm ci
+
+      - name: Run unit tests
+        run: make test-unit
+
+  integration-tests:
+    permissions:
+      contents: "read"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: |
+          cd ui
+          npm ci
+
+      - name: Run integration tests
+        run: make test-integration

ui/.eslintignore

@@ -1,2 +1,3 @@
 node_modules
-.vscode
+.vscode
+cypress.config.ts

ui/.eslintrc.json

@@ -1,7 +1,8 @@
 {
   "env": {
     "browser": true,
-    "es6": true
+    "es6": true,
+    "jest": true
   },
   "extends": [
     "eslint:recommended",
@@ -11,7 +12,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended"
   ],
-  "ignorePatterns": [".vscode"],
+  "ignorePatterns": [".vscode", "jest.config.js"],
   "overrides": [
     {
       "files": ["*.mjs"],
@@ -30,7 +31,7 @@
     "project": "./tsconfig.json",
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "import", "no-secrets", "react"],
+  "plugins": ["@typescript-eslint", "import", "jest", "no-secrets", "react"],
   "root": true,
   "rules": {
     "complexity": ["warn", { "max": 8 }],

ui/Makefile

@@ -13,4 +13,14 @@ quality:
 style:
 	@echo "Running styling";
 	@# Auto fix any eslint issues
-	npx eslint --fix $(CHECKDIRS)
+	npx eslint --fix $(CHECKDIRS)
+
+test-unit:
+	@echo "Running unit tests";
+	@# Run react tests
+	npm run test:unit
+
+test-integration:
+	@echo "Running integration tests";
+	@# Run react tests
+	npm run test:integration

ui/cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

ui/cypress/e2e/homepage.cy.ts

@@ -0,0 +1,6 @@
+describe('Check if text exists on the page', () => {
+  it('should find the text on the page', () => {
+    cy.visit('http://localhost:3000');
+    cy.contains('GuideLLM').should('exist');
+  });
+});

ui/cypress/support/commands.ts

@@ -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>
+//     }
+//   }
+// }

ui/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')

ui/jest.config.js

@@ -0,0 +1,23 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  dir: './',
+});
+
+const customJestConfig = {
+  collectCoverage: false,
+  collectCoverageFrom: ['src'],
+  coverageDirectory: './.meta',
+  coverageReporters: ['json-summary'],
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  testEnvironment: 'jest-environment-jsdom',
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+};
+
+module.exports = createJestConfig(customJestConfig);

ui/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';