I've been working on integrating apexcharts and ng-apexcharts into my home component. While I was able to get it up and running smoothly, it seems to be causing issues with my unit tests. Despite researching possible solutions, I haven't been able to find a fix for the error that occurs during cleanup.
HomeComponent:
@Component({
selector: 'hu-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
standalone: true,
imports: [
NavbarComponent,
BarChartComponent
],
})
export class HomeComponent {}
home html:
<hu-navbar></hu-navbar>
<hu-bar-chart test-id="bar-chart"></hu-bar-chart>
BarChartComponent:
@Component({
selector: 'hu-bar-chart',
standalone: true,
imports: [CommonModule, NgApexchartsModule],
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.scss'],
})
export class BarChartComponent {
@Input() series: ApexAxisChartSeries | ApexNonAxisChartSeries;
@Input() chart: ApexChart;
constructor() {
this.series = [...];
this.chart = {...};
}
}
bar chart html:
<apx-chart test-id="bar-chart" [series]="series" [chart]="chart"></apx-chart>
HomeComponent's spec file:
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
let authenticationMock: AuthenticationMockService; // use mock to decouple unit tests from Firebase
let page: HTMLElement;
beforeEach(async () => {
authenticationMock = new AuthenticationMockService();
await TestBed.configureTestingModule({
imports: [HomeComponent],
})
.overrideProvider(AuthenticationService, { useValue: authenticationMock })
.compileComponents();
fixture = TestBed.createComponent(HomeComponent);
fixture.detectChanges();
component = fixture.componentInstance;
page = fixture.debugElement.nativeElement;
});
it('should create', () => {
fixture.whenStable().then(() => {
expect(component).toBeTruthy();
});
});
it('should show the navbar', () => {
expect(navbar()).not.toBeNull();
});
it('should show the bar chart', () => {
expect(barChart()).not.toBeNull();
});
function navbar() {
return page.querySelector('hu-navbar');
}
function barChart() {
return page.querySelector('[test-id="bar-chart"]');
}
});
And finally, the error:
console.error
Error during cleanup of component {
component: HomeComponent { __ngContext__: 7 },
stacktrace: TypeError: Cannot read properties of undefined (reading 'node')
...
This error persists across all tests. I attempted to resolve it by adding a cleanup step as follows:
afterEach(() => {
setTimeout(() => {
fixture.destroy();
}, 100);
});
However, this did not solve the issue. I am considering mocking it as a potential solution, but have yet to find information on how to do so.
There is a similar question on Stack Overflow regarding testing react-apexcharts, though it does not pertain to ng-apexcharts.