[WIP] [explorev2] Refactor filter into FieldSet (#1981)

* [explorev2] Refactor filter into FieldSet

* Fixed tests

* Added tests

* Modifications based on comments

superset/assets/spec/javascripts/explorev2/actions_spec.js

@@ -15,15 +15,4 @@ describe('reducers', () => {
       actions.setFieldValue('show_legend', true));
     expect(newState.viz.form_data.show_legend).to.equal(true);
   });
-  it('adds a filter given a new filter', () => {
-    const newState = exploreReducer(initialState('table'),
-      actions.addFilter({
-        id: 1,
-        prefix: 'flt',
-        col: null,
-        op: null,
-        value: null,
-      }));
-    expect(newState.viz.form_data.filters).to.have.length(1);
-  });
 });

superset/assets/spec/javascripts/explorev2/components/FilterField_spec.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { describe, it, beforeEach } from 'mocha';
+import { shallow } from 'enzyme';
+import FilterField from '../../../../javascripts/explorev2/components/FilterField';
+import Filter from '../../../../javascripts/explorev2/components/Filter';
+
+const defaultProps = {
+  choices: ['country_name'],
+  prefix: 'flt',
+  onChange: sinon.spy(),
+  value: [],
+  datasource: {
+    id: 1,
+    type: 'table',
+    filter_select: false,
+  },
+};
+
+describe('FilterField', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<FilterField {...defaultProps} />);
+  });
+
+  it('renders Filters', () => {
+    expect(
+      React.isValidElement(<FilterField {...defaultProps} />)
+    ).to.equal(true);
+  });
+
+  it('renders one button', () => {
+    expect(wrapper.find(Filter)).to.have.lengthOf(0);
+    expect(wrapper.find(Button)).to.have.lengthOf(1);
+  });
+
+  it('add a filter when Add Filter button is clicked', () => {
+    const addButton = wrapper.find('#add-button');
+    expect(addButton).to.have.lengthOf(1);
+    addButton.simulate('click');
+    expect(defaultProps.onChange).to.have.property('callCount', 1);
+  });
+});

superset/assets/spec/javascripts/explorev2/components/Filter_spec.js

@@ -2,24 +2,31 @@
 import React from 'react';
 import Select from 'react-select';
 import { Button } from 'react-bootstrap';
+import sinon from 'sinon';
 import { expect } from 'chai';
 import { describe, it, beforeEach } from 'mocha';
 import { shallow } from 'enzyme';
 import Filter from '../../../../javascripts/explorev2/components/Filter';
 
 const defaultProps = {
-  actions: {
-    fetchFilterValues: () => ({}),
+  choices: ['country_name'],
+  opChoices: ['in', 'not in'],
+  changeFilter: sinon.spy(),
+  removeFilter: () => {
+    // noop
   },
-  filterColumnOpts: ['country_name'],
   filter: {
     id: 1,
     prefix: 'flt',
-    col: 'country_name',
-    eq: 'in',
-    value: 'China',
+    col: null,
+    op: 'in',
+    value: '',
+  },
+  datasource: {
+    id: 1,
+    type: 'table',
+    filter_select: false,
   },
-  prefix: 'flt',
 };
 
 describe('Filter', () => {
@@ -35,9 +42,19 @@ describe('Filter', () => {
     ).to.equal(true);
   });
 
-  it('renders two select, one button and one input', () => {
+  it('renders two selects, one button and one input', () => {
     expect(wrapper.find(Select)).to.have.lengthOf(2);
     expect(wrapper.find(Button)).to.have.lengthOf(1);
     expect(wrapper.find('input')).to.have.lengthOf(1);
   });
+
+  it('calls changeFilter when select is changed', () => {
+    const selectCol = wrapper.find('#select-col');
+    selectCol.simulate('change', { value: 'col' });
+    const selectOp = wrapper.find('#select-op');
+    selectOp.simulate('change', { value: 'in' });
+    const input = wrapper.find('input');
+    input.simulate('change', { target: { value: 'x' } });
+    expect(defaultProps.changeFilter).to.have.property('callCount', 3);
+  });
 });

superset/assets/spec/javascripts/explorev2/components/Filters_spec.js

@@ -1,40 +0,0 @@
-/* eslint-disable no-unused-expressions */
-import React from 'react';
-import { Button } from 'react-bootstrap';
-import { expect } from 'chai';
-import { describe, it, beforeEach } from 'mocha';
-import { shallow } from 'enzyme';
-import { Filters } from '../../../../javascripts/explorev2/components/Filters';
-import Filter from '../../../../javascripts/explorev2/components/Filter';
-
-const defaultProps = {
-  filterColumnOpts: ['country_name'],
-  filters: [
-    {
-      id: 1,
-      prefix: 'flt',
-      col: 'country_name',
-      eq: 'in',
-      value: 'China',
-    }],
-  prefix: 'flt',
-};
-
-describe('Filters', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallow(<Filters {...defaultProps} />);
-  });
-
-  it('renders Filters', () => {
-    expect(
-      React.isValidElement(<Filters {...defaultProps} />)
-    ).to.equal(true);
-  });
-
-  it('renders one filter', () => {
-    expect(wrapper.find(Filter)).to.have.lengthOf(1);
-    expect(wrapper.find(Button)).to.have.lengthOf(1);
-  });
-});