I am trying to run karma tests on an Angular component called AlbumInfoComponent
. In this component, I have a function named getStyles()
that does the following:
getStyles() {
return {
"background-image":'url('+this.data.images[1].url+')'
}
}
it uses a variable called data
initialized as: private user: {} = {}
I have a test that runs only the default should create
test only. Though for some reason when running the test, I get TypeError: Cannot read property 'images' of undefined
. My initial thought is that since Angular doesn't know there is a value in data called images
, it will fail. Because of that, I tried setting component equal to a mock component data. Here is my testing code:
describe('AlbumInfoComponent', () => {
let component: AlbumInfoComponent;
let fixture: ComponentFixture<AlbumInfoComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LandingComponent, FaIconComponent, HomeComponent, LoginComponent, AlbumInfoComponent, RecentReleasesComponent, QueueComponent, SearchComponent, TitleComponent, UserComponent, SearchBarComponent, RecentReleaseComponent, YourQueueComponent ],
imports: [FormsModule, HttpClientTestingModule, RouterTestingModule.withRoutes([]), MatSnackBarModule ],
providers: [InfoService, HttpClient, TokenService ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AlbumInfoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
component.data = {
"images": [
{
"height": 640,
"url": "https://i.scdn.co/image/ab67616d0000b273626d2ce1fb80955645d4d787",
"width": 640
},
{
"height": 300,
"url": "https://i.scdn.co/image/ab67616d00001e02626d2ce1fb80955645d4d787",
"width": 300
},
{
"height": 64,
"url": "https://i.scdn.co/image/ab67616d00004851626d2ce1fb80955645d4d787",
"width": 64
}
]
}
expect(component).toBeTruthy();
});
});
Is there a way to force the data variable to be equal to the mock data to fix the error?
Aucun commentaire:
Enregistrer un commentaire