angular: TestComponentBuilder/inject does not work, when component has templateUrl

Following test fails as expected (http://plnkr.co/edit/61ByTt?p=preview):

@Component({
  selector: 'header',
  template: '<h1>Hello Welt!</h1>'
})
export class TestComponent2 {
 }

describe('TestComponent', () => {
  it('should fail', inject([TestComponentBuilder], (tcb) => {
    return tcb.createAsync(TestComponent2).then((fixture) => {
      fixture.detectChanges();
      expect(1).toEqual(2);
    });
  }));
)};

Moving the template to an external resource, the test passes without failing (the async part doesn’t get executed) (http://plnkr.co/edit/ZOeFTO?p=preview):

@Component({
  selector: 'header',
  templateUrl: 'src/test.html'
})
export class TestComponent {

}

describe('TestComponent', () => {
  it('should fail', inject([TestComponentBuilder], (tcb) => {
    return tcb.createAsync(TestComponent).then((fixture) => {
      fixture.detectChanges();
      expect(1).toEqual(2);
    });
  }));
)};

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 5
Comments: 40 (10 by maintainers)

Most upvoted comments

I also have this issue, I’ve made a related issue in the webpack-starter kit here https://github.com/AngularClass/angular2-webpack-starter/issues/796

Spittal on Jul 26, 2016

Just in case anyone has the same issue as described in this ticket, the solution for me was to have this entry in my webpack.test.js config module, loaders section (that means you need angular2-template-loader included in your devDependencies in package.json):

{
    test: /\.ts$/,
    loaders: [
        'awesome-typescript-loader?sourceMap=false,inlineSourceMap=true,compilerOptions{}=removeComments:false',
        'angular2-template-loader'
    ],
    exclude: [/\.e2e\.ts$/]
},
{
    test: /\.(html|css)$/,
    loader: 'raw-loader',
    exclude: [helpers.root('src/index.html')]
}

marinho on Sep 27, 2016

@markthethomas I’m facing the same problem.

Chrome 51.0.2704 (Windows 7 0.0.0): Executed 0 of 3 SUCCESS (0 secs / 0 secs) Chrome 51.0.2704 (Windows 7 0.0.0): Executed 2 of 3 SUCCESS (0 secs / 0.02 secs) ERROR: ‘Potentially unhandled rejection [2] Failed to load /app/app.component.html (WARNING: non-Error used)’

batchu on Jun 14, 2016

Closing this as the initial issue is outdated.

If you have any issue with the current Angular version, please open a new issue

vicb on Sep 22, 2016

Hey, just ran into this issue in my project. Why is this marked as closed when it is obviously still happening.

Dekeyras on Jul 26, 2016

Same here; happy to help fix if possible 😃 new to the angular internals though

Mark

Sent from my iPhone

@markthethomas everywhere

On Jul 22, 2016, at 4:19 PM, Anselm notifications@github.com wrote:

Using RC4 and hit the same issue. Anybody able to solve or work around on this issue? Thank you in advance…

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

markthethomas on Jul 23, 2016

Using RC4 and hit the same issue. Anybody able to solve or work around on this issue? Thank you in advance…

anselmhou on Jul 22, 2016

I’m seeing this w/ rc1 — I get 404s for any components that are using a templateUrl and created using TestComponentBuilder. Async injections let the test pass and never get executed. I’m using a karma test shim identical to the one created by the ng-cli, so I’m not sure if it’s something that would be resolved by a different setup when using setBaseTestProviders()

markthethomas on Jun 14, 2016

Any info on when this issue will be solved? To me, yes to me (personal opinion, don’t kill me for it), this sounds like a rather important issue, since this makes it impossible for me to unit test components.

basvandenheuvel on Mar 29, 2016

templateURL seems to work for me. NgBeta.9

Here’s my setup.

describe('hello', () => {  
  myComponent: AppComponent;  
  beforeEachProviders(() => {  
    //name of providers  
    MockBackend,
    BaseRequestOptions,
    provide(Http, {
      useFactory: (a: ConnectionBackend, b: BaseRequestOptions) => {
        return new Http(backend, defaultOptions);
      }, deps: [MockBackend, BaseRequestOptions]
    })
  });
  beforeEach(injectAsync(
    [TestComponentBuilder, MockBackend], (tcb, mockBackend) => {
       return tcb.createAsync(AppComponent)
         .then((fixture) => {
           myComponent = fixture;
          });
       }));
  it('I should have my component', () => {
    expect(myComponent).not.isEqual(null);
  });
});

I understand the pain of the tests no working. Ask away any questions.

johnvnguyen on Mar 29, 2016

@basvandenheuvel Technically, you can unit test components, by using “template” instead of “templateUrl” and copy-pasting all your views. It obviously sucks, but it’s some workaround.

GaloisGirl on Mar 29, 2016