用茉莉花测试铯(斜角 typescript )

9rnv2umw  于 2023-01-31  发布在  TypeScript
关注(0)|答案(1)|浏览(119)

我有一个使用铯元素的Angular 打字应用程序:
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
        });
    }
}

输入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,你不能在测试中,有什么办法吗?
谢谢!

iqxoj9l9

iqxoj9l91#

在此博客文章中:https://medium.com/@davidjohnakim/using-cesiumjs-with-angular-f246c1d1b26a,他们将铯JavaScript导入添加到angular.jsontestbuildscripts部分。您是否对testbuild执行了相同操作?
在Angular领域,您最好安装一个集成了JavaScript库的npm packagehttps://www.npmjs.com/package/angular-cesium,这里有一个关于它的帖子:https://cesium.com/blog/2019/03/28/angular-cesium/

相关问题