[refactor] Migrate from Mocha+Chai to Jest (#6079)

* [refactor] Migrate from Mocha+Chai to Jest

This change migrates all the existing unit tests
- to Jest's global expect and matchers from chai's imported expect, asserts and matchers.
- to Jest's describe/test from mocha's describe/it

The majority of the mechanical changes to tests are achieved through running jest-codemods. The only two note-worthy manual tweaks:
1. Setting a testURL of http://localhost in jest config and adjusting a few tests to leverage this value instead of relying on about:blank.
2. Re-enabling ExploreChartPanel_spec which was previously commented out as we cannot have empty tests with nothing in it with Jest. :)

This change also removes dependencies to Mocha and Chai.

* Remove the test:one command as it now does the same thing as test.

* Fixing lint errors. The diff looks large but is large done through `yarn run lint --fix`

The only noteworthy change is the one in eslintrc for tests. The env has been updated from mocha to jest.

* Adding eslint-plugin-jest and further modify tests.

- One small fix in sqllab's Timer Spec for a test that is not using the spy it created for testing.
- Deletion of a duplicated test caught by eslint-plugin-jest.

* - Make istanbul coverage work with Jest.

- Remove dependency on stand-alone istanbul and babel-istanbul as they're built-into jest. Yes!

* Attempt to fix dynamic imports in tests.

* run sequentially and log heap usage

* - tweaking maxworkers for travis and specifying coverageDirectory for codecov

- remove dynamic import in shim.js now that it is set in babelrc for tests only.
This commit is contained in:
Christine Chambers
2018-10-15 13:10:18 -07:00
committed by Chris Williams
parent 46c86672c8
commit 9029701f24
177 changed files with 2539 additions and 2166 deletions

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import CodeModal from '../../../../src/dashboard/components/CodeModal';
@@ -9,10 +8,10 @@ describe('CodeModal', () => {
triggerNode: <i className="fa fa-edit" />,
};
it('is valid', () => {
expect(React.isValidElement(<CodeModal {...mockedProps} />)).to.equal(true);
expect(React.isValidElement(<CodeModal {...mockedProps} />)).toBe(true);
});
it('renders the trigger node', () => {
const wrapper = mount(<CodeModal {...mockedProps} />);
expect(wrapper.find('.fa-edit')).to.have.length(1);
expect(wrapper.find('.fa-edit')).toHaveLength(1);
});
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import CssEditor from '../../../../src/dashboard/components/CssEditor';
@@ -9,10 +8,10 @@ describe('CssEditor', () => {
triggerNode: <i className="fa fa-edit" />,
};
it('is valid', () => {
expect(React.isValidElement(<CssEditor {...mockedProps} />)).to.equal(true);
expect(React.isValidElement(<CssEditor {...mockedProps} />)).toBe(true);
});
it('renders the trigger node', () => {
const wrapper = mount(<CssEditor {...mockedProps} />);
expect(wrapper.find('.fa-edit')).to.have.length(1);
expect(wrapper.find('.fa-edit')).toHaveLength(1);
});
});

View File

@@ -1,7 +1,6 @@
import { Provider } from 'react-redux';
import React from 'react';
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';
import ParentSize from '@vx/responsive/build/components/ParentSize';
import { Sticky, StickyContainer } from 'react-sticky';
@@ -47,21 +46,21 @@ describe('DashboardBuilder', () => {
it('should render a StickyContainer with class "dashboard"', () => {
const wrapper = setup();
const stickyContainer = wrapper.find(StickyContainer);
expect(stickyContainer).to.have.length(1);
expect(stickyContainer.prop('className')).to.equal('dashboard');
expect(stickyContainer).toHaveLength(1);
expect(stickyContainer.prop('className')).toBe('dashboard');
});
it('should add the "dashboard--editing" class if editMode=true', () => {
const wrapper = setup({ editMode: true });
const stickyContainer = wrapper.find(StickyContainer);
expect(stickyContainer.prop('className')).to.equal(
expect(stickyContainer.prop('className')).toBe(
'dashboard dashboard--editing',
);
});
it('should render a DragDroppable DashboardHeader', () => {
const wrapper = setup(null, true);
expect(wrapper.find(DashboardHeader)).to.have.length(1);
expect(wrapper.find(DashboardHeader)).toHaveLength(1);
});
it('should render a Sticky top-level Tabs if the dashboard has tabs', () => {
@@ -74,19 +73,19 @@ describe('DashboardBuilder', () => {
const dashboardComponent = sticky.find(DashboardComponent);
const tabChildren = layoutWithTabs.TABS_ID.children;
expect(sticky).to.have.length(1);
expect(dashboardComponent).to.have.length(1 + tabChildren.length); // tab + tabs
expect(dashboardComponent.at(0).prop('id')).to.equal('TABS_ID');
expect(sticky).toHaveLength(1);
expect(dashboardComponent).toHaveLength(1 + tabChildren.length); // tab + tabs
expect(dashboardComponent.at(0).prop('id')).toBe('TABS_ID');
tabChildren.forEach((tabId, i) => {
expect(dashboardComponent.at(i + 1).prop('id')).to.equal(tabId);
expect(dashboardComponent.at(i + 1).prop('id')).toBe(tabId);
});
});
it('should render a TabContainer and TabContent', () => {
const wrapper = setup({ dashboardLayout: layoutWithTabs });
const parentSize = wrapper.find(ParentSize).dive();
expect(parentSize.find(TabContainer)).to.have.length(1);
expect(parentSize.find(TabContent)).to.have.length(1);
expect(parentSize.find(TabContainer)).toHaveLength(1);
expect(parentSize.find(TabContent)).toHaveLength(1);
});
it('should set animation=true, mountOnEnter=true, and unmounOnExit=false on TabContainer for perf', () => {
@@ -96,9 +95,9 @@ describe('DashboardBuilder', () => {
.dive()
.find(TabContainer)
.props();
expect(tabProps.animation).to.equal(true);
expect(tabProps.mountOnEnter).to.equal(true);
expect(tabProps.unmountOnExit).to.equal(false);
expect(tabProps.animation).toBe(true);
expect(tabProps.mountOnEnter).toBe(true);
expect(tabProps.unmountOnExit).toBe(false);
});
it('should render a TabPane and DashboardGrid for each Tab', () => {
@@ -106,16 +105,16 @@ describe('DashboardBuilder', () => {
const parentSize = wrapper.find(ParentSize).dive();
const expectedCount = layoutWithTabs.TABS_ID.children.length;
expect(parentSize.find(TabPane)).to.have.length(expectedCount);
expect(parentSize.find(DashboardGrid)).to.have.length(expectedCount);
expect(parentSize.find(TabPane)).toHaveLength(expectedCount);
expect(parentSize.find(DashboardGrid)).toHaveLength(expectedCount);
});
it('should render a BuilderComponentPane if editMode=showBuilderPane=true', () => {
const wrapper = setup();
expect(wrapper.find(BuilderComponentPane)).to.have.length(0);
expect(wrapper.find(BuilderComponentPane)).toHaveLength(0);
wrapper.setProps({ ...props, editMode: true, showBuilderPane: true });
expect(wrapper.find(BuilderComponentPane)).to.have.length(1);
expect(wrapper.find(BuilderComponentPane)).toHaveLength(1);
});
it('should change tabs if a top-level Tab is clicked', () => {
@@ -125,13 +124,13 @@ describe('DashboardBuilder', () => {
mockStoreWithTabs,
);
expect(wrapper.find(TabContainer).prop('activeKey')).to.equal(0);
expect(wrapper.find(TabContainer).prop('activeKey')).toBe(0);
wrapper
.find('.dashboard-component-tabs .nav-tabs a')
.at(1)
.simulate('click');
expect(wrapper.find(TabContainer).prop('activeKey')).to.equal(1);
expect(wrapper.find(TabContainer).prop('activeKey')).toBe(1);
});
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import DashboardComponent from '../../../../src/dashboard/containers/DashboardComponent';
@@ -31,39 +30,37 @@ describe('DashboardGrid', () => {
it('should render a div with class "dashboard-grid"', () => {
const wrapper = setup();
expect(wrapper.find('.dashboard-grid')).to.have.length(1);
expect(wrapper.find('.dashboard-grid')).toHaveLength(1);
});
it('should render one DashboardComponent for each gridComponent child', () => {
const wrapper = setup({
gridComponent: { ...props.gridComponent, children: ['a', 'b'] },
});
expect(wrapper.find(DashboardComponent)).to.have.length(2);
expect(wrapper.find(DashboardComponent)).toHaveLength(2);
});
it('should render two empty DragDroppables in editMode to increase the drop target zone', () => {
const viewMode = setup({ editMode: false });
const editMode = setup({ editMode: true });
expect(viewMode.find(DragDroppable)).to.have.length(0);
expect(editMode.find(DragDroppable)).to.have.length(2);
expect(viewMode.find(DragDroppable)).toHaveLength(0);
expect(editMode.find(DragDroppable)).toHaveLength(2);
});
it('should render grid column guides when resizing', () => {
const wrapper = setup({ editMode: true });
expect(wrapper.find('.grid-column-guide')).to.have.length(0);
expect(wrapper.find('.grid-column-guide')).toHaveLength(0);
wrapper.setState({ isResizing: true });
expect(wrapper.find('.grid-column-guide')).to.have.length(
GRID_COLUMN_COUNT,
);
expect(wrapper.find('.grid-column-guide')).toHaveLength(GRID_COLUMN_COUNT);
});
it('should render a grid row guide when resizing', () => {
const wrapper = setup();
expect(wrapper.find('.grid-row-guide')).to.have.length(0);
expect(wrapper.find('.grid-row-guide')).toHaveLength(0);
wrapper.setState({ isResizing: true, rowGuideTop: 10 });
expect(wrapper.find('.grid-row-guide')).to.have.length(1);
expect(wrapper.find('.grid-row-guide')).toHaveLength(1);
});
it('should call resizeComponent when a child DashboardComponent calls resizeStop', () => {
@@ -73,8 +70,8 @@ describe('DashboardGrid', () => {
const dashboardComponent = wrapper.find(DashboardComponent).first();
dashboardComponent.prop('onResizeStop')(args);
expect(resizeComponent.callCount).to.equal(1);
expect(resizeComponent.getCall(0).args[0]).to.deep.equal({
expect(resizeComponent.callCount).toBe(1);
expect(resizeComponent.getCall(0).args[0]).toEqual({
id: 'id',
width: 1,
height: 3,

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import Dashboard from '../../../../src/dashboard/components/Dashboard';
@@ -44,7 +43,7 @@ describe('Dashboard', () => {
it('should render a DashboardBuilder', () => {
const wrapper = setup();
expect(wrapper.find(DashboardBuilder)).to.have.length(1);
expect(wrapper.find(DashboardBuilder)).toHaveLength(1);
});
describe('refreshExcept', () => {
@@ -69,7 +68,7 @@ describe('Dashboard', () => {
const spy = sinon.spy(props.actions, 'runQuery');
wrapper.instance().refreshExcept('1001');
spy.restore();
expect(spy.callCount).to.equal(Object.keys(overrideCharts).length - 1);
expect(spy.callCount).toBe(Object.keys(overrideCharts).length - 1);
});
it('should not call runQuery for filter_immune_slices', () => {
@@ -88,7 +87,7 @@ describe('Dashboard', () => {
const spy = sinon.spy(props.actions, 'runQuery');
wrapper.instance().refreshExcept();
spy.restore();
expect(spy.callCount).to.equal(0);
expect(spy.callCount).toBe(0);
});
});
@@ -106,7 +105,7 @@ describe('Dashboard', () => {
layout: layoutWithExtraChart,
});
spy.restore();
expect(spy.callCount).to.equal(1);
expect(spy.callCount).toBe(1);
});
it('should call removeSliceFromDashboard if a slice is removed from the layout', () => {
@@ -120,7 +119,7 @@ describe('Dashboard', () => {
layout: nextLayout,
});
spy.restore();
expect(spy.callCount).to.equal(1);
expect(spy.callCount).toBe(1);
});
});
@@ -145,7 +144,7 @@ describe('Dashboard', () => {
});
wrapper.instance().componentDidUpdate(prevProps);
refreshExceptSpy.restore();
expect(refreshExceptSpy.callCount).to.equal(0);
expect(refreshExceptSpy.callCount).toBe(0);
});
it('should call refresh if a filter is added', () => {
@@ -161,7 +160,7 @@ describe('Dashboard', () => {
},
});
refreshExceptSpy.restore();
expect(refreshExceptSpy.callCount).to.equal(1);
expect(refreshExceptSpy.callCount).toBe(1);
});
it('should call refresh if a filter is removed', () => {
@@ -174,7 +173,7 @@ describe('Dashboard', () => {
},
});
refreshExceptSpy.restore();
expect(refreshExceptSpy.callCount).to.equal(1);
expect(refreshExceptSpy.callCount).toBe(1);
});
it('should call refresh if a filter is changed', () => {
@@ -190,7 +189,7 @@ describe('Dashboard', () => {
},
});
refreshExceptSpy.restore();
expect(refreshExceptSpy.callCount).to.equal(1);
expect(refreshExceptSpy.callCount).toBe(1);
});
it('should not call refresh if filters change and refresh is false', () => {
@@ -207,7 +206,7 @@ describe('Dashboard', () => {
},
});
refreshExceptSpy.restore();
expect(refreshExceptSpy.callCount).to.equal(0);
expect(refreshExceptSpy.callCount).toBe(0);
});
it('should not refresh filter_immune_slices', () => {
@@ -235,7 +234,7 @@ describe('Dashboard', () => {
});
wrapper.instance().componentDidUpdate(prevProps);
refreshExceptSpy.restore();
expect(refreshExceptSpy.callCount).to.equal(0);
expect(refreshExceptSpy.callCount).toBe(0);
});
});
});

View File

@@ -1,5 +1,4 @@
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import { DropdownButton, MenuItem } from 'react-bootstrap';
import RefreshIntervalModal from '../../../../src/dashboard/components/RefreshIntervalModal';
@@ -41,32 +40,32 @@ describe('HeaderActionsDropdown', () => {
it('should render the DropdownButton', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(DropdownButton)).to.have.lengthOf(1);
expect(wrapper.find(DropdownButton)).toHaveLength(1);
});
it('should not render the SaveModal', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(SaveModal)).to.have.lengthOf(0);
expect(wrapper.find(SaveModal)).toHaveLength(0);
});
it('should render one MenuItem', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(MenuItem)).to.have.lengthOf(1);
expect(wrapper.find(MenuItem)).toHaveLength(1);
});
it('should render the RefreshIntervalModal', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(RefreshIntervalModal)).to.have.lengthOf(1);
expect(wrapper.find(RefreshIntervalModal)).toHaveLength(1);
});
it('should render the URLShortLinkModal', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(URLShortLinkModal)).to.have.lengthOf(1);
expect(wrapper.find(URLShortLinkModal)).toHaveLength(1);
});
it('should not render the CssEditor', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(CssEditor)).to.have.lengthOf(0);
expect(wrapper.find(CssEditor)).toHaveLength(0);
});
});
@@ -75,32 +74,32 @@ describe('HeaderActionsDropdown', () => {
it('should render the DropdownButton', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(DropdownButton)).to.have.lengthOf(1);
expect(wrapper.find(DropdownButton)).toHaveLength(1);
});
it('should render the SaveModal', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(SaveModal)).to.have.lengthOf(1);
expect(wrapper.find(SaveModal)).toHaveLength(1);
});
it('should render two MenuItems', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(MenuItem)).to.have.lengthOf(2);
expect(wrapper.find(MenuItem)).toHaveLength(2);
});
it('should render the RefreshIntervalModal', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(RefreshIntervalModal)).to.have.lengthOf(1);
expect(wrapper.find(RefreshIntervalModal)).toHaveLength(1);
});
it('should render the URLShortLinkModal', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(URLShortLinkModal)).to.have.lengthOf(1);
expect(wrapper.find(URLShortLinkModal)).toHaveLength(1);
});
it('should not render the CssEditor', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(CssEditor)).to.have.lengthOf(0);
expect(wrapper.find(CssEditor)).toHaveLength(0);
});
});
@@ -109,32 +108,32 @@ describe('HeaderActionsDropdown', () => {
it('should render the DropdownButton', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(DropdownButton)).to.have.lengthOf(1);
expect(wrapper.find(DropdownButton)).toHaveLength(1);
});
it('should render the SaveModal', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(SaveModal)).to.have.lengthOf(1);
expect(wrapper.find(SaveModal)).toHaveLength(1);
});
it('should render three MenuItems', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(MenuItem)).to.have.lengthOf(3);
expect(wrapper.find(MenuItem)).toHaveLength(3);
});
it('should render the RefreshIntervalModal', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(RefreshIntervalModal)).to.have.lengthOf(1);
expect(wrapper.find(RefreshIntervalModal)).toHaveLength(1);
});
it('should render the URLShortLinkModal', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(URLShortLinkModal)).to.have.lengthOf(1);
expect(wrapper.find(URLShortLinkModal)).toHaveLength(1);
});
it('should render the CssEditor', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(CssEditor)).to.have.lengthOf(1);
expect(wrapper.find(CssEditor)).toHaveLength(1);
});
});
});

View File

@@ -1,5 +1,4 @@
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import Header from '../../../../src/dashboard/components/Header';
import EditableTitle from '../../../../src/components/EditableTitle';
@@ -56,27 +55,27 @@ describe('Header', () => {
it('should render the EditableTitle', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(EditableTitle)).to.have.lengthOf(1);
expect(wrapper.find(EditableTitle)).toHaveLength(1);
});
it('should render the FaveStar', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(FaveStar)).to.have.lengthOf(1);
expect(wrapper.find(FaveStar)).toHaveLength(1);
});
it('should render the HeaderActionsDropdown', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(HeaderActionsDropdown)).to.have.lengthOf(1);
expect(wrapper.find(HeaderActionsDropdown)).toHaveLength(1);
});
it('should render one Button', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(Button)).to.have.lengthOf(1);
expect(wrapper.find(Button)).toHaveLength(1);
});
it('should not set up undo/redo', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(UndoRedoKeylisteners)).to.have.lengthOf(0);
expect(wrapper.find(UndoRedoKeylisteners)).toHaveLength(0);
});
});
@@ -88,27 +87,27 @@ describe('Header', () => {
it('should render the EditableTitle', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(EditableTitle)).to.have.lengthOf(1);
expect(wrapper.find(EditableTitle)).toHaveLength(1);
});
it('should render the FaveStar', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(FaveStar)).to.have.lengthOf(1);
expect(wrapper.find(FaveStar)).toHaveLength(1);
});
it('should render the HeaderActionsDropdown', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(HeaderActionsDropdown)).to.have.lengthOf(1);
expect(wrapper.find(HeaderActionsDropdown)).toHaveLength(1);
});
it('should render one Button', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(Button)).to.have.lengthOf(1);
expect(wrapper.find(Button)).toHaveLength(1);
});
it('should not set up undo/redo', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(UndoRedoKeylisteners)).to.have.lengthOf(0);
expect(wrapper.find(UndoRedoKeylisteners)).toHaveLength(0);
});
});
@@ -120,27 +119,27 @@ describe('Header', () => {
it('should render the EditableTitle', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(EditableTitle)).to.have.lengthOf(1);
expect(wrapper.find(EditableTitle)).toHaveLength(1);
});
it('should render the FaveStar', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(FaveStar)).to.have.lengthOf(1);
expect(wrapper.find(FaveStar)).toHaveLength(1);
});
it('should render the HeaderActionsDropdown', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(HeaderActionsDropdown)).to.have.lengthOf(1);
expect(wrapper.find(HeaderActionsDropdown)).toHaveLength(1);
});
it('should render four Buttons', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(Button)).to.have.lengthOf(4);
expect(wrapper.find(Button)).toHaveLength(4);
});
it('should set up undo/redo', () => {
const wrapper = setup(overrideProps);
expect(wrapper.find(UndoRedoKeylisteners)).to.have.lengthOf(1);
expect(wrapper.find(UndoRedoKeylisteners)).toHaveLength(1);
});
});
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import Loading from '../../../../src/components/Loading';
import MissingChart from '../../../../src/dashboard/components/MissingChart';
@@ -13,16 +12,16 @@ describe('MissingChart', () => {
it('renders a .missing-chart-container', () => {
const wrapper = setup();
expect(wrapper.find('.missing-chart-container')).to.have.length(1);
expect(wrapper.find('.missing-chart-container')).toHaveLength(1);
});
it('renders a .missing-chart-body', () => {
const wrapper = setup();
expect(wrapper.find('.missing-chart-body')).to.have.length(1);
expect(wrapper.find('.missing-chart-body')).toHaveLength(1);
});
it('renders a Loading', () => {
const wrapper = setup();
expect(wrapper.find(Loading)).to.have.length(1);
expect(wrapper.find(Loading)).toHaveLength(1);
});
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import RefreshIntervalModal from '../../../../src/dashboard/components/RefreshIntervalModal';
@@ -11,10 +10,10 @@ describe('RefreshIntervalModal', () => {
it('is valid', () => {
expect(
React.isValidElement(<RefreshIntervalModal {...mockedProps} />),
).to.equal(true);
).toBe(true);
});
it('renders the trigger node', () => {
const wrapper = mount(<RefreshIntervalModal {...mockedProps} />);
expect(wrapper.find('.fa-edit')).to.have.length(1);
expect(wrapper.find('.fa-edit')).toHaveLength(1);
});
});

View File

@@ -1,7 +1,6 @@
import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import { expect } from 'chai';
import { List } from 'react-virtualized';
@@ -40,7 +39,7 @@ describe('SliceAdder', () => {
}
return currentTimestamp < sortedTimestamps[index - 1];
}),
).to.equal(true);
).toBe(true);
});
it('should sort by slice_name', () => {
@@ -50,20 +49,20 @@ describe('SliceAdder', () => {
const expectedNames = Object.values(props.slices)
.map(slice => slice.slice_name)
.sort();
expect(sortedNames).to.deep.equal(expectedNames);
expect(sortedNames).toEqual(expectedNames);
});
});
it('render List', () => {
const wrapper = shallow(<SliceAdder {...props} />);
wrapper.setState({ filteredSlices: Object.values(props.slices) });
expect(wrapper.find(List)).to.have.length(1);
expect(wrapper.find(List)).toHaveLength(1);
});
it('render error', () => {
const wrapper = shallow(<SliceAdder {...errorProps} />);
wrapper.setState({ filteredSlices: Object.values(props.slices) });
expect(wrapper.text()).to.have.string(errorProps.errorMessage);
expect(wrapper.text()).toContain(errorProps.errorMessage);
});
it('componentDidMount', () => {
@@ -73,8 +72,8 @@ describe('SliceAdder', () => {
shallow(<SliceAdder {...props} />, {
lifecycleExperimental: true,
});
expect(SliceAdder.prototype.componentDidMount.calledOnce).to.equal(true);
expect(props.fetchAllSlices.calledOnce).to.equal(true);
expect(SliceAdder.prototype.componentDidMount.calledOnce).toBe(true);
expect(props.fetchAllSlices.calledOnce).toBe(true);
SliceAdder.prototype.componentDidMount.restore();
props.fetchAllSlices.restore();
@@ -96,12 +95,12 @@ describe('SliceAdder', () => {
...props,
lastUpdated: new Date().getTime(),
});
expect(wrapper.instance().setState.calledOnce).to.equal(true);
expect(wrapper.instance().setState.calledOnce).toBe(true);
const stateKeys = Object.keys(
wrapper.instance().setState.lastCall.args[0],
);
expect(stateKeys).to.include('filteredSlices');
expect(stateKeys).toContain('filteredSlices');
});
it('select slices should update state', () => {
@@ -109,12 +108,12 @@ describe('SliceAdder', () => {
...props,
selectedSliceIds: [127],
});
expect(wrapper.instance().setState.calledOnce).to.equal(true);
expect(wrapper.instance().setState.calledOnce).toBe(true);
const stateKeys = Object.keys(
wrapper.instance().setState.lastCall.args[0],
);
expect(stateKeys).to.include('selectedSliceIdsSet');
expect(stateKeys).toContain('selectedSliceIdsSet');
});
});
@@ -133,21 +132,21 @@ describe('SliceAdder', () => {
it('searchUpdated', () => {
const newSearchTerm = 'new search term';
wrapper.instance().searchUpdated(newSearchTerm);
expect(spy.calledOnce).to.equal(true);
expect(spy.lastCall.args[0]).to.equal(newSearchTerm);
expect(spy.calledOnce).toBe(true);
expect(spy.lastCall.args[0]).toBe(newSearchTerm);
});
it('handleSelect', () => {
const newSortBy = 1;
wrapper.instance().handleSelect(newSortBy);
expect(spy.calledOnce).to.equal(true);
expect(spy.lastCall.args[1]).to.equal(newSortBy);
expect(spy.calledOnce).toBe(true);
expect(spy.lastCall.args[1]).toBe(newSortBy);
});
it('handleKeyPress', () => {
wrapper.instance().handleKeyPress(mockEvent);
expect(spy.calledOnce).to.equal(true);
expect(spy.lastCall.args[0]).to.equal(mockEvent.target.value);
expect(spy.calledOnce).toBe(true);
expect(spy.lastCall.args[0]).toBe(mockEvent.target.value);
});
});
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import newComponentFactory from '../../../../../src/dashboard/util/newComponentFactory';
@@ -33,18 +32,18 @@ describe('DragDroppable', () => {
it('should render a div with class dragdroppable', () => {
const wrapper = setup();
expect(wrapper.find('.dragdroppable')).to.have.length(1);
expect(wrapper.find('.dragdroppable')).toHaveLength(1);
});
it('should add class dragdroppable--dragging when dragging', () => {
const wrapper = setup({ isDragging: true });
expect(wrapper.find('.dragdroppable')).to.have.length(1);
expect(wrapper.find('.dragdroppable')).toHaveLength(1);
});
it('should call its child function', () => {
const childrenSpy = sinon.spy();
setup({ children: childrenSpy });
expect(childrenSpy.callCount).to.equal(1);
expect(childrenSpy.callCount).toBe(1);
});
it('should call its child function with "dragSourceRef" if editMode=true', () => {
@@ -53,8 +52,8 @@ describe('DragDroppable', () => {
setup({ children, editMode: false, dragSourceRef });
setup({ children, editMode: true, dragSourceRef });
expect(children.getCall(0).args[0].dragSourceRef).to.equal(undefined);
expect(children.getCall(1).args[0].dragSourceRef).to.equal(dragSourceRef);
expect(children.getCall(0).args[0].dragSourceRef).toBeUndefined();
expect(children.getCall(1).args[0].dragSourceRef).toBe(dragSourceRef);
});
it('should call its child function with "dropIndicatorProps" dependent on editMode, isDraggingOver, state.dropIndicator is set', () => {
@@ -63,9 +62,9 @@ describe('DragDroppable', () => {
wrapper.setState({ dropIndicator: 'nonsense' });
wrapper.setProps({ ...props, editMode: true, isDraggingOver: true });
expect(children.callCount).to.equal(3); // initial + setState + setProps
expect(children.getCall(0).args[0].dropIndicatorProps).to.equal(undefined);
expect(children.getCall(2).args[0].dropIndicatorProps).to.deep.equal({
expect(children.callCount).toBe(3); // initial + setState + setProps
expect(children.getCall(0).args[0].dropIndicatorProps).toBeUndefined();
expect(children.getCall(2).args[0].dropIndicatorProps).toEqual({
className: 'drop-indicator',
});
});
@@ -75,15 +74,15 @@ describe('DragDroppable', () => {
const droppableRef = sinon.spy();
setup({ dragPreviewRef, droppableRef }, true);
expect(dragPreviewRef.callCount).to.equal(1);
expect(droppableRef.callCount).to.equal(1);
expect(dragPreviewRef.callCount).toBe(1);
expect(droppableRef.callCount).toBe(1);
});
it('should set this.mounted dependent on life cycle', () => {
const wrapper = setup({}, true);
const instance = wrapper.instance();
expect(instance.mounted).to.equal(true);
expect(instance.mounted).toBe(true);
wrapper.unmount();
expect(instance.mounted).to.equal(false);
expect(instance.mounted).toBe(false);
});
});

View File

@@ -1,7 +1,6 @@
import { Provider } from 'react-redux';
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import Chart from '../../../../../src/dashboard/containers/Chart';
@@ -50,22 +49,20 @@ describe('ChartHolder', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).to.have.length(1);
expect(wrapper.find(DragDroppable)).toHaveLength(1);
});
it('should render a ResizableContainer', () => {
const wrapper = setup();
expect(wrapper.find(ResizableContainer)).to.have.length(1);
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')).to.equal(
true,
);
expect(wrapper.find(ResizableContainer).prop('adjustableWidth')).toBe(true);
wrapper = setup({ ...props, parentComponent: mockLayout.present.CHART_ID });
expect(wrapper.find(ResizableContainer).prop('adjustableWidth')).to.equal(
expect(wrapper.find(ResizableContainer).prop('adjustableWidth')).toBe(
false,
);
});
@@ -73,39 +70,39 @@ describe('ChartHolder', () => {
it('should pass correct props to ResizableContainer', () => {
const wrapper = setup();
const resizableProps = wrapper.find(ResizableContainer).props();
expect(resizableProps.widthStep).to.equal(props.columnWidth);
expect(resizableProps.widthMultiple).to.equal(props.component.meta.width);
expect(resizableProps.heightMultiple).to.equal(props.component.meta.height);
expect(resizableProps.maxWidthMultiple).to.equal(
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')).to.have.length(1);
expect(wrapper.find('.dashboard-component-chart-holder')).toHaveLength(1);
});
it('should render a Chart', () => {
const wrapper = setup();
expect(wrapper.find(Chart)).to.have.length(1);
expect(wrapper.find(Chart)).toHaveLength(1);
});
it('should render a HoverMenu with DeleteComponentButton in editMode', () => {
let wrapper = setup();
expect(wrapper.find(HoverMenu)).to.have.length(0);
expect(wrapper.find(DeleteComponentButton)).to.have.length(0);
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)).to.have.length(1);
expect(wrapper.find(DeleteComponentButton)).to.have.length(1);
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).to.equal(1);
expect(deleteComponent.callCount).toBe(1);
});
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import Chart from '../../../../../src/dashboard/components/gridComponents/Chart';
@@ -50,39 +49,39 @@ describe('Chart', () => {
it('should render a SliceHeader', () => {
const wrapper = setup();
expect(wrapper.find(SliceHeader)).to.have.length(1);
expect(wrapper.find(SliceHeader)).toHaveLength(1);
});
it('should render a ChartContainer', () => {
const wrapper = setup();
expect(wrapper.find(ChartContainer)).to.have.length(1);
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')).to.have.length(0);
expect(wrapper.find('.slice_description')).toHaveLength(0);
wrapper.setProps({ ...props, isExpanded: true });
expect(wrapper.find('.slice_description')).to.have.length(1);
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).to.equal(1);
expect(refreshChart.callCount).toBe(1);
});
it('should call addFilter when ChartContainer calls addFilter', () => {
const addFilter = sinon.spy();
const wrapper = setup({ addFilter });
wrapper.instance().addFilter();
expect(addFilter.callCount).to.equal(1);
expect(addFilter.callCount).toBe(1);
});
it('should return props.filters when its getFilters method is called', () => {
const filters = { column: ['value'] };
const wrapper = setup({ filters });
expect(wrapper.instance().getFilters()).to.equal(filters);
expect(wrapper.instance().getFilters()).toBe(filters);
});
});

View File

@@ -1,7 +1,6 @@
import { Provider } from 'react-redux';
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import BackgroundStyleDropdown from '../../../../../src/dashboard/components/menu/BackgroundStyleDropdown';
@@ -59,42 +58,42 @@ describe('Column', () => {
it('should render a DragDroppable', () => {
// don't count child DragDroppables
const wrapper = setup({ component: columnWithoutChildren });
expect(wrapper.find(DragDroppable)).to.have.length(1);
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)).to.have.length(1);
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)).to.have.length(1);
expect(wrapper.find(ResizableContainer)).toHaveLength(1);
});
it('should render a HoverMenu in editMode', () => {
let wrapper = setup({ component: columnWithoutChildren });
expect(wrapper.find(HoverMenu)).to.have.length(0);
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)).to.have.length(1);
expect(wrapper.find(HoverMenu)).toHaveLength(1);
});
it('should render a DeleteComponentButton in editMode', () => {
let wrapper = setup({ component: columnWithoutChildren });
expect(wrapper.find(DeleteComponentButton)).to.have.length(0);
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)).to.have.length(1);
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
});
it('should render a BackgroundStyleDropdown when focused', () => {
let wrapper = setup({ component: columnWithoutChildren });
expect(wrapper.find(BackgroundStyleDropdown)).to.have.length(0);
expect(wrapper.find(BackgroundStyleDropdown)).toHaveLength(0);
// we cannot set props on the Row because of the WithDragDropContext wrapper
wrapper = setup({ component: columnWithoutChildren, editMode: true });
@@ -103,20 +102,20 @@ describe('Column', () => {
.at(1) // first one is delete button
.simulate('click');
expect(wrapper.find(BackgroundStyleDropdown)).to.have.length(1);
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).to.equal(1);
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).to.equal(
expect(dashboardComponent.props().availableColumnCount).toBe(
props.component.meta.width,
);
});
@@ -125,12 +124,12 @@ describe('Column', () => {
const wrapper = setup({ component: columnWithoutChildren });
const columnWidth = columnWithoutChildren.meta.width;
const resizableProps = wrapper.find(ResizableContainer).props();
expect(resizableProps.adjustableWidth).to.equal(true);
expect(resizableProps.adjustableHeight).to.equal(false);
expect(resizableProps.widthStep).to.equal(props.columnWidth);
expect(resizableProps.widthMultiple).to.equal(columnWidth);
expect(resizableProps.minWidthMultiple).to.equal(props.minColumnWidth);
expect(resizableProps.maxWidthMultiple).to.equal(
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,
);
});
@@ -138,6 +137,6 @@ describe('Column', () => {
it('should increment the depth of its children', () => {
const wrapper = setup();
const dashboardComponent = wrapper.find(DashboardComponent);
expect(dashboardComponent.props().depth).to.equal(props.depth + 1);
expect(dashboardComponent.props().depth).toBe(props.depth + 1);
});
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import DeleteComponentButton from '../../../../../src/dashboard/components/DeleteComponentButton';
@@ -41,29 +40,29 @@ describe('Divider', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).to.have.length(1);
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')).to.have.length(1);
expect(wrapper.find('.dashboard-component-divider')).toHaveLength(1);
});
it('should render a HoverMenu with DeleteComponentButton in editMode', () => {
let wrapper = setup();
expect(wrapper.find(HoverMenu)).to.have.length(0);
expect(wrapper.find(DeleteComponentButton)).to.have.length(0);
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)).to.have.length(1);
expect(wrapper.find(DeleteComponentButton)).to.have.length(1);
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).to.equal(1);
expect(deleteComponent.callCount).toBe(1);
});
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import DeleteComponentButton from '../../../../../src/dashboard/components/DeleteComponentButton';
@@ -44,29 +43,27 @@ describe('Header', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).to.have.length(1);
expect(wrapper.find(DragDroppable)).toHaveLength(1);
});
it('should render a WithPopoverMenu', () => {
const wrapper = setup();
expect(wrapper.find(WithPopoverMenu)).to.have.length(1);
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
});
it('should render a HoverMenu in editMode', () => {
let wrapper = setup();
expect(wrapper.find(HoverMenu)).to.have.length(0);
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)).to.have.length(1);
expect(wrapper.find(HoverMenu)).toHaveLength(1);
});
it('should render an EditableTitle with meta.text', () => {
const wrapper = setup();
expect(wrapper.find(EditableTitle)).to.have.length(1);
expect(wrapper.find('input').prop('value')).to.equal(
props.component.meta.text,
);
expect(wrapper.find(EditableTitle)).toHaveLength(1);
expect(wrapper.find('input').prop('value')).toBe(props.component.meta.text);
});
it('should call updateComponents when EditableTitle changes', () => {
@@ -75,8 +72,8 @@ describe('Header', () => {
wrapper.find(EditableTitle).prop('onSaveTitle')('New title');
const headerId = props.component.id;
expect(updateComponents.callCount).to.equal(1);
expect(updateComponents.getCall(0).args[0][headerId].meta.text).to.equal(
expect(updateComponents.callCount).toBe(1);
expect(updateComponents.getCall(0).args[0][headerId].meta.text).toBe(
'New title',
);
});
@@ -85,7 +82,7 @@ describe('Header', () => {
const wrapper = setup({ editMode: true });
wrapper.find(WithPopoverMenu).simulate('click'); // focus
expect(wrapper.find(DeleteComponentButton)).to.have.length(1);
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
});
it('should call deleteComponent when deleted', () => {
@@ -94,6 +91,6 @@ describe('Header', () => {
wrapper.find(WithPopoverMenu).simulate('click'); // focus
wrapper.find(DeleteComponentButton).simulate('click');
expect(deleteComponent.callCount).to.equal(1);
expect(deleteComponent.callCount).toBe(1);
});
});

View File

@@ -1,7 +1,6 @@
import { Provider } from 'react-redux';
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import AceEditor from 'react-ace';
import ReactMarkdown from 'react-markdown';
@@ -51,27 +50,25 @@ describe('Markdown', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).to.have.length(1);
expect(wrapper.find(DragDroppable)).toHaveLength(1);
});
it('should render a WithPopoverMenu', () => {
const wrapper = setup();
expect(wrapper.find(WithPopoverMenu)).to.have.length(1);
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
});
it('should render a ResizableContainer', () => {
const wrapper = setup();
expect(wrapper.find(ResizableContainer)).to.have.length(1);
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')).to.equal(
true,
);
expect(wrapper.find(ResizableContainer).prop('adjustableWidth')).toBe(true);
wrapper = setup({ ...props, parentComponent: mockLayout.present.CHART_ID });
expect(wrapper.find(ResizableContainer).prop('adjustableWidth')).to.equal(
expect(wrapper.find(ResizableContainer).prop('adjustableWidth')).toBe(
false,
);
});
@@ -79,34 +76,34 @@ describe('Markdown', () => {
it('should pass correct props to ResizableContainer', () => {
const wrapper = setup();
const resizableProps = wrapper.find(ResizableContainer).props();
expect(resizableProps.widthStep).to.equal(props.columnWidth);
expect(resizableProps.widthMultiple).to.equal(props.component.meta.width);
expect(resizableProps.heightMultiple).to.equal(props.component.meta.height);
expect(resizableProps.maxWidthMultiple).to.equal(
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)).to.have.length(0);
expect(wrapper.find(ReactMarkdown)).to.have.length(1);
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)).to.have.length(0);
expect(wrapper.find(ReactMarkdown)).to.have.length(1);
expect(wrapper.find(AceEditor)).toHaveLength(0);
expect(wrapper.find(ReactMarkdown)).toHaveLength(1);
wrapper.find(WithPopoverMenu).simulate('click'); // focus + edit
expect(wrapper.find(AceEditor)).to.have.length(1);
expect(wrapper.find(ReactMarkdown)).to.have.length(0);
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)).to.have.length(1);
expect(wrapper.find(ReactMarkdown)).to.have.length(0);
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
@@ -114,8 +111,8 @@ describe('Markdown', () => {
dropdown.prop('onChange')('preview');
wrapper.update();
expect(wrapper.find(ReactMarkdown)).to.have.length(1);
expect(wrapper.find(AceEditor)).to.have.length(0);
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', () => {
@@ -127,7 +124,7 @@ describe('Markdown', () => {
// the mode dropdown onchange instead
const dropdown = wrapper.find(MarkdownModeDropdown);
dropdown.prop('onChange')('preview');
expect(updateComponents.callCount).to.equal(0);
expect(updateComponents.callCount).toBe(0);
dropdown.prop('onChange')('edit');
// because we can't call setState on Markdown, change it through the editor
@@ -135,14 +132,14 @@ describe('Markdown', () => {
const editor = wrapper.find(AceEditor);
editor.prop('onChange')('new markdown!');
dropdown.prop('onChange')('preview');
expect(updateComponents.callCount).to.equal(1);
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)).to.have.length(1);
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
});
it('should call deleteComponent when deleted', () => {
@@ -151,6 +148,6 @@ describe('Markdown', () => {
wrapper.find(WithPopoverMenu).simulate('click'); // focus
wrapper.find(DeleteComponentButton).simulate('click');
expect(deleteComponent.callCount).to.equal(1);
expect(deleteComponent.callCount).toBe(1);
});
});

View File

@@ -1,7 +1,6 @@
import { Provider } from 'react-redux';
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import BackgroundStyleDropdown from '../../../../../src/dashboard/components/menu/BackgroundStyleDropdown';
@@ -55,36 +54,36 @@ describe('Row', () => {
it('should render a DragDroppable', () => {
// don't count child DragDroppables
const wrapper = setup({ component: rowWithoutChildren });
expect(wrapper.find(DragDroppable)).to.have.length(1);
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)).to.have.length(1);
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
});
it('should render a HoverMenu in editMode', () => {
let wrapper = setup({ component: rowWithoutChildren });
expect(wrapper.find(HoverMenu)).to.have.length(0);
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)).to.have.length(1);
expect(wrapper.find(HoverMenu)).toHaveLength(1);
});
it('should render a DeleteComponentButton in editMode', () => {
let wrapper = setup({ component: rowWithoutChildren });
expect(wrapper.find(DeleteComponentButton)).to.have.length(0);
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)).to.have.length(1);
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
});
it('should render a BackgroundStyleDropdown when focused', () => {
let wrapper = setup({ component: rowWithoutChildren });
expect(wrapper.find(BackgroundStyleDropdown)).to.have.length(0);
expect(wrapper.find(BackgroundStyleDropdown)).toHaveLength(0);
// we cannot set props on the Row because of the WithDragDropContext wrapper
wrapper = setup({ component: rowWithoutChildren, editMode: true });
@@ -93,20 +92,20 @@ describe('Row', () => {
.at(1) // first one is delete button
.simulate('click');
expect(wrapper.find(BackgroundStyleDropdown)).to.have.length(1);
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).to.equal(1);
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).to.equal(
expect(dashboardComponent.props().availableColumnCount).toBe(
props.availableColumnCount - props.occupiedColumnCount,
);
});
@@ -114,6 +113,6 @@ describe('Row', () => {
it('should increment the depth of its children', () => {
const wrapper = setup();
const dashboardComponent = wrapper.find(DashboardComponent).first();
expect(dashboardComponent.props().depth).to.equal(props.depth + 1);
expect(dashboardComponent.props().depth).toBe(props.depth + 1);
});
});

View File

@@ -1,7 +1,6 @@
import { Provider } from 'react-redux';
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import DashboardComponent from '../../../../../src/dashboard/containers/DashboardComponent';
@@ -57,16 +56,14 @@ describe('Tabs', () => {
describe('renderType=RENDER_TAB', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).to.have.length(1);
expect(wrapper.find(DragDroppable)).toHaveLength(1);
});
it('should render an EditableTitle with meta.text', () => {
const wrapper = setup();
const title = wrapper.find(EditableTitle);
expect(title).to.have.length(1);
expect(title.find('input').prop('value')).to.equal(
props.component.meta.text,
);
expect(title).toHaveLength(1);
expect(title.find('input').prop('value')).toBe(props.component.meta.text);
});
it('should call updateComponents when EditableTitle changes', () => {
@@ -74,25 +71,25 @@ describe('Tabs', () => {
const wrapper = setup({ editMode: true, updateComponents });
wrapper.find(EditableTitle).prop('onSaveTitle')('New title');
expect(updateComponents.callCount).to.equal(1);
expect(updateComponents.getCall(0).args[0].TAB_ID.meta.text).to.equal(
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)).to.have.length(1);
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)).to.have.length(0);
expect(wrapper.find(DeleteComponentModal)).toHaveLength(0);
wrapper = setup({ editMode: true });
wrapper.find(WithPopoverMenu).simulate('click');
expect(wrapper.find(DeleteComponentModal)).to.have.length(1);
expect(wrapper.find(DeleteComponentModal)).toHaveLength(1);
wrapper = setup({
editMode: true,
@@ -102,7 +99,7 @@ describe('Tabs', () => {
},
});
wrapper.find(WithPopoverMenu).simulate('click');
expect(wrapper.find(DeleteComponentModal)).to.have.length(0);
expect(wrapper.find(DeleteComponentModal)).toHaveLength(0);
});
it('should show modal when clicked delete icon', () => {
@@ -112,8 +109,8 @@ describe('Tabs', () => {
wrapper.find('.icon-button').simulate('click');
const modal = document.getElementsByClassName('modal');
expect(modal).to.have.length(1);
expect(deleteComponent.callCount).to.equal(0);
expect(modal).toHaveLength(1);
expect(deleteComponent.callCount).toBe(0);
});
});
@@ -121,7 +118,7 @@ describe('Tabs', () => {
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)).to.have.length(2);
expect(wrapper.find(DashboardComponent)).toHaveLength(2);
});
});
});

View File

@@ -1,7 +1,6 @@
import { Provider } from 'react-redux';
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import { Tabs as BootstrapTabs, Tab as BootstrapTab } from 'react-bootstrap';
@@ -53,32 +52,32 @@ describe('Tabs', () => {
it('should render a DragDroppable', () => {
// test just Tabs with no children DragDroppables
const wrapper = setup({ component: { ...props.component, children: [] } });
expect(wrapper.find(DragDroppable)).to.have.length(1);
expect(wrapper.find(DragDroppable)).toHaveLength(1);
});
it('should render BootstrapTabs', () => {
const wrapper = setup();
expect(wrapper.find(BootstrapTabs)).to.have.length(1);
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).to.equal(true);
expect(tabProps.mountOnEnter).to.equal(true);
expect(tabProps.unmountOnExit).to.equal(false);
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)).to.have.length(
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)).to.have.length(
expect(wrapper.find(BootstrapTab)).toHaveLength(
props.component.children.length + 1,
);
});
@@ -86,7 +85,7 @@ describe('Tabs', () => {
it('should render a DashboardComponent for each child', () => {
// note: this does not test Tab content
const wrapper = setup({ renderTabContent: false });
expect(wrapper.find(DashboardComponent)).to.have.length(
expect(wrapper.find(DashboardComponent)).toHaveLength(
props.component.children.length,
);
});
@@ -99,7 +98,7 @@ describe('Tabs', () => {
.last()
.simulate('click');
expect(createComponent.callCount).to.equal(1);
expect(createComponent.callCount).toBe(1);
});
it('should call onChangeTab when a tab is clicked', () => {
@@ -110,23 +109,23 @@ describe('Tabs', () => {
.at(1) // will not call if it is already selected
.simulate('click');
expect(onChangeTab.callCount).to.equal(1);
expect(onChangeTab.callCount).toBe(1);
});
it('should render a HoverMenu in editMode', () => {
let wrapper = setup();
expect(wrapper.find(HoverMenu)).to.have.length(0);
expect(wrapper.find(HoverMenu)).toHaveLength(0);
wrapper = setup({ editMode: true });
expect(wrapper.find(HoverMenu)).to.have.length(1);
expect(wrapper.find(HoverMenu)).toHaveLength(1);
});
it('should render a DeleteComponentButton in editMode', () => {
let wrapper = setup();
expect(wrapper.find(DeleteComponentButton)).to.have.length(0);
expect(wrapper.find(DeleteComponentButton)).toHaveLength(0);
wrapper = setup({ editMode: true });
expect(wrapper.find(DeleteComponentButton)).to.have.length(1);
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
});
it('should call deleteComponent when deleted', () => {
@@ -134,6 +133,6 @@ describe('Tabs', () => {
const wrapper = setup({ editMode: true, deleteComponent });
wrapper.find(DeleteComponentButton).simulate('click');
expect(deleteComponent.callCount).to.equal(1);
expect(deleteComponent.callCount).toBe(1);
});
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import DragDroppable from '../../../../../../src/dashboard/components/dnd/DragDroppable';
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
@@ -33,13 +32,13 @@ describe('DraggableNewComponent', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).to.have.length(1);
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')).to.deep.equal({
expect(dragdroppable.prop('component')).toEqual({
id: props.id,
type: props.type,
});
@@ -48,7 +47,7 @@ describe('DraggableNewComponent', () => {
it('should pass appropriate parent source and id to DragDroppable', () => {
const wrapper = setup();
const dragdroppable = wrapper.find(DragDroppable);
expect(dragdroppable.prop('parentComponent')).to.deep.equal({
expect(dragdroppable.prop('parentComponent')).toEqual({
id: NEW_COMPONENTS_SOURCE_ID,
type: NEW_COMPONENT_SOURCE_TYPE,
});
@@ -56,12 +55,12 @@ describe('DraggableNewComponent', () => {
it('should render the passed label', () => {
const wrapper = setup();
expect(wrapper.find('.new-component').text()).to.equal(props.label);
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)).to.have.length(1);
expect(wrapper.find(className)).toHaveLength(1);
});
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
import NewColumn from '../../../../../../src/dashboard/components/gridComponents/new/NewColumn';
@@ -15,12 +14,12 @@ describe('NewColumn', () => {
it('should render a DraggableNewComponent', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent)).to.have.length(1);
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
});
it('should set appropriate type and id', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent).props()).to.include({
expect(wrapper.find(DraggableNewComponent).props()).toMatchObject({
type: COLUMN_TYPE,
id: NEW_COLUMN_ID,
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
import NewDivider from '../../../../../../src/dashboard/components/gridComponents/new/NewDivider';
@@ -15,12 +14,12 @@ describe('NewDivider', () => {
it('should render a DraggableNewComponent', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent)).to.have.length(1);
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
});
it('should set appropriate type and id', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent).props()).to.include({
expect(wrapper.find(DraggableNewComponent).props()).toMatchObject({
type: DIVIDER_TYPE,
id: NEW_DIVIDER_ID,
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
import NewHeader from '../../../../../../src/dashboard/components/gridComponents/new/NewHeader';
@@ -15,12 +14,12 @@ describe('NewHeader', () => {
it('should render a DraggableNewComponent', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent)).to.have.length(1);
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
});
it('should set appropriate type and id', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent).props()).to.include({
expect(wrapper.find(DraggableNewComponent).props()).toMatchObject({
type: HEADER_TYPE,
id: NEW_HEADER_ID,
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
import NewRow from '../../../../../../src/dashboard/components/gridComponents/new/NewRow';
@@ -15,12 +14,12 @@ describe('NewRow', () => {
it('should render a DraggableNewComponent', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent)).to.have.length(1);
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
});
it('should set appropriate type and id', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent).props()).to.include({
expect(wrapper.find(DraggableNewComponent).props()).toMatchObject({
type: ROW_TYPE,
id: NEW_ROW_ID,
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import DraggableNewComponent from '../../../../../../src/dashboard/components/gridComponents/new/DraggableNewComponent';
import NewTabs from '../../../../../../src/dashboard/components/gridComponents/new/NewTabs';
@@ -15,12 +14,12 @@ describe('NewTabs', () => {
it('should render a DraggableNewComponent', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent)).to.have.length(1);
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
});
it('should set appropriate type and id', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent).props()).to.include({
expect(wrapper.find(DraggableNewComponent).props()).toMatchObject({
type: TABS_TYPE,
id: NEW_TABS_ID,
});

View File

@@ -1,12 +1,11 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import HoverMenu from '../../../../../src/dashboard/components/menu/HoverMenu';
describe('HoverMenu', () => {
it('should render a div.hover-menu', () => {
const wrapper = shallow(<HoverMenu />);
expect(wrapper.find('.hover-menu')).to.have.length(1);
expect(wrapper.find('.hover-menu')).toHaveLength(1);
});
});

View File

@@ -1,6 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import WithPopoverMenu from '../../../../../src/dashboard/components/menu/WithPopoverMenu';
@@ -22,49 +21,49 @@ describe('WithPopoverMenu', () => {
it('should render a div with class "with-popover-menu"', () => {
const wrapper = setup();
expect(wrapper.find('.with-popover-menu')).to.have.length(1);
expect(wrapper.find('.with-popover-menu')).toHaveLength(1);
});
it('should render the passed children', () => {
const wrapper = setup();
expect(wrapper.find('#child')).to.have.length(1);
expect(wrapper.find('#child')).toHaveLength(1);
});
it('should focus on click in editMode', () => {
const wrapper = setup();
expect(wrapper.state('isFocused')).to.equal(false);
expect(wrapper.state('isFocused')).toBe(false);
wrapper.simulate('click');
expect(wrapper.state('isFocused')).to.equal(false);
expect(wrapper.state('isFocused')).toBe(false);
wrapper.setProps({ ...props, editMode: true });
wrapper.simulate('click');
expect(wrapper.state('isFocused')).to.equal(true);
expect(wrapper.state('isFocused')).toBe(true);
});
it('should render menuItems when focused', () => {
const wrapper = setup({ editMode: true });
expect(wrapper.find('#menu1')).to.have.length(0);
expect(wrapper.find('#menu2')).to.have.length(0);
expect(wrapper.find('#menu1')).toHaveLength(0);
expect(wrapper.find('#menu2')).toHaveLength(0);
wrapper.simulate('click');
expect(wrapper.find('#menu1')).to.have.length(1);
expect(wrapper.find('#menu2')).to.have.length(1);
expect(wrapper.find('#menu1')).toHaveLength(1);
expect(wrapper.find('#menu2')).toHaveLength(1);
});
it('should not focus when disableClick=true', () => {
const wrapper = setup({ disableClick: true, editMode: true });
expect(wrapper.state('isFocused')).to.equal(false);
expect(wrapper.state('isFocused')).toBe(false);
wrapper.simulate('click');
expect(wrapper.state('isFocused')).to.equal(false);
expect(wrapper.state('isFocused')).toBe(false);
});
it('should use the passed shouldFocus func to determine if it should focus', () => {
const wrapper = setup({ editMode: true, shouldFocus: () => false });
expect(wrapper.state('isFocused')).to.equal(false);
expect(wrapper.state('isFocused')).toBe(false);
wrapper.simulate('click');
expect(wrapper.state('isFocused')).to.equal(false);
expect(wrapper.state('isFocused')).toBe(false);
});
});

View File

@@ -1,7 +1,6 @@
import React from 'react';
import Resizable from 're-resizable';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import ResizableContainer from '../../../../../src/dashboard/components/resizable/ResizableContainer';
@@ -14,6 +13,6 @@ describe('ResizableContainer', () => {
it('should render a Resizable', () => {
const wrapper = setup();
expect(wrapper.find(Resizable)).to.have.length(1);
expect(wrapper.find(Resizable)).toHaveLength(1);
});
});

View File

@@ -1,20 +1,17 @@
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import ResizableHandle from '../../../../../src/dashboard/components/resizable/ResizableHandle';
describe('ResizableHandle', () => {
it('should render a right resize handle', () => {
const wrapper = shallow(<ResizableHandle.right />);
expect(wrapper.find('.resize-handle.resize-handle--right')).to.have.length(
1,
);
expect(wrapper.find('.resize-handle.resize-handle--right')).toHaveLength(1);
});
it('should render a bottom resize handle', () => {
const wrapper = shallow(<ResizableHandle.bottom />);
expect(wrapper.find('.resize-handle.resize-handle--bottom')).to.have.length(
expect(wrapper.find('.resize-handle.resize-handle--bottom')).toHaveLength(
1,
);
});
@@ -23,6 +20,6 @@ describe('ResizableHandle', () => {
const wrapper = shallow(<ResizableHandle.bottomRight />);
expect(
wrapper.find('.resize-handle.resize-handle--bottom-right'),
).to.have.length(1);
).toHaveLength(1);
});
});