From b6031a144da91c156420c5a18fcff7c4f07578b1 Mon Sep 17 00:00:00 2001 From: Andrii Lundiak Date: Sat, 4 Aug 2018 01:07:24 +0200 Subject: [PATCH] Fixed `ng test` failed tests, due to errors: - "If 'router-outlet' is an Angular component, then verify that it is part of this module" - "If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'" - "Error: StaticInjectorError(DynamicTestModule)[ApiService -> HttpClient]" - "StaticInjectorError(DynamicTestModule)[HttpClient -> HttpHandler]" - "Can't bind to 'routerLink' since it isn't a known property of 'a'" - "Can't bind to 'formGroup' since it isn't a known property of 'form'" - "Can't bind to 'errorStateMatcher' since it isn't a known property of 'input'" - "Can't bind to 'dataSource' since it isn't a known property of 'table'" - "Error: StaticInjectorError(DynamicTestModule)[RouterLinkWithHref -> Router]" - "No provider for ControlContainer" Those errors were faced during `ng test`, and fixed step by step for every it(). Code changes verified with: - Node v10.8.0, - npm v6.2.0, - Angular Core v6.0.2, - Angular Material v6.0.2, - Angular Forms v6.0.2 and - Angualr CLI v6.0.0 (also with globally installed Angular CLI 6.1.2) --- e2e/src/app.e2e-spec.ts | 4 ++-- e2e/src/app.po.ts | 4 ++-- src/app/api.service.spec.ts | 4 ++-- src/app/app.component.spec.ts | 7 +++++-- src/app/book-create/book-create.component.spec.ts | 11 +++++++++-- src/app/book-detail/book-detail.component.spec.ts | 9 +++++++-- src/app/book-edit/book-edit.component.spec.ts | 11 +++++++++-- src/app/book/book.component.spec.ts | 10 ++++++++-- 8 files changed, 44 insertions(+), 16 deletions(-) diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts index e42d1f9..d5b6918 100644 --- a/e2e/src/app.e2e-spec.ts +++ b/e2e/src/app.e2e-spec.ts @@ -7,8 +7,8 @@ describe('workspace-project App', () => { page = new AppPage(); }); - it('should display welcome message', () => { + it('should find router-outlet html tag in DOM', () => { page.navigateTo(); - expect(page.getParagraphText()).toEqual('Welcome to app!'); + expect(page.getRouterOutletTag()).toBeTruthy(); }); }); diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts index 82ea75b..eb1adb9 100644 --- a/e2e/src/app.po.ts +++ b/e2e/src/app.po.ts @@ -5,7 +5,7 @@ export class AppPage { return browser.get('/'); } - getParagraphText() { - return element(by.css('app-root h1')).getText(); + getRouterOutletTag() { + return element(by.css('app-root router-outlet')).isPresent(); } } diff --git a/src/app/api.service.spec.ts b/src/app/api.service.spec.ts index 65b6c71..f281ccc 100644 --- a/src/app/api.service.spec.ts +++ b/src/app/api.service.spec.ts @@ -1,11 +1,11 @@ import { TestBed, inject } from '@angular/core/testing'; - +import { HttpClient, HttpHandler } from '@angular/common/http'; import { ApiService } from './api.service'; describe('ApiService', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [ApiService] + providers: [ApiService, HttpClient, HttpHandler] }); }); diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index bcbdf36..16c789e 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,3 +1,4 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { @@ -6,6 +7,7 @@ describe('AppComponent', () => { declarations: [ AppComponent ], + schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }).compileComponents(); })); it('should create the app', async(() => { @@ -18,10 +20,11 @@ describe('AppComponent', () => { const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('app'); })); - it('should render title in a h1 tag', async(() => { + + it('should render router-outlet tag', async(() => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); + expect(compiled.querySelector('router-outlet').tagName).toContain('ROUTER-OUTLET'); })); }); diff --git a/src/app/book-create/book-create.component.spec.ts b/src/app/book-create/book-create.component.spec.ts index b565b8a..b8116f3 100644 --- a/src/app/book-create/book-create.component.spec.ts +++ b/src/app/book-create/book-create.component.spec.ts @@ -1,5 +1,10 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; +import { MatInputModule } from '@angular/material'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { RouterTestingModule } from '@angular/router/testing'; import { BookCreateComponent } from './book-create.component'; describe('BookCreateComponent', () => { @@ -8,7 +13,9 @@ describe('BookCreateComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ BookCreateComponent ] + imports: [ RouterTestingModule, ReactiveFormsModule, HttpClientModule, MatInputModule, BrowserAnimationsModule ], + declarations: [ BookCreateComponent ], + schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) .compileComponents(); })); diff --git a/src/app/book-detail/book-detail.component.spec.ts b/src/app/book-detail/book-detail.component.spec.ts index 421c457..c43c775 100644 --- a/src/app/book-detail/book-detail.component.spec.ts +++ b/src/app/book-detail/book-detail.component.spec.ts @@ -1,5 +1,8 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { RouterTestingModule } from '@angular/router/testing'; import { BookDetailComponent } from './book-detail.component'; describe('BookDetailComponent', () => { @@ -8,7 +11,9 @@ describe('BookDetailComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ BookDetailComponent ] + imports: [ RouterTestingModule, ReactiveFormsModule, HttpClientModule ], + declarations: [ BookDetailComponent ], + schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) .compileComponents(); })); diff --git a/src/app/book-edit/book-edit.component.spec.ts b/src/app/book-edit/book-edit.component.spec.ts index 464b49d..f493c67 100644 --- a/src/app/book-edit/book-edit.component.spec.ts +++ b/src/app/book-edit/book-edit.component.spec.ts @@ -1,5 +1,10 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; +import { MatInputModule } from "@angular/material"; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { RouterTestingModule } from '@angular/router/testing'; import { BookEditComponent } from './book-edit.component'; describe('BookEditComponent', () => { @@ -8,7 +13,9 @@ describe('BookEditComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ BookEditComponent ] + imports: [ RouterTestingModule, ReactiveFormsModule, HttpClientModule, MatInputModule, BrowserAnimationsModule ], + declarations: [ BookEditComponent ], + schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) .compileComponents(); })); diff --git a/src/app/book/book.component.spec.ts b/src/app/book/book.component.spec.ts index f6aee4f..83ed223 100644 --- a/src/app/book/book.component.spec.ts +++ b/src/app/book/book.component.spec.ts @@ -1,5 +1,9 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; +import { MatTableModule } from '@angular/material'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { RouterTestingModule } from '@angular/router/testing'; import { BookComponent } from './book.component'; describe('BookComponent', () => { @@ -8,7 +12,9 @@ describe('BookComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ BookComponent ] + imports: [ RouterTestingModule, ReactiveFormsModule, HttpClientModule, MatTableModule ], + declarations: [ BookComponent ], + schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) .compileComponents(); }));