feat: Add e2e tests

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 -   Permissions details in Task I/Os (#280)
+-   Add e2e tests (#273)
 
 ### Changed
 

e2e-tests/cypress.config.ts

@@ -5,10 +5,24 @@ export default defineConfig({
         USERNAME: 'org-1',
         PASSWORD: 'p@sswr0d44',
         BACKEND_API_URL: 'http://substra-backend.org-1.com:8000',
+        DEFAULT_PAGE_SIZE: 30,
     },
+    viewportWidth: 1440,
+    viewportHeight: 900,
     video: false,
     defaultCommandTimeout: 20000,
     e2e: {
+        setupNodeEvents(on) {
+            on('task', {
+                // To see log messages in the terminal during cypress run
+                // cy.task("log", "my message")
+                log(message) {
+                    // eslint-disable-next-line no-console
+                    console.log(message + '\n\n');
+                    return null;
+                },
+            });
+        },
         baseUrl: 'http://substra-frontend.org-1.com:3000',
     },
     retries: {

e2e-tests/cypress/e2e/computePlanDetails.cy.js

@@ -0,0 +1,72 @@
+/// <reference types="Cypress" />
+
+describe('Compute plans page', () => {
+    before(() => {
+        cy.login();
+    });
+
+    beforeEach(() => {
+        cy.visit('/compute_plans');
+        cy.get('tbody[data-cy=loaded]').get('tr').eq(1).click({ force: true });
+    });
+
+    it('navigates to the dedicated compute plan page', () => {
+        cy.url().should('match', /compute_plans\/.{36}\/tasks/);
+    });
+
+    it('adds cp to favorites', () => {
+        cy.getDataCy('favorite-cp').should('not.exist');
+        cy.getDataCy('favorite-box').first().click();
+        cy.getDataCy('favorite-cp').should('exist');
+    });
+
+    it('task drawer shows performance', () => {
+        cy.getDataCy('task-with-performance')
+            .should('have.length.gte', 0)
+            .then(($hits) => {
+                if ($hits.length > 0) {
+                    cy.getDataCy('task-with-performance').first().click();
+                    cy.getDataCy('output-performance').should('exist');
+                }
+            });
+    });
+
+    it('navigates to the Workflow page', () => {
+        cy.getDataCy('Workflow-tab').click({ force: true });
+        cy.url().should('match', /compute_plans\/.{36}\/workflow/);
+        cy.getDataCy('workflow-graph').should('exist');
+    });
+
+    it('navigates to the Detail page', () => {
+        cy.getDataCy('Details-tab').click({ force: true });
+        cy.url().should('match', /compute_plans\/.{36}\/tasks/);
+    });
+
+    it('navigates to the Performance page', () => {
+        cy.getDataCy('Performances-tab').click({ force: true });
+        cy.url().should('match', /compute_plans\/.{36}\/chart/);
+        cy.getDataCy('cp-chart').should('exist');
+    });
+
+    it('clicks on perf card to display perf details', () => {
+        cy.getDataCy('Performances-tab').click({ force: true });
+        cy.getDataCy('perf-list').should('exist');
+        cy.getDataCy('perf-card').first().click();
+        cy.getDataCy('perf-details').should('exist');
+    });
+
+    it('can download perf details as jpeg or csv', () => {
+        cy.getDataCy('Performances-tab').click({ force: true });
+        cy.getDataCy('perf-card').first().click();
+        cy.get('[data-cpkey]')
+            .invoke('data', 'cpkey')
+            .then((key) => {
+                cy.getDataCy('download-button').click();
+                cy.getDataCy('download-as-jpeg').click();
+                cy.checkDownloadedFile(`cp_${key}.jpeg`);
+                cy.getDataCy('download-button').click();
+                cy.getDataCy('download-as-csv').click();
+                cy.checkDownloadedFile(`${key}.csv`);
+            });
+    });
+});

e2e-tests/cypress/e2e/computePlans.cy.js

@@ -12,31 +12,48 @@ describe('Compute plans page', () => {
     it('lists compute plans', () => {
         cy.get('tbody[data-cy=loaded]')
             .get('tr')
-            .should('have.length.greaterThan', 2);
+            .should('have.length.greaterThan', 1);
     });
 
-    it('navigates to the dedicated compute plan page', () => {
-        cy.get('tbody[data-cy=loaded]').get('tr').eq(2).click({ force: true });
-        cy.url().should('match', /compute_plans\/.{36}\/tasks/);
+    it('displays tasks count bar in status/task column', () => {
+        cy.get('tbody[data-cy=loaded]')
+            .get('tr')
+            .eq(1)
+            .within(() => {
+                cy.getDataCy('cp-tasks-status')
+                    .should('exist')
+                    .trigger('mouseover');
+                cy.getDataCy('cp-tasks-status-tooltip').should('be.visible');
+            });
+    });
+
+    it('searches CP with a key', () => {
+        cy.checkSearchByKey('compute_plans');
+    });
+
+    it('adds a cp to favorites', () => {
+        cy.getDataCy('favorite-cp').should('not.exist');
+        cy.getDataCy('favorite-box').first().click();
+        cy.getDataCy('favorite-cp').should('exist');
     });
 
-    it('navigates to the Workflow page', () => {
-        cy.get('tbody[data-cy=loaded]').get('tr').eq(2).click({ force: true });
-        cy.get('[data-cy=Workflow-tab]').click({ force: true });
-        cy.url().should('match', /compute_plans\/.{36}\/workflow/);
-        cy.get('[data-cy=workflow-graph]').should('exist');
+    it('selects/unselects cp in list', () => {
+        cy.getDataCy('selection-popover').should('not.exist');
+        cy.get('[data-cy="selection-box"]>input')
+            .first()
+            .check({ force: true });
+        cy.getDataCy('selection-popover').should('exist');
+        cy.get('[data-cy="selection-box"]>input')
+            .first()
+            .uncheck({ force: true });
+        cy.getDataCy('selection-popover').should('not.exist');
     });
 
-    it('navigates back to the Detail page', () => {
-        cy.get('tbody[data-cy=loaded]').get('tr').eq(2).click({ force: true });
-        cy.get('[data-cy=Details-tab]').click({ force: true });
-        cy.url().should('match', /compute_plans\/.{36}\/tasks/);
+    it('opens filters', () => {
+        cy.checkOpenFilters(1);
     });
 
-    it('navigates to the Performance page', () => {
-        cy.get('tbody[data-cy=loaded]').get('tr').eq(2).click({ force: true });
-        cy.get('[data-cy=Performances-tab]').click({ force: true });
-        cy.url().should('match', /compute_plans\/.{36}\/chart/);
-        cy.get('[data-cy=cp-chart]').should('exist');
+    it('can filter cps by status', () => {
+        cy.checkFilterAssetsBy('status');
     });
 });

e2e-tests/cypress/e2e/datasets.cy.js

@@ -15,8 +15,20 @@ describe('Datasets page', () => {
             .should('have.length.greaterThan', 2);
     });
 
+    it('opens filters', () => {
+        cy.checkOpenFilters(0);
+    });
+
+    it('can filter datasets by owner', () => {
+        cy.checkFilterAssetsBy('owner');
+    });
+
     it('navigates to the dedicated dataset page', () => {
-        cy.get('tbody[data-cy=loaded]').get('tr').eq(2).click({ force: true });
+        cy.get('tbody[data-cy=loaded]').get('tr').eq(1).click({ force: true });
         cy.url().should('match', /datasets\/.{36}/);
     });
+
+    it('searches dataset with a key', () => {
+        cy.checkSearchByKey('datasets');
+    });
 });

e2e-tests/cypress/e2e/functions.cy.js

@@ -15,9 +15,23 @@ describe('Functions page', () => {
             .should('have.length.greaterThan', 2);
     });
 
-    it('displays a function drawer', () => {
-        cy.get('[data-cy=drawer]').should('not.exist');
-        cy.get('tbody[data-cy=loaded]').get('tr').eq(2).click({ force: true });
-        cy.get('[data-cy=drawer]').should('exist');
+    it('functions pagination', () => {
+        cy.paginationTest();
+    });
+
+    it('open filters', () => {
+        cy.checkOpenFilters(0);
+    });
+
+    it('can filter functions by owner', () => {
+        cy.checkFilterAssetsBy('owner');
+    });
+
+    it('display a function drawer', () => {
+        cy.checkOpenDrawer();
+    });
+
+    it('searches function with a key', () => {
+        cy.checkSearchByKey('functions');
     });
 });

e2e-tests/cypress/e2e/menu.cy.js

@@ -5,32 +5,43 @@ describe('Menu tests', () => {
 
     beforeEach(() => {
         cy.visit('/compute_plans');
-        cy.get('[data-cy=menu-button]').click();
+        cy.getDataCy('menu-button').click();
     });
 
     it('help and feedback modal', () => {
-        cy.get('[data-cy=help]').click();
-        cy.get('[data-cy=help-modal]').should('exist');
+        cy.getDataCy('help').click();
+        cy.getDataCy('help-modal').should('exist');
     });
 
     it('about modal', () => {
-        cy.get('[data-cy=about]').click();
-        cy.get('[data-cy=about-modal]').should('exist');
+        cy.getDataCy('about').click();
+        cy.getDataCy('about-modal').should('exist');
     });
 
     it('documentation link', () => {
-        cy.get('[data-cy=documentation]')
+        cy.getDataCy('documentation')
             .should('have.attr', 'href', 'https://docs.substra.org/')
             .should('have.attr', 'target', '_blank');
     });
 
     it('api tokens page', () => {
-        cy.get('[data-cy=api-tokens]').click();
+        cy.getDataCy('api-tokens').click();
         cy.url().should('include', '/manage_tokens');
     });
 
+    it('users management page', () => {
+        cy.get('[data-user-role]')
+            .invoke('data', 'user-role')
+            .then((userRole) => {
+                if (userRole === 'ADMIN') {
+                    cy.getDataCy('users-management').click();
+                    cy.url().should('include', '/users');
+                }
+            });
+    });
+
     it('logout button', () => {
-        cy.get('[data-cy=logout]').click();
+        cy.getDataCy('logout').click();
         cy.url().should('include', '/login');
     });
 });

e2e-tests/cypress/e2e/tasks.cy.js

@@ -15,9 +15,24 @@ describe('Tasks page', () => {
             .should('have.length.greaterThan', 2);
     });
 
+    it('functions pagination', () => {
+        cy.paginationTest();
+    });
+
+    it('opens filters', () => {
+        cy.checkOpenFilters(0);
+    });
+
+    it('can filter tasks by status', () => {
+        cy.checkFilterAssetsBy('status');
+    });
+
     it('displays a task drawer', () => {
-        cy.get('[data-cy=drawer]').should('not.exist');
-        cy.get('tbody[data-cy=loaded]').get('tr').eq(2).click({ force: true });
-        cy.get('[data-cy=drawer]').should('exist');
+        cy.checkOpenDrawer();
+    });
+
+    it('task drawer shows performance', () => {
+        cy.getDataCy('task-with-performance').first().click();
+        cy.getDataCy('output-performance').should('exist');
     });
 });

e2e-tests/cypress/e2e/users.cy.js

@@ -0,0 +1,51 @@
+describe('Users page', () => {
+    before(() => {
+        cy.login();
+    });
+
+    beforeEach(() => {
+        cy.visit('/compute_plans');
+        cy.getDataCy('menu-button').click();
+        cy.get('[data-user-role]')
+            .invoke('data', 'user-role')
+            .then((userRole) => {
+                if (userRole === 'ADMIN') {
+                    cy.visit('/users');
+                }
+            });
+    });
+
+    it('can create user', () => {
+        cy.getDataCy('create-user').click();
+        cy.getDataCy('username-input').type('Test');
+        cy.getDataCy('password-input').type('Azertyuiop123456789$');
+        cy.getDataCy('submit-form').click();
+
+        cy.get('[data-name="Test"]').first().should('exist');
+    });
+
+    it('can update user', () => {
+        cy.get('[data-name="Test"]')
+            .first()
+            .should('exist')
+            .then(($el) => {
+                cy.wrap($el).should('have.data', 'role', 'USER');
+                cy.wrap($el).click();
+            });
+        cy.get('select').eq(0).select('ADMIN');
+        cy.getDataCy('submit-form').click();
+
+        cy.get('[data-name="Test"]')
+            .first()
+            .should(($el) => {
+                expect($el).to.have.data('role', 'ADMIN');
+            });
+    });
+
+    it('can delete user', () => {
+        cy.get('[data-name="Test"]').first().click();
+        cy.getDataCy('delete-user').click();
+        cy.getDataCy('confirm-delete').click();
+        cy.get('[data-name="Test"]').should('not.exist');
+    });
+});