Merge pull request #639 from puzzle/bug/620-stretch-duplicate

Bug/620: Stretch on duplicate

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

@@ -0,0 +1,54 @@
+import * as users from '../fixtures/users.json';
+import { onlyOn } from '@cypress/skip-test';
+
+describe('e2e test for scoring adjustment on objective duplicate', () => {
+  beforeEach(() => {
+    cy.loginAsUser(users.gl);
+    onlyOn('chrome');
+    cy.visit('/?quarter=2');
+  });
+
+  it('Create ordinal checkin and validate value of scoring component', () => {
+    cy.createOrdinalKeyresult('stretch keyresult for testing', null);
+    cy.getByTestId('keyresult').get(':contains("stretch keyresult for testing")').last().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 });
+
+    cy.get('.objective').first().getByTestId('three-dot-menu').click();
+    cy.get('.mat-mdc-menu-content').contains('Objective duplizieren').click();
+    cy.fillOutObjective('A duplicated Objective for this tool', 'safe', '3');
+    cy.visit('/?quarter=3');
+
+    let scoringBlock1 = cy
+      .getByTestId('objective')
+      .first()
+      .getByTestId('key-result')
+      .first()
+      .getByTestId('scoring-component')
+      .first();
+
+    scoringBlock1.getByTestId('fail').first().should('not.have.css', 'score-red');
+    scoringBlock1.getByTestId('fail').first().should('not.have.css', 'score-yellow');
+    scoringBlock1.getByTestId('fail').first().should('not.have.css', 'score-green');
+    scoringBlock1.getByTestId('fail').first().should('not.have.css', 'score-stretch');
+
+    let scoringBlock2 = cy
+      .getByTestId('objective')
+      .first()
+      .getByTestId('key-result')
+      .last()
+      .getByTestId('scoring-component')
+      .last();
+
+    scoringBlock2.getByTestId('fail').first().should('not.have.css', 'score-red');
+    scoringBlock2.getByTestId('fail').first().should('not.have.css', 'score-yellow');
+    scoringBlock2.getByTestId('fail').first().should('not.have.css', 'score-green');
+    scoringBlock2.getByTestId('fail').first().should('not.have.css', 'score-stretch');
+  });
+});

frontend/src/app/keyresult/keyresult.component.html

@@ -6,7 +6,7 @@
   tabindex="0"
 >
   <div class="text-start linebreak mb-2">{{ keyResult.title }}</div>
-  <app-scoring [keyResult]="keyResult" [isDetail]="false"></app-scoring>
+  <app-scoring [keyResult]="keyResult" [isDetail]="false" [attr.data-testId]="'scoring-component'"></app-scoring>
   <div class="d-flex justify-content-between mt-1">
     <div class="d-flex justify-content-center">
       <span class="d-flex align-items-center flex-wrap sub-title-keyresult">

frontend/src/app/shared/custom/scoring/scoring.component.ts

@@ -46,10 +46,41 @@ export class ScoringComponent implements OnInit, AfterViewInit, OnChanges {
   }
 
   ngOnInit() {
-    if (this.keyResult.keyResultType === 'metric') {
-      this.calculatePercentageMetric();
-    } else {
-      this.calculatePercentageOrdinal();
+    this.stretched = false;
+    if (this.keyResult.lastCheckIn) {
+      if (this.keyResult.keyResultType === 'metric') {
+        this.calculatePercentageMetric();
+      } else {
+        this.calculatePercentageOrdinal();
+      }
+    }
+  }
+
+  ngAfterViewInit(): void {
+    //Define width of scoring elements
+    this.failElement!.nativeElement.style.width = this.failPercent + '%';
+    this.commitElement!.nativeElement.style.width = this.commitPercent + '%';
+    this.targetElement!.nativeElement.style.width = this.targetPercent + '%';
+
+    if (this.valueLabel != undefined && this.keyResult.keyResultType == 'metric') {
+      this.labelPercentage.subscribe((value) => {
+        this.valueLabel!.nativeElement.style.width = value + '%';
+        this.changeDetectionRef.detectChanges();
+      });
+    }
+
+    // Set color of scoring component
+    let scoringClass = this.getScoringColorClassAndSetBorder();
+    if (scoringClass !== null) {
+      this.targetElement!.nativeElement.classList.add(scoringClass);
+      this.commitElement!.nativeElement.classList.add(scoringClass);
+      this.failElement!.nativeElement.classList.add(scoringClass);
+    }
+
+    //Fill out icon if target percent has reached 100 percent or more
+    if (this.stretched) {
+      this.iconPath = 'filled';
+      this.changeDetectionRef.detectChanges();
     }
   }
 
@@ -78,9 +109,9 @@ export class ScoringComponent implements OnInit, AfterViewInit, OnChanges {
 
   calculatePercentageMetric() {
     if (this.keyResult.lastCheckIn !== null) {
-      let KeyResultMetric: KeyResultMetricMin = this.castToMetric();
+      let keyResultMetric: KeyResultMetricMin = this.castToMetric();
 
-      let percentage = calculateCurrentPercentage(KeyResultMetric);
+      let percentage = calculateCurrentPercentage(keyResultMetric);
       this.labelPercentage = of(percentage);
       switch (true) {
         case percentage >= 100:
@@ -105,20 +136,19 @@ export class ScoringComponent implements OnInit, AfterViewInit, OnChanges {
   }
 
   getScoringColorClassAndSetBorder(): string | null {
-    switch (true) {
-      case this.targetPercent > 100:
-        return 'score-stretch';
-      case this.targetPercent > 0:
-        this.setBorder(this.targetElement!);
-        return 'score-green';
-      case this.commitPercent > 0:
-        this.setBorder(this.commitElement!);
-        return 'score-yellow';
-      case this.failPercent > 0:
-        this.setBorder(this.failElement!);
-        return 'score-red';
-      default:
-        return null;
+    if (this.targetPercent > 100) {
+      return 'score-stretch';
+    } else if (this.targetPercent > 0) {
+      this.setBorder(this.targetElement!);
+      return 'score-green';
+    } else if (this.commitPercent > 0) {
+      this.setBorder(this.commitElement!);
+      return 'score-yellow';
+    } else if (this.failPercent > 0) {
+      this.setBorder(this.failElement!);
+      return 'score-red';
+    } else {
+      return null;
     }
   }
 
@@ -128,34 +158,6 @@ export class ScoringComponent implements OnInit, AfterViewInit, OnChanges {
     }
   }
 
-  ngAfterViewInit(): void {
-    //Define width of scoring elements
-    this.failElement!.nativeElement.style.width = this.failPercent + '%';
-    this.commitElement!.nativeElement.style.width = this.commitPercent + '%';
-    this.targetElement!.nativeElement.style.width = this.targetPercent + '%';
-
-    if (this.valueLabel != undefined && this.keyResult.keyResultType == 'metric') {
-      this.labelPercentage.subscribe((value) => {
-        this.valueLabel!.nativeElement.style.width = value + '%';
-        this.changeDetectionRef.detectChanges();
-      });
-    }
-
-    // Set color of scoring component
-    let scoringClass = this.getScoringColorClassAndSetBorder();
-    if (scoringClass !== null) {
-      this.targetElement!.nativeElement.classList.add(scoringClass);
-      this.commitElement!.nativeElement.classList.add(scoringClass);
-      this.failElement!.nativeElement.classList.add(scoringClass);
-    }
-
-    //Fill out icon if target percent has reached 100 percent or more
-    if (this.stretched) {
-      this.iconPath = 'filled';
-      this.changeDetectionRef.detectChanges();
-    }
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['keyResult']?.currentValue !== undefined || changes['keyResult']?.currentValue !== null) {
       if (this.commitElement != undefined) {