用 Jasmine（角打字稿）测试铯

Question

我有一个使用铯的 angular typescript 应用程序：

铯容器.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
        });
    }
}

在cesium-container.component.spec.ts ：我的队友尝试使用TestBed创建组件，我尝试使用new CesiumContainerComponent ，但都失败了：

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();
    });
});

结果：

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>

我的队友告诉我这是因为 webgl 而你不能在测试中使用它，有什么办法解决这个问题吗？

谢谢！

Answer 1

在这篇博文： https://medium.com/@davidjohnakim/using-cesiumjs-with-angular-f246c1d1b26a中，他们将 Cesium JavaScript 导入添加到他们的test scripts部分，并在他们的angular.json中build 。 你对test和build做了同样的事情吗？

在 Angular 的世界里，你最好安装一个集成了 JavaScript 库的npm package 。 查看angular-cesium ： https：//www.npmjs.com/package/angular-cesium ，这是一篇关于它的帖子： https：//cesium.com/blog/2019/03/28/angular-cesium/