Currently, I am facing a challenge in mocking input properties for an Angular unit test. Despite my efforts, I keep encountering the same error message:
TypeError: Cannot read property 'data' of undefined
This is how my HTML Template is structured:
<div class="container-fluid">
<div class="row">
<div class="col-12">
<plot [data]="graph.data" [layout]="graph.layout"></plot>
</div>
</div>
</div>
And here's a snippet from my Component:
...
export class ChartComponent implements OnInit {
@Input() currentChart: Chart;
currentLocationData: any;
public graph = {
data: [
{
type: 'bar',
x: [1, 2, 3],
y: [10, 20, 30],
}
],
layout: {
title: 'A simple chart',
},
config: {
scrollZoom: true
}
};
...
}
My unit-test setup seems straightforward, but it still results in the mentioned error:
describe('ChartComponent', () => {
let component: ChartComponent;
let fixture: ComponentFixture<ChartComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ChartComponent],
imports: [
// My imports
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ChartComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
I've experimented with various approaches to mock the data property and the currentChart @Input.
Could you advise on the correct method to resolve this issue and successfully pass the unit-test?