fix keyresult type tests

puzzle · Jan 14, 2025 · 610fcfd · 610fcfd
1 parent 27980d4
commit 610fcfd
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 108 deletions.
diff --git a/frontend/src/app/components/key-result-dialog/key-result-dialog.component.spec.ts b/frontend/src/app/components/key-result-dialog/key-result-dialog.component.spec.ts
@@ -28,6 +28,11 @@ import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { MatDividerModule } from '@angular/material/divider';
 import { DialogTemplateCoreComponent } from '../../shared/custom/dialog-template-core/dialog-template-core.component';
 import { Quarter } from '../../shared/types/model/quarter';
+import { TranslateTestingModule } from 'ngx-translate-testing';
+// @ts-ignore
+import * as de from '../../../assets/i18n/de.json';
+import { getValueOfForm } from '../../shared/common';
+
 
 describe('KeyResultDialogComponent', () => {
   let component: KeyResultDialogComponent;
@@ -252,6 +257,7 @@ describe('KeyResultDialogComponent', () => {
 
   describe('New KeyResult', () => {
     beforeEach(() => {
+      mockUserService.getCurrentUser.mockReturnValue(testUser);
       TestBed.configureTestingModule({
         imports: [
           MatDialogModule,
@@ -264,7 +270,10 @@ describe('KeyResultDialogComponent', () => {
           MatIconModule,
           TranslateModule.forRoot(),
           DragDropModule,
-          MatDividerModule
+          MatDividerModule,
+          TranslateTestingModule.withTranslations({
+            de: de
+          })
         ],
         providers: [
           provideRouter([]),
@@ -439,6 +448,7 @@ describe('KeyResultDialogComponent', () => {
   describe('Edit KeyResult Metric', () => {
     beforeEach(() => {
       mockUserService.getUsers.mockReturnValue(users);
+      mockUserService.getCurrentUser.mockReturnValue(testUser);
       TestBed.configureTestingModule({
         imports: [
           MatDialogModule,
@@ -468,11 +478,11 @@ describe('KeyResultDialogComponent', () => {
             provide: MAT_DIALOG_DATA,
             useValue: { keyResult: fullKeyResultMetric,
               objective: keyResultObjective }
-          }
-          /*
-           * { provide: UserService,
-           *   useValue: userService }
-           */
+          },
+
+          { provide: UserService,
+            useValue: userService }
+
         ],
         declarations: [
           KeyResultDialogComponent,
@@ -551,11 +561,36 @@ describe('KeyResultDialogComponent', () => {
       expect(component.keyResultForm.get('owner')!.value)
         .toBe(testUser);
     }));
+
+    it('should use values from input', () => {
+      expect(getValueOfForm(component.keyResultForm, ['metric',
+        'unit']))
+        .toEqual('CHF');
+      expect(getValueOfForm(component.keyResultForm, ['metric',
+        'baseline']))
+        .toEqual(3);
+      expect(getValueOfForm(component.keyResultForm, ['metric',
+        'stretchGoal']))
+        .toEqual(25);
+
+      expect(getValueOfForm(component.keyResultForm, ['ordinal',
+        'commitZone']))
+        .toEqual('');
+      expect(getValueOfForm(component.keyResultForm, ['ordinal',
+        'targetZone']))
+        .toEqual('');
+
+      expect(getValueOfForm(component.keyResultForm, ['ordinal',
+        'stretchZone']))
+        .toEqual('');
+    });
   });
 
   describe('Edit KeyResult Ordinal', () => {
     beforeEach(() => {
       mockUserService.getUsers.mockReturnValue(users);
+      mockUserService.getCurrentUser.mockReturnValue(testUser);
+
       TestBed.configureTestingModule({
         imports: [
           MatDialogModule,
@@ -585,6 +620,10 @@ describe('KeyResultDialogComponent', () => {
             provide: MAT_DIALOG_DATA,
             useValue: { keyResult: fullKeyResultOrdinal,
               objective: keyResultObjective }
+          },
+          {
+            provide: UserService,
+            useValue: userService
           }
         ],
         declarations: [
@@ -607,6 +646,30 @@ describe('KeyResultDialogComponent', () => {
       mockUserService.getUsers.mockReset();
     });
 
+    it('should use values from input', () => {
+      // Default value
+      expect(getValueOfForm(component.keyResultForm, ['metric',
+        'unit']))
+        .toEqual('NUMBER');
+
+      expect(getValueOfForm(component.keyResultForm, ['metric',
+        'baseline']))
+        .toEqual(0);
+      expect(getValueOfForm(component.keyResultForm, ['metric',
+        'stretchGoal']))
+        .toEqual(0);
+
+      expect(getValueOfForm(component.keyResultForm, ['ordinal',
+        'commitZone']))
+        .toEqual('Commit zone');
+      expect(getValueOfForm(component.keyResultForm, ['ordinal',
+        'targetZone']))
+        .toEqual('Target zone');
+      expect(getValueOfForm(component.keyResultForm, ['ordinal',
+        'stretchZone']))
+        .toEqual('Stretch goal');
+    });
+
     it('should use key-result value from data input', waitForAsync(() => {
       const formObject = fixture.componentInstance.keyResultForm.value;
       expect(formObject.title)

diff --git a/frontend/src/app/components/key-result-type/key-result-type.component.html b/frontend/src/app/components/key-result-type/key-result-type.component.html
@@ -41,9 +41,8 @@
               {{ "UNIT." + unit.value | translate }}
             </option>
           </select>
-          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'unit')">
-            <span>{{ getErrorMessage("MUST_SELECT", "Einheit", null, null) }}</span>
-          </mat-error>
+
+          <mat-error *ngFor="let error of getErrorMessages('unit')">{{ error }}</mat-error>
         </div>
       </div>
     </div>
@@ -67,9 +66,7 @@
             {{ user.firstName + " " + user.lastName }}
           </mat-option>
         </mat-autocomplete>
-        <mat-error *ngIf="invalidOwner()">
-          <span>{{ getErrorMessage("MUST_SELECT", "Owner", null, null) }}</span>
-        </mat-error>
+        <mat-error *ngFor="let error of getErrorMessages('owner')">{{ error }}</mat-error>
       </div>
     </div>
   </div>
@@ -88,9 +85,7 @@
             formControlName="baseline"
             id="baseline"
           />
-          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'baseline')">
-            <span>{{ getErrorMessage("MUST_BE_NUMBER", "Baseline", null, null) }}</span>
-          </mat-error>
+          <mat-error *ngFor="let error of getErrorMessages('baseline')">{{ error }}</mat-error>
         </div>
       </div>
     </div>
@@ -106,9 +101,7 @@
             formControlName="targetGoal"
             id="target-goal"
           />
-          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchGoal')">
-            <span>{{ getErrorMessage("MUST_BE_NUMBER", "Stretch Goal", null, null) }}</span>
-          </mat-error>
+          <mat-error *ngFor="let error of getErrorMessages('targetGoal')">{{ error }}</mat-error>
         </div>
       </div>
     </div>
@@ -124,9 +117,7 @@
             formControlName="stretchGoal"
             id="stretch-goal"
           />
-          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchGoal')">
-            <span>{{ getErrorMessage("MUST_BE_NUMBER", "Stretch Goal", null, null) }}</span>
-          </mat-error>
+          <mat-error *ngFor="let error of getErrorMessages('stretchGoal')">{{ error }}</mat-error>
         </div>
       </div>
     </div>
@@ -147,9 +138,7 @@
             id="commit-zone"
             [attr.data-testId]="'commit-zone'"
           ></textarea>
-          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'commitZone')">
-            <span>{{ getErrorMessage("SIZE_BETWEEN", "Commit Zone", 1, 400) }}</span>
-          </mat-error>
+          <mat-error *ngFor="let error of getErrorMessages('commitZone')">{{ error }}</mat-error>
         </div>
       </div>
     </div>
@@ -165,9 +154,7 @@
             formControlName="targetZone"
             id="target-zone"
           ></textarea>
-          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'targetZone')">
-            <span>{{ getErrorMessage("SIZE_BETWEEN", "Target Zone", 1, 400) }}</span>
-          </mat-error>
+          <mat-error *ngFor="let error of getErrorMessages('targetZone')">{{ error }}</mat-error>
         </div>
       </div>
     </div>
@@ -183,9 +170,7 @@
             formControlName="stretchZone"
             id="stretch-zone"
           ></textarea>
-          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchZone')">
-            <span>{{ getErrorMessage("SIZE_BETWEEN", "Stretch Zone", 1, 400) }}</span>
-          </mat-error>
+          <mat-error *ngFor="let error of getErrorMessages('stretchZone')">{{ error }}</mat-error>
         </div>
       </div>
     </div>

diff --git a/frontend/src/app/components/key-result-type/key-result-type.component.spec.ts b/frontend/src/app/components/key-result-type/key-result-type.component.spec.ts
@@ -13,6 +13,7 @@ import { getKeyResultForm } from '../../shared/constant-library';
 import { KeyResultOrdinal } from '../../shared/types/model/key-result-ordinal';
 import { getValueOfForm } from '../../shared/common';
 import { KeyResultMetric } from '../../shared/types/model/key-result-metric';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 describe('KeyResultTypeComponent', () => {
   let component: KeyResultTypeComponent;
@@ -24,11 +25,14 @@ describe('KeyResultTypeComponent', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         declarations: [KeyResultTypeComponent],
-        imports: [MatAutocompleteModule,
+        imports: [
+          MatAutocompleteModule,
+          MatFormFieldModule,
           TranslateTestingModule.withTranslations({
             de: de
           }),
-          ReactiveFormsModule],
+          ReactiveFormsModule
+        ],
         providers: [FormGroupDirective,
           { provide: FormGroupDirective,
             useValue: formGroupDirective }]
@@ -47,33 +51,6 @@ describe('KeyResultTypeComponent', () => {
         .toBeTruthy();
     });
 
-    it('should use values from input', () => {
-      expect(component.isTypeChangeAllowed())
-        .toBeFalsy();
-      expect(component.isMetric)
-        .toBeTruthy();
-
-      expect(getValueOfForm(component.keyResultForm, ['metric',
-        'unit']))
-        .toEqual('PERCENT');
-      expect(getValueOfForm(component.keyResultForm, ['metric',
-        'baseline']))
-        .toEqual(30);
-      expect(getValueOfForm(component.keyResultForm, ['metric',
-        'stretchGoal']))
-        .toEqual(100);
-
-      expect(getValueOfForm(component.keyResultForm, ['ordinal',
-        'commitZone']))
-        .toEqual('');
-      expect(getValueOfForm(component.keyResultForm, ['ordinal',
-        'targetZone']))
-        .toEqual('');
-
-      expect(getValueOfForm(component.keyResultForm, ['ordinal',
-        'stretchZone']))
-        .toEqual('');
-    });
 
     it('should switch type of key-result', () => {
       jest.spyOn(component, 'isTypeChangeAllowed')
@@ -124,11 +101,14 @@ describe('KeyResultTypeComponent', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         declarations: [KeyResultTypeComponent],
-        imports: [TranslateTestingModule.withTranslations({
-          de: de
-        }),
-        MatAutocompleteModule,
-        ReactiveFormsModule],
+        imports: [
+          TranslateTestingModule.withTranslations({
+            de: de
+          }),
+          MatFormFieldModule,
+          MatAutocompleteModule,
+          ReactiveFormsModule
+        ],
         providers: [FormGroupDirective,
           { provide: FormGroupDirective,
             useValue: formGroupDirective }]
@@ -146,33 +126,6 @@ describe('KeyResultTypeComponent', () => {
         .toBeTruthy();
     });
 
-    it('should use values from input', () => {
-      expect(component.isTypeChangeAllowed())
-        .toBeTruthy();
-
-      // Default value
-      expect(getValueOfForm(component.keyResultForm, ['metric',
-        'unit']))
-        .toEqual('NUMBER');
-
-      expect(getValueOfForm(component.keyResultForm, ['metric',
-        'baseline']))
-        .toEqual(0);
-      expect(getValueOfForm(component.keyResultForm, ['metric',
-        'stretchGoal']))
-        .toEqual(0);
-
-      expect(getValueOfForm(component.keyResultForm, ['ordinal',
-        'commitZone']))
-        .toEqual('Grundriss steht');
-      expect(getValueOfForm(component.keyResultForm, ['ordinal',
-        'targetZone']))
-        .toEqual('Gebäude gebaut');
-      expect(getValueOfForm(component.keyResultForm, ['ordinal',
-        'stretchZone']))
-        .toEqual('Inneneinrichtung gestaltet');
-    });
-
     it('should select ordinal tab', () => {
       jest.spyOn(component, 'isMetric')
         .mockReturnValue(false);
@@ -200,11 +153,14 @@ describe('KeyResultTypeComponent', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         declarations: [KeyResultTypeComponent],
-        imports: [MatAutocompleteModule,
+        imports: [
+          MatAutocompleteModule,
           TranslateTestingModule.withTranslations({
             de: de
           }),
-          ReactiveFormsModule],
+          ReactiveFormsModule,
+          MatFormFieldModule
+        ],
         providers: [FormGroupDirective,
           { provide: FormGroupDirective,
             useValue: formGroupDirective }]

diff --git a/frontend/src/app/components/key-result-type/key-result-type.component.ts b/frontend/src/app/components/key-result-type/key-result-type.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { KeyResult } from '../../shared/types/model/key-result';
-import { ControlContainer, FormGroup, FormGroupDirective } from '@angular/forms';
+import { ControlContainer, FormGroup, FormGroupDirective, ValidationErrors } from '@angular/forms';
 import { KeyResultMetric } from '../../shared/types/model/key-result-metric';
 import { KeyResultOrdinal } from '../../shared/types/model/key-result-ordinal';
 import { Unit } from '../../shared/types/enums/unit';
@@ -46,23 +46,21 @@ export class KeyResultTypeComponent {
   getErrorMessage(
     error: string, field: string, firstNumber: number | null, secondNumber: number | null
   ): string {
+    console.log(error);
     return field + this.translate.instant('DIALOG_ERRORS.' + error)
       .format(firstNumber, secondNumber);
   }
 
-  /*
-   * getErrorMessage(formfield: any) {
-   *   if (!formfield.errors) {
-   *     return;
-   *   }
-   *   return Object.keys(formfield.errors).map((errorKey: any) =>
-   *       this.translate.instant(
-   *           'ERRORS.' + errorKey,
-   *           formfield.errors[errorKey],
-   *       ),
-   *   );
-   * }
-   */
+
+  getErrorMessages(controlName: string) {
+    const formField = this.keyResultForm.get(controlName);
+    if (!formField?.errors) {
+      return;
+    }
+    return Object.keys(formField.errors)
+      .map((errorKey: any) => this.translate.instant('ERRORS.' + errorKey, formField.errors?.[errorKey] || { error: {} } as ValidationErrors));
+  }
+
 
   invalidOwner() {
     return this.keyResultForm.get('owner')?.invalid || false;