I am currently trying to write a set of unit test for a component that uses another component tag within its html.
<bm-panel [title]="title" [panelType]="panelType" [icon]="icon"
class="bm-assignment-form-panel">
<div *ngIf="isLoading" class="bm-loader"><img src="../../../assets/animal.gif"></div>
<div class="container-fluid w-100 m-0 p-0">
<!-- Content -->
</div>
</bm-panel>
However I seem unable to compile this other component. I've tried several approaches using the NO_ERROR_SCHEMA, 1-3 beforeEach'es. The only approach that has worked looks like this
import {...}
export function main() {
describe( 'AssignmentFormComponent', () => {
let comp: AssignmentFormComponent;
let fixture: ComponentFixture<AssignmentFormComponent>;
let de: DebugElement;
let el: HTMLElement;
beforeEach( () => {
TestBed.configureTestingModule( {
imports: [ AssignmentFormModule ]
} );
} );
describe( 'should build with no problems', () => {
it( 'should be defined', () => {
TestBed.compileComponents().then( () => {
fixture = TestBed.createComponent( AssignmentFormComponent );
comp = fixture.componentInstance;
expect( comp ).toBeDefined();
} );
} );
} );
} );
}
This doesn't really feel like the best practice way and somewhat defeats the purpose of the before each blocks. I've tried looking at how to mock it but I'm unable to find any resources that explains how the overridecomponent function works, or how mocking in general works with jasmine.
Looking at a couple of videos from rangle.io, they've written their beforeEach blocks like this:
beforeEach( async() => {
TestBed.configureTestingModule( {
imports: [ AssignmentFormModule ]
} );
} );
beforeEach( async() => {
TestBed.compileComponents();
} );
beforeEach( () => {
fixture = TestBed.createComponent( AssignmentFormComponent );
comp = fixture.componentInstance;
} );
it( 'should be defined', () => {
expect( comp ).toBeDefined();
} );
This fails to compile the TemplateUrl of the bm-panel component. I've also tried to declare the components directly rather than through the Module, but it has no effect.
The PanelContainerComponent (bm-panel) is imported through a module within the AssignmentFormModule, does this make compileComponent unable to compile it?
If overrideComponent would be a possible solution, would anyone care to explain how I would use it?
should display TestTitle
Chrome 56.0.2924 (Windows 10 0.0.0)
Error: This test module uses the component PanelContainerComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Plea
se call "TestBed.compileComponents" before your test.
at TestBed._initIfNeeded (node_modules/@angular/core/bundles/core-testing.umd.js:774:31) [ProxyZone]
at TestBed.createComponent (node_modules/@angular/core/bundles/core-testing.umd.js:853:18) [ProxyZone]
at Function.TestBed.createComponent (node_modules/@angular/core/bundles/core-testing.umd.js:682:33) [ProxyZone]
at Object.eval (dist/dev/app/bachelor-manager/panels/assignment-form/assignment-form.component.spec.js:62:41) [ProxyZone]
at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:79:39) [ProxyZone]
at Zone.run (node_modules/zone.js/dist/zone.js:126:43) [<root> => ProxyZone]
at Object.<anonymous> (node_modules/zone.js/dist/jasmine-patch.js:102:34) [<root>]
at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (node_modules/zone.js/dist/jasmine-patch.js:132:42) [<root>]
at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (node_modules/zone.js/dist/jasmine-patch.js:132:42) [<root>]
at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (node_modules/zone.js/dist/jasmine-patch.js:132:42) [<root>]
at Zone.runTask (node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>]
at drainMicroTaskQueue (node_modules/zone.js/dist/zone.js:529:35) [<root>]
at ZoneTask.invoke (node_modules/zone.js/dist/zone.js:420:25) [<root>]
at data.args.(anonymous function) (node_modules/zone.js/dist/zone.js:1527:25) [<root>]
