lathonez / clicker

Ionic 2 + @angular/cli Seed Project : Angular2 + Typescript + Karma + Protractor + Travis
http://lathonez.com/2018/ionic-2-unit-testing/
MIT License
430 stars 136 forks source link

Please call "Test Bed.compileComponents" before your tests. #155

Closed soupman99 closed 8 years ago

soupman99 commented 8 years ago

How to reproduce:

ng test --watch

Let the tests run the first time, then make a change to page2.ts

I assume it's something to do with the fact that the files are being watched and not being fully rebuilt each time. Any idea on a solution that would allow us to --watch rather than just running the test manually each time?

lathonez commented 8 years ago

Replicated, tried doing TestBed.compileComponents(); in likely places to no avail.

Also tried TestBed.compileComponents().then(() ... as per http://kendaleiv.com/angular-2-component-testing-template-using-testbed/ but I got:

FAILED TESTS:
  Pages: Page2
    ✖ should create page2
      Chrome 53.0.2785 (Linux 0.0.0)
    Failed: Uncaught (in promise): Failed to load page2.html
    Error: Uncaught (in promise): Failed to load page2.html

Everything seems to work the first time around..

lathonez commented 8 years ago

Tried with ng new, running npm test and making a change to app.component.ts, which works fine.

More investigation needed.

lathonez commented 8 years ago

I'm confident enough that this is the correct pattern:

  beforeEach(async(() => {
    return TestUtils.configureIonicTestingModule([Page2])
      .compileComponents().then(() => {
        fixture = TestBed.createComponent(Page2);
        instance = fixture.debugElement.componentInstance;
        fixture.detectChanges();
      });
  }));

  afterEach(() => {
    fixture.destroy();
  });

  it('should create page2', async(() => {
    expect(fixture).toBeTruthy();
    expect(instance).toBeTruthy();
  }));

However I get:

30 10 2016 15:13:30.904:WARN [web-server]: 404: /page2.html
  Pages: Page2
    ✖ should create page2
Chrome 54.0.2840 (Linux 0.0.0) Pages: Page2 should create page2 FAILED
    Failed: Uncaught (in promise): Failed to load page2.html
    Error: Uncaught (in promise): Failed to load page2.html

On the second round

lathonez commented 8 years ago

^ Seems to be working in ng-cli

lathonez commented 8 years ago

Tried moving pages to a subdir of app (ng-cli structure) to no avail

lathonez commented 8 years ago

Copying the ng-cli test component directly into src/app fails to run properly in clicker, so we're missing something pretty fundamental.

lathonez commented 8 years ago

using tsconfig.json from ng-cli sorts it. I might try to just use theirs separately for testing rather than merging Ionic's.