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

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]

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 3
  • Comments: 18 (10 by maintainers)

Commits related to this issue

Most upvoted comments

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.

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 },