Add more test coverage around fog transitions (mapbox#10782)

SnailBones · Jul 15, 2021 · e6dceaf · e6dceaf
1 parent e57dfee
commit e6dceaf
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 2 deletions.
diff --git a/src/style/fog.js b/src/style/fog.js
@@ -12,6 +12,7 @@ import type EvaluationParameters from './evaluation_parameters.js';
 import type {TransitionParameters} from './properties.js';
 import type LngLat from '../geo/lng_lat.js';
 import type Transform from '../geo/transform.js';
+import type {StyleSetterOptions} from '../style/style.js';
 import type {FogState} from './fog_helpers.js';
 
 type Props = {|
@@ -52,8 +53,8 @@ class Fog extends Evented {
         return this._transitionable.serialize();
     }
 
-    set(fog?: FogSpecification) {
-        if (this._validate(validateFog, fog)) {
+    set(fog?: FogSpecification, options: StyleSetterOptions = {}) {
+        if (this._validate(validateFog, fog, options)) {
             return;
         }
 

diff --git a/test/unit/ui/map.test.js b/test/unit/ui/map.test.js
@@ -9,6 +9,8 @@ import {OverscaledTileID} from '../../../src/source/tile_id.js';
 import {Event, ErrorEvent} from '../../../src/util/evented.js';
 import simulate from '../../util/simulate_interaction.js';
 import {fixedLngLat, fixedNum} from '../../util/fixed.js';
+import Fog from '../../../src/style/fog.js';
+import Color from '../../../src/style-spec/util/color.js';
 
 function createStyleSource() {
     return {
@@ -347,6 +349,65 @@ test('Map', (t) => {
             t.end();
         });
 
+        t.test('updating fog results in correct transitions', (t) => {
+            t.test('sets fog with transition', (t) => {
+                const fog = new Fog({
+                    'color': 'white',
+                    'range': [0, 1],
+                    'horizon-blend': 0.0
+                });
+                fog.set({'color-transition': {duration: 3000}});
+
+                fog.set({'color': 'red'});
+                fog.updateTransitions({transition: true}, {});
+                fog.recalculate({zoom: 16, zoomHistory: {}, now: 1500});
+                t.deepEqual(fog.properties.get('color'), new Color(1, 0.5, 0.5, 1));
+                fog.recalculate({zoom: 16, zoomHistory: {}, now: 3000});
+                t.deepEqual(fog.properties.get('color'), new Color(1, 0.0, 0.0, 1));
+                fog.recalculate({zoom: 16, zoomHistory: {}, now: 3500});
+                t.deepEqual(fog.properties.get('color'), new Color(1, 0.0, 0.0, 1));
+
+                fog.set({'range-transition': {duration: 3000}});
+                fog.set({'range': [2, 5]});
+                fog.updateTransitions({transition: true}, {});
+                fog.recalculate({zoom: 16, zoomHistory: {}, now: 1500});
+                t.deepEqual(fog.properties.get('range')[0], 1);
+                t.deepEqual(fog.properties.get('range')[1], 3);
+                fog.recalculate({zoom: 16, zoomHistory: {}, now: 3000});
+                t.deepEqual(fog.properties.get('range')[0], 2);
+                t.deepEqual(fog.properties.get('range')[1], 5);
+                fog.recalculate({zoom: 16, zoomHistory: {}, now: 3500});
+                t.deepEqual(fog.properties.get('range')[0], 2);
+                t.deepEqual(fog.properties.get('range')[1], 5);
+
+                fog.set({'horizon-blend-transition': {duration: 3000}});
+                fog.set({'horizon-blend': 0.5});
+                fog.updateTransitions({transition: true}, {});
+                fog.recalculate({zoom: 16, zoomHistory: {}, now: 1500});
+                t.deepEqual(fog.properties.get('horizon-blend'), 0.25);
+                fog.recalculate({zoom: 16, zoomHistory: {}, now: 3000});
+                t.deepEqual(fog.properties.get('horizon-blend'), 0.5);
+                fog.recalculate({zoom: 16, zoomHistory: {}, now: 3500});
+                t.deepEqual(fog.properties.get('horizon-blend'), 0.5);
+
+                t.end();
+            });
+
+            t.test('fog respects validation option', (t) => {
+                const fog = new Fog({});
+                const fogSpy = t.spy(fog, '_validate');
+
+                fog.set({color: [444]}, {validate: false});
+                fog.updateTransitions({transition: false}, {});
+                fog.recalculate({zoom: 16, zoomHistory: {}, now: 10});
+
+                t.ok(fogSpy.calledOnce);
+                t.deepEqual(fog.properties.get('color'), [444]);
+                t.end();
+            });
+            t.end();
+        });
+
         t.test('updating fog triggers style diffing using setFog operation', (t) => {
             t.test('removing fog', (t) => {
                 const style = createStyle();