Fixed filter removal bug (#3458)

* Fixed bugs when removing filter, switching operators, and switching columns

* Fixed lint errors for code style

* Added more unit tests for FilterControl

* Code format changes to meet standards

superset/assets/spec/javascripts/explore/components/FilterControl_spec.jsx

@@ -8,16 +8,32 @@ import { shallow } from 'enzyme';
 import FilterControl from '../../../../javascripts/explore/components/controls/FilterControl';
 import Filter from '../../../../javascripts/explore/components/controls/Filter';
 
+const $ = window.$ = require('jquery');
+
 const defaultProps = {
-  choices: ['country_name'],
-  prefix: 'flt',
+  name: 'not_having_filters',
   onChange: sinon.spy(),
-  value: [],
+  value: [
+    {
+      col: 'col1',
+      op: 'in',
+      val: ['a', 'b', 'd'],
+    },
+    {
+      col: 'col2',
+      op: '==',
+      val: 'Z',
+    },
+  ],
   datasource: {
     id: 1,
-    type: 'table',
-    filter_select: false,
-    filterable_cols: ['country_name'],
+    type: 'qtable',
+    filter_select: true,
+    filterable_cols: [['col1', 'col2']],
+    metrics_combo: [
+      ['m1', 'v1'],
+      ['m2', 'v2'],
+    ],
   },
 };
 
@@ -26,6 +42,23 @@ describe('FilterControl', () => {
 
   beforeEach(() => {
     wrapper = shallow(<FilterControl {...defaultProps} />);
+    wrapper.setState({
+      filters: [
+        {
+          valuesLoading: false,
+          valueChoices: ['a', 'b', 'c', 'd', 'e', 'f'],
+        },
+        {
+          valuesLoading: false,
+          valueChoices: ['X', 'Y', 'Z'],
+        },
+        // Need a duplicate since onChange calls are not changing props
+        {
+          valuesLoading: false,
+          valueChoices: ['X', 'Y', 'Z'],
+        },
+      ],
+    });
   });
 
   it('renders Filters', () => {
@@ -34,15 +67,151 @@ describe('FilterControl', () => {
     ).to.equal(true);
   });
 
-  it('renders one button', () => {
-    expect(wrapper.find(Filter)).to.have.lengthOf(0);
+  it('renders one button and two filters', () => {
+    expect(wrapper.find(Filter)).to.have.lengthOf(2);
     expect(wrapper.find(Button)).to.have.lengthOf(1);
   });
 
-  it('add a filter when Add Filter button is clicked', () => {
+  it('adds filter when clicking Add Filter', () => {
     const addButton = wrapper.find('#add-button');
     expect(addButton).to.have.lengthOf(1);
     addButton.simulate('click');
     expect(defaultProps.onChange).to.have.property('callCount', 1);
+    expect(defaultProps.onChange.getCall(0).args[0]).to.deep.equal([
+      {
+        col: 'col1',
+        op: 'in',
+        val: ['a', 'b', 'd'],
+      },
+      {
+        col: 'col2',
+        op: '==',
+        val: 'Z',
+      },
+      {
+        col: 'col1',
+        op: 'in',
+        val: [],
+      },
+    ]);
+  });
+
+  it('removes a the second filter when its delete button is clicked', () => {
+    expect(wrapper.find(Filter)).to.have.lengthOf(2);
+    wrapper.instance().removeFilter(1);
+    expect(defaultProps.onChange).to.have.property('callCount', 2);
+    expect(defaultProps.onChange.getCall(1).args[0]).to.deep.equal([
+      {
+        col: 'col1',
+        op: 'in',
+        val: ['a', 'b', 'd'],
+      },
+    ]);
+  });
+
+  after(() => {
+    $.ajax.restore();
+  });
+
+  it('makes a GET request to retrieve value choices', () => {
+    sinon.stub($, 'ajax');
+    wrapper.instance().fetchFilterValues(0, 'col1');
+    expect($.ajax.getCall(0).args[0].type).to.deep.equal('GET');
+    expect($.ajax.getCall(0).args[0].url).to.deep.equal('/superset/filter/qtable/1/col1/');
+  });
+
+  it('changes filter values when one is removed', () => {
+    wrapper.instance().changeFilter(0, 'val', ['a', 'b']);
+    expect(defaultProps.onChange).to.have.property('callCount', 3);
+    expect(defaultProps.onChange.getCall(2).args[0]).to.deep.equal([
+      {
+        col: 'col1',
+        op: 'in',
+        val: ['a', 'b'],
+      },
+      {
+        col: 'col2',
+        op: '==',
+        val: 'Z',
+      },
+    ]);
+  });
+
+  it('changes filter values when one is added', () => {
+    wrapper.instance().changeFilter(0, 'val', ['a', 'b', 'd', 'e']);
+    expect(defaultProps.onChange).to.have.property('callCount', 4);
+    expect(defaultProps.onChange.getCall(3).args[0]).to.deep.equal([
+      {
+        col: 'col1',
+        op: 'in',
+        val: ['a', 'b', 'd', 'e'],
+      },
+      {
+        col: 'col2',
+        op: '==',
+        val: 'Z',
+      },
+    ]);
+  });
+
+  it('changes op and transforms values', () => {
+    wrapper.instance().changeFilter(0, ['val', 'op'], ['a', '==']);
+    wrapper.instance().changeFilter(1, ['val', 'op'], [['Z'], 'in']);
+    expect(defaultProps.onChange).to.have.property('callCount', 6);
+    expect(defaultProps.onChange.getCall(4).args[0]).to.deep.equal([
+      {
+        col: 'col1',
+        op: '==',
+        val: 'a',
+      },
+      {
+        col: 'col2',
+        op: '==',
+        val: 'Z',
+      },
+    ]);
+    expect(defaultProps.onChange.getCall(5).args[0]).to.deep.equal([
+      {
+        col: 'col1',
+        op: 'in',
+        val: ['a', 'b', 'd'],
+      },
+      {
+        col: 'col2',
+        op: 'in',
+        val: ['Z'],
+      },
+    ]);
+  });
+
+  it('changes column and clears invalid values', () => {
+    wrapper.instance().changeFilter(0, 'col', 'col2');
+    expect(defaultProps.onChange).to.have.property('callCount', 7);
+    expect(defaultProps.onChange.getCall(6).args[0]).to.deep.equal([
+      {
+        col: 'col2',
+        op: 'in',
+        val: [],
+      },
+      {
+        col: 'col2',
+        op: '==',
+        val: 'Z',
+      },
+    ]);
+    wrapper.instance().changeFilter(1, 'col', 'col1');
+    expect(defaultProps.onChange).to.have.property('callCount', 8);
+    expect(defaultProps.onChange.getCall(7).args[0]).to.deep.equal([
+      {
+        col: 'col1',
+        op: 'in',
+        val: ['a', 'b', 'd'],
+      },
+      {
+        col: 'col1',
+        op: '==',
+        val: '',
+      },
+    ]);
   });
 });