Angularjs component unit testing

Question

component.js

import template from './app-profile-image-uploader-dialog.html';

class ProfileImageUploaderDialogController {
  constructor() {
    'ngInject';
    this.name = 'appProfileImageUploaderDialog';
  }

  close() {
    this.dismiss({ $value: 'cancel' });
  }

  crop(croppedImage) {
    this.close({ $value: croppedImage });
  }
}

export const ProfileImageUploaderDialog = {
  selector: 'appProfileImageUploaderDialog',
  template: template,
  controller: ProfileImageUploaderDialogController,
  controllerAs: 'vm',
  bindings: {
    close: '&',
    dismiss: '&'
  }
};

component.html

<app-profile-image-uploader close-fn="vm.close()" crop-fn="vm.crop(croppedImage)"></app-profile-image-uploader>

component.spec.js

import {ProfileImageUploaderDialog} from "../../../../app/features/common/components/app-profile-image-uploader-dialog/app-profile-image-uploader-dialog.component";
import 'angular-mocks';


describe('appProfileImageUploaderDialog', () => {

  const  bindings = {
    close: jasmine.createSpy('close'),
    dismiss: jasmine.createSpy('dismiss')
  };

  beforeEach(() => {
    angular.mock.module('innoApp');
  });

  let $componentController;

  describe('appProfileImageUploaderDialog controller tests', () => {

    let component;
    beforeEach(inject((_$componentController_) => {
      $componentController = _$componentController_;
    }));

    beforeEach(() => {
      component = $componentController(ProfileImageUploaderDialog.selector, {}, bindings);
    });

    it('should have set the parameters ', () => {
      expect(component.name).toBe('appProfileImageUploaderDialog');
    });

    it('should close the modal window if close button is pressed', (() => {
      component.close();
      expect(bindings.dismiss).toHaveBeenCalledWith({ $value: 'cancel'});
    }));

    it('should close the modal window if close button is pressed', (() => {
      let croppedImage = '';
      component.crop(croppedImage);
      expect(bindings.close).toHaveBeenCalledWith({ $value:  croppedImage});
    }));
  });
});

In this test one spec is failing. Can not figure out why.

it('should close the modal window if close button is pressed', (() => {
      component.close();
      expect(bindings.dismiss).toHaveBeenCalledWith({ $value: 'cancel'});
    }));

This is the error I am getting.

Expected spy dismiss to have been called with [ Object({ $value: 'cancel' }) ] but it was never called.

Add a console.log() in your function close() to see if it is indeed called when running the test — Protozoid
– Protozoid, Commented Jun 7, 2018 at 9:18
It is not called. But perfectly works when the application runs. But not in the unit test. — Anuradha Gunasekara
– Anuradha Gunasekara, Commented Jun 7, 2018 at 9:24
And the following test calling component.crop(croppedImage) works fine? — Protozoid
– Protozoid, Commented Jun 7, 2018 at 9:47
This is odd ... wild guess here, maybe the let component; should be outside the describe, next to let $componentController;? I think it has something to do with component instantiation at that point in time — Protozoid
– Protozoid, Commented Jun 7, 2018 at 9:52

Anuradha Gunasekara · Accepted Answer · 2018-06-07 09:58:45Z

1

I found the solution. At the unit test run time component.close() referes to the function which comes from the bindings. Both function names are same in here. One coming from the bindings and the function in the component.

Following changes solved the issue. Changed close() to closeModal()

closeModal() {
    this.dismiss({ $value: 'cancel' });
  }

<app-profile-image-uploader close-fn="vm.closeModal()" crop-fn="vm.crop(croppedImage)"></app-profile-image-uploader>



it('should close the modal window if close button is pressed', (() => {
      component.closeModal();
      expect(bindings.dismiss).toHaveBeenCalledWith({ $value: 'cancel'});
    }));

answered Jun 7, 2018 at 9:58

Anuradha Gunasekara

7,0132 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs component unit testing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related