fix: execute validations on formatted arguments

Author: kantord

src/components/base_component.js

@@ -75,6 +75,7 @@ const handle_external_data = (instance_args, selection, raw_data) => (resolve) =
     : resolve(raw_data)
 
 const create_bind_function = (args, instance_args) => (selection) => {
+  console.log('create bind functin called', args, instance_args, selection) // eslint-disable-line
   validate_selection(selection)
   let element = create_element(args.init, format_arguments(instance_args), selection)
 
@@ -106,7 +107,7 @@ const format_arguments = (args) => {
 }
 
 const create_component_function = (args) => (instance_args) => {
-  execute_validations(args.validators)(instance_args)
+  execute_validations(args.validators)(format_arguments(instance_args))
   return create_bind_function(args, instance_args)
 }
 

src/components/base_component.test.js

@@ -31,17 +31,19 @@ describe('Component', function() {
       .onCall(1).returns(args.element2)
       .returns(args.element)
     const my_render = (args.render_func === undefined ) ? sinon.spy() : args.render_func
+    const my_validator = sinon.spy()
+    const validators = [my_validator]
     const my_component = (args.has_init === true) ? Component({
-      'render': my_render, 'validators': [], 'init': my_init
+      'render': my_render, 'validators': validators, 'init': my_init
     }) : Component({
-      'render': my_render, 'validators': []
+      'render': my_render, 'validators': validators
     })
     const bind = my_component(args.instance_args)
     const d3 = require('d3')
     const my_selection = d3.selection()
     const render = bind(my_selection)
     render(args.data)
-    return { my_init, my_component, my_render, my_selection, render, jq, format_value }
+    return { my_init, my_component, my_render, my_selection, render, jq, format_value, my_validator }
   }
 
   it('should require a render function', () => {
@@ -335,9 +337,12 @@ describe('Component', function() {
       'format_value_return': {
         '22': ['foo'],
         'state_handler': state_handler
+      },
+     'format_value_return2': {
+        '22': ['foo'],
+        'state_handler': state_handler
       }
     })
-    my_init.should.be.called()
     my_init.should.be.calledWith({
       '22': ['foo'],
       'state_handler': sinon.match.any
@@ -492,13 +497,25 @@ describe('Component', function() {
       'element2': element2,
       'format_value_return2': {
         'foo': 'bar',
-        'state_handler': sinon.match.any
+        'state_handler': {}
       }
     })
     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)
   })
 
+  it('returned component should call args validator with formatted args', () => {
+    const format_value_return = sinon.spy()
+    const { my_validator } = call_test_component_with({
+      'instance_args': {'state_handler': {
+        'get_state': sinon.stub(),
+        'subscribe': sinon.stub(),
+      }},
+      'format_value_return': format_value_return,
+      'format_value_return2': format_value_return
+    })
+    my_validator.should.be.alwaysCalledWith(format_value_return)
+  })
 
 })