introduce angular search box

frontend/cypress/e2e/teammanagement.cy.ts

@@ -145,32 +145,32 @@ describe('Team management tests', () => {
 
     describe('Search', () => {
       it('Search user', () => {
-        teammanagementPage.searchTeam('pa');
-
-        cy.contains('.mat-mdc-autocomplete-panel mat-option', 'Paco Eggimann ([email protected])');
-        cy.contains('.mat-mdc-autocomplete-panel mat-option', 'Paco Egiman ([email protected])');
-        cy.contains('.mat-mdc-autocomplete-panel mat-option', 'Robin Papierer ([email protected])').click();
+        teammanagementPage.elements
+          .teamSearch()
+          .fill('pa')
+          .shouldHaveOption('Paco Eggimann ([email protected])')
+          .shouldHaveOption('Paco Egiman ([email protected])')
+          .selectOption('Robin Papierer ([email protected])');
 
         cy.contains('app-member-detail h2', 'Robin Papierer');
       });
 
       it('Search team', () => {
-        teammanagementPage.searchTeam('we are');
-
-        cy.contains('.mat-mdc-autocomplete-panel mat-option', 'we are cube.³').click();
+        teammanagementPage.elements.teamSearch().fill('we are').selectOption('we are cube.³');
 
         cy.contains('app-member-list h2', 'we are cube.³');
       });
 
       it('Search mixed', () => {
-        teammanagementPage.searchTeam('puz');
-
-        cy.contains('.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label', 'Members');
-        cy.contains('.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label', 'Teams');
-        cy.contains('.mat-mdc-autocomplete-panel mat-option', 'Paco Eggimann ([email protected])');
-        cy.contains('.mat-mdc-autocomplete-panel mat-option', 'Paco Egiman ([email protected])');
-        cy.contains('.mat-mdc-autocomplete-panel mat-option', 'Robin Papierer ([email protected])');
-        cy.contains('.mat-mdc-autocomplete-panel mat-option', 'Puzzle ITC');
+        teammanagementPage.elements
+          .teamSearch()
+          .fill('puz')
+          .shouldHaveLabel('Members')
+          .shouldHaveLabel('Teams')
+          .shouldHaveOption('Paco Eggimann ([email protected])')
+          .shouldHaveOption('Paco Egiman ([email protected])')
+          .shouldHaveOption('Robin Papierer ([email protected])')
+          .shouldHaveOption('Puzzle ITC');
       });
     });
 

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

@@ -0,0 +1,44 @@
+import { PageObjectMapperBase } from './pageObjectMapperBase';
+
+export default class AngularSearchBox extends PageObjectMapperBase {
+  selector: string;
+
+  constructor(selector: string) {
+    super();
+    this.selector = selector;
+    this.validatePage();
+  }
+
+  fill(value: string) {
+    const input = cy.get('input').first();
+    input.clear();
+    input.type(value);
+    return this;
+  }
+
+  shouldHaveOption(option: string) {
+    cy.contains('.mat-mdc-autocomplete-panel mat-option', option);
+    return this;
+  }
+
+  shouldHaveLabel(label: string) {
+    cy.contains('.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label', label);
+    return this;
+  }
+
+  selectOption(option: string) {
+    cy.contains('.mat-mdc-autocomplete-panel mat-option', option).click();
+  }
+
+  getPage() {
+    return cy.get(this.selector);
+  }
+
+  static from(selector: string): AngularSearchBox {
+    return new this(selector);
+  }
+
+  validatePage(): void {
+    this.getPage().should('exist');
+  }
+}

frontend/cypress/support/helper/pom-helper/pages/teammanagementPage.ts

@@ -1,5 +1,6 @@
 import { Page } from './page';
 import TeamDialog from '../dialogs/teamDialog';
+import AngularSearchBox from '../angularSearchBox';
 
 export default class TeammanagementPage extends Page {
   elements = {
@@ -10,13 +11,12 @@ export default class TeammanagementPage extends Page {
     memberHeader: () => cy.get('#member-header'),
     registerMember: () => cy.getByTestId('invite-member'),
     addTeam: () => cy.getByTestId('add-team'),
-    teamSearch: () => cy.get('app-team-management-banner').findByTestId('teamManagementSearch'),
+    teamSearch: () => AngularSearchBox.from('app-team-management-banner [data-testId="teamManagementSearch"]'),
   };
 
   override validatePage() {
     this.elements.teammanagement().contains('Teamverwaltung');
     this.elements.backToOverview().contains('Zurück zur OKR Übersicht');
-    this.elements.teamSearch().should('exist');
     this.elements.addTeam().contains('Team erfassen');
     this.elements.teamMenu().contains('Alle Teams');
     this.elements.memberHeader().contains('Alle Teams');
@@ -42,10 +42,6 @@ export default class TeammanagementPage extends Page {
     return new TeamDialog();
   }
 
-  searchTeam(teamName: string): void {
-    this.elements.teamSearch().type(teamName);
-  }
-
   getURL(): string {
     return 'team-management';
   }