Question

我正在尝试以角度测试弹出组件，但我不知道为什么在启动测试时出现错误提示：

'mat-divider'不是一个已知元素： 1.如果“ mat-divider”是Angular组件，则请验证它是否属于此模块。 2.如果“ mat-divider”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas” 禁止显示此消息。

我虽然在@NgModule中导入了它，但这是我的代码：

@NgModule({
  declarations: [
    AppComponent,
    AdminTopMenuComponent,
    SvGameCardComponent,
    SvCreationPopupComponent,
    MockPopupComponent,
	MyDialogComponent,
	FvCreationPopupComponent,
    GameModesComponent,
    LinkTestComponent,
    UserComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MatDialogModule,
	BrowserAnimationsModule,
	MatButtonModule,
	MatCheckboxModule,
    MatTableModule,
    MatDividerModule,
    MatInputModule,
    MatSelectModule,
    MatFormFieldModule,
    MatCardModule,
    AppRoutingModule,
    RouterModule,
  ],
  exports: [
      MatDividerModule,
      MatFormFieldModule,
  ],
  providers: [BasicService],
  bootstrap: [AppComponent],
  entryComponents: [
    MyDialogComponent,
    SvCreationPopupComponent,
    FvCreationPopupComponent,
    ]
})

export class AppModule {

}

@Component({
  selector: 'app-fv-creation-popup',
  templateUrl: './fv-creation-popup.component.html',
  styleUrls: ['./fv-creation-popup.component.css']
})
export class FvCreationPopupComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<FvCreationPopupComponent>, // dialogRef is now a reference to the diaolog popup
    @Inject(MAT_DIALOG_DATA) public data: any) { }      // allows the sharing of data through dialogConfig.data

  ngOnInit() {
    
  }
  
  submit(): void {
    //TODO: implementation de la fonction
    console.log("Submit fv-gameCard not implemented")
  }

  close(): void {
    this.dialogRef.close();
  }
  gameType: string[] = ["Formes géométriques","Thématique"];
  
}

import { /*async,*/ async, ComponentFixture, TestBed } from "@angular/core/testing";

import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { FvCreationPopupComponent } from "./fv-creation-popup.component";

describe("FvCreationPopupComponent", () => {
    let component: FvCreationPopupComponent;
    let fixture: ComponentFixture<FvCreationPopupComponent>;
    // const mock: MatDialogRef<FvCreationPopupComponent> = new MatDialogRef<FvCreationPopupComponent>(null, null) ;

    beforeEach(async(() => {
        // const data: MyDialogComponent = null;
        // data.message = "Dialog Message";
        // tslint:disable-next-line:typedef
        const mockDialogRef = {
            close: jasmine.createSpy("close"),
        };

        TestBed.configureTestingModule({
        imports: [MatDialogModule],
        declarations: [ FvCreationPopupComponent ],
        providers: [{ provide: MatDialogRef, useValue: {mockDialogRef} }, { provide: MAT_DIALOG_DATA, useValue: {} } ]})
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(FvCreationPopupComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it("should create", () => {
        expect(component).toBeTruthy();
    });

});

Answer 1

我认为您必须在测试模块中包含MatDividerModule，您还必须对组件中使用的其他模块执行相同的操作：

import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { FvCreationPopupComponent } from "./fv-creation-popup.component";

describe("FvCreationPopupComponent", () => {
    let component: FvCreationPopupComponent;
    let fixture: ComponentFixture<FvCreationPopupComponent>;
    // const mock: MatDialogRef<FvCreationPopupComponent> = new MatDialogRef<FvCreationPopupComponent>(null, null) ;

    beforeEach(async(() => {
        // const data: MyDialogComponent = null;
        // data.message = "Dialog Message";
        // tslint:disable-next-line:typedef
        const mockDialogRef = {
            close: jasmine.createSpy("close"),
        };

        TestBed.configureTestingModule({
        imports: [MatDialogModule, MatDividerModule, ...],
        declarations: [ FvCreationPopupComponent ],
        providers: [{ provide: MatDialogRef, useValue: {mockDialogRef} }, { provide: MAT_DIALOG_DATA, useValue: {} } ]})
        .compileComponents();
    }));

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

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

});

角垫分隔器不是已知元素

1 个答案: