mirror of
https://github.com/apache/superset.git
synced 2026-04-20 08:34:37 +00:00
SIP-32: Moving frontend code to the base of the repo (#9098)
* move assets out, get webpack dev working * update docs to reference superset-frontend * draw the rest of the owl * fix docs * fix webpack script * rats * correct docs * fix tox dox
This commit is contained in:
David Aaron Suddjian
committed by
GitHub
GitHub
parent
0cf354cc88
commit
2913063924
@@ -0,0 +1,126 @@
|
||||
/**
|
||||
* 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 { Provider } from 'react-redux';
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import Chart from '../../../../../src/dashboard/containers/Chart';
|
||||
import ChartHolder from '../../../../../src/dashboard/components/gridComponents/ChartHolder';
|
||||
import DeleteComponentButton from '../../../../../src/dashboard/components/DeleteComponentButton';
|
||||
import DragDroppable from '../../../../../src/dashboard/components/dnd/DragDroppable';
|
||||
import HoverMenu from '../../../../../src/dashboard/components/menu/HoverMenu';
|
||||
import ResizableContainer from '../../../../../src/dashboard/components/resizable/ResizableContainer';
|
||||
|
||||
import { mockStore } from '../../fixtures/mockStore';
|
||||
import { sliceId } from '../../fixtures/mockSliceEntities';
|
||||
import { dashboardLayout as mockLayout } from '../../fixtures/mockDashboardLayout';
|
||||
import WithDragDropContext from '../../helpers/WithDragDropContext';
|
||||
|
||||
describe('ChartHolder', () => {
|
||||
const props = {
|
||||
id: String(sliceId),
|
||||
parentId: 'ROW_ID',
|
||||
component: mockLayout.present.CHART_ID,
|
||||
depth: 2,
|
||||
parentComponent: mockLayout.present.ROW_ID,
|
||||
index: 0,
|
||||
editMode: false,
|
||||
availableColumnCount: 12,
|
||||
columnWidth: 50,
|
||||
onResizeStart() {},
|
||||
onResize() {},
|
||||
onResizeStop() {},
|
||||
handleComponentDrop() {},
|
||||
updateComponents() {},
|
||||
deleteComponent() {},
|
||||
};
|
||||
|
||||
function setup(overrideProps) {
|
||||
// We have to wrap provide DragDropContext for the underlying DragDroppable
|
||||
// otherwise we cannot assert on DragDroppable children
|
||||
const wrapper = mount(
|
||||
<Provider store={mockStore}>
|
||||
<WithDragDropContext>
|
||||
<ChartHolder {...props} {...overrideProps} />
|
||||
</WithDragDropContext>
|
||||
</Provider>,
|
||||
);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
it('should render a DragDroppable', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DragDroppable)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a ResizableContainer', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(ResizableContainer)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should only have an adjustableWidth if its parent is a Row', () => {
|
||||
let wrapper = setup();
|
||||
expect(wrapper.find(ResizableContainer).prop('adjustableWidth')).toBe(true);
|
||||
|
||||
wrapper = setup({ ...props, parentComponent: mockLayout.present.CHART_ID });
|
||||
expect(wrapper.find(ResizableContainer).prop('adjustableWidth')).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
|
||||
it('should pass correct props to ResizableContainer', () => {
|
||||
const wrapper = setup();
|
||||
const resizableProps = wrapper.find(ResizableContainer).props();
|
||||
expect(resizableProps.widthStep).toBe(props.columnWidth);
|
||||
expect(resizableProps.widthMultiple).toBe(props.component.meta.width);
|
||||
expect(resizableProps.heightMultiple).toBe(props.component.meta.height);
|
||||
expect(resizableProps.maxWidthMultiple).toBe(
|
||||
props.component.meta.width + props.availableColumnCount,
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a div with class "dashboard-component-chart-holder"', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find('.dashboard-component-chart-holder')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a Chart', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(Chart)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a HoverMenu with DeleteComponentButton in editMode', () => {
|
||||
let wrapper = setup();
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(0);
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(0);
|
||||
|
||||
// we cannot set props on the Divider because of the WithDragDropContext wrapper
|
||||
wrapper = setup({ editMode: true });
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(1);
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should call deleteComponent when deleted', () => {
|
||||
const deleteComponent = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, deleteComponent });
|
||||
wrapper.find(DeleteComponentButton).simulate('click');
|
||||
expect(deleteComponent.callCount).toBe(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* 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 { shallow } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import Chart from '../../../../../src/dashboard/components/gridComponents/Chart';
|
||||
import SliceHeader from '../../../../../src/dashboard/components/SliceHeader';
|
||||
import ChartContainer from '../../../../../src/chart/ChartContainer';
|
||||
|
||||
import mockDatasource from '../../../../fixtures/mockDatasource';
|
||||
import { sliceEntitiesForChart as sliceEntities } from '../../fixtures/mockSliceEntities';
|
||||
import chartQueries, {
|
||||
sliceId as queryId,
|
||||
} from '../../fixtures/mockChartQueries';
|
||||
|
||||
describe('Chart', () => {
|
||||
const props = {
|
||||
id: queryId,
|
||||
width: 100,
|
||||
height: 100,
|
||||
updateSliceName() {},
|
||||
|
||||
// from redux
|
||||
chart: chartQueries[queryId],
|
||||
formData: chartQueries[queryId].formData,
|
||||
datasource: mockDatasource[sliceEntities.slices[queryId].datasource],
|
||||
slice: {
|
||||
...sliceEntities.slices[queryId],
|
||||
description_markeddown: 'markdown',
|
||||
},
|
||||
sliceName: sliceEntities.slices[queryId].slice_name,
|
||||
timeout: 60,
|
||||
filters: {},
|
||||
refreshChart() {},
|
||||
toggleExpandSlice() {},
|
||||
addFilter() {},
|
||||
logEvent() {},
|
||||
editMode: false,
|
||||
isExpanded: false,
|
||||
supersetCanExplore: false,
|
||||
supersetCanCSV: false,
|
||||
sliceCanEdit: false,
|
||||
};
|
||||
|
||||
function setup(overrideProps) {
|
||||
const wrapper = shallow(<Chart {...props} {...overrideProps} />);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
it('should render a SliceHeader', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(SliceHeader)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a ChartContainer', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(ChartContainer)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a description if it has one and isExpanded=true', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find('.slice_description')).toHaveLength(0);
|
||||
|
||||
wrapper.setProps({ ...props, isExpanded: true });
|
||||
expect(wrapper.find('.slice_description')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should call refreshChart when SliceHeader calls forceRefresh', () => {
|
||||
const refreshChart = sinon.spy();
|
||||
const wrapper = setup({ refreshChart });
|
||||
wrapper.instance().forceRefresh();
|
||||
expect(refreshChart.callCount).toBe(1);
|
||||
});
|
||||
|
||||
it('should call changeFilter when ChartContainer calls changeFilter', () => {
|
||||
const changeFilter = sinon.spy();
|
||||
const wrapper = setup({ changeFilter });
|
||||
wrapper.instance().changeFilter();
|
||||
expect(changeFilter.callCount).toBe(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,160 @@
|
||||
/**
|
||||
* 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 { Provider } from 'react-redux';
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import BackgroundStyleDropdown from '../../../../../src/dashboard/components/menu/BackgroundStyleDropdown';
|
||||
import Column from '../../../../../src/dashboard/components/gridComponents/Column';
|
||||
import DashboardComponent from '../../../../../src/dashboard/containers/DashboardComponent';
|
||||
import DeleteComponentButton from '../../../../../src/dashboard/components/DeleteComponentButton';
|
||||
import DragDroppable from '../../../../../src/dashboard/components/dnd/DragDroppable';
|
||||
import HoverMenu from '../../../../../src/dashboard/components/menu/HoverMenu';
|
||||
import IconButton from '../../../../../src/dashboard/components/IconButton';
|
||||
import ResizableContainer from '../../../../../src/dashboard/components/resizable/ResizableContainer';
|
||||
import WithPopoverMenu from '../../../../../src/dashboard/components/menu/WithPopoverMenu';
|
||||
|
||||
import { mockStore } from '../../fixtures/mockStore';
|
||||
import { dashboardLayout as mockLayout } from '../../fixtures/mockDashboardLayout';
|
||||
import WithDragDropContext from '../../helpers/WithDragDropContext';
|
||||
|
||||
describe('Column', () => {
|
||||
const columnWithoutChildren = {
|
||||
...mockLayout.present.COLUMN_ID,
|
||||
children: [],
|
||||
};
|
||||
const props = {
|
||||
id: 'COLUMN_ID',
|
||||
parentId: 'ROW_ID',
|
||||
component: mockLayout.present.COLUMN_ID,
|
||||
parentComponent: mockLayout.present.ROW_ID,
|
||||
index: 0,
|
||||
depth: 2,
|
||||
editMode: false,
|
||||
availableColumnCount: 12,
|
||||
minColumnWidth: 2,
|
||||
columnWidth: 50,
|
||||
occupiedColumnCount: 6,
|
||||
onResizeStart() {},
|
||||
onResize() {},
|
||||
onResizeStop() {},
|
||||
handleComponentDrop() {},
|
||||
deleteComponent() {},
|
||||
updateComponents() {},
|
||||
};
|
||||
|
||||
function setup(overrideProps) {
|
||||
// We have to wrap provide DragDropContext for the underlying DragDroppable
|
||||
// otherwise we cannot assert on DragDroppable children
|
||||
const wrapper = mount(
|
||||
<Provider store={mockStore}>
|
||||
<WithDragDropContext>
|
||||
<Column {...props} {...overrideProps} />
|
||||
</WithDragDropContext>
|
||||
</Provider>,
|
||||
);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
it('should render a DragDroppable', () => {
|
||||
// don't count child DragDroppables
|
||||
const wrapper = setup({ component: columnWithoutChildren });
|
||||
expect(wrapper.find(DragDroppable)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a WithPopoverMenu', () => {
|
||||
// don't count child DragDroppables
|
||||
const wrapper = setup({ component: columnWithoutChildren });
|
||||
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a ResizableContainer', () => {
|
||||
// don't count child DragDroppables
|
||||
const wrapper = setup({ component: columnWithoutChildren });
|
||||
expect(wrapper.find(ResizableContainer)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a HoverMenu in editMode', () => {
|
||||
let wrapper = setup({ component: columnWithoutChildren });
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(0);
|
||||
|
||||
// we cannot set props on the Row because of the WithDragDropContext wrapper
|
||||
wrapper = setup({ component: columnWithoutChildren, editMode: true });
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a DeleteComponentButton in editMode', () => {
|
||||
let wrapper = setup({ component: columnWithoutChildren });
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(0);
|
||||
|
||||
// we cannot set props on the Row because of the WithDragDropContext wrapper
|
||||
wrapper = setup({ component: columnWithoutChildren, editMode: true });
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a BackgroundStyleDropdown when focused', () => {
|
||||
let wrapper = setup({ component: columnWithoutChildren });
|
||||
expect(wrapper.find(BackgroundStyleDropdown)).toHaveLength(0);
|
||||
|
||||
// we cannot set props on the Row because of the WithDragDropContext wrapper
|
||||
wrapper = setup({ component: columnWithoutChildren, editMode: true });
|
||||
wrapper
|
||||
.find(IconButton)
|
||||
.at(1) // first one is delete button
|
||||
.simulate('click');
|
||||
|
||||
expect(wrapper.find(BackgroundStyleDropdown)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should call deleteComponent when deleted', () => {
|
||||
const deleteComponent = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, deleteComponent });
|
||||
wrapper.find(DeleteComponentButton).simulate('click');
|
||||
expect(deleteComponent.callCount).toBe(1);
|
||||
});
|
||||
|
||||
it('should pass its own width as availableColumnCount to children', () => {
|
||||
const wrapper = setup();
|
||||
const dashboardComponent = wrapper.find(DashboardComponent).first();
|
||||
expect(dashboardComponent.props().availableColumnCount).toBe(
|
||||
props.component.meta.width,
|
||||
);
|
||||
});
|
||||
|
||||
it('should pass appropriate dimensions to ResizableContainer', () => {
|
||||
const wrapper = setup({ component: columnWithoutChildren });
|
||||
const columnWidth = columnWithoutChildren.meta.width;
|
||||
const resizableProps = wrapper.find(ResizableContainer).props();
|
||||
expect(resizableProps.adjustableWidth).toBe(true);
|
||||
expect(resizableProps.adjustableHeight).toBe(false);
|
||||
expect(resizableProps.widthStep).toBe(props.columnWidth);
|
||||
expect(resizableProps.widthMultiple).toBe(columnWidth);
|
||||
expect(resizableProps.minWidthMultiple).toBe(props.minColumnWidth);
|
||||
expect(resizableProps.maxWidthMultiple).toBe(
|
||||
props.availableColumnCount + columnWidth,
|
||||
);
|
||||
});
|
||||
|
||||
it('should increment the depth of its children', () => {
|
||||
const wrapper = setup();
|
||||
const dashboardComponent = wrapper.find(DashboardComponent);
|
||||
expect(dashboardComponent.props().depth).toBe(props.depth + 1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* 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 { mount } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import DeleteComponentButton from '../../../../../src/dashboard/components/DeleteComponentButton';
|
||||
import HoverMenu from '../../../../../src/dashboard/components/menu/HoverMenu';
|
||||
import DragDroppable from '../../../../../src/dashboard/components/dnd/DragDroppable';
|
||||
import Divider from '../../../../../src/dashboard/components/gridComponents/Divider';
|
||||
import newComponentFactory from '../../../../../src/dashboard/util/newComponentFactory';
|
||||
import {
|
||||
DIVIDER_TYPE,
|
||||
DASHBOARD_GRID_TYPE,
|
||||
} from '../../../../../src/dashboard/util/componentTypes';
|
||||
|
||||
import WithDragDropContext from '../../helpers/WithDragDropContext';
|
||||
|
||||
describe('Divider', () => {
|
||||
const props = {
|
||||
id: 'id',
|
||||
parentId: 'parentId',
|
||||
component: newComponentFactory(DIVIDER_TYPE),
|
||||
depth: 1,
|
||||
parentComponent: newComponentFactory(DASHBOARD_GRID_TYPE),
|
||||
index: 0,
|
||||
editMode: false,
|
||||
handleComponentDrop() {},
|
||||
deleteComponent() {},
|
||||
};
|
||||
|
||||
function setup(overrideProps) {
|
||||
// We have to wrap provide DragDropContext for the underlying DragDroppable
|
||||
// otherwise we cannot assert on DragDroppable children
|
||||
const wrapper = mount(
|
||||
<WithDragDropContext>
|
||||
<Divider {...props} {...overrideProps} />
|
||||
</WithDragDropContext>,
|
||||
);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
it('should render a DragDroppable', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DragDroppable)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a div with class "dashboard-component-divider"', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find('.dashboard-component-divider')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a HoverMenu with DeleteComponentButton in editMode', () => {
|
||||
let wrapper = setup();
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(0);
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(0);
|
||||
|
||||
// we cannot set props on the Divider because of the WithDragDropContext wrapper
|
||||
wrapper = setup({ editMode: true });
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(1);
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should call deleteComponent when deleted', () => {
|
||||
const deleteComponent = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, deleteComponent });
|
||||
wrapper.find(DeleteComponentButton).simulate('click');
|
||||
expect(deleteComponent.callCount).toBe(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,119 @@
|
||||
/**
|
||||
* 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 { Provider } from 'react-redux';
|
||||
import { mount } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import DeleteComponentButton from '../../../../../src/dashboard/components/DeleteComponentButton';
|
||||
import EditableTitle from '../../../../../src/components/EditableTitle';
|
||||
import HoverMenu from '../../../../../src/dashboard/components/menu/HoverMenu';
|
||||
import WithPopoverMenu from '../../../../../src/dashboard/components/menu/WithPopoverMenu';
|
||||
import DragDroppable from '../../../../../src/dashboard/components/dnd/DragDroppable';
|
||||
import Header from '../../../../../src/dashboard/components/gridComponents/Header';
|
||||
import newComponentFactory from '../../../../../src/dashboard/util/newComponentFactory';
|
||||
import {
|
||||
HEADER_TYPE,
|
||||
DASHBOARD_GRID_TYPE,
|
||||
} from '../../../../../src/dashboard/util/componentTypes';
|
||||
|
||||
import WithDragDropContext from '../../helpers/WithDragDropContext';
|
||||
import { mockStoreWithTabs } from '../../fixtures/mockStore';
|
||||
|
||||
describe('Header', () => {
|
||||
const props = {
|
||||
id: 'id',
|
||||
parentId: 'parentId',
|
||||
component: newComponentFactory(HEADER_TYPE),
|
||||
depth: 1,
|
||||
parentComponent: newComponentFactory(DASHBOARD_GRID_TYPE),
|
||||
index: 0,
|
||||
editMode: false,
|
||||
filters: {},
|
||||
handleComponentDrop() {},
|
||||
deleteComponent() {},
|
||||
updateComponents() {},
|
||||
};
|
||||
|
||||
function setup(overrideProps) {
|
||||
// We have to wrap provide DragDropContext for the underlying DragDroppable
|
||||
// otherwise we cannot assert on DragDroppable children
|
||||
const wrapper = mount(
|
||||
<Provider store={mockStoreWithTabs}>
|
||||
<WithDragDropContext>
|
||||
<Header {...props} {...overrideProps} />
|
||||
</WithDragDropContext>
|
||||
</Provider>,
|
||||
);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
it('should render a DragDroppable', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DragDroppable)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a WithPopoverMenu', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a HoverMenu in editMode', () => {
|
||||
let wrapper = setup();
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(0);
|
||||
|
||||
// we cannot set props on the Header because of the WithDragDropContext wrapper
|
||||
wrapper = setup({ editMode: true });
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render an EditableTitle with meta.text', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(EditableTitle)).toHaveLength(1);
|
||||
expect(wrapper.find('input').prop('value')).toBe(props.component.meta.text);
|
||||
});
|
||||
|
||||
it('should call updateComponents when EditableTitle changes', () => {
|
||||
const updateComponents = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, updateComponents });
|
||||
wrapper.find(EditableTitle).prop('onSaveTitle')('New title');
|
||||
|
||||
const headerId = props.component.id;
|
||||
expect(updateComponents.callCount).toBe(1);
|
||||
expect(updateComponents.getCall(0).args[0][headerId].meta.text).toBe(
|
||||
'New title',
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a DeleteComponentButton when focused in editMode', () => {
|
||||
const wrapper = setup({ editMode: true });
|
||||
wrapper.find(WithPopoverMenu).simulate('click'); // focus
|
||||
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should call deleteComponent when deleted', () => {
|
||||
const deleteComponent = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, deleteComponent });
|
||||
wrapper.find(WithPopoverMenu).simulate('click'); // focus
|
||||
wrapper.find(DeleteComponentButton).simulate('click');
|
||||
|
||||
expect(deleteComponent.callCount).toBe(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,172 @@
|
||||
/**
|
||||
* 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 { Provider } from 'react-redux';
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
import AceEditor from 'react-ace';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import Markdown from '../../../../../src/dashboard/components/gridComponents/Markdown';
|
||||
import MarkdownModeDropdown from '../../../../../src/dashboard/components/menu/MarkdownModeDropdown';
|
||||
import DeleteComponentButton from '../../../../../src/dashboard/components/DeleteComponentButton';
|
||||
import DragDroppable from '../../../../../src/dashboard/components/dnd/DragDroppable';
|
||||
import WithPopoverMenu from '../../../../../src/dashboard/components/menu/WithPopoverMenu';
|
||||
import ResizableContainer from '../../../../../src/dashboard/components/resizable/ResizableContainer';
|
||||
|
||||
import { mockStore } from '../../fixtures/mockStore';
|
||||
import { dashboardLayout as mockLayout } from '../../fixtures/mockDashboardLayout';
|
||||
import WithDragDropContext from '../../helpers/WithDragDropContext';
|
||||
|
||||
describe('Markdown', () => {
|
||||
const props = {
|
||||
id: 'id',
|
||||
parentId: 'parentId',
|
||||
component: mockLayout.present.MARKDOWN_ID,
|
||||
depth: 2,
|
||||
parentComponent: mockLayout.present.ROW_ID,
|
||||
index: 0,
|
||||
editMode: false,
|
||||
availableColumnCount: 12,
|
||||
columnWidth: 50,
|
||||
onResizeStart() {},
|
||||
onResize() {},
|
||||
onResizeStop() {},
|
||||
handleComponentDrop() {},
|
||||
updateComponents() {},
|
||||
deleteComponent() {},
|
||||
logEvent() {},
|
||||
};
|
||||
|
||||
function setup(overrideProps) {
|
||||
// We have to wrap provide DragDropContext for the underlying DragDroppable
|
||||
// otherwise we cannot assert on DragDroppable children
|
||||
const wrapper = mount(
|
||||
<Provider store={mockStore}>
|
||||
<WithDragDropContext>
|
||||
<Markdown {...props} {...overrideProps} />
|
||||
</WithDragDropContext>
|
||||
</Provider>,
|
||||
);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
it('should render a DragDroppable', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DragDroppable)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a WithPopoverMenu', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a ResizableContainer', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(ResizableContainer)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should only have an adjustableWidth if its parent is a Row', () => {
|
||||
let wrapper = setup();
|
||||
expect(wrapper.find(ResizableContainer).prop('adjustableWidth')).toBe(true);
|
||||
|
||||
wrapper = setup({ ...props, parentComponent: mockLayout.present.CHART_ID });
|
||||
expect(wrapper.find(ResizableContainer).prop('adjustableWidth')).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
|
||||
it('should pass correct props to ResizableContainer', () => {
|
||||
const wrapper = setup();
|
||||
const resizableProps = wrapper.find(ResizableContainer).props();
|
||||
expect(resizableProps.widthStep).toBe(props.columnWidth);
|
||||
expect(resizableProps.widthMultiple).toBe(props.component.meta.width);
|
||||
expect(resizableProps.heightMultiple).toBe(props.component.meta.height);
|
||||
expect(resizableProps.maxWidthMultiple).toBe(
|
||||
props.component.meta.width + props.availableColumnCount,
|
||||
);
|
||||
});
|
||||
|
||||
it('should render an Markdown when NOT focused', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(AceEditor)).toHaveLength(0);
|
||||
expect(wrapper.find(ReactMarkdown)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render an AceEditor when focused and editMode=true and editorMode=edit', () => {
|
||||
const wrapper = setup({ editMode: true });
|
||||
expect(wrapper.find(AceEditor)).toHaveLength(0);
|
||||
expect(wrapper.find(ReactMarkdown)).toHaveLength(1);
|
||||
wrapper.find(WithPopoverMenu).simulate('click'); // focus + edit
|
||||
expect(wrapper.find(AceEditor)).toHaveLength(1);
|
||||
expect(wrapper.find(ReactMarkdown)).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should render a ReactMarkdown when focused and editMode=true and editorMode=preview', () => {
|
||||
const wrapper = setup({ editMode: true });
|
||||
wrapper.find(WithPopoverMenu).simulate('click'); // focus + edit
|
||||
expect(wrapper.find(AceEditor)).toHaveLength(1);
|
||||
expect(wrapper.find(ReactMarkdown)).toHaveLength(0);
|
||||
|
||||
// we can't call setState on Markdown bc it's not the root component, so call
|
||||
// the mode dropdown onchange instead
|
||||
const dropdown = wrapper.find(MarkdownModeDropdown);
|
||||
dropdown.prop('onChange')('preview');
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find(ReactMarkdown)).toHaveLength(1);
|
||||
expect(wrapper.find(AceEditor)).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should call updateComponents when editMode changes from edit => preview, and there are markdownSource changes', () => {
|
||||
const updateComponents = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, updateComponents });
|
||||
wrapper.find(WithPopoverMenu).simulate('click'); // focus + edit
|
||||
|
||||
// we can't call setState on Markdown bc it's not the root component, so call
|
||||
// the mode dropdown onchange instead
|
||||
const dropdown = wrapper.find(MarkdownModeDropdown);
|
||||
dropdown.prop('onChange')('preview');
|
||||
expect(updateComponents.callCount).toBe(0);
|
||||
|
||||
dropdown.prop('onChange')('edit');
|
||||
// because we can't call setState on Markdown, change it through the editor
|
||||
// then go back to preview mode to invoke updateComponents
|
||||
const editor = wrapper.find(AceEditor);
|
||||
editor.prop('onChange')('new markdown!');
|
||||
dropdown.prop('onChange')('preview');
|
||||
expect(updateComponents.callCount).toBe(1);
|
||||
});
|
||||
|
||||
it('should render a DeleteComponentButton when focused in editMode', () => {
|
||||
const wrapper = setup({ editMode: true });
|
||||
wrapper.find(WithPopoverMenu).simulate('click'); // focus
|
||||
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should call deleteComponent when deleted', () => {
|
||||
const deleteComponent = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, deleteComponent });
|
||||
wrapper.find(WithPopoverMenu).simulate('click'); // focus
|
||||
wrapper.find(DeleteComponentButton).simulate('click');
|
||||
|
||||
expect(deleteComponent.callCount).toBe(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,136 @@
|
||||
/**
|
||||
* 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 { Provider } from 'react-redux';
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import BackgroundStyleDropdown from '../../../../../src/dashboard/components/menu/BackgroundStyleDropdown';
|
||||
import DashboardComponent from '../../../../../src/dashboard/containers/DashboardComponent';
|
||||
import DeleteComponentButton from '../../../../../src/dashboard/components/DeleteComponentButton';
|
||||
import DragDroppable from '../../../../../src/dashboard/components/dnd/DragDroppable';
|
||||
import HoverMenu from '../../../../../src/dashboard/components/menu/HoverMenu';
|
||||
import IconButton from '../../../../../src/dashboard/components/IconButton';
|
||||
import Row from '../../../../../src/dashboard/components/gridComponents/Row';
|
||||
import WithPopoverMenu from '../../../../../src/dashboard/components/menu/WithPopoverMenu';
|
||||
|
||||
import { mockStore } from '../../fixtures/mockStore';
|
||||
import { DASHBOARD_GRID_ID } from '../../../../../src/dashboard/util/constants';
|
||||
import { dashboardLayout as mockLayout } from '../../fixtures/mockDashboardLayout';
|
||||
import WithDragDropContext from '../../helpers/WithDragDropContext';
|
||||
|
||||
describe('Row', () => {
|
||||
const rowWithoutChildren = { ...mockLayout.present.ROW_ID, children: [] };
|
||||
const props = {
|
||||
id: 'ROW_ID',
|
||||
parentId: DASHBOARD_GRID_ID,
|
||||
component: mockLayout.present.ROW_ID,
|
||||
parentComponent: mockLayout.present[DASHBOARD_GRID_ID],
|
||||
index: 0,
|
||||
depth: 2,
|
||||
editMode: false,
|
||||
availableColumnCount: 12,
|
||||
columnWidth: 50,
|
||||
occupiedColumnCount: 6,
|
||||
onResizeStart() {},
|
||||
onResize() {},
|
||||
onResizeStop() {},
|
||||
handleComponentDrop() {},
|
||||
deleteComponent() {},
|
||||
updateComponents() {},
|
||||
};
|
||||
|
||||
function setup(overrideProps) {
|
||||
// We have to wrap provide DragDropContext for the underlying DragDroppable
|
||||
// otherwise we cannot assert on DragDroppable children
|
||||
const wrapper = mount(
|
||||
<Provider store={mockStore}>
|
||||
<WithDragDropContext>
|
||||
<Row {...props} {...overrideProps} />
|
||||
</WithDragDropContext>
|
||||
</Provider>,
|
||||
);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
it('should render a DragDroppable', () => {
|
||||
// don't count child DragDroppables
|
||||
const wrapper = setup({ component: rowWithoutChildren });
|
||||
expect(wrapper.find(DragDroppable)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a WithPopoverMenu', () => {
|
||||
// don't count child DragDroppables
|
||||
const wrapper = setup({ component: rowWithoutChildren });
|
||||
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a HoverMenu in editMode', () => {
|
||||
let wrapper = setup({ component: rowWithoutChildren });
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(0);
|
||||
|
||||
// we cannot set props on the Row because of the WithDragDropContext wrapper
|
||||
wrapper = setup({ component: rowWithoutChildren, editMode: true });
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a DeleteComponentButton in editMode', () => {
|
||||
let wrapper = setup({ component: rowWithoutChildren });
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(0);
|
||||
|
||||
// we cannot set props on the Row because of the WithDragDropContext wrapper
|
||||
wrapper = setup({ component: rowWithoutChildren, editMode: true });
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a BackgroundStyleDropdown when focused', () => {
|
||||
let wrapper = setup({ component: rowWithoutChildren });
|
||||
expect(wrapper.find(BackgroundStyleDropdown)).toHaveLength(0);
|
||||
|
||||
// we cannot set props on the Row because of the WithDragDropContext wrapper
|
||||
wrapper = setup({ component: rowWithoutChildren, editMode: true });
|
||||
wrapper
|
||||
.find(IconButton)
|
||||
.at(1) // first one is delete button
|
||||
.simulate('click');
|
||||
|
||||
expect(wrapper.find(BackgroundStyleDropdown)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should call deleteComponent when deleted', () => {
|
||||
const deleteComponent = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, deleteComponent });
|
||||
wrapper.find(DeleteComponentButton).simulate('click');
|
||||
expect(deleteComponent.callCount).toBe(1);
|
||||
});
|
||||
|
||||
it('should pass appropriate availableColumnCount to children', () => {
|
||||
const wrapper = setup();
|
||||
const dashboardComponent = wrapper.find(DashboardComponent).first();
|
||||
expect(dashboardComponent.props().availableColumnCount).toBe(
|
||||
props.availableColumnCount - props.occupiedColumnCount,
|
||||
);
|
||||
});
|
||||
|
||||
it('should increment the depth of its children', () => {
|
||||
const wrapper = setup();
|
||||
const dashboardComponent = wrapper.find(DashboardComponent).first();
|
||||
expect(dashboardComponent.props().depth).toBe(props.depth + 1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* 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 { Provider } from 'react-redux';
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import DashboardComponent from '../../../../../src/dashboard/containers/DashboardComponent';
|
||||
import DeleteComponentModal from '../../../../../src/dashboard/components/DeleteComponentModal';
|
||||
import DragDroppable from '../../../../../src/dashboard/components/dnd/DragDroppable';
|
||||
import EditableTitle from '../../../../../src/components/EditableTitle';
|
||||
import WithPopoverMenu from '../../../../../src/dashboard/components/menu/WithPopoverMenu';
|
||||
import Tab, {
|
||||
RENDER_TAB,
|
||||
RENDER_TAB_CONTENT,
|
||||
} from '../../../../../src/dashboard/components/gridComponents/Tab';
|
||||
import WithDragDropContext from '../../helpers/WithDragDropContext';
|
||||
import { dashboardLayoutWithTabs } from '../../fixtures/mockDashboardLayout';
|
||||
import { mockStoreWithTabs } from '../../fixtures/mockStore';
|
||||
|
||||
describe('Tabs', () => {
|
||||
const props = {
|
||||
id: 'TAB_ID',
|
||||
parentId: 'TABS_ID',
|
||||
component: dashboardLayoutWithTabs.present.TAB_ID,
|
||||
parentComponent: dashboardLayoutWithTabs.present.TABS_ID,
|
||||
index: 0,
|
||||
depth: 1,
|
||||
editMode: false,
|
||||
renderType: RENDER_TAB,
|
||||
onDropOnTab() {},
|
||||
onDeleteTab() {},
|
||||
availableColumnCount: 12,
|
||||
columnWidth: 50,
|
||||
onResizeStart() {},
|
||||
onResize() {},
|
||||
onResizeStop() {},
|
||||
createComponent() {},
|
||||
handleComponentDrop() {},
|
||||
onChangeTab() {},
|
||||
deleteComponent() {},
|
||||
updateComponents() {},
|
||||
};
|
||||
|
||||
function setup(overrideProps) {
|
||||
// We have to wrap provide DragDropContext for the underlying DragDroppable
|
||||
// otherwise we cannot assert on DragDroppable children
|
||||
const wrapper = mount(
|
||||
<Provider store={mockStoreWithTabs}>
|
||||
<WithDragDropContext>
|
||||
<Tab {...props} {...overrideProps} />
|
||||
</WithDragDropContext>
|
||||
</Provider>,
|
||||
);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
describe('renderType=RENDER_TAB', () => {
|
||||
it('should render a DragDroppable', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DragDroppable)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render an EditableTitle with meta.text', () => {
|
||||
const wrapper = setup();
|
||||
const title = wrapper.find(EditableTitle);
|
||||
expect(title).toHaveLength(1);
|
||||
expect(title.find('input').prop('value')).toBe(props.component.meta.text);
|
||||
});
|
||||
|
||||
it('should call updateComponents when EditableTitle changes', () => {
|
||||
const updateComponents = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, updateComponents });
|
||||
wrapper.find(EditableTitle).prop('onSaveTitle')('New title');
|
||||
|
||||
expect(updateComponents.callCount).toBe(1);
|
||||
expect(updateComponents.getCall(0).args[0].TAB_ID.meta.text).toBe(
|
||||
'New title',
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a WithPopoverMenu', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a DeleteComponentModal when focused if its not the only tab', () => {
|
||||
let wrapper = setup();
|
||||
wrapper.find(WithPopoverMenu).simulate('click'); // focus
|
||||
expect(wrapper.find(DeleteComponentModal)).toHaveLength(0);
|
||||
|
||||
wrapper = setup({ editMode: true });
|
||||
wrapper.find(WithPopoverMenu).simulate('click');
|
||||
expect(wrapper.find(DeleteComponentModal)).toHaveLength(1);
|
||||
|
||||
wrapper = setup({
|
||||
editMode: true,
|
||||
parentComponent: {
|
||||
...props.parentComponent,
|
||||
children: props.parentComponent.children.slice(0, 1),
|
||||
},
|
||||
});
|
||||
wrapper.find(WithPopoverMenu).simulate('click');
|
||||
expect(wrapper.find(DeleteComponentModal)).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should show modal when clicked delete icon', () => {
|
||||
const deleteComponent = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, deleteComponent });
|
||||
wrapper.find(WithPopoverMenu).simulate('click'); // focus
|
||||
wrapper.find('.icon-button').simulate('click');
|
||||
|
||||
const modal = document.getElementsByClassName('modal');
|
||||
expect(modal).toHaveLength(1);
|
||||
expect(deleteComponent.callCount).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('renderType=RENDER_TAB_CONTENT', () => {
|
||||
it('should render a DashboardComponent', () => {
|
||||
const wrapper = setup({ renderType: RENDER_TAB_CONTENT });
|
||||
// We expect 2 because this Tab has a Row child and the row has a Chart
|
||||
expect(wrapper.find(DashboardComponent)).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,184 @@
|
||||
/**
|
||||
* 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 { Provider } from 'react-redux';
|
||||
import React from 'react';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
import { Tabs as BootstrapTabs, Tab as BootstrapTab } from 'react-bootstrap';
|
||||
|
||||
import DashboardComponent from '../../../../../src/dashboard/containers/DashboardComponent';
|
||||
import DeleteComponentButton from '../../../../../src/dashboard/components/DeleteComponentButton';
|
||||
import HoverMenu from '../../../../../src/dashboard/components/menu/HoverMenu';
|
||||
import DragDroppable from '../../../../../src/dashboard/components/dnd/DragDroppable';
|
||||
import Tabs from '../../../../../src/dashboard/components/gridComponents/Tabs';
|
||||
import WithDragDropContext from '../../helpers/WithDragDropContext';
|
||||
import { dashboardLayoutWithTabs } from '../../fixtures/mockDashboardLayout';
|
||||
import { mockStoreWithTabs } from '../../fixtures/mockStore';
|
||||
import { DASHBOARD_ROOT_ID } from '../../../../../src/dashboard/util/constants';
|
||||
|
||||
describe('Tabs', () => {
|
||||
const props = {
|
||||
id: 'TABS_ID',
|
||||
parentId: DASHBOARD_ROOT_ID,
|
||||
component: dashboardLayoutWithTabs.present.TABS_ID,
|
||||
parentComponent: dashboardLayoutWithTabs.present[DASHBOARD_ROOT_ID],
|
||||
index: 0,
|
||||
depth: 1,
|
||||
renderTabContent: true,
|
||||
editMode: false,
|
||||
availableColumnCount: 12,
|
||||
columnWidth: 50,
|
||||
onResizeStart() {},
|
||||
onResize() {},
|
||||
onResizeStop() {},
|
||||
createComponent() {},
|
||||
handleComponentDrop() {},
|
||||
onChangeTab() {},
|
||||
deleteComponent() {},
|
||||
updateComponents() {},
|
||||
logEvent() {},
|
||||
};
|
||||
|
||||
function setup(overrideProps) {
|
||||
// We have to wrap provide DragDropContext for the underlying DragDroppable
|
||||
// otherwise we cannot assert on DragDroppable children
|
||||
const wrapper = mount(
|
||||
<Provider store={mockStoreWithTabs}>
|
||||
<WithDragDropContext>
|
||||
<Tabs {...props} {...overrideProps} />
|
||||
</WithDragDropContext>
|
||||
</Provider>,
|
||||
);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
it('should render a DragDroppable', () => {
|
||||
// test just Tabs with no children DragDroppables
|
||||
const wrapper = setup({ component: { ...props.component, children: [] } });
|
||||
expect(wrapper.find(DragDroppable)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render BootstrapTabs', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(BootstrapTabs)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should set animation=true, mountOnEnter=true, and unmounOnExit=false on BootstrapTabs for perf', () => {
|
||||
const wrapper = setup();
|
||||
const tabProps = wrapper.find(BootstrapTabs).props();
|
||||
expect(tabProps.animation).toBe(true);
|
||||
expect(tabProps.mountOnEnter).toBe(true);
|
||||
expect(tabProps.unmountOnExit).toBe(false);
|
||||
});
|
||||
|
||||
it('should render a BootstrapTab for each child', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(BootstrapTab)).toHaveLength(
|
||||
props.component.children.length,
|
||||
);
|
||||
});
|
||||
|
||||
it('should render an extra (+) BootstrapTab in editMode', () => {
|
||||
const wrapper = setup({ editMode: true });
|
||||
expect(wrapper.find(BootstrapTab)).toHaveLength(
|
||||
props.component.children.length + 1,
|
||||
);
|
||||
});
|
||||
|
||||
it('should render a DashboardComponent for each child', () => {
|
||||
// note: this does not test Tab content
|
||||
const wrapper = setup({ renderTabContent: false });
|
||||
expect(wrapper.find(DashboardComponent)).toHaveLength(
|
||||
props.component.children.length,
|
||||
);
|
||||
});
|
||||
|
||||
it('should call createComponent if the (+) tab is clicked', () => {
|
||||
const createComponent = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, createComponent });
|
||||
wrapper
|
||||
.find('.dashboard-component-tabs .nav-tabs a')
|
||||
.last()
|
||||
.simulate('click');
|
||||
|
||||
expect(createComponent.callCount).toBe(1);
|
||||
});
|
||||
|
||||
it('should call onChangeTab when a tab is clicked', () => {
|
||||
const onChangeTab = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, onChangeTab });
|
||||
wrapper
|
||||
.find('.dashboard-component-tabs .nav-tabs a')
|
||||
.at(1) // will not call if it is already selected
|
||||
.simulate('click');
|
||||
|
||||
expect(onChangeTab.callCount).toBe(1);
|
||||
});
|
||||
|
||||
it('should not call onChangeTab when anchor link is clicked', () => {
|
||||
const onChangeTab = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, onChangeTab });
|
||||
wrapper
|
||||
.find('.dashboard-component-tabs .nav-tabs a .short-link-trigger')
|
||||
.at(1) // will not call if it is already selected
|
||||
.simulate('click');
|
||||
|
||||
expect(onChangeTab.callCount).toBe(0);
|
||||
});
|
||||
|
||||
it('should render a HoverMenu in editMode', () => {
|
||||
let wrapper = setup();
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(0);
|
||||
|
||||
wrapper = setup({ editMode: true });
|
||||
expect(wrapper.find(HoverMenu)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render a DeleteComponentButton in editMode', () => {
|
||||
let wrapper = setup();
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(0);
|
||||
|
||||
wrapper = setup({ editMode: true });
|
||||
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should call deleteComponent when deleted', () => {
|
||||
const deleteComponent = sinon.spy();
|
||||
const wrapper = setup({ editMode: true, deleteComponent });
|
||||
wrapper.find(DeleteComponentButton).simulate('click');
|
||||
|
||||
expect(deleteComponent.callCount).toBe(1);
|
||||
});
|
||||
|
||||
it('should direct display direct-link tab', () => {
|
||||
let wrapper = shallow(<Tabs {...props} />);
|
||||
// default show first tab child
|
||||
expect(wrapper.state('tabIndex')).toBe(0);
|
||||
|
||||
// display child in directPathToChild list
|
||||
const directPathToChild = dashboardLayoutWithTabs.present.ROW_ID2.parents.slice();
|
||||
const directLinkProps = {
|
||||
...props,
|
||||
directPathToChild,
|
||||
};
|
||||
|
||||
wrapper = shallow(<Tabs {...directLinkProps} />);
|
||||
expect(wrapper.state('tabIndex')).toBe(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* 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 { mount } from 'enzyme';
|
||||
|
||||
import DragDroppable from '../../../../../../src/dashboard/components/dnd/DragDroppable';
|
||||
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
|
||||
import WithDragDropContext from '../../../helpers/WithDragDropContext';
|
||||
|
||||
import { NEW_COMPONENTS_SOURCE_ID } from '../../../../../../src/dashboard/util/constants';
|
||||
import {
|
||||
NEW_COMPONENT_SOURCE_TYPE,
|
||||
CHART_TYPE,
|
||||
} from '../../../../../../src/dashboard/util/componentTypes';
|
||||
|
||||
describe('DraggableNewComponent', () => {
|
||||
const props = {
|
||||
id: 'id',
|
||||
type: CHART_TYPE,
|
||||
label: 'label!',
|
||||
className: 'a_class',
|
||||
};
|
||||
|
||||
function setup(overrideProps) {
|
||||
// We have to wrap provide DragDropContext for the underlying DragDroppable
|
||||
// otherwise we cannot assert on DragDroppable children
|
||||
const wrapper = mount(
|
||||
<WithDragDropContext>
|
||||
<DraggableNewComponent {...props} {...overrideProps} />
|
||||
</WithDragDropContext>,
|
||||
);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
it('should render a DragDroppable', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DragDroppable)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should pass component={ type, id } to DragDroppable', () => {
|
||||
const wrapper = setup();
|
||||
const dragdroppable = wrapper.find(DragDroppable);
|
||||
expect(dragdroppable.prop('component')).toEqual({
|
||||
id: props.id,
|
||||
type: props.type,
|
||||
});
|
||||
});
|
||||
|
||||
it('should pass appropriate parent source and id to DragDroppable', () => {
|
||||
const wrapper = setup();
|
||||
const dragdroppable = wrapper.find(DragDroppable);
|
||||
expect(dragdroppable.prop('parentComponent')).toEqual({
|
||||
id: NEW_COMPONENTS_SOURCE_ID,
|
||||
type: NEW_COMPONENT_SOURCE_TYPE,
|
||||
});
|
||||
});
|
||||
|
||||
it('should render the passed label', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find('.new-component').text()).toBe(props.label);
|
||||
});
|
||||
|
||||
it('should add the passed className', () => {
|
||||
const wrapper = setup();
|
||||
const className = `.new-component-placeholder.${props.className}`;
|
||||
expect(wrapper.find(className)).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* 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 { shallow } from 'enzyme';
|
||||
|
||||
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
|
||||
import NewColumn from '../../../../../../src/dashboard/components/gridComponents/new/NewColumn';
|
||||
|
||||
import { NEW_COLUMN_ID } from '../../../../../../src/dashboard/util/constants';
|
||||
import { COLUMN_TYPE } from '../../../../../../src/dashboard/util/componentTypes';
|
||||
|
||||
describe('NewColumn', () => {
|
||||
function setup() {
|
||||
return shallow(<NewColumn />);
|
||||
}
|
||||
|
||||
it('should render a DraggableNewComponent', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should set appropriate type and id', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DraggableNewComponent).props()).toMatchObject({
|
||||
type: COLUMN_TYPE,
|
||||
id: NEW_COLUMN_ID,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* 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 { shallow } from 'enzyme';
|
||||
|
||||
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
|
||||
import NewDivider from '../../../../../../src/dashboard/components/gridComponents/new/NewDivider';
|
||||
|
||||
import { NEW_DIVIDER_ID } from '../../../../../../src/dashboard/util/constants';
|
||||
import { DIVIDER_TYPE } from '../../../../../../src/dashboard/util/componentTypes';
|
||||
|
||||
describe('NewDivider', () => {
|
||||
function setup() {
|
||||
return shallow(<NewDivider />);
|
||||
}
|
||||
|
||||
it('should render a DraggableNewComponent', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should set appropriate type and id', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DraggableNewComponent).props()).toMatchObject({
|
||||
type: DIVIDER_TYPE,
|
||||
id: NEW_DIVIDER_ID,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* 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 { shallow } from 'enzyme';
|
||||
|
||||
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
|
||||
import NewHeader from '../../../../../../src/dashboard/components/gridComponents/new/NewHeader';
|
||||
|
||||
import { NEW_HEADER_ID } from '../../../../../../src/dashboard/util/constants';
|
||||
import { HEADER_TYPE } from '../../../../../../src/dashboard/util/componentTypes';
|
||||
|
||||
describe('NewHeader', () => {
|
||||
function setup() {
|
||||
return shallow(<NewHeader />);
|
||||
}
|
||||
|
||||
it('should render a DraggableNewComponent', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should set appropriate type and id', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DraggableNewComponent).props()).toMatchObject({
|
||||
type: HEADER_TYPE,
|
||||
id: NEW_HEADER_ID,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* 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 { shallow } from 'enzyme';
|
||||
|
||||
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
|
||||
import NewRow from '../../../../../../src/dashboard/components/gridComponents/new/NewRow';
|
||||
|
||||
import { NEW_ROW_ID } from '../../../../../../src/dashboard/util/constants';
|
||||
import { ROW_TYPE } from '../../../../../../src/dashboard/util/componentTypes';
|
||||
|
||||
describe('NewRow', () => {
|
||||
function setup() {
|
||||
return shallow(<NewRow />);
|
||||
}
|
||||
|
||||
it('should render a DraggableNewComponent', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should set appropriate type and id', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DraggableNewComponent).props()).toMatchObject({
|
||||
type: ROW_TYPE,
|
||||
id: NEW_ROW_ID,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* 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 { shallow } from 'enzyme';
|
||||
|
||||
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
|
||||
import NewTabs from '../../../../../../src/dashboard/components/gridComponents/new/NewTabs';
|
||||
|
||||
import { NEW_TABS_ID } from '../../../../../../src/dashboard/util/constants';
|
||||
import { TABS_TYPE } from '../../../../../../src/dashboard/util/componentTypes';
|
||||
|
||||
describe('NewTabs', () => {
|
||||
function setup() {
|
||||
return shallow(<NewTabs />);
|
||||
}
|
||||
|
||||
it('should render a DraggableNewComponent', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should set appropriate type and id', () => {
|
||||
const wrapper = setup();
|
||||
expect(wrapper.find(DraggableNewComponent).props()).toMatchObject({
|
||||
type: TABS_TYPE,
|
||||
id: NEW_TABS_ID,
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user