From ed31edb3f98c3ef975caf682709fcc29e1126624 Mon Sep 17 00:00:00 2001 From: Jannik Pulfer Date: Wed, 6 Nov 2024 15:55:59 +0100 Subject: [PATCH] Start rewrite of tabbing tests to only test focusable and not whole workflows, limit max parrallel matrix runners to 3 --- .github/workflows/frontend-test-action.yml | 1 + frontend/cypress/e2e/tab.cy.ts | 536 ++---------------- frontend/cypress/e2e/teammanagement.cy.ts | 10 +- .../application-top-bar.component.html | 1 + 4 files changed, 40 insertions(+), 508 deletions(-) diff --git a/.github/workflows/frontend-test-action.yml b/.github/workflows/frontend-test-action.yml index 6df8c94757..3e5d8ab604 100644 --- a/.github/workflows/frontend-test-action.yml +++ b/.github/workflows/frontend-test-action.yml @@ -42,6 +42,7 @@ jobs: runs-on: ubuntu-24.04 strategy: fail-fast: false + max-parallel: 3 matrix: file: ${{ fromJSON(needs.get-e2e-files.outputs.file_list) }} steps: diff --git a/frontend/cypress/e2e/tab.cy.ts b/frontend/cypress/e2e/tab.cy.ts index 0ad47b77f3..02c93be4e8 100644 --- a/frontend/cypress/e2e/tab.cy.ts +++ b/frontend/cypress/e2e/tab.cy.ts @@ -4,521 +4,51 @@ import { onlyOn } from '@cypress/skip-test'; describe('Tab workflow tests', () => { beforeEach(() => { cy.visit('/?quarter=2'); + cy.loginAsUser(users.gl); + onlyOn('chrome'); }); - function openThreeDotMenu() { - cy.get('.objective').first().focus(); - cy.tabForwardUntil('[data-testId="three-dot-menu"]'); - cy.focused().realPress('Enter'); - } - - function openCreateKeyResult() { - cy.get('.objective').first().focus(); - cy.tabForwardUntil('[data-testId="add-keyResult"]'); - cy.focused().contains('Key Result hinzufügen'); - cy.realPress('Enter'); - cy.contains('Key Result erfassen'); - } - - function openCreateObjective() { - cy.contains('Puzzle ITC'); - cy.contains('Teamverwaltung').focus(); - cy.tabForward(); - cy.tabForwardUntil('[data-testId="add-objective"]'); - cy.focused().contains('Objective hinzufügen'); - cy.realPress('Enter'); - cy.contains('Key Results im Anschluss erfassen'); - } - - function closeDialogWithCloseButton() { - cy.tabForward(); - cy.tabForwardUntil('[data-testId="cancel"]'); - cy.realPress('Enter'); - } - function closeDialogWithCross() { - cy.tabBackward(); - cy.realPress('Enter'); + function tabAndCheck(testId: string) { + cy.tabForwardUntil(`[data-testId="${testId}"]`); + cy.focused().should('have.attr', 'data-testId', testId); } - function editInputFields(message: string) { - cy.focused().type('{selectall}{backspace}', { delay: 0 }); - cy.focused().type(message, { delay: 0 }); - } - - function fillInNewKeyResult() { - cy.tabForward(); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); // -> Entspricht Bob Baumeister (Stand 13.11.2023) + it('should be able to tab to header items', () => { + cy.getByTestId('team-management').focus(); + tabAndCheck('hilfe-button'); + tabAndCheck('user-options'); cy.realPress('Enter'); + cy.getByTestId('logout').focused(); + cy.realPress('Escape'); cy.tabForward(); - cy.focused().type('Description!', { delay: 0 }); - cy.tabForward(); - cy.realType('Action point one'); - cy.tabForward(); + cy.focused().contains('GJ'); cy.tabForward(); - cy.realType('Action point two'); cy.tabForward(); cy.tabForward(); - cy.realType('Action point three'); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.focused().contains('Speichern & Neu'); - cy.tabBackward(); - cy.focused().contains('Speichern'); - cy.realPress('Enter'); - } + cy.focused().contains('Alle'); + }); - function openKeyresultDetail() { - cy.get('.objective').first().focus(); - cy.tabForwardUntil('[data-testId="key-result"]'); - cy.focused().contains('Fail'); - cy.focused().contains('Commit'); - cy.focused().contains('Target'); - cy.focused().contains('Stretch'); - cy.focused().contains('Confidence'); - cy.realPress('Enter'); - cy.url().should('include', 'keyresult'); - cy.contains('Check-in erfassen'); - cy.contains('Key Result bearbeiten'); - } + it('should be able to tab to overview items', () => { + cy.getByTestId('team-management').focus(); + tabAndCheck('add-objective'); + tabAndCheck('objective'); + tabAndCheck('three-dot-menu'); + tabAndCheck('key-result'); + tabAndCheck('add-keyResult'); + }); - function openCheckInHistory() { - cy.tabForwardUntil('[data-testId="show-all-checkins"]'); - cy.focused().contains('Alle Check-ins anzeigen'); + it('should be able to tab through objective form', () => { + cy.getByTestId('team-management').focus(); + cy.tabForwardUntil(`[data-testId="add-objective"]`); cy.realPress('Enter'); - cy.contains('Confidence'); - } - - function fillOutOrdinalCheckin(commentary: string) { - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); // -> commentary - editInputFields(commentary); - cy.tabForward(); // -> zone - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.tabForward(); - cy.tabForward(); // -> confidence slider - cy.realPress('ArrowRight'); - } - - function createNewObjectiveWithTab() { - openCreateObjective(); cy.contains('Objective für'); - cy.tabForward(); - cy.focused().type('Objective by Cypress', { delay: 0 }); - cy.tabForward(); - cy.focused().type('Description of Objective...', { delay: 0 }); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.realPress('Enter'); - } - - describe('Tool functionality without data', () => { - beforeEach(() => { - cy.loginAsUser(users.gl); - onlyOn('chrome'); - cy.tabForward(); - }); - - // Header from here - it('Tab to help element and user menu', () => { - cy.focused().contains('Teamverwaltung'); - cy.tabForward(); - cy.focused().contains('Hilfe'); - cy.tabForward(); - cy.focused().contains('Jaya Norris'); - }); - - it('Tab to user menu and log out', () => { - cy.tabForward(); - cy.tabForward(); - cy.focused().contains('Jaya Norris'); - cy.realPress('Enter'); - cy.focused().contains('Logout'); - cy.realPress('Enter'); - }); - - it('Tab to quarter-filter, objective-filter and team-filter', () => { - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.focused().contains('GJ'); - cy.tabForward(); - cy.focused().type('Objective', { delay: 0 }).wait(350); // Decided to try writing since this changes the url. Sadly you can't use contains on placeholders otherwise I would have done that - cy.url().should('include', 'objectiveQuery=objective'); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.focused().contains('Alle'); - cy.realPress('Enter'); - cy.url().should('include', 'teams'); - }); - }); - - describe('Tabbing with data', () => { - beforeEach(() => { - cy.loginAsUser(users.gl); - onlyOn('chrome'); - cy.visit('/?quarter=2'); - }); - - // Overview from here - it('Tab to objective, open detail view and close', () => { - cy.get('.objective').first().focus(); - cy.realPress('Enter'); - cy.url().should('include', 'objective'); - cy.contains('Beschrieb'); - cy.tabForward(); - cy.tabForward(); - cy.focused().contains('Key Result hinzufügen'); - closeDialogWithCross(); - }); - - it('Tab to keyresult, open detail view and close', () => { - cy.get('.key-result').first().focus(); - cy.realPress('Enter'); - cy.url().should('include', 'keyresult'); - cy.contains('Beschrieb'); - cy.contains('Fail'); - cy.contains('Commit'); - cy.contains('Target'); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.focused().contains('Check-in erfassen'); - cy.tabForward(); - cy.focused().contains('Key Result bearbeiten'); - cy.tabBackward(); - cy.tabBackward(); - closeDialogWithCross(); - }); - - it('Edit objective with tab', () => { - openThreeDotMenu(); - cy.focused().contains('Objective bearbeiten'); - cy.realPress('Enter'); - cy.contains('Objective von'); - cy.tabForward(); - cy.tabForward(); - editInputFields('Edited by Cypress'); - cy.tabForward(); - editInputFields('Edited by Cypress too'); - cy.tabForward(); - cy.tabForward(); - cy.realPress('Enter'); - cy.contains('Objective von').should('not.exist'); - cy.contains('Edited by Cypress'); - }); - - it('Duplicate objective with tab', () => { - openThreeDotMenu(); - cy.realPress('ArrowDown'); - cy.focused().contains('Objective duplizieren'); - cy.realPress('Enter'); - cy.contains('Objective von'); - cy.tabForward(); - cy.tabForward(); - editInputFields('Duplicated by Cypress'); - cy.tabForward(); - cy.tabForward(); - cy.focused().contains('GJ'); - cy.realPress('ArrowDown'); - cy.tabForward(); - cy.focused().contains('Speichern'); - cy.realPress('Enter'); - cy.wait(150); - cy.tabBackwardUntil('[data-testId="quarterFilter"]'); - cy.focused().contains('GJ'); - cy.realPress('ArrowDown'); - cy.contains('Duplicated by Cypress'); - }); - - it('Complete objective dialog with tab', () => { - openThreeDotMenu(); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.focused().contains('Objective abschliessen'); - cy.realPress('Enter'); - cy.contains('Objective erreicht'); - cy.contains('Objective nicht erreicht'); - cy.contains('Objective abschliessen'); - cy.tabForward(); - cy.tabForward(); - cy.realPress('Enter'); - cy.tabForward(); - cy.tabForward(); - cy.focused().type('The optional comment', { delay: 0 }); - cy.tabForward(); - cy.realPress('Enter'); - - cy.get('.objective') - .first() - .getByTestId('objective-state') - .should('have.attr', 'src', `assets/icons/successful-icon.svg`); - - openThreeDotMenu(); - cy.focused().contains('Objective wiedereröffnen'); - cy.realPress('Enter'); - }); - - it('Create new objective with tab', () => { - createNewObjectiveWithTab(); - }); - - it('Delete objective with tab', () => { - createNewObjectiveWithTab(); - cy.wait(150); - cy.get('.objective').last().focus(); - cy.tabForwardUntil('[data-testId="three-dot-menu"]'); - cy.focused().realPress('Enter'); - cy.focused().contains('Objective bearbeiten'); - cy.realPress('Enter'); - cy.contains('bearbeiten'); - cy.tabForwardUntil('[data-testId="delete"]'); - cy.focused().contains('Objective Löschen'); - cy.realPress('Enter'); - cy.wait(150); - cy.tabForward(); - cy.contains('Objective löschen'); - cy.focused().contains('Ja'); - cy.realPress('Enter'); - }); - - it('Close create objective with tab', () => { - openCreateObjective(); - closeDialogWithCloseButton(); - openCreateObjective(); - closeDialogWithCross(); - }); - - it('Tab to key result, open detail view and close', () => { - openKeyresultDetail(); - closeDialogWithCross(); - }); - - it('Edit key result with tab', () => { - openKeyresultDetail(); - cy.tabForwardUntil('[data-testId="edit-keyResult"]'); - cy.focused().contains('Key Result bearbeiten'); - cy.realPress('Enter'); - cy.contains('Action Plan'); - cy.tabForward(); - cy.tabForward(); - editInputFields('This has been edited by Cypress'); - cy.tabForwardUntil('[data-testId="descriptionInput"]'); - editInputFields('Description of Cypress'); - cy.tabForwardUntil('[data-testId="submit"]'); - cy.focused().contains('Speichern'); - cy.realPress('Enter'); - cy.contains('Check-in erfassen'); - cy.contains('This has been edited by Cypress'); - }); - - it('Delete key result with tab', () => { - openKeyresultDetail(); - cy.tabForwardUntil('[data-testId="edit-keyResult"]'); - cy.focused().contains('Key Result bearbeiten'); - cy.realPress('Enter'); - cy.contains('Action Plan'); - cy.tabForwardUntil('[data-testId="delete-keyResult"]'); - cy.focused().contains('Key Result löschen'); - cy.realPress('Enter'); - cy.wait(150); - cy.tabForward(); - cy.focused().contains('Ja'); - cy.realPress('Enter'); - cy.wait(150); - cy.contains('This has been edited by Cypress').should('not.exist'); - }); - - it('Create new key result metric with checkin and edit checkin with tab', () => { - // Create keyresult - openCreateKeyResult(); - cy.tabForward(); - cy.tabForward(); - cy.focused().type('KeyResult metric by Cypress', { delay: 0 }); - cy.contains('Einheit'); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); // -> unit - cy.realPress('ArrowDown'); // -> Entspricht "CHF" - cy.tabForward(); // -> baseline - cy.focused().type('0', { delay: 0 }); - cy.tabForward(); // -> stretchgoal - cy.focused().type('10', { delay: 0 }); - fillInNewKeyResult(); - cy.contains('KeyResult metric by Cypress'); - - // Create check-in - cy.getByTestId('keyresult').contains('KeyResult metric by Cypress').click(); - cy.tabForwardUntil('[data-testId="add-check-in"]'); - cy.focused().contains('Check-in erfassen'); - cy.realPress('Enter'); - cy.contains('Confidence'); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); // -> commentary - editInputFields('Check-in by Cypress'); - cy.tabForward(); // -> new value field - editInputFields('5'); - cy.tabForward(); - cy.tabForward(); // -> confidence slider - cy.realPress('ArrowRight'); - cy.tabForward(); - cy.focused().contains('Check-in speichern'); - cy.realPress('Enter'); - cy.contains('Check-in erfassen'); - - // Edit checkin - openCheckInHistory(); - cy.tabForward(); - cy.tabForward(); - cy.realPress('Enter'); - cy.contains('Check-in bearbeiten'); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); // -> commentary - editInputFields('Check-in by Cypress (edited)'); - cy.tabForward(); // -> new value - editInputFields('8'); - cy.tabForward(); - cy.tabForward(); // -> confidence slider - cy.realPress('ArrowRight'); - cy.tabForward(); - cy.focused().contains('Speichern'); - cy.realPress('Enter'); - cy.contains('Check-in History'); - cy.contains('Check-in by Cypress (edited)'); - }); - - xit('Edit actionplan of key result and delete action', () => { - openKeyresultDetail(); - cy.tabForwardUntil('[data-testId="edit-keyResult"]'); - cy.focused().contains('Key Result bearbeiten'); - cy.realPress('Enter'); - cy.tabForwardUntil('[data-testId="add-action-plan-line"]'); - cy.tabBackward(); - cy.realPress('Enter'); - cy.tabForwardUntil('[data-testId="confirmYes"]'); - cy.realPress('Enter'); - cy.tabForward(); - cy.tabForwardUntil('[data-testId="submit"]'); - cy.realPress('Enter'); - }); - - xit('Edit actionplan of key result and change order of actions', () => { - openKeyresultDetail(); - cy.tabForwardUntil('[data-testId="edit-keyResult"]'); - cy.focused().contains('Key Result bearbeiten'); - cy.realPress('Enter'); - cy.tabForwardUntil('[data-testId="add-action-plan-line"]'); - cy.realPress('Enter'); - cy.focused().type('Action 2', { delay: 0 }); - cy.tabForward(); - cy.tabForward(); - cy.realPress('Enter'); - cy.focused().type('Action 1', { delay: 0 }); - cy.realPress('ArrowUp'); - cy.tabForwardUntil('[data-testId="submit"]'); - cy.realPress('Enter'); - }); - - it('Create new key result with new actionplan', () => { - openCreateKeyResult(); - cy.tabForward(); - cy.tabForward(); - cy.focused().type('KeyResult', { delay: 0 }); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.realPress('ArrowDown'); // -> Entspricht "CHF" - cy.tabForward(); - cy.focused().type('0', { delay: 0 }); - cy.tabForward(); - cy.focused().type('10', { delay: 0 }); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.focused().type('Action 1', { delay: 0 }); - cy.tabForward(); - cy.tabForward(); - cy.focused().type('Action 2', { delay: 0 }); - cy.tabForward(); - cy.tabForward(); - cy.focused().type('Action 3', { delay: 0 }); - cy.tabForward(); - cy.tabForward(); - cy.realPress('Enter'); - cy.focused().type('Action 4', { delay: 0 }); - cy.tabForward(); - cy.tabForward(); - cy.tabForward(); - cy.realPress('Enter'); - }); - - it('Create new key result ordinal with checkin and edit checkin with tab', () => { - // Create keyresult - openCreateKeyResult(); - cy.tabForward(); - cy.tabForward(); // -> title - cy.focused().type('KeyResult ordinal by Cypress', { delay: 0 }); - cy.tabForward(); - cy.tabForward(); - cy.realPress('Enter'); // -> switch to ordinal type - cy.contains('Commit Zone'); - cy.tabForward(); - cy.focused().type('Commit Zone', { delay: 0 }); - cy.tabForward(); - cy.focused().type('Target Zone', { delay: 0 }); - cy.tabForward(); - cy.focused().type('Stretch Goal', { delay: 0 }); - fillInNewKeyResult(); - cy.wait(150); - cy.contains('KeyResult ordinal by Cypress'); - - // Create checkin - cy.getByTestId('keyresult').contains('KeyResult ordinal by Cypress').click(); - cy.tabForwardUntil('[data-testId="add-check-in"]'); - cy.focused().contains('Check-in erfassen'); - cy.realPress('Enter'); - cy.contains('Action Plan'); - cy.tabForward(); - fillOutOrdinalCheckin('Check-in by Cypress'); - cy.tabForward(); - cy.focused().contains('Check-in speichern'); - cy.realPress('Enter'); - cy.contains('Check-in erfassen'); - - // Edit checkin - openCheckInHistory(); - cy.tabForward(); - cy.tabForward(); - cy.realPress('Enter'); - cy.contains('Check-in bearbeiten'); - cy.tabForward(); - fillOutOrdinalCheckin('Check-in by Cypress (edited)'); - cy.tabForward(); - cy.focused().contains('Speichern'); - cy.realPress('Enter'); - cy.contains('Check-in History'); - cy.contains('Check-in by Cypress (edited)'); - }); - - it('Close create keyResult with tab', () => { - openCreateKeyResult(); - closeDialogWithCloseButton(); - openCreateKeyResult(); - closeDialogWithCross(); - }); + tabAndCheck('title'); + cy.realType('title', { delay: 0 }); + tabAndCheck('description'); + cy.realType('description', { delay: 0 }); + tabAndCheck('quarterSelect'); + tabAndCheck('safe-draft'); + tabAndCheck('safe'); + tabAndCheck('cancel'); }); }); diff --git a/frontend/cypress/e2e/teammanagement.cy.ts b/frontend/cypress/e2e/teammanagement.cy.ts index 99480326dd..392f4f42ed 100644 --- a/frontend/cypress/e2e/teammanagement.cy.ts +++ b/frontend/cypress/e2e/teammanagement.cy.ts @@ -164,11 +164,11 @@ describe('Team management tests', () => { cy.contains('Angabe benötigt'); cy.contains('E-Mail ungültig'); cy.getByTestId('email-col_2').focus(); - cy.realType('@puzzle.ch'); + cy.realType('@puzzle.ch', { delay: 0 }); cy.contains('E-Mail ungültig').should('not.exist'); cy.contains('E-Mail existiert bereits'); cy.tabBackward(); - cy.realType('Papirer'); + cy.realType('Papirer', { delay: 0 }); cy.contains('Angabe benötigt').should('not.exist'); // delete last entry @@ -407,9 +407,9 @@ function navigateToUser(userName: string) { } function fillOutNewUser(firstname: string, lastname: string, email: string) { - cy.realType(firstname, { delay: 1 }); + cy.realType(firstname, { delay: 0 }); cy.tabForward(); - cy.realType(lastname, { delay: 1 }); + cy.realType(lastname, { delay: 0 }); cy.tabForward(); - cy.realType(email, { delay: 1 }); + cy.realType(email, { delay: 0 }); } diff --git a/frontend/src/app/components/application-top-bar/application-top-bar.component.html b/frontend/src/app/components/application-top-bar/application-top-bar.component.html index 0577a3193a..18f5308c6f 100644 --- a/frontend/src/app/components/application-top-bar/application-top-bar.component.html +++ b/frontend/src/app/components/application-top-bar/application-top-bar.component.html @@ -22,6 +22,7 @@