Added a few simple test cases

.github/workflows/e2e-test.yml

@@ -46,16 +46,31 @@ jobs:
           conda install -c conda-forge mamba
           mamba env update --file conda-environment.yml --name base
           pip install -e .
+
+      - name: Cache UI dependencies
+        uses: actions/cache@v2
+        with:
+          path: |
+            ~/.cache/Cypress
+            ui/node_modules
+          key: cache-${{ runner.os }}-${{ hashFiles('ui/package-lock.json') }}
+
+      - name: Install UI dependencies
+        run: npm install --prefix ./ui --legacy-peer-deps
+
       - name: Build UI
-        run: |
-          npm install --prefix ./ui 
-          npm run --prefix ./ui build
+        run: npm run --prefix ./ui build
         env:
           DISABLE_ESLINT_PLUGIN: true
-      - name: Run mxcube backend
-        run: |
-          mxcubeweb-server -r ./test/HardwareObjectsMockup.xml/ --static-folder $(pwd)/ui/build/ -L debug &
-      - name: Cypress run
-        uses: cypress-io/github-action@v5
+
+      - name: Run MXCuBE backend
+        run: mxcubeweb-server -r ./test/HardwareObjectsMockup.xml/ --static-folder $(pwd)/ui/build/ -L debug &
+
+      - name: Run Cypress
+        run: npm run --prefix ./ui e2e
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
         with:
-          working-directory: ./ui
+          name: cypress
+          path: cypress/debug

.github/workflows/format_and_lint_ui.yml

@@ -45,7 +45,7 @@ jobs:
       - name: Install dependencies
         run: |
           pip install -e .
-          npm install --prefix ./ui
+          npm install --prefix ./ui --legacy-peer-deps
 
       - name: Check formatting
         run: npm run --prefix ./ui prettier
@@ -84,7 +84,7 @@ jobs:
       - name: Install dependencies
         run: |
           pip install -e .
-          npm install --prefix ./ui
+          npm install --prefix ./ui --legacy-peer-deps
 
       - name: Lint
         run: npm run --prefix ./ui eslint

docker/docker-entrypoint.sh

@@ -9,7 +9,7 @@ vncserver :1 -geometry 1680x1050 -depth 24 &
 
 cd /opt/mxcube3
 
-npm install
+npm install --legacy-peer-deps
 npm start &
 
 redis-server &

ui/.eslintrc.js

@@ -50,5 +50,15 @@ module.exports = createConfig({
         'jest/require-top-level-describe': 'off', // filename should already be meaningful, extra nesting is unnecessary
       },
     }),
+    {
+      files: ['cypress/**/*.js'],
+      rules: {
+        'testing-library/await-async-query': 'off', // Cypress has its own way of dealing with asynchronicity
+        'testing-library/await-async-utils': 'off', // Cypress has its own way of dealing with asynchronicity
+        'testing-library/prefer-screen-queries': 'off', // Cypress provides `cy` object instead of `screen`
+        'sonarjs/no-duplicate-string': 'off', // incompatible with Cypress testing syntax
+        'unicorn/numeric-separators-style': 'off', // not supported
+      },
+    },
   ],
 });

ui/.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/cypress/debug
 
 # production
 /build

ui/cypress.config.js

@@ -2,8 +2,8 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
+    baseUrl: 'http://localhost:8081',
+    supportFile: 'cypress/support.js',
+    screenshotsFolder: 'cypress/debug',
   },
 });

ui/cypress/e2e/app.cy.js

@@ -1,8 +1,22 @@
+describe('login', () => {
+  it("can't login with invalid credentials", () => {
+    cy.login('idte0', '0000');
+    cy.findByText('Could not authenticate').should('be.visible');
+  });
+
+  it('can login with valid credentials', () => {
+    cy.login();
+    cy.findByRole('link', { name: 'MXCuBE-Web (OSC)' }).should('be.visible');
+  });
+});
+
 describe('app', () => {
-  it('loads the login page', () => {
-    cy.visit('http://localhost:8081');
-    cy.get('input[placeholder*="Login ID"]').should('be.visible');
-    cy.get('input[placeholder*="Password"]').should('be.visible');
-    cy.get('button[type=submit]').should('be.visible');
+  beforeEach(() => {
+    cy.login();
+    cy.findByRole('link', { name: 'MXCuBE-Web (OSC)' }).should('be.visible');
+  });
+
+  it('displays collection page', () => {
+    cy.findByRole('button', { name: /Beamline Actions/u }).should('be.visible');
   });
 });

ui/cypress/support.js

@@ -0,0 +1,9 @@
+import '@testing-library/cypress/add-commands';
+
+Cypress.Commands.add('login', (username = 'idtest0', password = '0000') => {
+  cy.visit('/');
+  cy.findByRole('heading', { name: 'MXCuBE' }).should('be.visible');
+  cy.findByLabelText('Login ID').type(username);
+  cy.findByLabelText('Password').type(password);
+  cy.findByRole('button', { name: 'Sign in' }).click();
+});