Angular 1.5 component unit testing with webpack

Question

I'm trying to test a component with controller, with some bindings:

class AppSpecificController {
  constructor() {
    this.text = this.initialText ? this.initialText : 'No initial text has been specified.';
  }
}

export const AppSpecificComponent = {
  bindings: {
    'initialText': '<bindInitialText'
  },
  templateUrl: '/app/components/app-specific/app-specific.html',
  controller: AppSpecificController,
  controllerAs: 'appSpecific'
};

export default AppSpecificComponent;

In my unit test file I don't want to load the complete application, just the things I need. So I figured to mock a module or just create a new one named something with mock, add the component to that module, and load that module:

import {AppSpecificComponent} from './app-specific.component';

describe('AppSpecificComponent', () => {
    let controller;
    let scope;
    let $componentController;

    beforeEach(() => {
      angular.module('mock-module', [])
        .component('appSpecific', AppSpecificComponent);

      // this fails
      module('mock-module');

      inject((_$componentController_, $rootScope) => {
        scope = $rootScope.$new();
        $componentController = _$componentController_;
      });

      controller = $componentController('appSpecific', {$scope: scope}, {initialText: 'Some text'});
    });

    it('should test something', () => {
      expect(true).toBeTruthy();
    });
});

Creating the module mock-module is fine, but loading it fails, and obviously injecting stuff in the not-so-much-loaded-module fails, as well as creating a controller on which I can start testing. It would be nice to be able to test the components individually, separate from the application in which it runs.

Just using the new operator for the class AppSpecificController doesn't work since then the bindings you receive from the component are not there:

// fails, no bindings available in controller
controller = new AppSpecificController();

Hey Chris, Have you solved this problem?

Ricardas
– Ricardas

2016-11-14 10:41:36 +00:00
Commented Nov 14, 2016 at 10:41 — Ricardas
– Ricardas, Commented Nov 14, 2016 at 10:41
Ah yes, I'll add an answer.

Chris Jager
– Chris Jager

2016-11-23 13:54:29 +00:00
Commented Nov 23, 2016 at 13:54 — Chris Jager
– Chris Jager, Commented Nov 23, 2016 at 13:54

Chris Jager · Accepted Answer · 2016-11-23 13:56:56Z

2

I found the answer somewhere else on StackOverflow, not sure where anymore. The answer however I was looking for:

angular.mock.module($provide => {
  $provide.controller('SomeController', () => { ... });
  $provide.constant('someConstant', 'some constant');
});

answered Nov 23, 2016 at 13:56

Chris Jager

1239 bronze badges

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

Collectives™ on Stack Overflow

Angular 1.5 component unit testing with webpack

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