Merge pull request #36 from CraigCottingham/develop

Fix map source dropdown not updating when pack changes
FiniteMonkeys · Mar 15, 2020 · 34cbd5b · 34cbd5b
2 parents 0912739 + 471e6a5
commit 34cbd5b
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 5 deletions.
diff --git a/src/components/__tests__/MapSource.test.js b/src/components/__tests__/MapSource.test.js
@@ -25,7 +25,94 @@ it("renders correctly", () => {
     .create(
       <MapSource packOptions={packOptions} bodyOptions={bodyOptions} styleOptions={styleOptions} />
     )
-    .toJSON();
+    .toJSON()
 
-  expect(tree).toMatchSnapshot();
-});
+  expect(tree).toMatchSnapshot()
+})
+
+describe("setPackOptions", () => {
+  it("also clears the selected pack", () => {
+    const optionsBefore = [
+      {value: "a", label: "A"},
+      {value: "b", label: "B"},
+      {value: "c", label: "C"}
+    ]
+    const optionsAfter = [
+      {value: "d", label: "D"},
+      {value: "e", label: "E"},
+      {value: "f", label: "F"}
+    ]
+    const optionsPlaceholder = [
+      {value: "g", label: "G"},
+      {value: "h", label: "H"},
+      {value: "i", label: "I"}
+    ]
+
+    const component = renderer.create(
+      <MapSource packOptions={optionsBefore} pack="a" bodyOptions={optionsPlaceholder} styleOptions={optionsPlaceholder} />
+    )
+    const instance = component.getInstance()
+    expect(instance.state.pack).toEqual("a")
+
+    instance.setPackOptions(optionsAfter)
+    expect(instance.state.pack).toBeUndefined()
+  })
+})
+
+describe("setBodyOptions", () => {
+  it("also clears the selected body", () => {
+    const optionsBefore = [
+      {value: "a", label: "A"},
+      {value: "b", label: "B"},
+      {value: "c", label: "C"}
+    ]
+    const optionsAfter = [
+      {value: "d", label: "D"},
+      {value: "e", label: "E"},
+      {value: "f", label: "F"}
+    ]
+    const optionsPlaceholder = [
+      {value: "g", label: "G"},
+      {value: "h", label: "H"},
+      {value: "i", label: "I"}
+    ]
+
+    const component = renderer.create(
+      <MapSource packOptions={optionsPlaceholder} bodyOptions={optionsBefore} mapBody="b" styleOptions={optionsPlaceholder} />
+    )
+    const instance = component.getInstance()
+    expect(instance.state.mapBody).toEqual("b")
+
+    instance.setBodyOptions(optionsAfter)
+    expect(instance.state.mapBody).toBeUndefined()
+  })
+})
+
+describe("setStyleOptions", () => {
+  it("also clears the selected style", () => {
+    const optionsBefore = [
+      {value: "a", label: "A"},
+      {value: "b", label: "B"},
+      {value: "c", label: "C"}
+    ]
+    const optionsAfter = [
+      {value: "d", label: "D"},
+      {value: "e", label: "E"},
+      {value: "f", label: "F"}
+    ]
+    const optionsPlaceholder = [
+      {value: "g", label: "G"},
+      {value: "h", label: "H"},
+      {value: "i", label: "I"}
+    ]
+
+    const component = renderer.create(
+      <MapSource packOptions={optionsPlaceholder} bodyOptions={optionsPlaceholder} styleOptions={optionsBefore} mapStyle="c" />
+    )
+    const instance = component.getInstance()
+    expect(instance.state.mapStyle).toEqual("c")
+
+    instance.setStyleOptions(optionsAfter)
+    expect(instance.state.mapStyle).toBeUndefined()
+  })
+})
diff --git a/src/index.js b/src/index.js
@@ -345,6 +345,7 @@ class KMMap extends React.Component {
               <div className="row">
                 <div className="col">
                   <MapSource
+                    key={`${this.state.mapPack}`}
                     packOptions={this.packOptions()}
                     pack={this.state.mapPack}
                     onPackChange={this.onPackChange.bind(this)}
@@ -474,7 +475,6 @@ class KMMap extends React.Component {
           </Tab>
         </Sidebar>
         <LeafletMap
-          ref={obj => { this.leafletMap = obj }}
           className="sidebar-map"
           center={position}
           zoom={this.state.zoom}
@@ -483,7 +483,6 @@ class KMMap extends React.Component {
           crs={CRS.EPSG4326}
         >
           <TileLayer
-            ref={obj => { this.tileLayer = obj }}
             key={`${this.state.mapPack},${this.state.mapBody},${this.state.mapStyle}`}
             url="https://d3kmnwgldcmvsd.cloudfront.net/{pack}/{body}/{style}/{z}/{x}/{y}.png"
             attribution={this.state.attribution}