Added specs and made changes based on comments

superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx

@@ -4,7 +4,7 @@ import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
 import { Panel, Alert } from 'react-bootstrap';
-import { visTypes, sectionsToRender } from '../stores/store';
+import { visTypes, sectionsToRender, commonControlPanelSections } from '../stores/store';
 import ControlPanelSection from './ControlPanelSection';
 import FieldSetRow from './FieldSetRow';
 import Filters from './Filters';

superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx

@@ -48,8 +48,8 @@ class ExploreViewContainer extends React.Component {
     window.removeEventListener('resize', this.handleResize.bind(this));
   }
 
-  onQuery() {
-    const data = getParamObject(this.props.form_data, this.props.datasource_type);
+  onQuery(form_data) {
+    const data = getParamObject(form_data, this.props.datasource_type);
     this.queryFormData(data);
 
     const params = $.param(data, true);

superset/assets/javascripts/explorev2/components/Filter.jsx

@@ -2,15 +2,12 @@ import React from 'react';
 // import { Tab, Row, Col, Nav, NavItem } from 'react-bootstrap';
 import Select from 'react-select';
 import { Button } from 'react-bootstrap';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import * as actions from '../actions/exploreActions';
-import shortid from 'shortid';
 
 const propTypes = {
   actions: React.PropTypes.object.isRequired,
   filterColumnOpts: React.PropTypes.array,
   prefix: React.PropTypes.string,
+  filter: React.PropTypes.object.isRequired,
 };
 
 const defaultProps = {
@@ -78,6 +75,7 @@ export default class Filter extends React.Component {
           </div>
           <div className="col-lg-2">
             <Button
+              id="remove-button"
               bsSize="small"
               onClick={this.removeFilter.bind(this, this.props.filter)}
             >

superset/assets/javascripts/explorev2/components/Filters.jsx

@@ -51,6 +51,7 @@ class Filters extends React.Component {
         <div className="row space-2">
           <div className="col-lg-2">
             <Button
+              id="add-button"
               bsSize="sm"
               onClick={this.addFilter.bind(this)}
             >

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

@@ -0,0 +1,56 @@
+/* eslint-disable no-unused-expressions */
+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 Filters from '../../../../javascripts/explorev2/components/Filters';
+import Filter from '../../../../javascripts/explorev2/components/Filter';
+
+const defaultProps = {
+  filterColumnOpts: ['country_name'],
+  filters: [
+    {
+      col: 'country_name',
+      eq: 'in',
+      value: 'China',
+    }],
+  prefix: 'flt',
+};
+
+describe('Filters', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<Filters {...defaultProps} />);
+  });
+
+  it('renders Filters', () => {
+    expect(wrapper.find(Filters)).to.have.lengthOf(1);
+  });
+
+  it('renders one filter, two select, two buttons and one input', () => {
+    expect(wrapper.find(Filter)).to.have.lengthOf(1);
+    expect(wrapper.find(Select)).to.have.lengthOf(2);
+    expect(wrapper.find(Button)).to.have.lengthOf(2);
+    expect(wrapper.find('input')).to.have.lengthOf(1);
+  });
+
+  it('calls removeFilter when remove button clicked', () => {
+    const remove = sinon.spy(Filter.prototype, 'removeFilter');
+    wrapper.find('#remove-button').simulate('click');
+    /* eslint-disable no-unused-expressions */
+    expect(remove).to.have.been.called;
+    expect(wrapper.find(Filter)).to.have.lengthOf(0);
+  });
+
+  it('calls addFilter when plus button clicked', () => {
+    const add = sinon.spy(Filters.prototype, 'addFilter');
+    wrapper.find('#add-button').simulate('click');
+    /* eslint-disable no-unused-expressions */
+    expect(add).to.have.been.called;
+    expect(wrapper.find(Filter)).to.have.lengthOf(2);
+  });
+});

superset/assets/javascripts/explorev2/index.jsx

@@ -29,7 +29,7 @@ const bootstrappedState = Object.assign(initialState(bootstrapData.viz.form_data
 bootstrappedState.viz.form_data.datasource = parseInt(bootstrapData.datasource_id, 10);
 bootstrappedState.viz.form_data.datasource_name = bootstrapData.datasource_name;
 
-const parseFilters = function (form_data, prefix = 'flt') {
+function parseFilters(form_data, prefix = 'flt') {
   const filters = [];
   for (let i = 0; i < 10; i++) {
     if (form_data[`${prefix}_col_${i}`] && form_data[`${prefix}_op_${i}`]) {
@@ -46,14 +46,14 @@ const parseFilters = function (form_data, prefix = 'flt') {
     delete form_data[`${prefix}_eq_${i}`];
   }
   return filters;
-};
+}
 
-const getFilters = function (form_data, datasource_type) {
+function getFilters(form_data, datasource_type) {
   if (datasource_type === 'table') {
     return parseFilters(form_data);
   }
   return parseFilters(form_data).concat(parseFilters(form_data, 'having'));
-};
+}
 
 bootstrappedState.viz.form_data.filters =
   getFilters(bootstrappedState.viz.form_data, bootstrapData.datasource_type);

superset/assets/javascripts/explorev2/stores/store.js

@@ -115,10 +115,8 @@ export const commonControlPanelSections = {
     },
     {
       label: 'Result Filters',
-      description: 'Filters are defined using comma delimited strings as in <US,FR,Other>' +
-        'Leave the value field empty to filter empty strings or nulls' +
-        'For filters with comma in values, wrap them in single quotes' +
-        "as in <NY, 'Tahoe, CA', DC>",
+      description: 'The filters to apply after post-aggregation.' +
+        'Leave the value field empty to filter empty strings or nulls',
     },
   ],
 };

superset/assets/javascripts/modules/utils.js

@@ -168,12 +168,13 @@ function formatFilters(filters) {
 }
 
 export function getParamObject(form_data, datasource_type) {
-  const data = {};
-  // V2 tag temporarily for updating url
-  // Todo: remove after launch
-  data.V2 = true;
-  data.datasource_id = form_data.datasource;
-  data.datasource_type = datasource_type;
+  const data = {
+    // V2 tag temporarily for updating url
+    // Todo: remove after launch
+    V2: true,
+    datasource_id: form_data.datasource,
+    datasource_type,
+  };
   Object.keys(form_data).forEach((field) => {
     // filter out null fields
     if (form_data[field] !== null && field !== 'datasource') {