Merge pull request #31 from UtrechtUniversity/dev

V1 Alpha ResearchConnect

.github/actions/setup-node/action.yml

@@ -0,0 +1,22 @@
+name: 'Setup Node.js Environment'
+description: 'Sets up Node.js and installs dependencies with caching and cleanup'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: 20.17.0
+        cache: 'npm'
+
+    - name: Clean npm cache and node_modules
+      run: |
+        rm -rf node_modules
+        rm -rf ~/.npm
+        rm -rf node_modules/.cache/babel-loader
+      shell: bash
+
+    - name: Install dependencies
+      run: npm ci
+      shell: bash

.github/workflows/CI_CD.yml

@@ -0,0 +1,74 @@
+name: CI_CD
+
+on:
+  push:
+    branches: [main, dev]
+  pull_request:
+    branches: [main, dev]
+
+jobs:
+  build:
+    name: Build Project
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js Environment
+        uses: ./.github/actions/setup-node
+
+      - name: Build project
+        run: npm run build
+
+  unit-tests:
+    name: Run Unit Tests
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js Environment
+        uses: ./.github/actions/setup-node
+
+      - name: Run Jest Unit Tests
+        run: npm test -- --ci --testPathPattern ".*\\.unit\\.test\\.tsx$"
+
+  integration-tests:
+    name: Run Integration Tests
+    runs-on: ubuntu-latest
+    needs: unit-tests
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js Environment
+        uses: ./.github/actions/setup-node
+
+      - name: Run Jest Integration Tests
+        run: npm test -- --ci --testPathPattern ".*\\.integration\\.test\\.tsx$"
+
+  cypress-tests:
+    name: Run Cypress Tests
+    runs-on: ubuntu-latest
+    needs: integration-tests
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js Environment
+        uses: ./.github/actions/setup-node
+
+      - name: Start application
+        run: |
+          npm start &
+          npx wait-on http://localhost:3000
+
+      - name: Run Cypress tests
+        uses: cypress-io/github-action@v5
+        with:
+          browser: chrome

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}",
+      "sourceMapPathOverrides": {
+      "webpack:///./*": "${webRoot}/*"
+    }
+  }
+]
+}

Cypress/e2e/dashboard.spec.cy.ts

@@ -0,0 +1,88 @@
+// cypress/e2e/dashboard.cy.ts
+
+describe('Dashboard Page', () => {
+  beforeEach(() => {
+    cy.visit('/dashboard'); // Navigate to the dashboard route
+  });
+
+  it('should display the dashboard correctly', () => {
+    // Verify the dashboard container is visible
+    cy.get('[data-testid="dashboard-container"]').should('be.visible');
+
+    // Check that the Experiments title is displayed
+    cy.get('[data-testid="experiments-title"]').should('contain', 'Experiments');
+
+    // Ensure the filters container is present
+    cy.get('[data-testid="filters-container"]').should('be.visible');
+
+    // Confirm that the experiments table is visible
+    cy.get('[data-testid="experiments-table"]').should('be.visible');
+
+    // Verify that the Add Experiment button is present
+    cy.get('[data-testid="add-experiment-button"]').should('be.visible');
+  });
+
+  it('should load experiments data', () => {
+    // Wait for the loading spinner to disappear
+    cy.get('[data-testid="loading-container"]').should('not.exist');
+
+    // Verify that at least one experiment row is displayed
+    cy.get('[data-testid^="experiment-row-"]').should('have.length.greaterThan', 0);
+  });
+
+  it('should sort experiments by Creator', () => {
+    // Click on the 'Creator' column header to sort
+    cy.contains('th', 'Creator').click();
+
+    // Verify that experiments are sorted by Creator name in ascending order
+    let previousCreator = '';
+    cy.get('[data-testid^="experiment-row-"]').each(($row) => {
+      cy.wrap($row).find('td').eq(4).invoke('text').then((creatorName) => {
+        if (previousCreator) {
+          expect(creatorName.localeCompare(previousCreator)).to.be.gte(0);
+        }
+        previousCreator = creatorName;
+      });
+    });
+  });
+
+  it('should navigate to create experiment page when Add Experiment button is clicked', () => {
+    // Click on the Add Experiment button
+    cy.get('[data-testid="add-experiment-button"]').click();
+
+    // Verify that the URL has changed to the experiment creation page
+    cy.url().should('include', '/experimentcreation');
+  });
+
+  it('should select and deselect experiments using checkboxes', () => {
+    // Select the first experiment
+    cy.get('[data-testid^="experiment-checkbox-"]').first().check();
+
+    // Verify that the checkbox is checked
+    cy.get('[data-testid^="experiment-checkbox-"]').first().should('be.checked');
+
+    // Deselect the first experiment
+    cy.get('[data-testid^="experiment-checkbox-"]').first().uncheck();
+
+    // Verify that the checkbox is unchecked
+    cy.get('[data-testid^="experiment-checkbox-"]').first().should('not.be.checked');
+  });
+
+  it('should select and deselect all experiments using the Select All checkbox', () => {
+    // Click on the Select All checkbox
+    cy.get('[data-testid="select-all-checkbox"]').click();
+
+    // Verify that all experiment checkboxes are checked
+    cy.get('[data-testid^="experiment-checkbox-"]').each(($checkbox) => {
+      cy.wrap($checkbox).should('be.checked');
+    });
+
+    // Click on the Select All checkbox again to deselect
+    cy.get('[data-testid="select-all-checkbox"]').click();
+
+    // Verify that all experiment checkboxes are unchecked
+    cy.get('[data-testid^="experiment-checkbox-"]').each(($checkbox) => {
+      cy.wrap($checkbox).should('not.be.checked');
+    });
+  });
+});

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,12 @@
+/// <reference types="cypress" />
+
+Cypress.Commands.add('authenticate', () => {
+  cy.visit('/login'); // Replace with your application's landing page
+
+  // Set AUTH_TOKEN in localStorage
+  cy.window().then((window: Window) => {
+    window.localStorage.setItem('authToken', Cypress.env('AUTH_TOKEN') as string);
+  });
+
+  cy.reload(); // Reload to apply authentication
+});

Cypress/support/e2e.ts

@@ -0,0 +1,5 @@
+import './commands'
+
+beforeEach(() => {
+  cy.authenticate(); // Custom command to set AUTH_TOKEN and authenticate
+});

Cypress/support/index.d.ts

@@ -0,0 +1,9 @@
+declare namespace Cypress {
+  interface Chainable<Subject = any> {
+    /**
+     * Custom command to authenticate a user by setting AUTH_TOKEN in localStorage.
+     * @example cy.authenticate()
+     */
+    authenticate(): Chainable<void>;
+  }
+}

cypress.config.ts

@@ -0,0 +1,29 @@
+// cypress.config.ts
+
+import { defineConfig } from 'cypress';
+import * as dotenv from 'dotenv';
+import * as fs from 'fs';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    setupNodeEvents(on, config) {
+      // Path to the .env file
+      const envFilePath = './.env';
+
+      // Check if .env file exists
+      if (fs.existsSync(envFilePath)) {
+        // Parse the .env file
+        const envConfig = dotenv.parse(fs.readFileSync(envFilePath));
+
+        // Merge the parsed variables into Cypress config.env
+        config.env = { ...config.env, ...envConfig };
+      }
+
+      // Override with environment variables from process.env (e.g., GitHub Secrets)
+      config.env.AUTH_TOKEN = process.env.AUTH_TOKEN || config.env.AUTH_TOKEN;
+
+      return config;
+    },
+  },
+});

jest.config.js

@@ -0,0 +1,17 @@
+// jest.config.js
+
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jest-environment-jsdom', // Explicitly specify the environment
+  testMatch: ['**/__tests__/**/*.test.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy', // Mock CSS modules
+    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/__mocks__/fileMock.js', // Mock static assets
+  },
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'], // Setup file for additional configurations
+
+  // **Override export conditions to fix MSW module resolution**
+  testEnvironmentOptions: {
+    customExportConditions: [''], // Opt out of the browser export condition
+  },
+};