Testing tooling

.github/workflows/ui-development.yml

@@ -0,0 +1,79 @@
+name: UI-Development
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  workflow_dispatch:
+
+jobs:
+  quality-check:
+    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 quality and typing checks
+        run: |
+          cd ui
+          make quality
+
+  precommit-check:
+    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 pre-commit checks
+        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: |
+          cd ui
+          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: |
+          cd ui
+          make test-integration

.gitignore

@@ -178,3 +178,4 @@ cython_debug/
 # Project specific files
 *.json
 *.yaml
+!ui/**/*.json

ui/.eslintignore

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

ui/.eslintrc.json

@@ -0,0 +1,64 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "next",
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "ignorePatterns": [".vscode", "jest.config.js"],
+  "overrides": [
+    {
+      "files": ["*.mjs"],
+      "parser": "espree", // Use the default JavaScript parser for `.mjs` files
+      "parserOptions": {
+        "sourceType": "module"
+      }
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "project": "./tsconfig.json",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "import", "jest", "no-secrets", "react"],
+  "root": true,
+  "rules": {
+    "complexity": ["warn", { "max": 8 }],
+    "curly": ["error", "all"],
+    "import/order": [
+      "error",
+      {
+        "groups": [["builtin", "external", "internal"]],
+        "newlines-between": "always"
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "**/*.test.ts",
+          "**/*.test.tsx",
+          "**/*.d.ts",
+          "**/*.interfaces.ts",
+          "**/*.setup.ts",
+          "**/*.config.js",
+          "**/*.config.mjs"
+        ],
+        "optionalDependencies": false,
+        "peerDependencies": false
+      }
+    ],
+    "no-secrets/no-secrets": ["error", { "additionalRegexes": {}, "ignoreContent": [] }]
+  }
+}

ui/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

ui/.prettierignore

@@ -0,0 +1,6 @@
+/node_modules
+.vscode
+/bin
+/build
+/public
+/.meta

ui/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

ui/DEVELOPING.md

@@ -0,0 +1,33 @@
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+#### `npm run build`
+
+Builds the app for production to the `out` folder.\
+
+#### `make test-unit`
+
+Run unit test once on your local terminal.
+
+#### `make test-integration`
+
+Run integration test once on your local terminal.
+
+#### `npx cypress run --headless`
+
+Run end to end tests against localhost:3000
+
+#### `make style`
+
+Fix code styling issues.
+
+#### `make quality`
+
+Run quality eslint quality checks.

ui/Makefile

@@ -0,0 +1,28 @@
+CHECKDIRS := src
+
+
+# Run checks on all files for the repo
+quality:
+	@echo "Running quality checks";
+	@# Run eslint checks
+	npx eslint --max-warnings 10 $(CHECKDIRS)
+	@# Run TypeScript checks
+	npx tsc -p tsconfig.json        --noEmit   # app code
+	npx tsc -p tsconfig.test.json   --noEmit   # unit + integration tests
+	npx tsc -p tsconfig.cypress.json --noEmit 
+
+# Style the code according to accepted standards for the repo
+style:
+	@echo "Running styling";
+	@# Auto fix any eslint issues
+	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/README.md

@@ -0,0 +1 @@
+# GuideLLM UI

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';

ui/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+};
+
+export default nextConfig;