feat: add test

.github/workflows/build.yml → .github/workflows/base.yml

@@ -1,14 +1,11 @@
-name: Build
+name: Reusable
 
 on:
-  push:
-    branches:
-      - main
-  pull_request:
-    types:
-      - opened
-      - reopened
-  workflow_dispatch:
+  workflow_call:
+    inputs:
+      action:
+        required: true
+        type: string
 
 env:
   CLICKHOUSE_HOST: http://localhost:8123
@@ -17,11 +14,10 @@ env:
 
 permissions:
   contents: read
-  pages: write
   id-token: write
 
 jobs:
-  build:
+  job:
     runs-on: ubuntu-latest
     services:
       clickhouse:
@@ -60,5 +56,10 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
-      - name: Build Next.js
+      - name: Test App
+        if: ${{ inputs.action == 'test' }}
+        run: yarn e2e:headless
+
+      - name: Build App
+        if: ${{ inputs.action == 'build' }}
         run: yarn build

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: Build and Test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types:
+      - opened
+      - reopened
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  build:
+    uses: ./.github/workflows/base.yml
+    with:
+      action: build
+
+  test:
+    uses: ./.github/workflows/base.yml
+    with:
+      action: test

cypress.config.ts

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

cypress/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:cypress/recommended"]
+}

cypress/cypress.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  defaultCommandTimeout: 15000,
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+  },
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack',
+    },
+  },
+})

cypress/e2e/navigation.cy.js

@@ -0,0 +1,32 @@
+describe('Navigation', () => {
+  it('should navigate to the running queries page', () => {
+    // Start from the index page
+    cy.visit('http://localhost:3000/')
+
+    // Find a link with an href attribute containing "running-queries" and click it
+    cy.get('a[href*="running-queries"]').click()
+
+    // The new url should include "/running-queries"
+    cy.url().should('include', '/running-queries')
+
+    // The new page should contain an h1
+    cy.get('h1').contains('running queries', { matchCase: false })
+  })
+
+  it('should navigate to the settings page', () => {
+    // Start from the index page
+    cy.visit('http://localhost:3000/')
+
+    // Find a link with an href attribute containing "settings" and click it
+    cy.get('a[href*="settings"]').click()
+
+    // The new url should include "/settings"
+    cy.url().should('include', '/settings')
+
+    // The new page should contain an h1
+    cy.get('h1').contains('settings', { matchCase: false })
+
+    // The page should contains a table
+    cy.get('table').should('exist')
+  })
+})

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,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.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,17 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "es5",
+    "lib": [
+      "es5",
+      "dom"
+    ],
+    "types": [
+      "cypress",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}

package.json

@@ -7,6 +7,11 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "e2e:edit": "start-server-and-test dev http://localhost:3000 \"cypress open\"",
+    "e2e": "start-server-and-test dev http://localhost:3000 \"cypress open --e2e\"",
+    "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e --headless\"",
+    "component": "cypress open --component",
+    "component:headless": "cypress run --component",
     "fmt": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache"
   },
   "dependencies": {
@@ -43,14 +48,17 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "cypress": "^13.5.1",
     "eslint": "^8",
     "eslint-config-next": "14.0.2",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-tailwindcss": "^3.13.0",
     "postcss": "^8",
     "prettier": "^3.1.0",
+    "start-server-and-test": "^2.0.3",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -20,9 +24,26 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "cypress.config.ts",
+    "cypress"
+  ],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "ESNext",
+      "moduleResolution": "Node"
+    }
+  }
 }