How to use spy from jasmine

I am very new to Angular and jasmine and I am facing issues while I am doing mock:

public uploadFile(confirm)
this.uploadModalRef.close();
if (this.filePath.length)
let ngbModalOptions: NgbModalOptions =
backdrop : 'static',
keyboard : 'false',
windowClass: 'custom-class'
;
this.importModalRef = this.modalservice.open(confirm, ngbModalOption);




Here is what I am trying:

it('should upload the file', () =>
let close: "11";
let filepath;
component.uploadFile;
expect(component.uploadFile([filePath]) = ['11'].toBe(close);
);


But still if conditions was highlighted in code coverage and this.uploadModalref

this.uploadModalref

Please let me know what iam doing wrong here.

1 Answer
1

I've created simple unit test for uploadFile method: the test expects that modalService.open will be called with mocked params when we have non-empty filePath array:

uploadFile

modalService.open

filePath

describe('HelloComponent', () =>
let fixture: ComponentFixture<TestComponent>;
let component: HelloComponent;
const modalService: NgbModal = jasmine.createSpyObj('modalService', ['open']);

beforeEach(() =>
TestBed.configureTestingModule(
declarations: [ HelloComponent, TestComponent ],
providers: [
provide: NgbModal,
useValue: modalService
]
);

fixture = TestBed.createComponent(TestComponent);
component = fixture.debugElement.children[0].componentInstance;

fixture.detectChanges();
);

it('should call modalService.open on uploadFile', () =>
component.filePath = 'File1';
component.uploadModalRef = jasmine.createSpyObj('uploadModalRef', ['close']);
let mockOptions: NgbModalOptions =
backdrop : 'static',
keyboard : false,
windowClass: 'custom-class'
;
const mockConfirm = 'confirm-template';

component.uploadFile(mockConfirm);

expect(modalService.open).toHaveBeenCalledWith(mockConfirm, mockOptions);
);
);


Since your component depends on NgbModal we have to mock this injector and for this we can create jasmine spy object:

NgbModal

const modalService: NgbModal = jasmine.createSpyObj('modalService', ['open']);


Then we provide NgbModal into test module providers using our created spy object. This will allow us to spy on it methods (for this example it's open method).

NgbModal

open

In the test itself we follow AAA pattern: arrange act assert. First we arrange class properties and method arguments by creating mock data. Then we call the target function uploadFile. And lastly - we're expecting that modalService.open method will be called with correct arguments. You can also add another unit tests based on this example by changing mock data. For example:

uploadFile

modalService.open

it('should not call modalService.open on uploadFile when filePath is empty', () =>
component.filePath = '';
component.uploadModalRef = jasmine.createSpyObj('uploadModalRef', ['close']);
const mockConfirm = 'confirm-template';

component.uploadFile(mockConfirm);

expect(modalService.open).not.toHaveBeenCalled();
);


Since there is an if statement in the uploadFile method, the modalService.open method will not be called if the filePath array is empty. This is exactly what we expect in the last example.

uploadFile

modalService.open

filePath

Also created a stackblitz demo, so you can check it out here.

component.filePath = 'File1';

component.filePath = '';

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.