Add Cypress

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: CI Pipeline
+name: CI
 
 on:
     push:
@@ -97,3 +97,113 @@ jobs:
                   context: .
                   push: false
                   tags: web-ui:test
+
+    cypress-dashboard:
+        name: Cypress - Dashboard
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Build Docker image
+              run: docker build -t web-ui:test .
+
+            - name: Start container
+              run: docker run -d --name webui -p 5173:80 web-ui:test
+
+            - name: Wait for app
+              run: npx wait-on http://localhost:5173
+
+            - name: Run Cypress
+              run: npx cypress run --spec "cypress/e2e/dashboard/**/*.cy.ts"
+
+    cypress-events:
+        name: Cypress - Events
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Build Docker image
+              run: docker build -t web-ui:test .
+
+            - name: Start container
+              run: docker run -d --name webui -p 5173:80 web-ui:test
+
+            - name: Wait for app
+              run: npx wait-on http://localhost:5173
+
+            - name: Run Cypress
+              run: npx cypress run --spec "cypress/e2e/dashboard/**/*.cy.ts"
+
+    cypress-insights:
+        name: Cypress - Insights
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Build Docker image
+              run: docker build -t web-ui:test .
+
+            - name: Start container
+              run: docker run -d --name webui -p 5173:80 web-ui:test
+
+            - name: Wait for app
+              run: npx wait-on http://localhost:5173
+
+            - name: Run Cypress
+              run: npx cypress run --spec "cypress/e2e/dashboard/**/*.cy.ts"
+
+    cypress-organizations:
+        name: Cypress - Organizations
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Build Docker image
+              run: docker build -t web-ui:test .
+
+            - name: Start container
+              run: docker run -d --name webui -p 5173:80 web-ui:test
+
+            - name: Wait for app
+              run: npx wait-on http://localhost:5173
+
+            - name: Run Cypress
+              run: npx cypress run --spec "cypress/e2e/dashboard/**/*.cy.ts"
+
+    cypress-user:
+        name: Cypress - User
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Build Docker image
+              run: docker build -t web-ui:test .
+
+            - name: Start container
+              run: docker run -d --name webui -p 5173:80 web-ui:test
+
+            - name: Wait for app
+              run: npx wait-on http://localhost:5173
+
+            - name: Run Cypress
+              run: npx cypress run --spec "cypress/e2e/dashboard/**/*.cy.ts"

Dockerfile

@@ -7,5 +7,6 @@ RUN npm run build
 
 FROM nginx:stable-alpine
 COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

cypress.config.ts

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

cypress/e2e/dashboard/dashboard.cy.ts

@@ -0,0 +1,7 @@
+describe('Dashboard Page', () => {
+    it('displays the correct main title', () => {
+        cy.visit('localhost:5173');
+
+        cy.get('h1').should('contain', 'My Dashboard');
+    });
+});

cypress/e2e/events/events.cy.ts

@@ -0,0 +1,7 @@
+describe('Event Page', () => {
+    it('displays the correct main title', () => {
+        cy.visit('localhost:5173/events');
+
+        cy.get('h1').should('contain', 'My Events');
+    });
+});

cypress/e2e/insights/insights.cy.ts

@@ -0,0 +1,7 @@
+describe('Insights Page', () => {
+    it('displays the correct main title', () => {
+        cy.visit('localhost:5173/insights');
+
+        cy.get('h1').should('contain', 'Insights');
+    });
+});

cypress/e2e/organizations/organizations.cy.ts

@@ -0,0 +1,7 @@
+describe('Organizations Page', () => {
+    it('displays the correct main title', () => {
+        cy.visit('localhost:5173/organizations');
+
+        cy.get('h1').should('contain', 'My Organizations');
+    });
+});

cypress/e2e/profile/profile.cy.ts

@@ -0,0 +1,7 @@
+describe('Profile Page', () => {
+    it('displays the correct main title', () => {
+        cy.visit('localhost:5173/profile');
+
+        cy.get('h1').should('contain', 'My Profile');
+    });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+    "name": "Using fixtures to represent data",
+    "email": "hello@cypress.io",
+    "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,17 @@
+// ***********************************************************
+// 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';

cypress/tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "types": ["cypress"]
+    },
+    "include": ["**/*.ts"]
+}

eslint.config.js

@@ -6,7 +6,7 @@ import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(['dist', 'cypress.config.ts']),
   {
     files: ['**/*.{ts,tsx}'],
     extends: [

nginx.conf

@@ -0,0 +1,9 @@
+server {
+  listen 80;
+
+  location / {
+    root   /usr/share/nginx/html;
+    index  index.html;
+    try_files $uri /index.html;
+  }
+}