Модульное тестирование компонентов Angularjs

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});
    }));
  });
});

В этом тесте одна спецификация не работает.Не могу понять, почему.

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

Это ошибка, которую я получаю.

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

Answer 1

Я нашел решение.Во время выполнения модульного теста component.close() относится к функции, которая происходит из привязок . Здесь оба названия функций одинаковы .Один из них связан с привязками и функцией в компоненте.

Следующие изменения решили проблему.Изменено close() на 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'});
    }));