I have a TypeScript app built using Angular that incorporates Cesium:
cesium-container.component.ts
import { Component, ElementRef } from '@angular/core';
import { Viewer } from 'cesium';
import { SomeOtherCesiumService } from 'src/app/services/cesium/some-other-cesium.service';
@Component({
selector: 'app-cesium-container',
templateUrl: './cesium-container.component.html',
styleUrls: ['./cesium-container.component.css'],
})
export class CesiumContainerComponent {
viewer: Viewer = new Cesium.Viewer(this.element.nativeElement);
constructor(private element: ElementRef, private handler: SomeOtherCesiumService) {}
ngOnInit() {
this.viewer.imageryLayers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 4 })
);
// do stuff
}
testEntitySpawn() {
this.viewer.entities.add({
// some polygons
});
}
}
In
cesium-container.component.spec.tsTestBed, while my teammate tried with new CesiumContainerComponent, but both attempts failed:
describe('CesiumContainerComponent', () => {
let component: CesiumContainerComponent;
let fixture: ComponentFixture<CesiumContainerComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [CesiumContainerComponent],
}).compileComponents();
fixture = TestBed.createComponent(CesiumContainerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
const handler = new SomeOtherCesiumService();
const element = new ElementRef(HTML_CESIUM);
component = new CesiumContainerComponent(element, handler);
expect(component).toBeTruthy();
});
});
The result obtained was as follows:
CesiumContainerComponent should create
ReferenceError: Cesium is not defined
at new CesiumContainerComponent (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/map/cesium-container/cesium-container.component.ts:11:23)
at UserContext.apply (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/map/cesium-container/cesium-container.component.spec.ts:36:15)
at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:375:26)
at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:287:39)
at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:374:52)
at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:134:43)
at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:582:34)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:597:20)
at <Jasmine>
My teammate mentioned that the issue might be related to WebGL and its limitations in testing environments. Is there any workaround for this?
Thank you!