While testing a popup component in Angular, I encountered an error message that says:
'mat-divider' is not a known element: 1. If 'mat-divider' is an Angular component, then verify that it is part of this module. 2. If 'mat-divider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Even though I imported it in the @NgModule, here is the code snippet:
@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>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit() {
}
submit(): void {
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>;
beforeEach(async(() => {
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();
});
});