bug(testing) Unable to do async-initialization in beforeEach-hook

[choeller]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

In my tests I use the beforeEach-Hook to create the component-fixture. This worked in the past but with the latest changes I'm unable to get that working again. Trying to do it like this:

  beforeEach(async(inject([TestComponentBuilder, TaskService],
    (_tcb:TestComponentBuilder, _taskService:TaskService) => {
      return _tcb
        .overrideDirective(TaskListComponent, RouterLinkWithHref, DummyRouterLink)
        .overrideDirective(TaskItemComponent, RouterLinkWithHref, DummyRouterLink)
        .createAsync(TaskListComponent)
        .then(_fixture => {
          fixture = _fixture;
          console.log("fixture", fixture);
        });
    })));

doesn't wait for the component to be created (the fixture is printed but after the test fails)

Trying to use (done) callback from jasmine also doesn't work. In this case the inject-function is not called/executed at all:

  beforeEach((done) => {
    inject([TestComponentBuilder, TaskService],
      (_tcb:TestComponentBuilder, _taskService:TaskService) => {
        taskService = _taskService;
        _tcb
          .overrideDirective(TaskListComponent, RouterLinkWithHref, DummyRouterLink)
          .overrideDirective(TaskItemComponent, RouterLinkWithHref, DummyRouterLink)
          .createAsync(TaskListComponent)
          .then(_fixture => {
            fixture = _fixture;
            console.log("fixture", fixture);
            done();
          });
      })
  });

this leads to:

Chrome 48.0.2564 (Linux 0.0.0) TaskList Component should call deleteTask when clicking the trash-bin FAILED Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

Expected/desired behavior

beforeEach callback should wait for returned promises / should be able to work with done-function

What is the motivation / use case for changing the behavior?

being able to initialize the component under test in beforeEach-Hook

Please tell us about your environment:

• Angular version: 2.0.0-rc.4
• Browser: [all ]
• Language: [TS]

[katherinegould]

+1

[BenjaminRhys-Davies]

👍

[cexbrayat]

Same here, but not in all my projects.

So, this is going to sound a bit weird, but I solved it by removing the system-polyfills.js in the Karma setup generated by angular-cli...

{ pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false },
// { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false },
{ pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false },

[katherinegould]

I've just managed to fix it by adding the karma-jasmine package to our devDependancies

"karma-jasmine": "^0.3.6"

[cexbrayat]

@katherinegould I tried it also, but that was not fixing it for me (karma 0.13.22 -> 1.1.0, karma-jasmine 0.3.8 -> 1.0.2, systemjs 0.19.26 -> 0.19.31)...

[choeller]

@cexbrayat @katherinegould Both of your workarounds don't fix it for me. Deleting system-polyfills changes nothing and I already have karma-jasmine in my devDependencies... :/

Which way do you do the initialization? Using async or using done? On my side about 1 in 10 test-runs pass when using async, but I'm quite sure that this is only by accident, as sometimes the tcb.createAsync finishes before the actual test-run starts.

[cexbrayat]

@choeller Using async, pretty much as in your first example. I migrated the 300 unit tests of my ebook to rc.4, and then a few hundreds in other projects,all clear using async if I comment system-polyfill in karma conf...

[choeller]

@cexbrayat woah - awesome! commenting out system-polyfill actually does solve my problem too... I just introduced another bug while trying out stuff... that's quite weird.

Maybe @juliemr can shed some light on this?

[katherinegould]

Strange that it works for me with system-polyfill left in.
@choeller I'm using async too.

[choeller]

I just played around a little more and for me it works when I include system-polyfill before zone.js but not the other way around...

ok:

 { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false },
 { pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false },

not ok:

 { pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false },
 { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false },

obviously system-polyfills overrides some async behaviour added by zone.js

[jonnysamps]

I had some tests working this way and others failing. I narrowed it down to the components with styleUrls failed and the ones with the styles defined in the component decorator didn't fail.

Tests Pass:

@Component({
  selector: 'my-cmp',
  moduleId: module.id,
  templateUrl: 'my.component.html',
  styles: [`
    .some-style{
        margin-left: 1rem;
    }
  `]
})
export class MyComponent {}

Tests Failed:

@Component({
  selector: 'my-cmp',
  moduleId: module.id,
  templateUrl: 'my.component.html',
  stylesUrls: ['my.component.css']
})
export class MyComponent {}

[meeroslav]

For me none of the above mentioned proposals worked with RC4. However, I did manage to solve it by simply removing async from tests.

This works every time:

it('should create the component',
    inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
        tcb.createAsync(MyComponent).then((fixture: ComponentFixture<MyComponent>) => {
            expect(fixture.componentInstance instanceof MyComponent).toBe(true);
        });
    })
);

This NEVER works:

it('should create the component',
    async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
        tcb.createAsync(MyComponent).then((fixture: ComponentFixture<MyComponent>) => {
            expect(fixture.componentInstance instanceof MyComponent).toBe(true);
        });
    }))
);

Not sure what is keeping test (async on) active as body gets evaluated rather quickly.

[dalamgir]

Tried this with rc4 does not seem to work

[juliemr]

The order of polyfills unfortunately does matter - I believe we note this where we have examples, I'm not sure what else we can do. @choeller any place that documentation would have assisted you?