introduce team filter helper

frontend/cypress/e2e/team.cy.ts

@@ -1,4 +1,5 @@
 import * as users from '../fixtures/users.json';
+import FilterHelper from '../support/helper/pom-helper/filterHelper';
 
 describe('OKR team e2e tests', () => {
   describe('tests via click', () => {
@@ -7,60 +8,32 @@ describe('OKR team e2e tests', () => {
       cy.visit('/?quarter=2');
     });
 
-    it('Select teams from filter', () => {
-      cy.get('h1:visible:contains("Puzzle ITC")').should('have.length', 1);
-      cy.get('mat-chip:visible:contains("Puzzle ITC")').should('have.length', 1);
-      cy.get('mat-chip:visible:contains("Alle")').click();
-      cy.contains('Alle');
-      cy.get('h1:visible:contains("/BBT")').should('have.length', 1);
-      cy.get('mat-chip:visible:contains("/BBT")').should('have.length', 1);
-      cy.get('h1:visible:contains("Puzzle ITC")').should('have.length', 1);
-      cy.get('mat-chip:visible:contains("Puzzle ITC")').should('have.length', 1);
-      cy.get('h1:visible:contains("LoremIpsum")').should('have.length', 1);
-      cy.get('mat-chip:visible:contains("LoremIpsum")').should('have.length', 1);
-      cy.get('h1:visible:contains("we are cube")').should('have.length', 1);
-      cy.get('mat-chip:visible:contains("we are cube")').should('have.length', 1);
+    it.only('Should select teams from teamfilter', () => {
+      const filterHelper = FilterHelper.do().optionShouldBeSelected('Puzzle ITC').optionShouldBeSelected('LoremIpsum');
 
-      cy.getByTestId('team-filter-alle').should('have.css', 'background-color').and('eq', 'rgb(30, 90, 150)');
+      filterHelper
+        .toggleOption('Alle')
+        .optionShouldBeSelected('Alle', false)
+        .optionShouldBeSelected('/BBT')
+        .optionShouldBeSelected('Puzzle ITC')
+        .optionShouldBeSelected('LoremIpsum')
+        .optionShouldBeSelected('we are cube');
 
-      cy.get('mat-chip:visible:contains("/BBT")').should('have.css', 'background-color').and('eq', 'rgb(30, 90, 150)');
-
-      cy.get('mat-chip:visible:contains("/BBT")').click();
-      cy.get('h1:visible:contains("/BBT")').should('exist');
-      cy.get('h1:visible:contains("Puzzle ITC")').should('not.exist');
-      cy.get('h1:visible:contains("LoremIpsum")').should('not.exist');
-      cy.get('h1:visible:contains("we are cube")').should('not.exist');
-      cy.get('mat-chip:visible:contains("/BBT")').should('have.css', 'background-color').and('eq', 'rgb(30, 90, 150)');
-      cy.get('mat-chip:visible:contains("Puzzle ITC")')
-        .should('have.css', 'background-color')
-        .and('eq', 'rgb(255, 255, 255)');
-      cy.get('mat-chip:visible:contains("LoremIpsum")')
-        .should('have.css', 'background-color')
-        .and('eq', 'rgb(255, 255, 255)');
-      cy.get('mat-chip:visible:contains("we are cube")')
-        .should('have.css', 'background-color')
-        .and('eq', 'rgb(255, 255, 255)');
-      cy.getByTestId('team-filter-alle').should('have.css', 'background-color').and('eq', 'rgb(255, 255, 255)');
+      filterHelper
+        .toggleOption('/BBT')
+        .optionShouldBeSelected('/BBT')
+        .optionShouldNotBeSelected('Alle')
+        .optionShouldNotBeSelected('Puzzle ITC')
+        .optionShouldNotBeSelected('LoremIpsum')
+        .optionShouldNotBeSelected('we are cube');
 
-      cy.get('mat-chip:visible:contains("Puzzle ITC")').click();
-      cy.get('h1:visible:contains("Puzzle ITC")').should('exist');
-      cy.get('h1:visible:contains("/BBT")').should('exist');
-      cy.get('h1:visible:contains("LoremIpsum")').should('not.exist');
-      cy.get('h1:visible:contains("we are cube")').should('not.exist');
-
-      cy.get('mat-chip:visible:contains("/BBT")').should('have.css', 'background-color').and('eq', 'rgb(30, 90, 150)');
-
-      cy.get('mat-chip:visible:contains("Puzzle ITC")')
-        .should('have.css', 'background-color')
-        .and('eq', 'rgb(30, 90, 150)');
-
-      cy.get('mat-chip:visible:contains("LoremIpsum")')
-        .should('have.css', 'background-color')
-        .and('eq', 'rgb(255, 255, 255)');
-      cy.get('mat-chip:visible:contains("we are cube")')
-        .should('have.css', 'background-color')
-        .and('eq', 'rgb(255, 255, 255)');
-      cy.getByTestId('team-filter-alle').should('have.css', 'background-color').and('eq', 'rgb(255, 255, 255)');
+      filterHelper
+        .toggleOption('Puzzle ITC')
+        .optionShouldBeSelected('/BBT')
+        .optionShouldNotBeSelected('Alle')
+        .optionShouldBeSelected('Puzzle ITC')
+        .optionShouldNotBeSelected('LoremIpsum')
+        .optionShouldNotBeSelected('we are cube');
     });
 
     it('Deselect all teams from filter will display text on overview', () => {

frontend/cypress/e2e/teammanagement.cy.ts

@@ -182,11 +182,9 @@ describe('Team management tests', () => {
           .enterUser('Claudia', 'Meier', 'claudia.meier@test.ch')
           .addAnotherUser()
           .enterUser('Stefan', 'Schmidt', 'stefan.schmidt@test.ch')
-          .getFirstNames();
+          .addAnotherUser()
 
-        cy.tabForward();
-        cy.tabForward();
-        cy.realPress('Enter');
+          .getFirstNames();
 
         // test error messages
         fillOutNewUser('Robin', '', 'papierer');

frontend/cypress/support/helper/pom-helper/filterHelper.ts

@@ -0,0 +1,31 @@
+import { PageObjectMapperBase } from './pageObjectMapperBase';
+
+export default class FilterHelper extends PageObjectMapperBase {
+  validatePage(): void {}
+
+  optionShouldBeSelected(text: string, onOverview = true): this {
+    if (onOverview) {
+      cy.contains('h1:visible', text).should('have.length', 1);
+    }
+    this.getOption(text).should('have.length', 1).should('have.css', 'background-color').and('eq', 'rgb(30, 90, 150)');
+    return this;
+  }
+
+  optionShouldNotBeSelected(text: string): this {
+    cy.contains('h1:visible', text).should('not.exist');
+    this.getOption(text)
+      .should('have.length', 1)
+      .should('have.css', 'background-color')
+      .and('eq', 'rgb(255, 255, 255)');
+    return this;
+  }
+
+  toggleOption(text: string): this {
+    this.getOption(text).click();
+    return this;
+  }
+
+  private getOption(text: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.contains('mat-chip:visible', text);
+  }
+}