用 Jasmine（角打字稿）测试铯

Question

I have an angular typescript app that uses 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 polygones
        });
    }
}

IN cesium-container.component.spec.ts : My teammate tried to create the component with TestBed and I tried it with new CesiumContainerComponent , but both 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:

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 told me it was because of webgl and you can't have that in the tests, is there any way around this?

Thanks!

Answer 1

In this blog post: https://medium.com/@davidjohnakim/using-cesiumjs-with-angular-f246c1d1b26a , they add Cesium JavaScript import to their scripts section of test and build in their angular.json . Have you done the same for both test and build ?

In the Angular world, you're better off installing an npm package that integrates JavaScript libraries. Check out angular-cesium : https://www.npmjs.com/package/angular-cesium and here is a post about it: https://cesium.com/blog/2019/03/28/angular-cesium/