Угловые ошибки тестирования с кармой - PullRequest
Новая
       5

Угловые ошибки тестирования с кармой

0 голосов
/ 25 апреля 2018

У меня возникла проблема с началом моего углового тестирования проекта.

Контекст:

У меня есть один основной компонент, в который вложен другой компонент для отображения счетчика, например: 

<div class='showSpinner' *ngIf="showSpinnerCustomer">
    <div class="spinner">
      <app-spinnerCustomers></app-spinnerCustomers>
      <h2>Loading...</h2>
    </div>
  </div>`

Проблема возникает, когда я запускаю команду ng test и появляется такой тип ошибки: 

Failed: Template parse errors:
'app-spinnerCustomers' is not a known element:
1. If 'app-spinnerCustomers' is an Angular component, then verify that it is part of this module.
2. If 'app-spinnerCustomers' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div class='showSpinner' *ngIf="showSpinnerCustomer">
    <div class="spinner">
      [ERROR ->]<app-spinnerCustomers></app-spinnerCustomers>
      <h2>Loading...</h2>
    </div>
"): ng:///DynamicTestModule/ListCustomersComponent.html@12:6

У меня это модульное в 2 модуля:

приложение.modules.ts 

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { APP_ROUTES } from './app.routes';
import { ListCustomersComponent } from './components/list-customers/list-customers.component';
import { HttpClientModule } from '@angular/common/http';
import { CustomerService } from './services/customer/customer.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SpinnersModule } from './components/spinners/spinners.module';

@NgModule({
  declarations: [
    AppComponent,
    ListCustomersComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    APP_ROUTES,
    SpinnersModule
  ],
  providers: [
    CustomerService
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

А в модуле счетчика:

spinners.module.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SpinnerCustomersComponent } from './spinnerCustomers/spinnerCustomers.component';

@NgModule({
    declarations: [
        SpinnerCustomersComponent
    ],
    imports: [
      CommonModule
    ],
    exports: [
        SpinnerCustomersComponent
    ]
  })
export class SpinnersModule { }

Любая подсказка какаяздесь происходит и что я могу сделать, чтобы это исправить?У меня закончились идеи.

Спасибо.

РЕДАКТИРОВАТЬ: app.component.spec.ts 

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
});

spinnerCustonmers.component.spec.ts 

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

import { SpinnerCustomersComponent } from './spinnerCustomers.component';

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

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

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

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

1 Ответ

0 голосов
/ 25 апреля 2018

Я нашел исправление, добавив de SpinnerModule в каждый файл спецификаций компонента 

import { SpinnersModule } from '../spinners/spinners.module';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [SpinnersModule],
      declarations: [ ListCustomersComponent ]
    })
    .compileComponents();
  }));

Спасибо всем !!

...