How to use spy from jasmine

Question

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.

It seems like your test is not completed yet and has some bugs. I've tried somehow to edit it but didn't understand the aim of your test. Could you fix it - what you're expecting from your test file? — shohrukh, Aug 28 '18 at 13:08
Hi thanks for the reply actually iam trying cover my code using above spec but while iam running the code coverage if conditions have not covered and else part not covered actually I don’t how to do — Mr.M, Aug 28 '18 at 13:12
Got it. Added an example in the answers, please check it out. — shohrukh, Aug 28 '18 at 14:48

shohrukh · Accepted Answer · 2018-08-29T05:23:11.780

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.

Hi @sherlock.92 I am getting error while implementing in my code ‘type string [] is not assignable to type string’ for component.filePath = [‘file’]; for this line kindly let me know what iam doing wrong here — Mr.M, Aug 29 '18 at 04:56
Sorry, my mistake. I thought your file path is an array. So I've updated the answer. In your tests you have to write `component.filePath = 'File1';` or `component.filePath = '';` if you want to test another case. — shohrukh, Aug 29 '18 at 05:24
Hi one more request if say else path not covered please let me know what I have to do — Mr.M, Aug 29 '18 at 05:29
The problem is it says else path not covered in code coverage for this method — Mr.M, Aug 29 '18 at 05:47
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/178990/discussion-between-mahadevan-and-sherlock-92). — Mr.M, Aug 29 '18 at 05:47

How to use spy from jasmine

1 Answers1