Comments (12)
Could you provide a repo to reproduce the bug? Or at least same code example ?
from ionic-boilerplate.
So this are the error messages:
1 11 2016 11:05:21.145:WARN [web-server]: 404: /st-error-message.component.html
(...)
This is the spec:
import { Component, DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { TestUtils } from '../../../test/test-util';
import { StErrorMessageComponent } from './st-error-message.component';
@Component({
template: `
<st-error-message
[message]="message"
></st-error-message>`
})
class TestHostComponent {
message = "This is a test message";
}
let fixture: ComponentFixture<TestHostComponent> = null;
let element: DebugElement;
let hostInstance: any = null;
let componentInstance: any = null;
describe('Component: StErrorMessage', () => {
beforeEach(async(() => {
TestUtils.configureIonicTestingModule([
TestHostComponent,
StErrorMessageComponent
])
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestHostComponent);
hostInstance = fixture.componentInstance;
element = fixture.debugElement.query(By.css('st-error-message'));
componentInstance = element.componentInstance;
fixture.detectChanges();
});
it('should instanciate', () => {
expect(hostInstance).toBeDefined();
});
});
And the component:
import {
Component,
Input
} from '@angular/core';
@Component({
selector: 'st-error-message',
templateUrl: 'st-error-message.component.html'
})
export class StErrorMessageComponent {
@Input() message;
}
The unit test setup is exactly like yours. I was looking at the webpack.test.js and notice that the html rule is a raw-loader, does this load template correctly? Since I'm using templateUrl
on the component st-error-message.component.html
never gets matched.
from ionic-boilerplate.
Ok try this. Do:
npm i --save-dev angular2-template-loader
and replace in wepack.test.ts the snippet about awesome-typescript-loader with this:
/**
* Typescript loader support for .ts and Angular 2 async routes via .async.ts
*
* See: https://github.com/s-panferov/awesome-typescript-loader
*/
{
test: /\.ts$/,
loaders: [
`awesome-typescript-loader?sourceMap=${!coverageEnabled},inlineSourceMap=${coverageEnabled},module=commonjs,noEmitHelpers=true,compilerOptions{}=removeComments:true`,
'angular2-template-loader'
],
// query: {
// // use inline sourcemaps for "karma-remap-coverage" reporter
// sourceMap: !coverageEnabled,
// inlineSourceMap: coverageEnabled,
// module: 'commonjs',
// noEmitHelpers: true,
// compilerOptions: {
// removeComments: true
// }
// },
exclude: [/\.e2e\.ts$/]
},
Please, let me know if it fix the issue.
from ionic-boilerplate.
Doesn't work, it gives me the same error
from ionic-boilerplate.
Ok, so the issue is on the test spec i think. I'm not able to reproduce your issue, so the best I could do for you is to provide same test example I used in my project (based on this boilerplate).
NOTE: I'm not testing css/html in my unit tests, as i prefer to test them with protractor.
1° Template:
import { NavMock } from '../../app/app.mocks.spec';
import { MyService } from '../../services/my.service';
import { HomePage } from './home.page';
describe('Home Page:', () => {
let homePageFixture: HomePage;
beforeEach(fakeAsync(() => {
//Notice that I'm using <any> to prevent TS errors
homePageFixture = new HomePage(<any> MyService, <any> new NavMock());
}));
it('Should be defined', () => {
expect(homePageFixture).toBeDefined();
});
});
2° Template
import { HelpPage } from './help.page';
import { TestBed, inject} from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NavParams } from 'ionic-angular';
describe('Help Page:', () => {
const mockParams: any = new NavParams('myparam');
beforeEach(() => TestBed.configureTestingModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{provide: NavParams, useValue: mockParams},
HelpPage,
],
}));
it('Should be defined', inject([HelpPage], (help: HelpPage) => {
expect(help).toBeDefined();
}));
});
Hope it helps.
from ionic-boilerplate.
It doesn't appears to be related to the spec since it works with the other setup based on rollup
from ionic-boilerplate.
Please fork this repo and provide an example, so i could debug the issue.
from ionic-boilerplate.
I am interessted in this too.
The following test doesn't fail but produces an error in your home.page.spec.ts when added
it('should create register Component', () =>
TestBed.compileComponents().then(() => {
var fixture = TestBed.createComponent(HomePage);
fixture.detectChanges();
var compiled = fixture.debugElement.componentInstance;
expect(compiled).toBeTruthy();
})
);
ERROR: 'Unhandled Promise rejection:', 'Cannot create the component HomePage as it was not imported into the testing module!', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error{line: 13311, sourceURL: 'http://localhost:9880/base/config/karma-shim.js?ad71ec8f54dc5e81691ee14fa6222281346227e3', stack: 'createComponent@http://localhost:9880/base/config/karma-shim.js?ad71ec8f54dc5e81691ee14fa6222281346227e3:13311:140...
from ionic-boilerplate.
@wh33ler Use this template instead:
let comp: HomePage;
let fixture: ComponentFixture<HomePage>;
let de: DebugElement;
beforeEach(() => {
TestBed.configureTestingModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [HomePage],
providers: [
{provide: NavController, useValue: NavController},
],
});
fixture = TestBed.createComponent(HomePage);
// #trick
// fixture.componentInstance.ionViewWillEnter();
fixture.detectChanges();
comp = fixture.componentInstance;
de = fixture.debugElement;
});
Than in your "it" statements use "comp" to access to the component.
from ionic-boilerplate.
thanks for the quick reply: If I use your suggestion I get the following error
Error: This test module uses the component HomePage which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test. in config/karma-shim.js (line 13231).....
from ionic-boilerplate.
@wh33ler Latest commit fix the issue about templateUrl not compiled. I also added a working example in home.page.spec.ts
from ionic-boilerplate.
thanks a lot for the quick help. This fixed my problem I am having for a day now. Just one adjustment I had to do in my more complex Page is to remove the detectChanges call on the fixture at that time. Just wanted to let you know.
Btw thanks a lot for the great boilerplate. Made our project structure a lot better. Keep it up 👍
from ionic-boilerplate.
Related Issues (20)
- Unit tests broken HOT 1
- Source map/debugging not working in unit tests HOT 1
- yarn failed on gitlab HOT 4
- Does tests get in the production build? HOT 1
- No gulp? HOT 3
- When running karma test, at-loader broke HOT 4
- scss-lint fails HOT 4
- Angular Language Services HOT 5
- npm run android:dev failed HOT 1
- Cannot run in production mode HOT 1
- add a pre-build step HOT 4
- Themed application HOT 1
- Themes HOT 1
- Is it possible to start a project with ionic 2 and not 3? HOT 2
- Issue on npm run ios:dev HOT 1
- Quickstart guide needs to be updated? HOT 2
- npm run e2e E/protractor - Could not find Angular on page
- Can't run on Android with npm run android:dev
- Style guide
- if I run npm run ios:dev nothing happen HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-boilerplate.