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

Question

我已经浏览了大量的文档，包括它们自己的ng-mocks库。我对这个图书馆比较陌生。

PS:我知道其他库像旁观者这样做，或者使用普通的jasmine/jest，但我正在尝试使用ng-mocks，看看如何使用这个库。

例如:使用旁观者，很容易写这个

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 repo问题中找到了一个参考

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

<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并单击提交按钮，表单提交将被触发，我将能够在控制台上看到标题值。

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

UUf !表单很难测试!!

Answer 1

我深入研究了一下，发现问题出在fixture.whenStable()的晚调用上。当使用FormModule时，必须在MockRender之后调用。

在这种情况下，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

这可以是一个使用angular默认测试框架测试文本输入的简单测试。

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');