Bug/845-chf-label (#1106)

* jar is now debuggable * rename intelij config and change log level of spring to debug in staging config * Fix bug with double label in check in history * delete unused pipe and edit the CHF output * edit e2e and frontend tests to work with the new format * remove lable pipe in dialog * add second pipe back in and edit to suffix * fix tests and refactor value pipe * fix spec tests for pipes * fix e2e tests * remove space before percent * fix unit-lable spec and e2e tests * fix spaceing of percent in tests * add testId --------- Co-authored-by: Yanick Minder <[email protected]> Co-authored-by: Lias Kleisa <[email protected]>
puzzle · Nov 8, 2024 · e9c41dd · e9c41dd
1 parent f3a8271
commit e9c41dd
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 72 deletions.
diff --git a/frontend/cypress/e2e/checkIn.cy.ts b/frontend/cypress/e2e/checkIn.cy.ts
@@ -193,15 +193,16 @@ describe('OKR Check-in e2e tests', () => {
 
       cy.getByTestId('add-check-in').first().click();
       cy.fillOutCheckInMetric(30, 5, 'Here we are', 'A cat would be great');
-      cy.contains('Aktuell: CHF 30.-');
+      cy.contains('Aktuell: 30 CHF');
       cy.getByTestId('show-all-checkins').click();
 
       cy.wait(500);
       cy.contains('Check-in History');
+      cy.contains('Wert: 30 CHF');
       cy.getByTestId('edit-check-in').first().click();
       cy.contains('Here we edit a metric checkin');
-      cy.contains('CHF 30.-');
-      cy.contains('Confidence um Target Zone (CHF 213.-) zu erreichen');
+      cy.contains('30 CHF');
+      cy.contains('Confidence um Target Zone (213 CHF) zu erreichen');
       cy.contains('5/10');
       cy.getByTestId('check-in-metric-value').click().clear().type('200');
       cy.getByTestId('confidence-slider').realMouseDown();
@@ -211,10 +212,70 @@ describe('OKR Check-in e2e tests', () => {
       cy.getByTestId('submit-check-in').click();
 
       cy.wait(200);
-      cy.contains('CHF 200.-');
+      cy.contains('200 CHF');
       cy.contains('We bought a new sheep');
     });
 
+    it('Should generate right labels in checkin history list', () => {
+      cy.getByTestId('objective').first().getByTestId('add-keyResult').first().click();
+      cy.getByTestId('submit').should('be.disabled');
+      cy.fillOutKeyResult(
+        'A new KeyResult for checking checkin list',
+        'EUR',
+        '10',
+        '300',
+        null,
+        null,
+        null,
+        null,
+        'This is my description',
+      );
+
+      cy.getByTestId('submit').click();
+
+      cy.getByTestId('keyresult').contains('A new KeyResult for checking checkin list').click();
+
+      cy.getByTestId('add-check-in').first().click();
+      cy.fillOutCheckInMetric(30, 5, 'Here we are', 'A cat would be great');
+      cy.contains('Aktuell: 30 EUR');
+      cy.getByTestId('show-all-checkins').click();
+
+      cy.wait(500);
+      cy.contains('Check-in History');
+      cy.contains('Wert: 30 EUR');
+
+      cy.getByTestId('closeButton').click();
+      // Wait this time because of the toaster message
+      cy.wait(2000);
+      cy.getByTestId('close-drawer').click();
+
+      cy.getByTestId('objective').first().getByTestId('add-keyResult').first().click();
+      cy.fillOutKeyResult(
+        'There is another kr with fte',
+        'FTE',
+        '10',
+        '300',
+        null,
+        null,
+        null,
+        null,
+        'This is my description',
+      );
+
+      cy.getByTestId('submit').click();
+
+      cy.getByTestId('keyresult').contains('There is another kr with fte').click();
+
+      cy.getByTestId('add-check-in').first().click();
+      cy.fillOutCheckInMetric(30, 5, 'Here we are', 'A cat would be great');
+      cy.contains('Aktuell: 30 FTE');
+      cy.getByTestId('show-all-checkins').click();
+
+      cy.wait(500);
+      cy.contains('Check-in History');
+      cy.contains('Wert: 30 FTE');
+    });
+
     it('Edit ordinal checkin', () => {
       cy.getByTestId('objective').first().getByTestId('add-keyResult').first().click();
       cy.getByTestId('submit').should('be.disabled');
@@ -312,7 +373,7 @@ describe('OKR Check-in e2e tests', () => {
       cy.wait('@getKeyResultsAfterSave');
 
       cy.getByTestId('add-check-in').first().click();
-      cy.contains('Letzter Wert').siblings('div').contains('10 %');
+      cy.contains('Letzter Wert').siblings('div').contains('10%');
     });
   });
 });

diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html
@@ -22,8 +22,7 @@
             <h4 class="col-auto">Wert:</h4>
             <div class="col">
               <ng-container *ngIf="keyResult.keyResultType === 'metric'">
-                {{ getMetricKeyResult().unit | unitLabelTransformation }}
-                {{ +checkIn.value! | unitValueTransformation: getMetricKeyResult().unit }}
+                {{ +checkIn.value! | unitValueTransformation }}{{ getMetricKeyResult().unit | unitLabelTransformation }}
               </ng-container>
               <ng-container *ngIf="keyResult.keyResultType === 'ordinal'">
                 {{ checkIn.value }}
@@ -49,7 +48,7 @@ <h4 class="col-3">Massnahmen:</h4>
 
   <ng-container actions>
     <div class="col-auto">
-      <button mat-flat-button color="primary" mat-dialog-close>Schliessen</button>
+      <button [attr.data-testId]="'closeButton'" mat-flat-button color="primary" mat-dialog-close>Schliessen</button>
     </div>
   </ng-container>
 </app-dialog-template-core>
diff --git a/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html b/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html
@@ -27,7 +27,7 @@
     <div *ngIf="checkIn.value" class="okr-form-row okr-form-label-input-container">
       <p class="okr-form-label okr-form-col">Letzter Wert</p>
       <div class="okr-form-col text-black">
-        <div class="dialog-data-show dialog-form-field py-2">{{ checkIn.value }} {{ generateUnitLabel() }}</div>
+        <div class="dialog-data-show dialog-form-field py-2">{{ checkIn.value }}{{ generateUnitLabel() }}</div>
       </div>
     </div>
   </div>

diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
@@ -75,7 +75,7 @@ <h4 class="okr-form-label okr-form-col">Key Result</h4>
         <p class="okr-form-label okr-form-col confidence-label">
           Confidence um Target Zone
           <span *ngIf="keyResult.keyResultType === 'metric' && getKeyResultMetric() as kr">
-            ({{ calculateTarget(kr) | unitValueTransformation: kr.unit }})
+            ({{ calculateTarget(kr) | unitValueTransformation }}{{ kr.unit | unitLabelTransformation }})
           </span>
           zu erreichen:
         </p>

diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
@@ -35,7 +35,8 @@ <h3 class="title">{{ keyResult.title }}</h3>
           <ng-container *ngIf="keyResult.keyResultType == 'metric' && castToMetric(keyResult) as keyResultMetric">
             <div class="d-flex justify-content-start w-100 metric-label-div">
               <p class="keyResult-detail-attribute-show rounded-5 p-2 d-flex justify-content-center metric-col">
-                Baseline: {{ keyResultMetric.baseline | unitValueTransformation: keyResultMetric.unit.toString() }}
+                Baseline: {{ keyResultMetric.baseline | unitValueTransformation
+                }}{{ keyResultMetric.unit | unitLabelTransformation }}
               </p>
               <p
                 *ngIf="keyResultMetric.lastCheckIn as lastCheckIn"
@@ -47,12 +48,13 @@ <h3 class="title">{{ keyResult.title }}</h3>
                 <span class="text-error" *ngIf="calculateCurrentPercentage(keyResultMetric) < 1">!</span>
                 Aktuell:
                 <span>
-                  {{ +lastCheckIn.value | unitValueTransformation: keyResultMetric.unit.toString() }}
+                  {{ +lastCheckIn.value | unitValueTransformation }}{{ keyResultMetric.unit | unitLabelTransformation }}
                 </span>
               </p>
               <p class="keyResult-detail-attribute-show rounded-5 p-2 metric-col d-flex justify-content-center">
                 Stretch Goal:
-                {{ keyResultMetric.stretchGoal | unitValueTransformation: keyResultMetric.unit.toString() }}
+                {{ keyResultMetric.stretchGoal | unitValueTransformation
+                }}{{ keyResultMetric.unit | unitLabelTransformation }}
               </p>
             </div>
           </ng-container>

diff --git a/...end/src/app/shared/pipes/unit-label-transformation/unit-label-transformation.pipe.spec.ts b/...end/src/app/shared/pipes/unit-label-transformation/unit-label-transformation.pipe.spec.ts
@@ -9,22 +9,22 @@ describe('UnitLabelTransformationPipe', () => {
 
   it('Format Percent label', () => {
     const pipe = new UnitLabelTransformationPipe();
-    expect(pipe.transform(Unit.PERCENT)).toBe('');
+    expect(pipe.transform(Unit.PERCENT)).toBe('%');
   });
 
   it('Format FTE label', () => {
     const pipe = new UnitLabelTransformationPipe();
-    expect(pipe.transform(Unit.FTE)).toBe(Unit.FTE);
+    expect(pipe.transform(Unit.FTE)).toBe(' ' + Unit.FTE);
   });
 
   it('Format CHF label', () => {
     const pipe = new UnitLabelTransformationPipe();
-    expect(pipe.transform(Unit.CHF)).toBe(Unit.CHF);
+    expect(pipe.transform(Unit.CHF)).toBe(' ' + Unit.CHF);
   });
 
   it('Format EUR label', () => {
     const pipe = new UnitLabelTransformationPipe();
-    expect(pipe.transform(Unit.EUR)).toBe(Unit.EUR);
+    expect(pipe.transform(Unit.EUR)).toBe(' ' + Unit.EUR);
   });
 
   it('Format Number label', () => {

diff --git a/frontend/src/app/shared/pipes/unit-label-transformation/unit-label-transformation.pipe.ts b/frontend/src/app/shared/pipes/unit-label-transformation/unit-label-transformation.pipe.ts
@@ -1,5 +1,5 @@
-import { Pipe, PipeTransform } from '@angular/core';
 import { Unit } from '../../types/enums/Unit';
+import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
   name: 'unitLabelTransformation',
@@ -8,13 +8,13 @@ export class UnitLabelTransformationPipe implements PipeTransform {
   transform(unitLabel: string): string {
     switch (unitLabel) {
       case Unit.PERCENT:
-        return '';
+        return '%';
       case Unit.FTE:
-        return Unit.FTE;
+        return ' ' + Unit.FTE;
       case Unit.CHF:
-        return Unit.CHF;
+        return ' ' + Unit.CHF;
       case Unit.EUR:
-        return Unit.EUR;
+        return ' ' + Unit.EUR;
       case Unit.NUMBER:
         return '';
       default:

diff --git a/frontend/src/app/shared/pipes/unit-value-transformation/unit-transformation.pipe.spec.ts b/frontend/src/app/shared/pipes/unit-value-transformation/unit-transformation.pipe.spec.ts
@@ -1,5 +1,4 @@
 import { UnitValueTransformationPipe } from './unit-value-transformation.pipe';
-import { Unit } from '../../types/enums/Unit';
 
 describe('UnitTransformationPipe', () => {
   it('create an instance', () => {
@@ -9,41 +8,21 @@ describe('UnitTransformationPipe', () => {
 
   it('should format as Percent', () => {
     const pipe = new UnitValueTransformationPipe();
-    expect(pipe.transform(380, Unit.PERCENT)).toBe('380%');
+    expect(pipe.transform(380)).toBe('380');
   });
 
   it('should format as Number', () => {
     const pipe = new UnitValueTransformationPipe();
-    expect(pipe.transform(380, Unit.NUMBER)).toBe('380');
-  });
-
-  it('should format as FTE', () => {
-    const pipe = new UnitValueTransformationPipe();
-    expect(pipe.transform(380, Unit.FTE)).toBe('380 FTE');
-  });
-
-  it('should format as CHF without double value', () => {
-    const pipe = new UnitValueTransformationPipe();
-    expect(pipe.transform(380, Unit.CHF)).toBe('CHF 380.-');
-  });
-
-  it('should format as EUR without double value', () => {
-    const pipe = new UnitValueTransformationPipe();
-    expect(pipe.transform(380, Unit.EUR)).toBe('380 €');
+    expect(pipe.transform(38000)).toBe("38'000");
   });
 
   it('should format as CHF as double value', () => {
     const pipe = new UnitValueTransformationPipe();
-    expect(pipe.transform(380.987, Unit.CHF)).toBe('CHF 380.99');
-  });
-
-  it('should format as EUR as double value', () => {
-    const pipe = new UnitValueTransformationPipe();
-    expect(pipe.transform(380.987, Unit.EUR)).toBe('380.99 €');
+    expect(pipe.transform(380.987)).toBe('380.99');
   });
 
   it('should return with no format if unit is not preset one', () => {
     const pipe = new UnitValueTransformationPipe();
-    expect(pipe.transform(140, 'MEMBERS')).toBe('140');
+    expect(pipe.transform(140)).toBe('140');
   });
 });
diff --git a/frontend/src/app/shared/pipes/unit-value-transformation/unit-value-transformation.pipe.ts b/frontend/src/app/shared/pipes/unit-value-transformation/unit-value-transformation.pipe.ts
@@ -5,29 +5,9 @@ import { Unit } from '../../types/enums/Unit';
   name: 'unitValueTransformation',
 })
 export class UnitValueTransformationPipe implements PipeTransform {
-  transform(value: number, unit: string): string {
+  transform(value: number): string {
     /* If user tries to input String, set value to 0 */
-    if (Number.isNaN(value)) {
-      value = 0;
-    }
-    switch (unit) {
-      case Unit.CHF:
-        return 'CHF ' + this.addCHFSign(this.roundAndAddThousandSplitSign(value));
-      case Unit.EUR:
-        return this.roundAndAddThousandSplitSign(value) + ' €';
-      case Unit.PERCENT:
-        return value + '%';
-      case Unit.FTE:
-        return this.roundAndAddThousandSplitSign(value) + ' FTE';
-      case Unit.NUMBER:
-        return this.roundAndAddThousandSplitSign(value);
-      default:
-        return value.toString();
-    }
-  }
-
-  addCHFSign(value: string): string {
-    return !+value.split('.')[1] ? value.split('.')[0] + '.-' : value;
+    return Number.isNaN(value) ? '0' : this.roundAndAddThousandSplitSign(value);
   }
 
   roundAndAddThousandSplitSign(value: number): string {

diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
@@ -4,7 +4,6 @@ import { ExampleDialogComponent } from './dialog/example-dialog/example-dialog.c
 import { ObjectiveFormComponent } from './dialog/objective-dialog/objective-form.component';
 import { UnitValueTransformationPipe } from './pipes/unit-value-transformation/unit-value-transformation.pipe';
 import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component';
-import { UnitLabelTransformationPipe } from './pipes/unit-label-transformation/unit-label-transformation.pipe';
 import { ParseUnitValuePipe } from './pipes/parse-unit-value/parse-unit-value.pipe';
 import { ScoringComponent } from './custom/scoring/scoring.component';
 import { CompleteDialogComponent } from './dialog/complete-dialog/complete-dialog.component';
@@ -26,15 +25,16 @@ import { SpinnerComponent } from './custom/spinner/spinner.component';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { DialogTemplateCoreComponent } from './custom/dialog-template-core/dialog-template-core.component';
 import { MatDividerModule } from '@angular/material/divider';
+import { UnitLabelTransformationPipe } from './pipes/unit-label-transformation/unit-label-transformation.pipe';
 
 @NgModule({
   declarations: [
     ExampleDialogComponent,
     ObjectiveFormComponent,
     UnitValueTransformationPipe,
     ConfirmDialogComponent,
-    UnitLabelTransformationPipe,
     ParseUnitValuePipe,
+    UnitLabelTransformationPipe,
     ScoringComponent,
     CompleteDialogComponent,
     OkrTangramComponent,
@@ -68,8 +68,8 @@ import { MatDividerModule } from '@angular/material/divider';
     ObjectiveFormComponent,
     UnitValueTransformationPipe,
     ConfirmDialogComponent,
-    UnitLabelTransformationPipe,
     ParseUnitValuePipe,
+    UnitLabelTransformationPipe,
     ScoringComponent,
     CompleteDialogComponent,
     OkrTangramComponent,