Как исправить ошибки модульных тестов по умолчанию в рабочем проекте

Question

У меня есть форма, которая отлично работает.Проблема возникает, когда я запускаю «ng test» в моем проекте.Я использую оригинальные тестовые случаи, которые предоставляются при создании проекта с помощью Cli.

Вывод кармы:

AppComponent should create the app
Failed: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("
    <div id="theForm">
      <h2>Bus Form</h2>
      <form [ERROR ->]#f="ngForm" name="theForm" (ngSubmit)="addLog(f)">
        <div class="form-group">
          <label>"): ng:///DynamicTestModule/AppComponent.html@3:12
There is no directive with "exportAs" set to "ngModel" ("
                name="boarded"
                [(ngModel)]="log.boarded"
                [ERROR ->]#logBoarded="ngModel"
                pattern="^[0-9]+$"
                required>

Component.html:

<title>BusLog</title>
<div id="theForm">
  <h2>Bus Form</h2>
  <form #f="ngForm" name="theForm" (ngSubmit)="addLog(f)">
    <div class="form-group">
      <label>Boarded</label>

      <input type="number"
            class="form-control"
            name="boarded"
            [(ngModel)]="log.boarded"
            #logBoarded="ngModel"
            pattern="^[0-9]+$"
            required>
      <span class="help-block danger" *ngIf="logBoarded.errors?.required && logBoarded.touched">
        The # of boarded is required
      </span>
      <span class="help-block danger" *ngIf="logBoarded.errors?.pattern && logBoarded.touched">
        The # of boaurded can only contain numbers
      </span>
    </div>

component.ts

import { Component } from '@angular/core';
import { Log } from './log';
import { LogService } from './log.service'; 
import { Title }     from '@angular/platform-browser';
...

module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
    import { FormsModule } from '@angular/forms';
    import { AppComponent } from './app.component';


    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        FormsModule
      ]
    }).compileComponents();
  }));

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

  it(`should have as title 'BusLog'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('BusLog');
  });

Редактировать: Извините, что пропустил этого парня.Я едва мог держать глаза открытыми, когда создавал это.

Answer 1

Модуль, используемый для тестирования, не является модулем, используемым для обычного выполнения.

Таким образом, ваш module.ts не используется (событие, если оно выглядит совершенно нормально в том, что вы показали здесь).

Вместо этого модуль определен в вашем спецификационном файле.

Ваш спецификационный файл обычно будет иметь:

describe('...', () => {
  // ...
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ... ],
      imports: [MAKE SURE FormsModule IS SHOWN HERE]
    })
    .compileComponents();
  }));

Вы должны убедиться, что в тесте импортированы правильные модули.

В вашем примере, я думаю, FormModule не импортируется в ваш тестовый модуль.Таким образом, конкретная директива, которую вы используете в form, не объявлена, и выполнение по праву завершится неудачей.

Answer 2

Это сработало.

describe('AppComponent', () => {
let component: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let de: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        FormsModule
      ],
      providers: [
        HttpClient,
        HttpHandler
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement;
    fixture.detectChanges;
  });

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


});

Answer 3

Скорее всего, вам нужно добавить FormsModule в качестве поставщика в настройку тестового файла.