Angular 5 карма тест показывает, что app-addbook не является известным элементом

Question

В / src / app / book у меня есть следующие файлы - book.component.ts, book.module.ts, book.component.html, book-routing.module.ts, addbook.component.html, addbook .component.ts

Мой book.component.html имеет следующие коды:

<button class="btn btn-outline-success" (click)="addButton()">Add Book</button>
    <div *ngIf="toggleFlag">
      <app-addbook></app-addbook>
    </div>

Мой book.module.ts имеет следующий код:

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    BookRoutingModule
  ],
  declarations: [
    BookComponent,
    AddbookComponent
  ],
  providers: [BookService]
})
export class BookModule { }

Мой book-routing.module.ts имеет следующие коды:

const bookRoutes: Routes = [
  {
    path: 'addbook',
    component: AddbookComponent,
    canActivate: [AuthGuardService],
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(bookRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class BookRoutingModule {
}

Приложение работает хорошо; Однако, когда я выполнил команду ng test, она показывает мне, что:

Ошибка: ошибки синтаксического анализа шаблона: «app-addbook» не является известным элементом:

1. Если 'app-addbook' является угловым компонентом, то убедитесь, что он является частью этого модуля.

2. Если 'app-addbook' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента подавить это сообщение. ("btn btn-outline-success" (click) = "addButton ()"> Добавить книгу <div *ngIf="toggleFlag"> [ОШИБКА ->] <app-addbook></app-addbook> </div>

ОБНОВЛЕНИЕ ---

My book.component.spec.ts ниже:

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

import { BookComponent } from './book.component';

describe('BookComponent', () => {
  let component: BookComponent;
  let fixture: ComponentFixture<BookComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BookComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BookComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Answer 1

Начните с добавления AddbookComponent в раздел declarations спецификации book.component . Смотри ниже.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {AddbookComponent} from './addbook.component'; 

import { BookComponent } from './book.component';

describe('BookComponent', () => {
let component: BookComponent;
let fixture: ComponentFixture<BookComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
        declarations: [ BookComponent, AddbookComponent ]
        })
        .compileComponents();
    }));

    ...
});

Существует большая вероятность того, что вам придется добавить в спецификацию другие вещи, когда вы решите эту проблему. Вы изменили что-то в приложении, поэтому в результате необходимо обновить спецификации.

Здесь - хороший ресурс для методов углового тестирования.