fix: after-re init, render is now called with new element

Author: kantord

src/components/base_component.js

@@ -76,15 +76,15 @@ const handle_external_data = (instance_args, selection, raw_data) => (resolve) =
 
 const create_bind_function = (args, instance_args) => (selection) => {
   validate_selection(selection)
-  const element = create_element(args.init, format_arguments(instance_args), selection)
+  let element = create_element(args.init, format_arguments(instance_args), selection)
 
   return (raw_data) => {
     const render_ = () => handle_external_data(instance_args, selection, raw_data)(
       render_component(args, format_arguments(instance_args), selection, element))
     if (has_state_handler(instance_args)) {
       instance_args.state_handler.subscribe((state_handler, me) => {
         element.remove()
-        create_element(args.init, format_arguments(instance_args), selection)
+        element = create_element(args.init, format_arguments(instance_args), selection)
         state_handler.subscribe(me)
         render_()
       })

src/components/base_component.test.js

@@ -27,7 +27,9 @@ describe('Component', function() {
       '../interpolation.js': {'format_value': format_value}
     }).default
 
-    const my_init = sinon.stub().returns(args.element)
+    const my_init = sinon.stub()
+      .onCall(1).returns(args.element2)
+      .returns(args.element)
     const my_render = (args.render_func === undefined ) ? sinon.spy() : args.render_func
     const my_component = (args.has_init === true) ? Component({
       'render': my_render, 'validators': [], 'init': my_init
@@ -473,4 +475,30 @@ describe('Component', function() {
     my_render.should.be.calledTwice()
   })
 
+  it('correct element is passed to render when re-init happens', () => {
+    let callback
+    const element = {'remove': sinon.spy()}
+    const element2 = {'remove': sinon.spy()}
+    const state_handler = {
+      'get_state': sinon.spy(),
+      'subscribe': sinon.spy(function(f) {callback = f})}
+    const { my_render } = call_test_component_with({
+      'instance_args': {
+        '${x}': '${y}',
+        'state_handler': state_handler
+      },
+      'has_init': true,
+      'element': element,
+      'element2': element2,
+      'format_value_return2': {
+        'foo': 'bar',
+        'state_handler': sinon.match.any
+      }
+    })
+    state_handler.get_state = () => ({'x': 'foo', 'y': 'bar'})
+    callback(state_handler, callback)
+    my_render.should.be.calledWith(sinon.match.any, sinon.match.any, sinon.match.any, element2)
+  })
+
+
 })

src/components/dropdown/Dropdown.js

@@ -33,7 +33,6 @@ const DropdownComponent = Component({
       .append('select').attr('class', 'ds--select')
   },
   'render': (args, selection, data, item) => {
-    console.log("render", args, selection, data, item, args.state_handler.get_state()) // eslint-disable-line
     item
       .selectAll('option').data(data).call(update_pattern)
     item

src/components/dropdown/Dropdown.test.js

@@ -27,7 +27,7 @@ describe('Text component', function() {
     const init_variable = sinon.spy()
     const set_variable = sinon.spy()
     const get_state = sinon.stub().returns(args.state || {})
-    const subscribe = sinon.spy()
+    const subscribe = (args.subscribe === undefined) ? sinon.spy() : args.subscribe
     const state_handler = { init_variable, set_variable, get_state, subscribe }
     const component_args = Object.assign(args.args, {
       state_handler
@@ -153,5 +153,21 @@ describe('Text component', function() {
     assert.equal(d3.select('select').node().value, '1')
   })
 
+  it('correct number of items after state change', () => {
+    let callback
+    const { d3, set_variable } = call_render_with({
+      'subscribe': (f) => {callback = f},
+      'args': {'variable': 'my_var', 'default': ''},
+      'data': [
+        { 'text': 'foo', 'value': 'fo' },
+        { 'text': 'bar', 'value': 'baz' },
+      ]})
+    assert.equal(d3.selectAll('option.ds--select-option').size(), 2, 'Correct number of items before change')
+    d3.select('select').property('value', 'baz')
+    d3.select('select').dispatch('change')
+    callback({'subscribe': sinon.spy()}, callback)
+    assert.equal(d3.selectAll('option.ds--select-option').size(), 2, 'Correct number of items after change')
+  })
+
 })
 

src/manual_test.js

@@ -16,13 +16,6 @@ dashboard "Cereals":
     - {"value": "bar", "text": "bar"}
     - {"value": "baz", "text": "baz"}
   - h2 text: "By calories"
-  - bar chart:
-    - attr:query: '{"columns": [(sort_by(-(.calories | tonumber)) | .[] | [.name, .calories])]}'
-    - data: https://gist.githubusercontent.com/ZeningQu/6184eaf8faa533e320abc938c4738c3e/raw/40f237de825061faa8721c2293b79c46979780b4/cereals.csv
-  - h2 text: "By nutritional profile"
-  - 4 columns:
-    - attr:query: '.[] | {"component": "rows", "data": [{"component": "text", "args": {"tagName": "h3"}, "data": .name}, {"component": "chart", "args": {"type": "pie"}, "data": {"columns": [["protein", .protein], ["carbo", .carbo], ["sugars", .sugars], ["fat", .fat]]}}]}'
-    - data: https://gist.githubusercontent.com/ZeningQu/6184eaf8faa533e320abc938c4738c3e/raw/40f237de825061faa8721c2293b79c46979780b4/cereals.csv
 `)
 
 //render_dashboard(