ng模拟库测试表单组件(模板驱动表单)

Question

我已经浏览了大量的文档，包括他们自己的ng模拟库这里。我是这个图书馆的新手。

ng-mocks PS:我知道其他库(比如旁观者)可以这样做，或者使用普通的茉莉花/小丑，但我也尝试使用来了解如何使用这个库.。

对观众来说，写这篇文章很容易。

it('should enter values on input fields and call the service method', () => {

    const service = spectator.inject(StoreService);
    const spy = service.addDataToDB.mockReturnValue(of({ id: 45 }));

    spectator.typeInElement('cool cap', byTestId('title'));
    spectator.typeInElement('33', byTestId('price'));
    spectator.typeInElement('try it out', byTestId('desc'));
    spectator.typeInElement('http://something.jpg', byTestId('img'));
    const select = spectator.query('#selectCategory') as HTMLSelectElement;
    spectator.selectOption(select, 'electronics');

    spectator.dispatchFakeEvent(byTestId('form'), 'submit');

    expect(spy).toHaveBeenCalledWith(mockAddForm);
  })

对于mat-select，我从他们的github回购问题这里中找到了一个参考

是否有一种简单的方法来测试具有选择、单选按钮和输入的简单表单？这是一个如此普遍的要求，我期望一个工作的例子，没有太多的麻烦，但事实并非如此。我有一个非常简单的模板驱动表单

  <form #f="ngForm" (ngSubmit)="onSubmit(f)">

    <mat-form-field appearance="fill">
      <mat-label>Title</mat-label>
      <input data-testid="titleControl" name="title" ngModel matInput />
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Price</mat-label>
      <input data-testid="priceControl" name="price" ngModel matInput />
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Description</mat-label>
      <input data-testid="descControl" name="description" ngModel matInput />
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Image</mat-label>
      <input data-testid="imageControl" name="image" ngModel matInput />
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Select Category</mat-label>
      <mat-select data-testid="categoryControl" name="category" ngModel>
        <mat-option value="electronics">Electronics</mat-option>
        <mat-option value="jewelery">Jewelery</mat-option>
        <mat-option value="men's clothing">Men's clothing</mat-option>
        <mat-option value="women's clothing">Women's clothin</mat-option>
      </mat-select>

    </mat-form-field>
    <div class="submit-btn">
      <button type="submit" mat-raised-button color="primary">Submit</button>
    </div>

  </form>

和类文件

export class AddProductComponent implements OnInit {
  isAdded = false;
  @ViewChild('f') addForm: NgForm;

  constructor(private productService: ProductService) { }

  onSubmit(form: NgForm) {
    const product = form.value;
    this.productService.addProductToDB(product).subscribe(
      _data => {
        this.isAdded = true;
        this.addForm.resetForm();
      }
    )
  }

}

我正在尝试测试用户是否在输入字段中输入了任何内容，如果是的话，获取它。

这是我到目前为止的测试用例。

import { EMPTY } from 'rxjs';
import { ProductService } from './../../services/product.service';
import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { AddProductComponent } from './add-product.component';
import { MockBuilder, MockInstance, MockRender, ngMocks } from 'ng-mocks';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatSelect } from '@angular/material/select';
import { MatOption } from '@angular/material/core';
import { Component, forwardRef } from '@angular/core';


describe('AddProductComponent', () => {
  beforeEach(() => {
    return MockBuilder(AddProductComponent)
      .keep(FormsModule)
      .mock(MatFormField)
      .mock(MatSelect)
      .mock(MatLabel)
      .mock(MatOption)
      .mock(ProductService, {
        addProductToDB: () => EMPTY
      })
  })
  it('should be defined', () => {
    const fixture = MockRender(AddProductComponent);
    expect(fixture.point.componentInstance).toBeDefined();
  })

 // THIS IS THE PLACE WHERE I GOT FULLY STUCK..

  it('should test the Title control', async () => {

    const fixture = MockRender(AddProductComponent);
    const component = fixture.componentInstance;

    const titleEl = ngMocks.find(['data-testid', 'titleControl']);
    ngMocks.change(titleEl, 'cool cap');
    fixture.detectChanges();
    await fixture.whenStable();
    const el = ngMocks.find(fixture, 'button');
    ngMocks.click(el);
    expect(component.addForm.value).toBe(...)
  })

  it('should test the image control', () => {.. })

  it('should test the price control', () => {.. })
})

我期望在使用ngMocks.change输入元素、调用detectChanges并单击submit按钮之后，表单submit将被触发，并且我将能够看到控制台中的标题值。

像这样的{ title: 'cool cap', price: '', description: '', image: '', category: '' }

UUf！表格很难测试！！

Answer 1

我做了更深入的研究，结果发现问题在于fixture.whenStable()的延迟调用。当使用MockRender时，必须在FormModule之后调用它。

在这种情况下，可以删除MatInput MockBuilder。

import {EMPTY} from 'rxjs';
import {ProductService} from './../../services/product.service';
import {AddProductComponent} from './add-product.component';
import {MockBuilder, MockRender, ngMocks} from 'ng-mocks';
import {AppModule} from "../../app.module";
import {FormsModule} from "@angular/forms";

ngMocks.defaultMock(ProductService, () => ({
  addProductToDB: () => EMPTY,
}));

describe('AddProductComponent', () => {
  beforeEach(() => MockBuilder(AddProductComponent, AppModule).keep(FormsModule));

  it('should be defined', () => {
    const fixture = MockRender(AddProductComponent);
    expect(fixture.point.componentInstance).toBeDefined();
  })

  it('should test the Title control', async () => {
    const fixture = MockRender(AddProductComponent);

    await fixture.whenStable(); // <- should be here.

    const component = fixture.point.componentInstance;

    // default
    expect(component.addForm.value).toEqual(expect.objectContaining({
      title: '',
    }));

    const titleInputEl = ngMocks.find(['data-testid', 'titleControl']);
    ngMocks.change(titleInputEl, 'cool cap');

    // updated
    expect(component.addForm.value).toEqual(expect.objectContaining({
      title: 'cool cap',
    }));
  });
});

Answer 2

我已经联系了作者，他给出了一个快速、令人敬畏的答复。这是工作的答案

import { EMPTY } from 'rxjs';
import { ProductService } from './../../services/product.service';
import { AddProductComponent } from './add-product.component';
import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
import { AppModule } from "../../app.module";
import { FormsModule } from "@angular/forms";
import { MatInput } from "@angular/material/input";

ngMocks.defaultMock(ProductService, () => ({
  addProductToDB: () => EMPTY,
}));

describe('AddProductComponent', () => {
  beforeEach(() => MockBuilder(AddProductComponent, AppModule)
    .keep(FormsModule)
    .keep(MatInput));

  it('should be defined', () => {
    const fixture = MockRender(AddProductComponent);
    expect(fixture.point.componentInstance).toBeDefined();
  })

  it('should test the Title control', () => {
    const fixture = MockRender(AddProductComponent);
    const component = fixture.point.componentInstance;

    const titleInputEl = ngMocks.find(['data-testid', 'titleControl']);
    ngMocks.change(titleInputEl, 'cool cap');
    expect(component.addForm.value.title).toBe('cool cap');
  });
});

Answer 3

这可能是一个简单的测试文本输入角默认测试框架。

html：

<input type="text" class="my-simple-input" [(ngModel)]="username"> 

构成部分：

public username:string = '';

component.spec.ts：

import { By } from '@angular/platform-browser';

let component: MyCustomComponent;
let fixture: ComponentFixture<MyCustomComponent>;

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

it('testing two way binding', () => {
 const textInput = fixture.debugElement.query(By.css('input[type="text"]')).nativeElement as HTMLInputElement;
 textInput.value= "usernameValue";
 fixture.detectChanges();

 expect(component.username === "usernameValue").toBeTruthy();
});

it('testing two way binding 2', () => {
 component.username= "usernameValue";
 fixture.detectChanges();
 const textInput = fixture.debugElement.query(By.css('input[type="text"]')).nativeElement as HTMLInputElement;

 expect(textInput.value === "usernameValue").toBeTruthy();
});

下面是一些其他有用的测试功能：

const button = fixture.debugElement.query(By.css('app-custom-button')).nativeElement;

const element: MockCustomDropdownComponent = fixture.debugElement.query(By.css('app-custom-dropdown')).componentInstance;

const sourceRadios = fixture.debugElement.nativeElement.querySelectorAll('.source-radio');