Conflicting Components Angular Testing - html

Question

I am following this project (https://stackblitz.com/edit/angular-material-expandable-table-rows) for my feature development as I am trying to achieve the similar functionality.
I was able get my feature working correctly, however when I run the test, I get the following error -
Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MockedComponent,MatHeaderRow ("
</ng-container>
[ERROR ->]<mat-header-row *matHeaderRowDef="displayedColumnsProgramDetails"></mat-header-row>
"): ng:///DynamicTestModule/MaterialAudioProgramsComponent.html#107:18
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MockedComponent,MatRow ("t-header-row *matHeaderRowDef="displayedColumnsProgramDetails"></mat-header-row>
[ERROR ->]<mat-row *matRowDef="let row; columns: displayedColumnsProgramDetails;"></mat-row>
I am unable to figure out what I need to do here.
Here's my component.html
<mat-spinner *ngIf="dataLoading" class="loading"></mat-spinner>
<ng-container class="ap-container" *ngIf="materialAudioPrograms$ | async as materialAudioPrograms">
<div class="container" *ngIf="materialAudioPrograms.length > 0; else dataLoading">
<mat-table [dataSource]="dataSource$" class="audio-programs vertical-data">
<ng-container matColumnDef="Start Channel">
<mat-header-cell *matHeaderCellDef>
Start Channel </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-icon *ngIf="element.show== false" aria-hidden="false" aria-label="ad-info-icon">keyboard_arrow_right
</mat-icon>
<mat-icon *ngIf="element.show== true" aria-hidden="false" aria-label="ad-info-icon">keyboard_arrow_down
</mat-icon>
{{element.startChannelNumber}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="Layout">
<mat-header-cell *matHeaderCellDef> Layout </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.layout}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Language">
<mat-header-cell *matHeaderCellDef> Language </mat-header-cell>
<mat-cell mat-cell *matCellDef="let element"> {{(element.language != null) ? element.language : 'None'}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="Active">
<mat-header-cell *matHeaderCellDef> Active </mat-header-cell>
<mat-cell *matCellDef="let element"> {{(element.active == true)? 'Yes': 'No'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<mat-cell *matCellDef="let detail">
<mat-tab-group>
<!-- Program Tab and Table -->
<mat-tab label="Program">
<ng-container>
<mat-table [dataSource]="audioProgramDetailsDataSource$" class="vertical-data">
<ng-container matColumnDef="Censored">
<mat-header-cell *matHeaderCellDef> Censored </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.censored != null) ? (element.censored ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Dubbed">
<mat-header-cell *matHeaderCellDef> Dubbed </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.dubbed != null) ? (element.dubbed ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Music">
<mat-header-cell *matHeaderCellDef> Music </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.music != null) ? (element.music ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Effects">
<mat-header-cell *matHeaderCellDef> Effects </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.effects != null) ? (element.effects ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="DVS">
<mat-header-cell *matHeaderCellDef> DVS </mat-header-cell>
<mat-cell *matCellDef="let element"> {{(element.dvs != null) ? (element.dvs ? 'Yes' :'No'): 'None'}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="MOS">
<mat-header-cell *matHeaderCellDef> MOS </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.muteOrSilence != null) ? (element.muteOrSilence ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Voiceover">
<mat-header-cell *matHeaderCellDef> Voiceover </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.voiceOver != null) ? (element.voiceOver ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Rescore">
<mat-header-cell *matHeaderCellDef> Rescore </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.rescore != null) ? (element.rescore ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Contains Dialog">
<mat-header-cell *matHeaderCellDef> Contains Dialog </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.dialog != null) ? (element.dialog ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="CALM Act">
<mat-header-cell *matHeaderCellDef> CALM Act Compliance </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.calmACT != null) ? (element.calmAct ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="EBUR128">
<mat-header-cell *matHeaderCellDef> EBUR128 Compliance </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.ebuR128 != null) ? (element.ebuR128 ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumnsProgramDetails"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumnsProgramDetails;"></mat-row>
</mat-table>
</ng-container>
</mat-tab>
<!--
Attributes Tab and Table -->
<mat-tab label="Attributes">
<ng-container>
<mat-table [dataSource]="audioProgramDetailsDataSource$" class="vertical-data">
<ng-container matColumnDef="Loudness Level">
<mat-header-cell *matHeaderCellDef> Loudness Level </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.loudnessLevel != null) ? (element.loudnessLevel ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Loudness Range">
<mat-header-cell *matHeaderCellDef> Loudness Range </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.loudness_Range != null) ? (element.loudness_Range ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="True Peak Level (Max)">
<mat-header-cell *matHeaderCellDef> True Peak Level (Max) </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.truePeakLevel != null) ? (element.truePeakLevel ? 'Yes' :'No'): 'None'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="True Peak Channel-L">
<mat-header-cell *matHeaderCellDef> True Peak Level Channel-L </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.truePeakLevelChannel_L != null) ? (element.truePeakLevelChannel_L ? 'Yes' :'No'): 'None'}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="True Peak Channel-R">
<mat-header-cell *matHeaderCellDef> True Peak Level Channel-R </mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.truePeakLevelChannel_R != null) ? (element.truePeakLevelChannel_R ? 'Yes' :'No'): 'None'}}
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumnsAttributeDetails"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumnsAttributeDetails;"></mat-row>
</mat-table>
</ng-container>
</mat-tab>
</mat-tab-group>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumnsAudioPrograms"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumnsAudioPrograms;" class="element-row" matRipple
(click)="toggleRow(row)"></mat-row>
<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
[#detailExpand]="row.element.show ? 'expanded' : 'collapsed'" style="overflow: hidden"> </mat-row>
</mat-table>
<div class="container" *ngIf="materialAudioPrograms.length === 0 && (dataLoading === false | async)">
<p class="no-data-msg">No Audio Programs Available</p>
</div>
</div>
</ng-container>
Here' the component.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MaterialAudioProgramsComponent } from './material-audio-programs.component';
import {
MatTableModule,
MatTabsModule,
MatIconModule,
MatProgressSpinnerModule
} from '#angular/material';
#NgModule({
declarations: [MaterialAudioProgramsComponent],
imports: [CommonModule, MatProgressSpinnerModule, MatTableModule, MatTabsModule, MatIconModule],
entryComponents: [MaterialAudioProgramsComponent]
})
export class MaterialAudioProgramsModule {
// Define entry property to access entry component in lazy-loader service
static entry = MaterialAudioProgramsComponent;
}
And the component.spec.ts
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { MaterialMockModule } from '#content-platform/unit-test-helpers';
import { MaterialAudioProgramsComponent } from './material-audio-programs.component';
import { StoreModule } from '#ngrx/store';
import { RouterTestingModule } from '#angular/router/testing';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '#angular/core';
import { MatTableModule } from '#angular/material';
describe('MaterialAudioProgramsComponent', () => {
let component: MaterialAudioProgramsComponent;
let fixture: ComponentFixture<MaterialAudioProgramsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MaterialAudioProgramsComponent],
imports: [MaterialMockModule, StoreModule.forRoot({}), RouterTestingModule, MatTableModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MaterialAudioProgramsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
I am not able to figure out a solution for this,any help is greatly appreciated.
Thanks

Answer 1

Try removing MaterialMockModule and leaving MatTableModule. If I were you, I would take advantage of NO_ERRORS_SCHEMA and not import any module but you may need them (the child components) when doing integration tests.