test: Add jest-enzyme assertion library for better frontend tests (#10459)

* adding jest-enzyme

* enzymeify lots of assertions

* types for jest-enzyme
This commit is contained in:
David Aaron Suddjian
2020-07-29 10:53:06 -07:00
committed by GitHub
parent 671461d0d0
commit 7f70a241f9
111 changed files with 1074 additions and 315 deletions

View File

@@ -67,12 +67,12 @@ describe('ChartHolder', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).toHaveLength(1);
expect(wrapper.find(DragDroppable)).toExist();
});
it('should render a ResizableContainer', () => {
const wrapper = setup();
expect(wrapper.find(ResizableContainer)).toHaveLength(1);
expect(wrapper.find(ResizableContainer)).toExist();
});
it('should only have an adjustableWidth if its parent is a Row', () => {
@@ -98,23 +98,23 @@ describe('ChartHolder', () => {
it('should render a div with class "dashboard-component-chart-holder"', () => {
const wrapper = setup();
expect(wrapper.find('.dashboard-component-chart-holder')).toHaveLength(1);
expect(wrapper.find('.dashboard-component-chart-holder')).toExist();
});
it('should render a Chart', () => {
const wrapper = setup();
expect(wrapper.find(Chart)).toHaveLength(1);
expect(wrapper.find(Chart)).toExist();
});
it('should render a HoverMenu with DeleteComponentButton in editMode', () => {
let wrapper = setup();
expect(wrapper.find(HoverMenu)).toHaveLength(0);
expect(wrapper.find(DeleteComponentButton)).toHaveLength(0);
expect(wrapper.find(HoverMenu)).not.toExist();
expect(wrapper.find(DeleteComponentButton)).not.toExist();
// 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);
expect(wrapper.find(HoverMenu)).toExist();
expect(wrapper.find(DeleteComponentButton)).toExist();
});
it('should call deleteComponent when deleted', () => {

View File

@@ -66,20 +66,20 @@ describe('Chart', () => {
it('should render a SliceHeader', () => {
const wrapper = setup();
expect(wrapper.find(SliceHeader)).toHaveLength(1);
expect(wrapper.find(SliceHeader)).toExist();
});
it('should render a ChartContainer', () => {
const wrapper = setup();
expect(wrapper.find(ChartContainer)).toHaveLength(1);
expect(wrapper.find(ChartContainer)).toExist();
});
it('should render a description if it has one and isExpanded=true', () => {
const wrapper = setup();
expect(wrapper.find('.slice_description')).toHaveLength(0);
expect(wrapper.find('.slice_description')).not.toExist();
wrapper.setProps({ ...props, isExpanded: true });
expect(wrapper.find('.slice_description')).toHaveLength(1);
expect(wrapper.find('.slice_description')).toExist();
});
it('should call refreshChart when SliceHeader calls forceRefresh', () => {

View File

@@ -76,42 +76,42 @@ describe('Column', () => {
it('should render a DragDroppable', () => {
// don't count child DragDroppables
const wrapper = setup({ component: columnWithoutChildren });
expect(wrapper.find(DragDroppable)).toHaveLength(1);
expect(wrapper.find(DragDroppable)).toExist();
});
it('should render a WithPopoverMenu', () => {
// don't count child DragDroppables
const wrapper = setup({ component: columnWithoutChildren });
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
expect(wrapper.find(WithPopoverMenu)).toExist();
});
it('should render a ResizableContainer', () => {
// don't count child DragDroppables
const wrapper = setup({ component: columnWithoutChildren });
expect(wrapper.find(ResizableContainer)).toHaveLength(1);
expect(wrapper.find(ResizableContainer)).toExist();
});
it('should render a HoverMenu in editMode', () => {
let wrapper = setup({ component: columnWithoutChildren });
expect(wrapper.find(HoverMenu)).toHaveLength(0);
expect(wrapper.find(HoverMenu)).not.toExist();
// we cannot set props on the Row because of the WithDragDropContext wrapper
wrapper = setup({ component: columnWithoutChildren, editMode: true });
expect(wrapper.find(HoverMenu)).toHaveLength(1);
expect(wrapper.find(HoverMenu)).toExist();
});
it('should render a DeleteComponentButton in editMode', () => {
let wrapper = setup({ component: columnWithoutChildren });
expect(wrapper.find(DeleteComponentButton)).toHaveLength(0);
expect(wrapper.find(DeleteComponentButton)).not.toExist();
// we cannot set props on the Row because of the WithDragDropContext wrapper
wrapper = setup({ component: columnWithoutChildren, editMode: true });
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
expect(wrapper.find(DeleteComponentButton)).toExist();
});
it('should render a BackgroundStyleDropdown when focused', () => {
let wrapper = setup({ component: columnWithoutChildren });
expect(wrapper.find(BackgroundStyleDropdown)).toHaveLength(0);
expect(wrapper.find(BackgroundStyleDropdown)).not.toExist();
// we cannot set props on the Row because of the WithDragDropContext wrapper
wrapper = setup({ component: columnWithoutChildren, editMode: true });
@@ -120,7 +120,7 @@ describe('Column', () => {
.at(1) // first one is delete button
.simulate('click');
expect(wrapper.find(BackgroundStyleDropdown)).toHaveLength(1);
expect(wrapper.find(BackgroundStyleDropdown)).toExist();
});
it('should call deleteComponent when deleted', () => {

View File

@@ -58,23 +58,23 @@ describe('Divider', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).toHaveLength(1);
expect(wrapper.find(DragDroppable)).toExist();
});
it('should render a div with class "dashboard-component-divider"', () => {
const wrapper = setup();
expect(wrapper.find('.dashboard-component-divider')).toHaveLength(1);
expect(wrapper.find('.dashboard-component-divider')).toExist();
});
it('should render a HoverMenu with DeleteComponentButton in editMode', () => {
let wrapper = setup();
expect(wrapper.find(HoverMenu)).toHaveLength(0);
expect(wrapper.find(DeleteComponentButton)).toHaveLength(0);
expect(wrapper.find(HoverMenu)).not.toExist();
expect(wrapper.find(DeleteComponentButton)).not.toExist();
// 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);
expect(wrapper.find(HoverMenu)).toExist();
expect(wrapper.find(DeleteComponentButton)).toExist();
});
it('should call deleteComponent when deleted', () => {

View File

@@ -66,26 +66,26 @@ describe('Header', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).toHaveLength(1);
expect(wrapper.find(DragDroppable)).toExist();
});
it('should render a WithPopoverMenu', () => {
const wrapper = setup();
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
expect(wrapper.find(WithPopoverMenu)).toExist();
});
it('should render a HoverMenu in editMode', () => {
let wrapper = setup();
expect(wrapper.find(HoverMenu)).toHaveLength(0);
expect(wrapper.find(HoverMenu)).not.toExist();
// we cannot set props on the Header because of the WithDragDropContext wrapper
wrapper = setup({ editMode: true });
expect(wrapper.find(HoverMenu)).toHaveLength(1);
expect(wrapper.find(HoverMenu)).toExist();
});
it('should render an EditableTitle with meta.text', () => {
const wrapper = setup();
expect(wrapper.find(EditableTitle)).toHaveLength(1);
expect(wrapper.find(EditableTitle)).toExist();
expect(wrapper.find('input').prop('value')).toBe(props.component.meta.text);
});
@@ -105,7 +105,7 @@ describe('Header', () => {
const wrapper = setup({ editMode: true });
wrapper.find(WithPopoverMenu).simulate('click'); // focus
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
expect(wrapper.find(DeleteComponentButton)).toExist();
});
it('should call deleteComponent when deleted', () => {

View File

@@ -69,17 +69,17 @@ describe('Markdown', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).toHaveLength(1);
expect(wrapper.find(DragDroppable)).toExist();
});
it('should render a WithPopoverMenu', () => {
const wrapper = setup();
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
expect(wrapper.find(WithPopoverMenu)).toExist();
});
it('should render a ResizableContainer', () => {
const wrapper = setup();
expect(wrapper.find(ResizableContainer)).toHaveLength(1);
expect(wrapper.find(ResizableContainer)).toExist();
});
it('should only have an adjustableWidth if its parent is a Row', () => {
@@ -105,24 +105,24 @@ describe('Markdown', () => {
it('should render an Markdown when NOT focused', () => {
const wrapper = setup();
expect(wrapper.find(AceEditor)).toHaveLength(0);
expect(wrapper.find(ReactMarkdown)).toHaveLength(1);
expect(wrapper.find(AceEditor)).not.toExist();
expect(wrapper.find(ReactMarkdown)).toExist();
});
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);
expect(wrapper.find(AceEditor)).not.toExist();
expect(wrapper.find(ReactMarkdown)).toExist();
wrapper.find(WithPopoverMenu).simulate('click'); // focus + edit
expect(wrapper.find(AceEditor)).toHaveLength(1);
expect(wrapper.find(ReactMarkdown)).toHaveLength(0);
expect(wrapper.find(AceEditor)).toExist();
expect(wrapper.find(ReactMarkdown)).not.toExist();
});
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);
expect(wrapper.find(AceEditor)).toExist();
expect(wrapper.find(ReactMarkdown)).not.toExist();
// we can't call setState on Markdown bc it's not the root component, so call
// the mode dropdown onchange instead
@@ -130,8 +130,8 @@ describe('Markdown', () => {
dropdown.prop('onChange')('preview');
wrapper.update();
expect(wrapper.find(ReactMarkdown)).toHaveLength(1);
expect(wrapper.find(AceEditor)).toHaveLength(0);
expect(wrapper.find(ReactMarkdown)).toExist();
expect(wrapper.find(AceEditor)).not.toExist();
});
it('should call updateComponents when editMode changes from edit => preview, and there are markdownSource changes', () => {
@@ -158,7 +158,7 @@ describe('Markdown', () => {
const wrapper = setup({ editMode: true });
wrapper.find(WithPopoverMenu).simulate('click'); // focus
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
expect(wrapper.find(DeleteComponentButton)).toExist();
});
it('should call deleteComponent when deleted', () => {

View File

@@ -72,36 +72,36 @@ describe('Row', () => {
it('should render a DragDroppable', () => {
// don't count child DragDroppables
const wrapper = setup({ component: rowWithoutChildren });
expect(wrapper.find(DragDroppable)).toHaveLength(1);
expect(wrapper.find(DragDroppable)).toExist();
});
it('should render a WithPopoverMenu', () => {
// don't count child DragDroppables
const wrapper = setup({ component: rowWithoutChildren });
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
expect(wrapper.find(WithPopoverMenu)).toExist();
});
it('should render a HoverMenu in editMode', () => {
let wrapper = setup({ component: rowWithoutChildren });
expect(wrapper.find(HoverMenu)).toHaveLength(0);
expect(wrapper.find(HoverMenu)).not.toExist();
// we cannot set props on the Row because of the WithDragDropContext wrapper
wrapper = setup({ component: rowWithoutChildren, editMode: true });
expect(wrapper.find(HoverMenu)).toHaveLength(1);
expect(wrapper.find(HoverMenu)).toExist();
});
it('should render a DeleteComponentButton in editMode', () => {
let wrapper = setup({ component: rowWithoutChildren });
expect(wrapper.find(DeleteComponentButton)).toHaveLength(0);
expect(wrapper.find(DeleteComponentButton)).not.toExist();
// we cannot set props on the Row because of the WithDragDropContext wrapper
wrapper = setup({ component: rowWithoutChildren, editMode: true });
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
expect(wrapper.find(DeleteComponentButton)).toExist();
});
it('should render a BackgroundStyleDropdown when focused', () => {
let wrapper = setup({ component: rowWithoutChildren });
expect(wrapper.find(BackgroundStyleDropdown)).toHaveLength(0);
expect(wrapper.find(BackgroundStyleDropdown)).not.toExist();
// we cannot set props on the Row because of the WithDragDropContext wrapper
wrapper = setup({ component: rowWithoutChildren, editMode: true });
@@ -110,7 +110,7 @@ describe('Row', () => {
.at(1) // first one is delete button
.simulate('click');
expect(wrapper.find(BackgroundStyleDropdown)).toHaveLength(1);
expect(wrapper.find(BackgroundStyleDropdown)).toExist();
});
it('should call deleteComponent when deleted', () => {

View File

@@ -74,7 +74,7 @@ describe('Tabs', () => {
describe('renderType=RENDER_TAB', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).toHaveLength(1);
expect(wrapper.find(DragDroppable)).toExist();
});
it('should render an EditableTitle with meta.text', () => {
@@ -97,17 +97,17 @@ describe('Tabs', () => {
it('should render a WithPopoverMenu', () => {
const wrapper = setup();
expect(wrapper.find(WithPopoverMenu)).toHaveLength(1);
expect(wrapper.find(WithPopoverMenu)).toExist();
});
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);
expect(wrapper.find(DeleteComponentModal)).not.toExist();
wrapper = setup({ editMode: true });
wrapper.find(WithPopoverMenu).simulate('click');
expect(wrapper.find(DeleteComponentModal)).toHaveLength(1);
expect(wrapper.find(DeleteComponentModal)).toExist();
wrapper = setup({
editMode: true,
@@ -117,7 +117,7 @@ describe('Tabs', () => {
},
});
wrapper.find(WithPopoverMenu).simulate('click');
expect(wrapper.find(DeleteComponentModal)).toHaveLength(0);
expect(wrapper.find(DeleteComponentModal)).not.toExist();
});
it('should show modal when clicked delete icon', () => {

View File

@@ -71,12 +71,12 @@ 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)).toHaveLength(1);
expect(wrapper.find(DragDroppable)).toExist();
});
it('should render BootstrapTabs', () => {
const wrapper = setup();
expect(wrapper.find(BootstrapTabs)).toHaveLength(1);
expect(wrapper.find(BootstrapTabs)).toExist();
});
it('should set animation=true, mountOnEnter=true, and unmounOnExit=false on BootstrapTabs for perf', () => {
@@ -144,18 +144,18 @@ describe('Tabs', () => {
it('should render a HoverMenu in editMode', () => {
let wrapper = setup();
expect(wrapper.find(HoverMenu)).toHaveLength(0);
expect(wrapper.find(HoverMenu)).not.toExist();
wrapper = setup({ editMode: true });
expect(wrapper.find(HoverMenu)).toHaveLength(1);
expect(wrapper.find(HoverMenu)).toExist();
});
it('should render a DeleteComponentButton in editMode', () => {
let wrapper = setup();
expect(wrapper.find(DeleteComponentButton)).toHaveLength(0);
expect(wrapper.find(DeleteComponentButton)).not.toExist();
wrapper = setup({ editMode: true });
expect(wrapper.find(DeleteComponentButton)).toHaveLength(1);
expect(wrapper.find(DeleteComponentButton)).toExist();
});
it('should call deleteComponent when deleted', () => {

View File

@@ -49,7 +49,7 @@ describe('DraggableNewComponent', () => {
it('should render a DragDroppable', () => {
const wrapper = setup();
expect(wrapper.find(DragDroppable)).toHaveLength(1);
expect(wrapper.find(DragDroppable)).toExist();
});
it('should pass component={ type, id } to DragDroppable', () => {
@@ -78,6 +78,6 @@ describe('DraggableNewComponent', () => {
it('should add the passed className', () => {
const wrapper = setup();
const className = `.new-component-placeholder.${props.className}`;
expect(wrapper.find(className)).toHaveLength(1);
expect(wrapper.find(className)).toExist();
});
});

View File

@@ -32,7 +32,7 @@ describe('NewColumn', () => {
it('should render a DraggableNewComponent', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
expect(wrapper.find(DraggableNewComponent)).toExist();
});
it('should set appropriate type and id', () => {

View File

@@ -32,7 +32,7 @@ describe('NewDivider', () => {
it('should render a DraggableNewComponent', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
expect(wrapper.find(DraggableNewComponent)).toExist();
});
it('should set appropriate type and id', () => {

View File

@@ -32,7 +32,7 @@ describe('NewHeader', () => {
it('should render a DraggableNewComponent', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
expect(wrapper.find(DraggableNewComponent)).toExist();
});
it('should set appropriate type and id', () => {

View File

@@ -32,7 +32,7 @@ describe('NewRow', () => {
it('should render a DraggableNewComponent', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
expect(wrapper.find(DraggableNewComponent)).toExist();
});
it('should set appropriate type and id', () => {

View File

@@ -32,7 +32,7 @@ describe('NewTabs', () => {
it('should render a DraggableNewComponent', () => {
const wrapper = setup();
expect(wrapper.find(DraggableNewComponent)).toHaveLength(1);
expect(wrapper.find(DraggableNewComponent)).toExist();
});
it('should set appropriate type and id', () => {