我有一个使用铯元素的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,你不能在测试中,有什么办法吗?
谢谢!
1条答案
按热度按时间iqxoj9l91#
在此博客文章中:https://medium.com/@davidjohnakim/using-cesiumjs-with-angular-f246c1d1b26a,他们将铯JavaScript导入添加到
angular.json
中test
和build
的scripts
部分。您是否对test
和build
执行了相同操作?在Angular领域,您最好安装一个集成了JavaScript库的
npm package
。https://www.npmjs.com/package/angular-cesium,这里有一个关于它的帖子:https://cesium.com/blog/2019/03/28/angular-cesium/