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

我找到了解决方案。在单元测试运行时dict引用来自绑定的函数。 这两个功能名称相同。一个来自组件中的绑定和功能。

以下更改解决了这个问题。已将component.close()更改为close()

closeModal()

Angularjs组件单元测试

1 个答案: