feat: DropdownComponent reports variable values

through args 'init_variable' and 'set_variable'

Author: kantord

src/components/dropdown/Dropdown.js

@@ -1,6 +1,7 @@
 import Component from '../base_component.js'
 import { required } from '../../validators'
 import { regexp } from '../../validators'
+import * as d3 from 'd3'
 
 const set_values = (selection) => selection
   .property('value', d => d.value)
@@ -26,10 +27,20 @@ const DropdownComponent = Component({
   'validators': [
     required('variable'), regexp('variable', /^[A-Za-z]([_A-Za-z0-9-]*[_A-Za-z0-9])?$/),
     required('default')],
-  'init': (args, selection) => selection
-    .append('select').attr('class', 'ds--select'),
-  'render': (args, selection, data, item) => item
-    .selectAll('option').data(data).call(update_pattern)
+  'init': (args, selection) => {
+    args.init_variable(args.variable, args.default)
+    return selection
+      .append('select').attr('class', 'ds--select')
+  },
+  'render': (args, selection, data, item) => {
+    item
+      .selectAll('option').data(data).call(update_pattern)
+
+    item
+      .on('change', function() {
+        args.set_variable(args.variable, d3.select(this).property('value'))
+      })
+  }
 })
 
 export default DropdownComponent

src/components/dropdown/Dropdown.test.js

@@ -1,6 +1,7 @@
 import should from 'should' // eslint-disable-line no-unused-vars
 import DropdownComponent from './Dropdown'
 import assert from 'assert'
+import sinon from 'sinon'
 
 describe('Text component', function() {
   beforeEach(function () {
@@ -23,9 +24,15 @@ describe('Text component', function() {
 
   const call_render_with = (args) => {
     const d3 = require('d3')
-    const render = DropdownComponent(args.args)(d3.selection())
+    const init_variable = sinon.spy()
+    const set_variable = sinon.spy()
+    const component_args = Object.assign(args.args, {
+      'init_variable': init_variable,
+      'set_variable': set_variable,
+    })
+    const render = DropdownComponent(component_args)(d3.selection())
     render(args.data)
-    return { render }
+    return { render, init_variable, set_variable, d3 }
   }
 
   it('creates select item', () => {
@@ -89,5 +96,48 @@ describe('Text component', function() {
     assert.equal(d3.select('option.ds--select-option').node().value, -56)
   })
 
+  it('init_variable has to be called with default value', () => {
+    const my_spy = sinon.spy()
+    const { init_variable } = call_render_with({'args': {'variable': 'my_var', 'default': my_spy},
+      'data': [{ 'text': 'foo', 'value': 0 }]})
+    init_variable.should.be.calledWith('my_var', my_spy)
+  })
+
+  it('init_variable has to be called with default value 2', () => {
+    const my_spy = sinon.spy()
+    const { init_variable } = call_render_with({'args': {'variable': 'my_var2', 'default': my_spy},
+      'data': [{ 'text': 'foo', 'value': 0 }]})
+    init_variable.should.be.calledWith('my_var2', my_spy)
+  })
+
+  it('set_variable should not be called before change', () => {
+    const { set_variable } = call_render_with({'args': {'variable': 'my_var', 'default': ''},
+      'data': [{ 'text': 'foo', 'value': 0 }]})
+    set_variable.should.not.be.called()
+  })
+
+  it('set_variable should be called after change', () => {
+    const { d3, set_variable } = call_render_with({'args': {'variable': 'var', 'default': ''},
+      'data': [
+        { 'text': 'foo', 'value': 'fo' },
+        { 'text': 'bar', 'value': 'bar' },
+      ]})
+    d3.select('select').property('value', 'fo')
+    d3.select('select').dispatch('change')
+    set_variable.should.be.calledWith('var', 'fo')
+  })
+
+  it('set_variable should be called after change 2', () => {
+    const { d3, set_variable } = call_render_with({'args': {'variable': 'my_var', 'default': ''},
+      'data': [
+        { 'text': 'foo', 'value': 'fo' },
+        { 'text': 'bar', 'value': 'baz' },
+      ]})
+    d3.select('select').property('value', 'fo')
+    d3.select('select').property('value', 'baz')
+    d3.select('select').dispatch('change')
+    set_variable.should.be.calledWith('my_var', 'baz')
+  })
+
 })