Files
groceries-price-tracker/src/app/components/product-edit/product-edit.spec.ts

75 lines
2.5 KiB
TypeScript

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ProductEdit } from './product-edit';
import { ActivatedRoute } from '@angular/router';
import { Product } from '../../models/Product';
import { BehaviorSubject } from 'rxjs';
import { ImageStorage } from '../../services/image-storage';
import { ProductSettings } from '../../services/product-settings';
import { provideTranslateService } from '@ngx-translate/core';
import { By } from '@angular/platform-browser';
describe('ProductEdit', () => {
let component: ProductEdit;
let fixture: ComponentFixture<ProductEdit>;
let activatedRoute: Partial<ActivatedRoute>;
let imageStorage: Partial<ImageStorage>;
let productSettings: Partial<ProductSettings>;
const dataSubject = new BehaviorSubject({ product: new Product('mock', 'mock', 'mock.jpg', 1) });
beforeEach(async () => {
activatedRoute = {
data: dataSubject,
};
imageStorage = {
getImage: vi.fn().mockResolvedValue(new Blob([], { type: 'image/png' })),
};
productSettings = {
update: vi.fn(),
};
await TestBed.configureTestingModule({
imports: [ProductEdit],
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
{ provide: ImageStorage, useValue: imageStorage },
{ provide: ProductSettings, useValue: productSettings },
provideTranslateService(),
],
}).compileComponents();
fixture = TestBed.createComponent(ProductEdit);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should fetch image from imageStorage', () => {
expect(imageStorage.getImage).toHaveBeenCalledTimes(1);
});
//TODO: there is some sync issue by using a getter for the disabled state
it('should not call update on update btn click if form is unchanged', () => {
expect(component.disabled).toBe(true);
});
it('should call productSettings update on product update', async () => {
//User updates the product name
component.form.controls.name.patchValue('updated name mock');
component.form.controls.name.markAsDirty();
await fixture.whenStable();
expect(component.disabled).toBe(false);
const updateBtn = fixture.debugElement.query(By.css('app-action-btn'));
//this would trigger the update anyway thats why we check for the button not to be disabled
updateBtn.triggerEventHandler('click');
expect(productSettings.update).toHaveBeenCalledTimes(1);
});
});