Merge pull request #1190 from dnlkoch/1117-scale-combo

Fix missing value in scale combo

src/Field/ScaleCombo/ScaleCombo.jsx

@@ -112,7 +112,8 @@ class ScaleCombo extends React.Component {
    * @param {Object} prevState The previous state.
    */
   static getDerivedStateFromProps(nextProps, prevState) {
-    if (!isEqual(nextProps.zoomLevel, prevState.zoomLevel)) {
+    if (isInteger(nextProps.zoomLevel) &&
+        !isEqual(nextProps.zoomLevel, prevState.zoomLevel)) {
       return {
         zoomLevel: nextProps.zoomLevel
       };
@@ -139,7 +140,7 @@ class ScaleCombo extends React.Component {
      * The default onZoomLevelSelect function sets the resolution of the passed
      * map according to the selected Scale.
      *
-     * @param  {Number} selectedScale The selectedScale.
+     * @param {Number} selectedScale The selectedScale.
      */
     const defaultOnZoomLevelSelect = selectedScale => {
       const mapView = props.map.getView();
@@ -160,7 +161,7 @@ class ScaleCombo extends React.Component {
     }
 
     if (isEmpty(this.state.scales) && this.props.map) {
-      this.getOptionsFromMap();
+      this.state.scales = this.getOptionsFromMap();
     }
   }
 
@@ -197,6 +198,7 @@ class ScaleCombo extends React.Component {
     if (!roundZoom) {
       roundZoom = 0;
     }
+
     this.setState({
       zoomLevel: roundZoom
     });
@@ -206,22 +208,25 @@ class ScaleCombo extends React.Component {
    * @function pushScaleOption: Helper function to create a {@link Option} scale component
    * based on a resolution and the {@link Ol.View}
    *
+   * @param {Array} scales The scales array to push the scale to.
    * @param {Number} resolution map cresolution to generate the option for
    * @param {Ol.View} mv The map view
    *
    */
-  pushScale = (resolution, mv) => {
+  pushScale = (scales, resolution, mv) => {
     let scale = MapUtil.getScaleForResolution(resolution, mv.getProjection().getUnits());
     const roundScale = MapUtil.roundScale(scale);
-    if (this.state.scales.includes(roundScale) ) {
+    if (scales.includes(roundScale) ) {
       return;
     }
-    this.state.scales.push(roundScale);
+    scales.push(roundScale);
   };
 
   /**
-   * @function getOptionsFromMap: Helper function generate {@link Option} scale components
-   * based on an existing instance of {@link Ol.Map}
+   * Generates the scales to add as {@link Option} to the SelectField based on
+   * the given instance of {@link Ol.Map}.
+   *
+   * @return {Array} The array of scales.
    */
   getOptionsFromMap = () => {
     const {
@@ -238,24 +243,27 @@ class ScaleCombo extends React.Component {
       return;
     }
 
+    let scales = [];
     let mv = map.getView();
     // use existing resolutions array if exists
     let resolutions = mv.getResolutions();
     if (isEmpty(resolutions)) {
       for (let currentZoomLevel = mv.getMaxZoom(); currentZoomLevel >= mv.getMinZoom(); currentZoomLevel--) {
         let resolution = mv.getResolutionForZoom(currentZoomLevel);
         if (resolutionsFilter(resolution)) {
-          this.pushScale(resolution, mv);
+          this.pushScale(scales, resolution, mv);
         }
       }
     } else {
       let reversedResolutions = reverse(clone(resolutions));
       reversedResolutions
         .filter(resolutionsFilter)
         .forEach((resolution) => {
-          this.pushScale(resolution, mv);
+          this.pushScale(scales, resolution, mv);
         });
     }
+
+    return scales;
   };
 
   /**

src/Field/ScaleCombo/ScaleCombo.spec.jsx

@@ -65,19 +65,24 @@ describe('<ScaleCombo />', () => {
       TestUtil.removeMap(map);
     });
 
-    it('creates options array from given map without resolutions and updates scales prop', () => {
+    it('creates options array from given map without resolutions', () => {
       const map = TestUtil.createMap();
       const wrapper = TestUtil.mountComponent(ScaleCombo, {
         scales: [],
         map: map
       });
-      wrapper.instance().getOptionsFromMap();
-      expect(wrapper.props().scales).toBeInstanceOf(Array);
+
+      // Reset the scales array, as getOptionsFromMap() will be called in
+      // constructor.
+      wrapper.setState({'scales': []});
+
+      const scales = wrapper.instance().getOptionsFromMap();
+      expect(scales).toBeInstanceOf(Array);
 
       TestUtil.removeMap(map);
     });
 
-    it('creates options array from given map with resolutions and updates scales prop', () => {
+    it('creates options array from given map with resolutions', () => {
       const testResolutions = [560, 280, 140, 70, 28];
       const map = TestUtil.createMap({
         resolutions: testResolutions
@@ -86,19 +91,24 @@ describe('<ScaleCombo />', () => {
         scales: [],
         map: map
       });
-      wrapper.instance().getOptionsFromMap();
-      expect(wrapper.props().scales).toBeInstanceOf(Array);
-      expect(wrapper.props().scales).toHaveLength(testResolutions.length);
+
+      // Reset the scales array, as getOptionsFromMap() will be called in
+      // constructor.
+      wrapper.setState({'scales': []});
+
+      const scales = wrapper.instance().getOptionsFromMap();
+      expect(scales).toBeInstanceOf(Array);
+      expect(scales).toHaveLength(testResolutions.length);
 
       let roundScale = (Math.round(MapUtil.getScaleForResolution(
         testResolutions[testResolutions.length - 1] ,'m')));
 
-      expect(wrapper.props().scales[0]).toBe(roundScale);
+      expect(scales[0]).toBe(roundScale);
 
       TestUtil.removeMap(map);
     });
 
-    it('creates options array from given map with filtered resolutions and updates scales prop', () => {
+    it('creates options array from given map with filtered resolutions', () => {
       const testResolutions = [560, 280, 140, 70, 28, 19, 15, 14, 13, 9];
       const map = TestUtil.createMap({
         resolutions: testResolutions
@@ -116,14 +126,19 @@ describe('<ScaleCombo />', () => {
         scales: [],
         resolutionsFilter
       });
-      wrapper.instance().getOptionsFromMap();
-      expect(wrapper.props().scales).toBeInstanceOf(Array);
-      expect(wrapper.props().scales).toHaveLength(expectedLength);
+
+      // Reset the scales array, as getOptionsFromMap() will be called in
+      // constructor.
+      wrapper.setState({'scales': []});
+
+      const scales = wrapper.instance().getOptionsFromMap();
+      expect(scales).toBeInstanceOf(Array);
+      expect(scales).toHaveLength(expectedLength);
 
       let roundScale = MapUtil.roundScale(MapUtil.getScaleForResolution(
         testResolutions[testResolutions.length - 2] ,'m'));
 
-      expect(wrapper.props().scales[1]).toBe(roundScale);
+      expect(scales[1]).toBe(roundScale);
 
       TestUtil.removeMap(map);
     });