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 137 forks source link

Failed: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'. #262

Closed AugusDogus closed 7 years ago

AugusDogus commented 7 years ago

I followed your tutorial on your blog and did not run into any errors, but when trying to replicate the steps in my current project I am.

When trying to setup the most basic test for home.ts

import { Component } from '@angular/core';
import { WelcomeSegmentComponent } from '../../components/welcome-segment/welcome-segment';

@Component({
  selector: 'page-home',
  templateUrl: './home.html',
})

export class HomePage {

  constructor() {}

  ionViewDidLoad() {

  }

}

using the basic test laid out on your blog post

import { ComponentFixture, async } from '@angular/core/testing';
import { TestUtils }               from '../../test';
import { HomePage }                from './home';
import { WelcomeSegmentComponent } from "../../components/welcome-segment/welcome-segment";

let fixture: ComponentFixture<HomePage> = null;
let instance: any = null;

describe('Pages: HomePage', () => {

    beforeEach(async(() => TestUtils.beforeEachCompiler([HomePage, WelcomeSegmentComponent]).then(compiled => {
        fixture = compiled.fixture;
        instance = compiled.instance;
    })));

    it('should create the home page', async(() => {
        expect(instance).toBeTruthy();
    }));
});

I receive the error Failed: Uncaught (in promise): Error: No provider for UserProvider!

In my attempts to troubleshoot I included the testbed config inline in my test to add UserProvider to the list of providers.

import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { App, Platform, Form, Keyboard, MenuController, NavController, Config, IonicModule } from "ionic-angular";
import { ConfigMock } from "ionic-mocks";
import { FormsModule, ReactiveFormsModule} from "@angular/forms";
import { HomePage }                from './home';
import { WelcomeSegmentComponent } from "../../components/welcome-segment/welcome-segment";
import { UserProvider } from "../../providers/user/user";

let fixture: ComponentFixture<HomePage> = null;
let instance: any = null;

describe('Pages: HomePage', () => {

    let fixture = null;
    let instance = null;

    beforeEach(async(() => {

        TestBed.configureTestingModule({
            declarations: [HomePage, WelcomeSegmentComponent],
            providers: [
                App, Platform, Form, Keyboard, MenuController, NavController, UserProvider,
                {provide: Config, useFactory: () => ConfigMock.instance()},
            ],
            imports: [
                FormsModule,
                IonicModule,
                ReactiveFormsModule,
            ],
        })
            .compileComponents().then(() => {
            fixture = TestBed.createComponent(HomePage);
            instance = fixture;
            fixture.detectChanges();
        });
    }));

    it('should create the home page', async(() => {
        expect(instance).toBeTruthy();
    }));
});

Having done this I now receive the error Failed: Uncaught (in promise): Error: No provider for DomController! and so I add that to the list of providers in the same way I did with UserProvider.

Following this I end up with the error Failed: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'.

I've redone these steps with minor differences here and there, but I always end up with the same error at the end. I'm not sure if I should be stubbing/mocking these components or services or if I'm completely off trail.

I'm very new to Angular, Jasmine, and testing in general. Any help offered would be much appreciated.

lathonez commented 7 years ago

Hey,

Please see #191.

Thanks

titusfx commented 6 years ago

Generally you can check the real error if you do:

ng test -sm=false

instead of

ng test

sm stands for sourcemap

Sometimes even that doesn't work and you need to set a breakpoint just before the exception and execute on the browser console and you receive the real error

lukasholzer commented 6 years ago

the flag -sm=false is now --source-map=false

lanshunfang commented 5 years ago

Try my solution:

https://stackoverflow.com/a/55039841/931908