CODEWITHSUNDEEP
angularprotractore2e-testing
DWilches
DWilches

Reputation: 23015

Angular e2e tests: component is not a known element

I created an Angular 4 project with ng cli, and it runs well in Chrome, but when I try to execute the automated tests I get the following error:

HeadlessChrome 0.0.0 (Windows 10 0.0.0) AppComponent should create the app FAILED
        'vm-navbar' is not a known element:
        1. If 'vm-navbar' is an Angular component, then verify that it is part of this module.
        2. If 'vm-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<vm-navbar></vm-navbar>
        <div class="container">
        "): ng:///DynamicTestModule/AppComponent.html@0:0

        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        <div class="container">
            [ERROR ->]<router-outlet></router-outlet>
        </div>

Where vm-navbar is the tag of one of my components. This is the content that I have in my app.2e2-spec.ts:

import { AppPage } from './app.po';

describe('vmplus App', () => {
    let page: AppPage;

    beforeEach(() => {
        page = new AppPage();
    });

    it('should display welcome message', () => {
        page.navigateTo();
        expect(page.getParagraphText()).toEqual('Welcome to app!');
    });
});

I have tried configuring TestBed like this, to let it know about my component, but no success so far:

import { NavBarComponent } from "../src/app/navbar/navbar.component";
import { TestBed } from "@angular/core/testing";
...
beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [ NavBarComponent ]
    });
    page = new AppPage();
});

This is what my navbar.component.ts file looks like:

import { Component } from "@angular/core";
import { AuthGuard } from "../auth/auth-guard.service";

@Component({
    selector: 'vm-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: [ './navbar.component.scss' ]
})
export class NavBarComponent
{
    constructor(public authGuard: AuthGuard)
    {
    }
}

Do you know how to solve this problem?

Upvotes: 0

Views: 823

Answers (1)

DWilches
DWilches

Reputation: 23015

Found the problem, note the name of the test in the error message is "should create the app", but the test name in the source code is "should display welcome message". The error occurred in a different file I was not aware of: Angular created by default an app.component.spec.ts in my component's folder (not in my tests folder).

To solve the problem I added in app.component.spec.ts the required components: NavBarComponent and AuthComponent, and in the imports section the AppRoutingModule (that is what I called the router in my app):

import { TestBed, async } from '@angular/core/testing';

import { AppComponent } from './app.component';
import { NavBarComponent } from "./navbar/navbar.component";
import { AuthGuard } from "./auth/auth-guard.service";
import { AppRoutingModule } from "./app-routing.module";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { APP_BASE_HREF } from '@angular/common';

describe('AppComponent', () => {
    beforeEach(async(() => {
        const authGuardStub = {};

        TestBed.configureTestingModule({
            declarations: [
                AppComponent,
                AuthComponent,
                NavBarComponent
            ],
            imports: [
                AppRoutingModule,
                FormsModule,
                HttpModule
            ],
            providers: [
                { provide: AuthGuard, useValue: authGuardStub },
                { provide: APP_BASE_HREF, useValue : '/' }
            ]
        }).compileComponents();
    }));

    it('should create the app', async(() => {
        const fixture = TestBed.createComponent(AppComponent);
        const app = fixture.debugElement.componentInstance;
        expect(app).toBeTruthy();
    }));
});

Upvotes: 1

Related Questions