jessebrault/meals-made-easy-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MME-25 Some tests for time inputs.

Browse Source
This commit is contained in:
Jesse Brault 2026-02-11 13:55:04 -06:00
parent cec414f171
commit 1fd352e252
2 changed files with 61 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html
View File

@ -101,25 +101,25 @@
<p>Enter all as number of minutes, <em>eg.</em> 45</p> <p>Enter all as number of minutes, <em>eg.</em> 45</p>
<mat-form-field> <mat-form-field>
<mat-label>Preparation Time (minutes)</mat-label> <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")) { @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-form-field> <mat-form-field>
<mat-label>Cooking Time (minutes)</mat-label> <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")) { @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-form-field> <mat-form-field>
<mat-label>Total Time (minutes)</mat-label> <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")) { @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> </mat-form-field>
</div> </div>

55
src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.spec.ts
View File

@ -8,6 +8,7 @@ import { ImageService } from '../../../../shared/services/ImageService';
import { of } from 'rxjs'; import { of } from 'rxjs';
import { SliceView, SliceViewMeta } from '../../../../shared/models/SliceView.model'; import { SliceView, SliceViewMeta } from '../../../../shared/models/SliceView.model';
import { ImageViewWithBlobUrl } from '../../../../shared/client-models/ImageViewWithBlobUrl'; import { ImageViewWithBlobUrl } from '../../../../shared/client-models/ImageViewWithBlobUrl';
import { By } from '@angular/platform-browser';
describe('EnterRecipeData', () => { describe('EnterRecipeData', () => {
let component: EnterRecipeData; let component: EnterRecipeData;
@ -65,4 +66,58 @@ describe('EnterRecipeData', () => {
it('should create', () => { it('should create', () => {
expect(component).toBeTruthy(); 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');
});
}); });