Implement keyresult detail page and checkin dialog to rewrite duplica…

…ted scoring tests, adjust methods in page and overview page

frontend/cypress/e2e/duplicated-scoring.cy.ts

@@ -1,50 +1,53 @@
 import * as users from '../fixtures/users.json';
 import { onlyOn } from '@cypress/skip-test';
-import { filterByObjectiveName, getObjectiveColumns } from '../support/helper/objective-helper';
 import CyOverviewPage from '../support/helper/pom-helper/pages/overviewPage';
+import KeyresultDetailPage from '../support/helper/pom-helper/pages/keyresultDetailPage';
 
 describe('e2e test for scoring adjustment on objective duplicate', () => {
   let op = new CyOverviewPage();
+  let keyresultDetailPage = new KeyresultDetailPage();
 
   beforeEach(() => {
     op = new CyOverviewPage();
+    keyresultDetailPage = new KeyresultDetailPage();
     cy.loginAsUser(users.gl);
     onlyOn('chrome');
     cy.visit('/?quarter=2');
   });
 
   it('Create ordinal checkin and validate value of scoring component', () => {
-    op.addKeyresult('Puzzle ITC')
+    op.addKeyresult('Puzzle ITC', 'Wir wollen die Kundenzufriedenheit steigern')
       .fillKeyresultTitle('stretch keyresult for testing')
       .withOrdinalValues('Ex. val', 'Ex. val', 'Ex. val')
       .submit();
 
     cy.contains('stretch keyresult for testing');
-    op.getKeyresultByName('stretch keyresult for testing').click();
-    cy.getByTestId('add-check-in').click();
-    cy.getByTestId(`stretch-radio`).click();
-    cy.getByTestId('confidence-slider').click();
-    cy.realPress('{rightarrow}').realPress('{rightarrow}').realPress('{rightarrow}');
-    cy.getByTestId('changeInfo').click().type('Testveränderungen');
-    cy.getByTestId('initiatives').click().type('Testmassnahmen');
-    cy.getByTestId('submit-check-in').click();
-    cy.getByTestId('close-drawer').click({ force: true });
+    keyresultDetailPage
+      .visit('stretch keyresult for testing')
+      .createCheckIn()
+      .selectOrdinalCheckInZone('stretch')
+      .setCheckInConfidence(8)
+      .fillCheckInCommentary('Testveränderungen')
+      .fillCheckInInitiatives('Testmassnahmen')
+      .submit();
+    keyresultDetailPage.close();
 
-    getObjectiveColumns().first().findByTestId('three-dot-menu').click();
-    op.selectFromThreeDotMenu('Objective duplizieren');
-    cy.fillOutObjective('A duplicated Objective for this tool', 'safe', '3');
+    op.duplicateObjective('Wir wollen die Kundenzufriedenheit steigern')
+      .fillObjectiveTitle('A duplicated Objective for this tool')
+      .selectQuarter('3')
+      .submit();
     cy.visit('/?quarter=3');
 
-    const objective = getObjectiveColumns()
-      .filter(filterByObjectiveName('A duplicated Objective for this tool'))
-      .first();
-    const keyResults = objective.findByTestId('key-result');
-
-    const scoringBlock1 = keyResults.findByTestId('scoring-component');
-
-    let failArea = scoringBlock1.findByTestId('fail');
-
-    failArea.should('not.have.css', 'score-red', 'score-yellow');
-    failArea.should('not.have.css', 'score-green', 'score-stretch');
+    const failArea = op
+      .getKeyresultByName('stretch keyresult for testing')
+      .findByTestId('scoring-component')
+      .findByTestId('fail');
+
+    failArea.should(($fail) => {
+      expect($fail).not.to.have.css('score-red');
+      expect($fail).not.to.have.css('score-yellow');
+      expect($fail).not.to.have.css('score-green');
+      expect($fail).not.to.have.css('score-stretch');
+    });
   });
 });

frontend/cypress/support/helper/pom-helper/dialogs/checkInDialog.ts

@@ -0,0 +1,55 @@
+import Dialog from './dialog';
+
+export default class CheckInDialog extends Dialog {
+  fillCheckInCommentary(commentary: string) {
+    this.fillInputByTestId('changeInfo', commentary);
+    return this;
+  }
+
+  fillMetricCheckInValue(value: string) {
+    this.fillInputByTestId('check-in-metric-value', value);
+    return this;
+  }
+
+  selectOrdinalCheckInZone(zone: 'fail' | 'commit' | 'target' | 'stretch') {
+    switch (zone) {
+      case 'fail':
+        cy.getByTestId('fail-radio').click();
+        break;
+      case 'commit':
+        cy.getByTestId('commit-radio').click();
+        break;
+      case 'target':
+        cy.getByTestId('target-radio').click();
+        break;
+      case 'stretch':
+        cy.getByTestId('stretch-radio').click();
+        break;
+    }
+    return this;
+  }
+
+  fillCheckInInitiatives(value: string) {
+    this.fillInputByTestId('initiatives', value);
+    return this;
+  }
+
+  setCheckInConfidence(confidence: number) {
+    cy.getByTestId('confidence-slider').find('input').focus();
+    for (let i = 0; i < 10; i++) {
+      cy.realPress('ArrowLeft');
+    }
+    for (let i = 0; i < confidence; i++) {
+      cy.realPress('ArrowRight');
+    }
+    return this;
+  }
+
+  override submit() {
+    cy.getByTestId('submit-check-in').click();
+  }
+
+  getPage(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.get('app-check-in-form');
+  }
+}

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

@@ -0,0 +1,51 @@
+import { Page } from './page';
+import CyOverviewPage from "./overviewPage";
+import CheckInDialog from "../dialogs/checkInDialog";
+import KeyResultDialog from "../dialogs/keyResultDialog";
+
+export default class KeyresultDetailPage extends Page {
+  elements = {
+    logo: () => cy.getByTestId('logo'),
+    closeDrawer: () => cy.getByTestId('close-drawer'),
+    addCheckin: () => cy.getByTestId('add-check-in'),
+    showAllCheckins: () => cy.getByTestId('show-all-checkins'),
+    editKeyresult: () => cy.getByTestId('edit-keyResult'),
+  };
+
+  override validatePage() {
+    this.elements.addCheckin().contains('Check-in erfassen');
+    this.elements.editKeyresult().contains('Key Result bearbeiten');
+  }
+
+  override visit(keyresultName: string): this {
+    this.doVisit(keyresultName);
+    return this.afterVisit();
+  }
+
+  protected doVisit(keyresultName: string): this {
+    CyOverviewPage.do().getKeyresultByName(keyresultName).click();
+    return this;
+  }
+
+  createCheckIn() {
+    this.elements.addCheckin().click();
+    return new CheckInDialog();
+  }
+
+  editKeyresult() {
+    this.elements.editKeyresult().click();
+    return new KeyResultDialog();
+  }
+
+  close(): void {
+    this.elements.closeDrawer().click({force: true});
+  }
+
+  visitOverview(): void {
+    this.elements.logo().click();
+  }
+
+  getURL(): string {
+    return '/details/keyresult';
+  }
+}

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

@@ -57,15 +57,15 @@ export default class CyOverviewPage extends Page {
   }
 
   getObjectiveByNameAndState(objectiveName: string, state: string) {
-    return this.getObjectivesByNameAndState(objectiveName, state).first().scrollIntoView();
+    return this.getObjectivesByNameAndState(objectiveName, state).last().scrollIntoView();
   }
 
   getObjectivesByNameAndState(objectiveName: string, state: string) {
     return getObjectiveColumns().filter(filterByObjectiveName(objectiveName)).filter(filterByObjectiveState(state));
   }
 
   getObjectiveByName(objectiveName: string) {
-    return this.getObjectivesByName(objectiveName).first().scrollIntoView();
+    return this.getObjectivesByName(objectiveName).last().scrollIntoView();
   }
 
   getObjectivesByName(objectiveName: string) {
@@ -87,6 +87,12 @@ export default class CyOverviewPage extends Page {
     chainable.click();
   }
 
+  duplicateObjective(objectiveName: string) {
+    this.getObjectivesByName(objectiveName).findByTestId('three-dot-menu').click();
+    this.selectFromThreeDotMenu('Objective duplizieren');
+    return new ObjectiveDialog();
+  }
+
   visitTeammanagement(): void {
     this.elements.teammanagement().click();
   }

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

@@ -1,7 +1,7 @@
 import { PageObjectMapperBase } from '../pageObjectMapperBase';
 
 export abstract class Page extends PageObjectMapperBase {
-  visit(): this {
+  visit(arg?: any): this {
     this.doVisit();
     return this.afterVisit();
   }
@@ -11,9 +11,9 @@ export abstract class Page extends PageObjectMapperBase {
     return this.afterVisit();
   }
 
-  protected abstract doVisit(): void;
+  protected abstract doVisit(arg?: any): void;
 
-  private afterVisit(): this {
+  afterVisit(): this {
     cy.url().should('include', this.getURL());
     this.validatePage();
     return this;