107 lines
4.4 KiB
TypeScript
107 lines
4.4 KiB
TypeScript
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
import { RecipeEditForm } from './recipe-edit-form';
|
|
import { By } from '@angular/platform-browser';
|
|
import { inputBinding } from '@angular/core';
|
|
import { UserInfoView } from '../../models/UserInfoView.model';
|
|
import { RecipeDraftViewModel } from '../../models/RecipeDraftView.model';
|
|
import { ImageService } from '../../services/ImageService';
|
|
import { of } from 'rxjs';
|
|
import { SliceView, SliceViewMeta } from '../../models/SliceView.model';
|
|
import { ImageViewWithBlobUrl } from '../../client-models/ImageViewWithBlobUrl';
|
|
|
|
describe('RecipeEditForm', () => {
|
|
let component: RecipeEditForm;
|
|
let fixture: ComponentFixture<RecipeEditForm>;
|
|
|
|
beforeEach(async () => {
|
|
const imageServiceMock = {
|
|
getOwnedImagesCount: vi.fn(() => of(0)),
|
|
getOwnedImageViewsWithBlobUrls: vi.fn(() =>
|
|
of({
|
|
count: 0,
|
|
slice: {} as SliceViewMeta,
|
|
content: [],
|
|
} as SliceView<ImageViewWithBlobUrl>),
|
|
),
|
|
} as Partial<ImageService>;
|
|
|
|
await TestBed.configureTestingModule({
|
|
imports: [RecipeEditForm],
|
|
providers: [
|
|
{
|
|
provide: ImageService,
|
|
useValue: imageServiceMock,
|
|
},
|
|
],
|
|
}).compileComponents();
|
|
|
|
fixture = TestBed.createComponent(RecipeEditForm, {
|
|
bindings: [
|
|
inputBinding(
|
|
'recipe',
|
|
() =>
|
|
({
|
|
id: 'test-id',
|
|
created: new Date(),
|
|
state: 'ENTER_DATA',
|
|
owner: {} as UserInfoView,
|
|
}) satisfies RecipeDraftViewModel,
|
|
),
|
|
],
|
|
});
|
|
component = fixture.componentInstance;
|
|
await fixture.whenStable();
|
|
});
|
|
|
|
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'));
|
|
fixture.detectChanges();
|
|
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');
|
|
});
|
|
});
|