CODEWITHSUNDEEP
angularjasminekarma-jasmine
Mr.M
Mr.M

Reputation: 1480

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

Please let me know what iam doing wrong here.

Upvotes: 2

Views: 1484

Answers (1)

shokha
shokha

Reputation: 3179

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:

 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:

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).

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:

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.

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

Upvotes: 1

Related Questions