From 1fd352e2522f0f481ac88e98c453900931f2b262 Mon Sep 17 00:00:00 2001
From: Jesse Brault <jbrault@mac.com>
Date: Wed, 11 Feb 2026 13:55:04 -0600
Subject: [PATCH] MME-25 Some tests for time inputs.

---
 .../enter-recipe-data/enter-recipe-data.html  | 12 ++--
 .../enter-recipe-data.spec.ts                 | 55 +++++++++++++++++++
 2 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html
index 255d392..55fee2d 100644
--- a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html
+++ b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html
@@ -101,25 +101,25 @@
         <p>Enter all as number of minutes, <em>eg.</em> 45</p>
         <mat-form-field>
             <mat-label>Preparation Time (minutes)</mat-label>
-            <input matInput [formControl]="recipeFormGroup.controls.preparationTime" />
+            <input matInput [formControl]="recipeFormGroup.controls.preparationTime" data-test-role="preparation-time-input" />
             @if (recipeFormGroup.controls.preparationTime.hasError("pattern")) {
-                <mat-error>Must be a valid number.</mat-error>
+                <mat-error data-test-role="preparation-time-error">Must be a valid number.</mat-error>
             }
         </mat-form-field>
 
         <mat-form-field>
             <mat-label>Cooking Time (minutes)</mat-label>
-            <input matInput [formControl]="recipeFormGroup.controls.cookingTime" />
+            <input matInput [formControl]="recipeFormGroup.controls.cookingTime" data-test-role="cooking-time-input"/>
             @if (recipeFormGroup.controls.cookingTime.hasError("pattern")) {
-                <mat-error>Must be a valid number.</mat-error>
+                <mat-error data-test-role="cooking-time-error">Must be a valid number.</mat-error>
             }
         </mat-form-field>
 
         <mat-form-field>
             <mat-label>Total Time (minutes)</mat-label>
-            <input matInput [formControl]="recipeFormGroup.controls.totalTime" />
+            <input matInput [formControl]="recipeFormGroup.controls.totalTime" data-test-role="total-time-input" />
             @if (recipeFormGroup.controls.totalTime.hasError("pattern")) {
-                <mat-error>Must be a valid number.</mat-error>
+                <mat-error data-test-role="total-time-error">Must be a valid number.</mat-error>
             }
         </mat-form-field>
     </div>
diff --git a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.spec.ts b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.spec.ts
index 1310078..a5aaf15 100644
--- a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.spec.ts
+++ b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.spec.ts
@@ -8,6 +8,7 @@ import { ImageService } from '../../../../shared/services/ImageService';
 import { of } from 'rxjs';
 import { SliceView, SliceViewMeta } from '../../../../shared/models/SliceView.model';
 import { ImageViewWithBlobUrl } from '../../../../shared/client-models/ImageViewWithBlobUrl';
+import { By } from '@angular/platform-browser';
 
 describe('EnterRecipeData', () => {
     let component: EnterRecipeData;
@@ -65,4 +66,58 @@ describe('EnterRecipeData', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    const testTimeInput = (
+        describeBlockName: string,
+        inputRole: string,
+        errorRole: string,
+    ) => {
+        describe(describeBlockName, () => {
+            it('should accept a number input with no error presented', () => {
+                const preparationTimeInputDebug = fixture.debugElement.query(
+                    By.css(`[data-test-role=${inputRole}]`),
+                );
+                expect(preparationTimeInputDebug).toBeTruthy();
+                const preparationTimeInput: HTMLInputElement = preparationTimeInputDebug.nativeElement;
+                preparationTimeInput.value = '1234';
+                preparationTimeInput.dispatchEvent(new Event('input'));
+                preparationTimeInput.dispatchEvent(new Event('blur'));
+
+                fixture.detectChanges();
+
+                expect(fixture.debugElement.query(By.css(`[data-test-role=${errorRole}]`))).toBeFalsy();
+            });
+
+            it('should not output an error if touched but no input', () => {
+                const preparationTimeInput: HTMLInputElement = fixture.debugElement.query(
+                    By.css(`[data-test-role=${inputRole}]`),
+                ).nativeElement;
+                preparationTimeInput.dispatchEvent(new Event('blur'));
+                expect(fixture.debugElement.query(By.css(`[data-test-role=${errorRole}]`))).toBeFalsy();
+            });
+
+            it('should display an error if non-number input', () => {
+                const preparationTimeInput: HTMLInputElement = fixture.debugElement.query(
+                    By.css(`[data-test-role=${inputRole}]`),
+                ).nativeElement;
+                preparationTimeInput.value = 'abcd';
+                preparationTimeInput.dispatchEvent(new Event('input'));
+                preparationTimeInput.dispatchEvent(new Event('blur'));
+
+                fixture.detectChanges();
+
+                const errorDebug = fixture.debugElement.query(
+                    By.css(`[data-test-role=${errorRole}]`),
+                );
+                expect(errorDebug).toBeTruthy();
+                expect(errorDebug.nativeElement.textContent).toContain('Must be a valid number.');
+            });
+        });
+    };
+
+    describe('time inputs', () => {
+        testTimeInput('preparation time', 'preparation-time-input', 'preparation-time-error');
+        testTimeInput('cooking time', 'cooking-time-input', 'cooking-time-error');
+        testTimeInput('total time', 'total-time-input', 'total-time-error');
+    });
 });