superset/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import React from 'react';
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { bindActionCreators } from 'redux';

import { shallow } from 'enzyme';
import { styledMount as mount } from 'spec/helpers/theming';
import { FormControl, Modal, Radio } from 'react-bootstrap';
import Button from 'src/components/Button';
import sinon from 'sinon';
import fetchMock from 'fetch-mock';

import * as exploreUtils from 'src/explore/exploreUtils';
import * as saveModalActions from 'src/explore/actions/saveModalActions';
import SaveModal from 'src/explore/components/SaveModal';

describe('SaveModal', () => {
  const middlewares = [thunk];
  const mockStore = configureStore(middlewares);
  const initialState = {
    chart: {},
    saveModal: {
      dashboards: [],
    },
    explore: {
      can_overwrite: true,
      user_id: '1',
      datasource: {},
      slice: {
        slice_id: 1,
        slice_name: 'title',
      },
      alert: null,
    },
  };
  const store = mockStore(initialState);

  const defaultProps = {
    onHide: () => ({}),
    actions: bindActionCreators(saveModalActions, arg => {
      if (typeof arg === 'function') {
        return arg(jest.fn);
      }
      return arg;
    }),
    form_data: { datasource: '107__table' },
  };
  const mockEvent = {
    target: {
      value: 'mock event target',
    },
    value: 10,
  };

  const getWrapper = () =>
    shallow(<SaveModal {...defaultProps} />, {
      context: { store },
    }).dive();

  it('renders a Modal with the right set of components', () => {
    const wrapper = getWrapper();
    expect(wrapper.find(Modal)).toExist();
    expect(wrapper.find(FormControl)).toExist();
    expect(wrapper.find(Button)).toHaveLength(3);
    expect(wrapper.find(Radio)).toHaveLength(2);
  });

  it('overwrite radio button is disabled for new slice', () => {
    const wrapper = getWrapper();
    wrapper.setProps({ slice: null });
    expect(wrapper.find('#overwrite-radio').prop('disabled')).toBe(true);
  });

  it('disable overwrite option for non-owner', () => {
    const wrapperForNonOwner = getWrapper();
    wrapperForNonOwner.setProps({ can_overwrite: false });
    const overwriteRadio = wrapperForNonOwner.find('#overwrite-radio');
    expect(overwriteRadio).toHaveLength(1);
    expect(overwriteRadio.prop('disabled')).toBe(true);
  });

  it('saves a new slice', () => {
    const wrapperForNewSlice = getWrapper();
    wrapperForNewSlice.setProps({ can_overwrite: false });
    wrapperForNewSlice.instance().changeAction('saveas');
    const saveasRadio = wrapperForNewSlice.find('#saveas-radio');
    saveasRadio.simulate('click');
    expect(wrapperForNewSlice.state().action).toBe('saveas');
  });

  it('overwrite a slice', () => {
    const wrapperForOverwrite = getWrapper();
    const overwriteRadio = wrapperForOverwrite.find('#overwrite-radio');
    overwriteRadio.simulate('click');
    expect(wrapperForOverwrite.state().action).toBe('overwrite');
  });

  it('componentDidMount', () => {
    sinon.spy(SaveModal.prototype, 'componentDidMount');
    sinon.spy(defaultProps.actions, 'fetchDashboards');
    mount(<SaveModal {...defaultProps} />, {
      context: { store },
    });
    expect(SaveModal.prototype.componentDidMount.calledOnce).toBe(true);
    expect(defaultProps.actions.fetchDashboards.calledOnce).toBe(true);

    SaveModal.prototype.componentDidMount.restore();
    defaultProps.actions.fetchDashboards.restore();
  });

  it('onChange', () => {
    const wrapper = getWrapper();

    wrapper.instance().onSliceNameChange(mockEvent);
    expect(wrapper.state().newSliceName).toBe(mockEvent.target.value);

    wrapper.instance().onDashboardSelectChange(mockEvent);
    expect(wrapper.state().saveToDashboardId).toBe(mockEvent.value);
  });

  describe('saveOrOverwrite', () => {
    beforeEach(() => {
      sinon.stub(exploreUtils, 'getExploreUrl').callsFake(() => 'mockURL');

      sinon.stub(defaultProps.actions, 'saveSlice').callsFake(() =>
        Promise.resolve({
          data: {
            dashboard_url: 'http://localhost/mock_dashboard/',
            slice: { slice_url: '/mock_slice/' },
          },
        }),
      );
    });

    afterEach(() => {
      exploreUtils.getExploreUrl.restore();
      defaultProps.actions.saveSlice.restore();
    });

    it('should save slice', () => {
      const wrapper = getWrapper();
      wrapper.instance().saveOrOverwrite(true);
      const { args } = defaultProps.actions.saveSlice.getCall(0);
      expect(args[0]).toEqual(defaultProps.form_data);
    });

    it('existing dashboard', () => {
      const wrapper = getWrapper();
      const saveToDashboardId = 100;

      wrapper.setState({ saveToDashboardId });
      wrapper.instance().saveOrOverwrite(true);
      const { args } = defaultProps.actions.saveSlice.getCall(0);
      expect(args[1].save_to_dashboard_id).toBe(saveToDashboardId);
    });

    it('new dashboard', () => {
      const wrapper = getWrapper();
      const newDashboardName = 'new dashboard name';

      wrapper.setState({ newDashboardName });
      wrapper.instance().saveOrOverwrite(true);
      const { args } = defaultProps.actions.saveSlice.getCall(0);
      expect(args[1].new_dashboard_name).toBe(newDashboardName);
    });

    describe('should always reload or redirect', () => {
      let wrapper;
      let windowLocation;

      beforeEach(() => {
        wrapper = getWrapper();
        windowLocation = window.location;
        // To bypass "TypeError: Cannot redefine property: assign"
        Object.defineProperty(window, 'location', {
          value: { ...windowLocation, assign: () => {} },
        });
        sinon.stub(window.location, 'assign');
      });
      afterEach(() => {
        window.location.assign.restore();
        Object.defineProperty(window, 'location', windowLocation);
      });

      it('Save & go to dashboard', () => {
        return new Promise(done => {
          wrapper.instance().saveOrOverwrite(true);
          defaultProps.actions.saveSlice().then(() => {
            expect(window.location.assign.callCount).toEqual(1);
            expect(window.location.assign.getCall(0).args[0]).toEqual(
              'http://localhost/mock_dashboard/',
            );
            done();
          });
        });
      });

      it('saveas new slice', () => {
        return new Promise(done => {
          wrapper.setState({
            action: 'saveas',
            newSliceName: 'new slice name',
          });
          wrapper.instance().saveOrOverwrite(false);
          defaultProps.actions.saveSlice().then(() => {
            expect(window.location.assign.callCount).toEqual(1);
            expect(window.location.assign.getCall(0).args[0]).toEqual(
              '/mock_slice/',
            );
            done();
          });
        });
      });

      it('overwrite original slice', () => {
        return new Promise(done => {
          wrapper.setState({ action: 'overwrite' });
          wrapper.instance().saveOrOverwrite(false);
          defaultProps.actions.saveSlice().then(() => {
            expect(window.location.assign.callCount).toEqual(1);
            expect(window.location.assign.getCall(0).args[0]).toEqual(
              '/mock_slice/',
            );
            done();
          });
        });
      });
    });
  });

  describe('fetchDashboards', () => {
    let dispatch;
    let actionThunk;
    const userID = 1;

    const mockDashboardData = {
      pks: ['id'],
      result: [{ id: 'id', dashboard_title: 'dashboard title' }],
    };

    const saveEndpoint = `glob:*/dashboardasync/api/read?_flt_0_owners=${1}`;

    beforeAll(() => {
      fetchMock.get(saveEndpoint, mockDashboardData);
    });

    afterAll(fetchMock.restore);

    beforeEach(() => {
      dispatch = sinon.spy();
    });

    afterEach(() => {
      fetchMock.resetHistory();
    });

    const makeRequest = () => {
      actionThunk = saveModalActions.fetchDashboards(userID);
      return actionThunk(dispatch);
    };

    it('makes the fetch request', () =>
      makeRequest().then(() => {
        expect(fetchMock.calls(saveEndpoint)).toHaveLength(1);

        return Promise.resolve();
      }));

    it('calls correct actions on success', () =>
      makeRequest().then(() => {
        expect(dispatch.callCount).toBe(1);
        expect(dispatch.getCall(0).args[0].type).toBe(
          saveModalActions.FETCH_DASHBOARDS_SUCCEEDED,
        );

        return Promise.resolve();
      }));

    it('calls correct actions on error', () => {
      fetchMock.get(
        saveEndpoint,
        { throws: 'error' },
        { overwriteRoutes: true },
      );

      return makeRequest().then(() => {
        expect(dispatch.callCount).toBe(1);
        expect(dispatch.getCall(0).args[0].type).toBe(
          saveModalActions.FETCH_DASHBOARDS_FAILED,
        );

        fetchMock.get(saveEndpoint, mockDashboardData, {
          overwriteRoutes: true,
        });

        return Promise.resolve();
      });
    });
  });

  it('removeAlert', () => {
    sinon.spy(defaultProps.actions, 'removeSaveModalAlert');
    const wrapper = getWrapper();
    wrapper.setProps({ alert: 'old alert' });

    wrapper.instance().removeAlert();
    expect(defaultProps.actions.removeSaveModalAlert.callCount).toBe(1);
    expect(wrapper.state().alert).toBeNull();
    defaultProps.actions.removeSaveModalAlert.restore();
  });
});