Error when running cesium via karma

CesiumJS
1

Hi,
I’ve setup unit tests for one of my apps, and I’m getting an error when running the cesium viewer line:

TypeError: Cannot read property ‘red’ of undefined

at makeColorString (/src/bower_components/cesiumjs/CesiumUnminified/Cesium.js:151463:49)

at Animation.applyThemeChanges (/src/bower_components/cesiumjs/CesiumUnminified/Cesium.js:152096:36)

at new Animation (/src/bower_components/cesiumjs/CesiumUnminified/Cesium.js:151945:14)

at new Viewer (/src/bower_components/cesiumjs/CesiumUnminified/Cesium.js:160305:25)

This is the line that’s being run:

new Cesium.Viewer($element[0], ctrl.cesiumDirective.config);

This works when I’m running the app, but fails when running via karma.

Any idea why and how to fix this?

Cesium is version 1.13.

2

I’ve managed to nail it down to the diff between the live and the karma runs.
When I get to this line:

return Color.fromCssColorString(window.getComputedStyle(element).getPropertyValue('color'));

getComputedStyle(element).getPropertyValue(‘color’)

``

returns “”;

This in turn makes all of these:

var buttonNormalBackColor = getElementColor(this._themeNormal);
var buttonHoverBackColor = getElementColor(this._themeHover);
var buttonToggledBackColor = getElementColor(this._themeSelect);
var buttonDisabledBackColor = getElementColor(this._themeDisabled);
var knobBackColor = getElementColor(this._themeKnob);
var pointerColor = getElementColor(this._themePointer);
var swooshColor = getElementColor(this._themeSwoosh);
var swooshHoverColor = getElementColor(this._themeSwooshHover);

Undefined.

Any non hacky solution for this?

3

Are you actually adding the Viewer to the DOM for the test? If not, that may be what’s causing your issue. If you are adding it to the DOM, make sure it has a non-zero size.

4

It is added alright.
I’ve finally managed to get this to work, but it’s a bit of a turn off.

In my app, I’m setting the viewer’s parameters dynamically. I have a “config” parameter which I’m sending to the viewer’s constructor:

new Cesium.Viewer($element[0], ctrl.cesiumDirective.config);

``

This works fine in my app, but not in my tests. When I hard code the config parameters like this:

ctrl.cesium = new Cesium.Viewer($element[0], {
 baseLayerPicker: false,
 fullscreenButton: false,
 homeButton: false,
 sceneModePicker: false,
 selectionIndicator: false,
 timeline: false,
 animation: false,
 geocoder: false
});

This way it works both in tests and in the app.

Any idea why? Can you replicate this on your end?
5

Since it works hardcoded, this sounds like a problem with your configuration, are you sure ctrl.cesiumDirective.config has the value you think it does?

6

But I’ve found the issue - the “animation” does not work in tests. When I add “animation: false” to the options, it runs the tests smoothly.