Log-Messages from ComponentMock() on console when testing with Karma

[floisloading]

When I run ng test --watch, I get strange Log-Messages in the console:

 10% building modules 1/1 modules 0 active(node:13084) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
16 08 2018 09:20:43.637:INFO [karma]: Karma v2.0.4 server started at http://0.0.0.0:9888/
16 08 2018 09:20:43.637:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
16 08 2018 09:20:43.653:INFO [launcher]: Starting browser PhantomJS
16 08 2018 09:21:03.354:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket lxY65evuenL7JAXlAAAA with id 23197298
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 0 of 203 SUCCESS (0 secs / 0 secs)
LOG: 'Attempting to configure 'name' with descriptor '{"value":"MockOfGenericFormComponent"}' on object 'function ComponentMock() {
            var _this = this;
            this.registerOnChange = function (fn) { };
            this.registerOnTouched = function (fn) { };
            this.writeValue = function (value) { };
            (options.outputs || []).forEach(function (output) {
                _this[output.split(':')[0]] = new core_1.EventEmitter();
            });
LOG: 'Attempting to configure 'name' with descriptor '{"value":"MockOfGenericFormComponent"}' on object 'function ComponentMock() {
            var _this = this;
            this.registerOnChange = function (fn) { };
            this.registerOnTouched = function (fn) { };
            this.writeValue = function (value) { };
            (options.outputs || []).forEach(function (output) {
                _this[output.split(':')[0]] = new core_1.EventEmitter();
            });
        }' and got error, giving up: TypeError: Attempting to change value of a readonly property.'
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 0 of 203 SUCCESS (0 secs / 0 secs)
LOG: 'Attempting to configure 'name' with descriptor '{"value":"MockOfGenericFormComponent"}' on object 'function ComponentMock() {
            var _this = this;
            this.registerOnChange = function (fn) { };
            this.registerOnTouched = function (fn) { };
            this.writeValue = function (value) { };
            (options.outputs || []).forEach(function (output) {
                _this[output.split(':')[0]] = new core_1.EventEmitter();
            });
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 1 of 203 (skipped 202) SUCCESS (0.397 secs / 0.186 secs)
TOTAL: 1 SUCCESS
TOTAL: 1 SUCCESS
TOTAL: 1 SUCCESS

These strange logs appear on every component in our project. The spec file is just:

fdescribe('EntityEditorComponent', () => {
  let component: EntityEditorComponent;
  let fixture: ComponentFixture<EntityEditorComponent>;
  let store: Spy<ExtendedStore<any>>;

  beforeEach(async(() => {
    store = createSpyFromClass(ExtendedStore);

    // Spy Methods
    store.filterReducers.and.returnValue(Observable.empty());

    // TestBed Config
    TestBed.configureTestingModule({
      declarations: [
        EntityEditorComponent,
        MockComponent(GenericFormComponent)
      ],
      providers: [
        {provide: ExtendedStore, useValue: store}
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EntityEditorComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Is there a chance to get rid of them? The tests obviously run nevertheless.

[ike18t]

Hi @frot-io ,

First off, thanks for using ng-mocks. Unfortunately this appears to be an issue with phantomJS: ariya/phantomjs#13895. I've tried to reproduce the issue with the ng-mocks tests by using the karma-phantom-launcher and including es6 polyfills, but I ended up getting stuck with some issue with zone.js's usage of Object.isFrozen. I'd recommend using chrome headless if you can, especially since your user base is not using phantomJS for a browser :-). If that isn't an option if you can figure out how to reproduce the issue in a repo that I can get access to I'd be happy to take a look.

[floisloading]

Thank you @ike18t for answering and also for maintaining this project! I will file a bug report in our system and see, when someon has spare time to test it with headless chrome :)

[jaadus]

I also get these logs when I try running tests using a MockComponent (Karma + PhantomJS)

[ike18t]

@jaadus Yeah, it is kind of a bummer. You can see the explanation in my response to @frot-io . You are more than welcome to try to reproduce the issue with the ng-mocks tests. Then either I can take a look or if you are up to creating a PR to resolve the issue that would be awesome as well.

[ike18t]

I'm going to close this issue since it is more of an issue with using PhantomJS which doesn't support ES6.