Question

我目前正在深入了解在Jasmine / Karma测试中收到的一些警告，以及当我尝试按如下方式添加MatFormFieldModule和MatInputModule时：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { UserApiService } from 'src/app/services/api/user-apiservice';
import { InitService } from 'src/app/services/tops/initializer.service';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input'

import { AddUserComponent } from './adduser.component';

describe('AddUserComponent', () => {
  let component: AddUserComponent;
  let fixture: ComponentFixture<AddUserComponent>;
  let mockMatDialogRef, mockTlsApiService, mockInitService, mockMatDialog, mockMatSnackBar, mockMAT_DIALOG_DATA;

  beforeEach(async(() => {
    mockInitService = jasmine.createSpyObj(['Roles']);

    TestBed.configureTestingModule({
      declarations: [ AddUserComponent ],
      providers: [
        {provide: MatDialogRef, useValue: mockMatDialogRef},
        {provide: UserApiService, useValue: mockTlsApiService},
        {provide: InitService, useValue: mockInitService},
        {provide: MatDialog, useValue: mockMatDialog},
        {provide: MatSnackBar, useValue: mockMatSnackBar}
      ],
      imports: [
        MatFormFieldModule, MatInputModule
      ]
    })
    .compileComponents();
  }));

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

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

我的测试用例在html上的帖子标题中给了我错误消息，我知道这一点，因为当我对此块进行注释时，错误就消失了。

<mat-form-field appearance="fill">
  <mat-label>Search for Either: First Name and/or Last Name, or ID</mat-label>
  <input matInput (keyup)="search($event.target.value)" placeholder="Search for Either: First Name and/or Last Name, or ID">
</mat-form-field>

基于我在stackoverflow上发现的帖子，我将输入标签更改为此

<input matInput (keyup)="search($event.target.value)" placeholder="Search for Either: First Name and/or Last Name, or ID" />

但是即使这样做，我仍然是同样的错误。还有其他我想念的东西吗？

Answer 1

它可能与您在应用程序中使用的另一个角度材料组件有关。导入 MatSelectModule 对我有用。

import { MatSelectModule } from '@angular/material/select';

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [ YourComponent ],
    imports: [ 
      ...,
      MatSelectModule 
    ]
  })
  .compileComponents();
});

错误：mat-form-field必须包含MatFormFieldControl

1 个答案: