Ошибка довольно очевидна, ваш компонент не понимает директивы flexLayout, потому что вы не импортировали его в тестовый модуль.
import { FlexLayoutModule } from '@angular/flex-layout';
Вам не хватает понимания тестового модуля. По сути, он используется для воссоздания контекста вашего компонента, чтобы иметь возможность выделить все зависимости, которые Angular использует в фоновом режиме.
Вот почему вам необходимо повторно импортировать модули, которые вы используете в исходном модуле, который объявляет ваш компонент.
Например, вот один из моих тестовых модулей:
TestBed.configureTestingModule({
imports: [
CommonModule,
BrowserAnimationsModule,
ReactiveFormsModule,
MaterialModule,
FlexLayoutModule,
RouterTestingModule,
],
declarations: [
SomeComponent
],
providers: [
// Some examples of stubs used
{ provide: SomeService, useClass: SomeServiceStub },
{ provide: MatDialogRef, useValue: {} },
{ provide: ActivatedRoute, useValue: { 'params': Observable.from([{ 'id': 1 }]) } }
],
schemas: [
NO_ERRORS_SCHEMA
]
});
Ваша вторая ошибка связана с тем, что ваш компонент, вероятно, использует компонент app-vertical-menu, и, поскольку вы не хотите, чтобы это было в модульном тесте, вы должны использовать объявление NO_ERRORS_SCHEMA в модуле тестирования.
Если вы хотите написать более сложные тесты, такие как интеграционные тесты, вы можете определить другой набор тестов с другим модулем тестирования, который запустит оба компонента (вам придется объявить оба).
Вот пример:
describe('Integration Test of SomeComponent', () => {
// fixtures and stuff declaration
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
CommonModule,
BrowserAnimationsModule,
ReactiveFormsModule,
MaterialModule,
FlexLayoutModule,
RouterTestingModule,
],
declarations: [
SomeComponent,
OtherComponent // Here the other one is declared
],
providers: [
{ provide: SomeService, useClass: SomeServiceStub }, {
provide: MatDialogRef, useValue: {}
}
]
// No more NO_ERROR_SCHEMA here
});
fixture = TestBed.createComponent(SomeComponent);
componentInstance = fixture.componentInstance;
fixture.detectChanges();
});
it('should create component', () => {
expect(componentInstance).toBeTruthy();
});
})
Надеюсь, это поможет.
РЕДАКТИРОВАТЬ: Вот пример моего компонента, который использует ServiceStub вместо службы. Вместо фактического вызова getTheme () и выполнения HTTP-вызова я использую заглушку, которая переопределяет этот метод и возвращает статические данные. Это позволяет избежать полного обслуживания с зависимостью Angular HTTP, которая также может иметь другие внутренние угловые зависимости и тому подобное.
// Outside of your test class
export class SomeServiceStub {
constructor() {}
getTheme(): Observable<Theme[]> {
const themes: Theme[] = [
{
id: 128,
code: 'EEE',
libelle: 'Fake label 1'
}, {
id: 119,
code: 'DDD',
libelle: 'Fake label 2'
}
];
return Observable.of(themes);
}
// Other services methods to override...
}
// In your testing module :
providers: [
{ provide: SomeService, useClass: SomeServiceStub },
{ provide: MatDialogRef, useValue: {} }
]