diff --git a/scripts/jest/setup/throw_on_console_error.js b/scripts/jest/setup/throw_on_console_error.js index b0c208cd5b8..534a7e36a8b 100644 --- a/scripts/jest/setup/throw_on_console_error.js +++ b/scripts/jest/setup/throw_on_console_error.js @@ -37,18 +37,5 @@ console.error = (message, ...rest) => { return; } - // Print React validateDOMNesting warning as a console.warn instead - // of throwing an error. - // TODO: Remove when edge-case DOM nesting is fixed in all components - if ( - typeof message === 'string' && - message.startsWith( - 'Warning: validateDOMNesting(...): %s cannot appear as a child of <%s>' - ) - ) { - console.warn(message, ...rest); - return; - } - throw new Error(format(message, ...rest)); }; diff --git a/src/components/table/__snapshots__/table_footer.test.tsx.snap b/src/components/table/__snapshots__/table_footer.test.tsx.snap index 2ef311c3160..0fc2a8a0b0f 100644 --- a/src/components/table/__snapshots__/table_footer.test.tsx.snap +++ b/src/components/table/__snapshots__/table_footer.test.tsx.snap @@ -1,15 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiTableFooter is rendered 1`] = ` -
+ - children + - +
+ children +
`; diff --git a/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap b/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap index 8b98900d655..7381fc37986 100644 --- a/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap +++ b/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap @@ -1,129 +1,177 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiTableFooterCell align defaults to left 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`EuiTableFooterCell align renders center when specified 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`EuiTableFooterCell align renders right when specified 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`EuiTableFooterCell is rendered 1`] = ` - -
- - children - -
- + + + + + + +
+
+ + children + +
+
`; exports[`EuiTableFooterCell width and style accepts style attribute 1`] = ` - -
- - Test - -
- + + + + + + +
+
+ + Test + +
+
`; exports[`EuiTableFooterCell width and style accepts width attribute 1`] = ` - -
- - Test - -
- + + + + + + +
+
+ + Test + +
+
`; exports[`EuiTableFooterCell width and style accepts width attribute as number 1`] = ` - -
- - Test - -
- + + + + + + +
+
+ + Test + +
+
`; exports[`EuiTableFooterCell width and style resolves style and width attribute 1`] = ` - -
- - Test - -
- + + + + + + +
+
+ + Test + +
+
`; diff --git a/src/components/table/__snapshots__/table_header.test.tsx.snap b/src/components/table/__snapshots__/table_header.test.tsx.snap index 518627c1afe..a23dfae2dd2 100644 --- a/src/components/table/__snapshots__/table_header.test.tsx.snap +++ b/src/components/table/__snapshots__/table_header.test.tsx.snap @@ -1,25 +1,29 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiTableHeader is rendered 1`] = ` - - - - children - - - + + + + + + +
+ children +
`; exports[`EuiTableHeader is rendered without 1`] = ` - - - - children - - - + + + + + + +
+ children +
`; diff --git a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap index 92ee353d553..e60c0af7ec8 100644 --- a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap +++ b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap @@ -1,270 +1,348 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`align defaults to left 1`] = ` - - - - - + + + + + + +
+ + + +
`; exports[`align renders center when specified 1`] = ` - - - - - + + + + + + +
+ + + +
`; exports[`align renders right when specified 1`] = ` - - - - - + + + + + + +
+ + + +
`; exports[`renders EuiTableHeaderCell 1`] = ` - - - - children - - - + + + + + + +
+ + + children + + +
`; exports[`renders td when children is null/undefined 1`] = ` - - - - - + + + + + + +
+ + + +
`; exports[`sorting does not render a button with readOnly 1`] = ` - - - - Test - - - - + + + + + + +
+ + + Test + + + +
`; exports[`sorting is rendered with isSortAscending 1`] = ` - - - - Test - - - - + + + + + + +
+ + + Test + + + +
`; exports[`sorting is rendered with isSorted 1`] = ` - - - - Test - - - - + + + + + + +
+ + + Test + + + +
`; exports[`sorting renders a button with onSort 1`] = ` - - - + + + + + `; exports[`width and style accepts style attribute 1`] = ` - - - - Test - - - + + + + + + +
+ + + Test + + +
`; exports[`width and style accepts width attribute 1`] = ` - - - - Test - - - + + + + + + +
+ + + Test + + +
`; exports[`width and style accepts width attribute as number 1`] = ` - - - - Test - - - + + + + + + +
+ + + Test + + +
`; exports[`width and style resolves style and width attribute 1`] = ` - - - - Test - - - + + + + + + +
+ + + Test + + +
`; diff --git a/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap index fa187eb71df..ecb526bbd67 100644 --- a/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap +++ b/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap @@ -1,70 +1,100 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiTableHeaderCellCheckbox is rendered 1`] = ` - -
- + + + + + + +
+
+
`; exports[`EuiTableHeaderCellCheckbox width and style accepts style attribute 1`] = ` - -
- Test -
- + + + + + + +
+
+ Test +
+
`; exports[`EuiTableHeaderCellCheckbox width and style accepts width attribute 1`] = ` - -
- Test -
- + + + + + + +
+
+ Test +
+
`; exports[`EuiTableHeaderCellCheckbox width and style accepts width attribute as number 1`] = ` - -
- Test -
- + + + + + + +
+
+ Test +
+
`; exports[`EuiTableHeaderCellCheckbox width and style resolves style and width attribute 1`] = ` - -
- Test -
- + + + + + + +
+
+ Test +
+
`; diff --git a/src/components/table/__snapshots__/table_row.test.tsx.snap b/src/components/table/__snapshots__/table_row.test.tsx.snap index 2cd1f5c5c29..2cf34108c6f 100644 --- a/src/components/table/__snapshots__/table_row.test.tsx.snap +++ b/src/components/table/__snapshots__/table_row.test.tsx.snap @@ -1,41 +1,49 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`isSelected renders true when specified 1`] = ` - - -
+ + - -
- - + +
+ +
+ + + + `; exports[`renders EuiTableRow 1`] = ` - - -
+ + - - hi - -
- - +
+ + hi + +
+ + + + `; diff --git a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap index 794bc452819..863bc72681c 100644 --- a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap +++ b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap @@ -1,251 +1,353 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`align defaults to left 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`align renders center when specified 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`align renders right when specified 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`children's className merges new classnames into existing ones 1`] = ` - -
-
-
- + + + + + + +
+
+
+
+
`; exports[`renders EuiTableRowCell 1`] = ` - -
- - children - -
- + + + + + + +
+
+ + children + +
+
`; exports[`textOnly defaults to true 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`textOnly is rendered when specified 1`] = ` - -
- + + + + + + +
+
+
`; exports[`truncateText defaults to false 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`truncateText renders lines configuration 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`truncateText renders true 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`valign defaults to middle 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`valign renders bottom when specified 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`valign renders top when specified 1`] = ` - -
- -
- + + + + + + +
+
+ +
+
`; exports[`width and style accepts style attribute 1`] = ` - -
- - Test - -
- + + + + + + +
+
+ + Test + +
+
`; exports[`width and style accepts width attribute 1`] = ` - -
- - Test - -
- + + + + + + +
+
+ + Test + +
+
`; exports[`width and style accepts width attribute as number 1`] = ` - -
- - Test - -
- + + + + + + +
+
+ + Test + +
+
`; exports[`width and style resolves style and width attribute 1`] = ` - -
- - Test - -
- + + + + + + +
+
+ + Test + +
+
`; diff --git a/src/components/table/__snapshots__/table_row_cell_checkbox.test.tsx.snap b/src/components/table/__snapshots__/table_row_cell_checkbox.test.tsx.snap index 504e19fe842..f81ba97cd20 100644 --- a/src/components/table/__snapshots__/table_row_cell_checkbox.test.tsx.snap +++ b/src/components/table/__snapshots__/table_row_cell_checkbox.test.tsx.snap @@ -1,13 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiTableRowCellCheckbox is rendered 1`] = ` - -
- + + + + + + +
+
+
`; diff --git a/src/components/table/table_footer.test.tsx b/src/components/table/table_footer.test.tsx index 22a7f395b5d..8f0318754d3 100644 --- a/src/components/table/table_footer.test.tsx +++ b/src/components/table/table_footer.test.tsx @@ -15,9 +15,13 @@ import { EuiTableFooter } from './table_footer'; describe('EuiTableFooter', () => { test('is rendered', () => { const { container } = render( - children + + + + +
children
); - expect(container).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/src/components/table/table_footer_cell.test.tsx b/src/components/table/table_footer_cell.test.tsx index fd0d3d960db..b3581d2406a 100644 --- a/src/components/table/table_footer_cell.test.tsx +++ b/src/components/table/table_footer_cell.test.tsx @@ -12,9 +12,18 @@ import { render } from '../../test/rtl'; import { EuiTableFooterCell } from './table_footer_cell'; -import { RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '../../services'; +import { CENTER_ALIGNMENT, RIGHT_ALIGNMENT } from '../../services'; import { WARNING_MESSAGE } from './utils'; +const renderInTableFooter = (cell: React.ReactElement) => + render( + + + {cell} + +
+ ); + describe('EuiTableFooterCell', () => { const _consoleWarn = console.warn; beforeAll(() => { @@ -29,7 +38,7 @@ describe('EuiTableFooterCell', () => { }); test('is rendered', () => { - const { container } = render( + const { container } = renderInTableFooter( children ); @@ -38,13 +47,13 @@ describe('EuiTableFooterCell', () => { describe('align', () => { test('defaults to left', () => { - const { container } = render(); + const { container } = renderInTableFooter(); expect(container.firstChild).toMatchSnapshot(); }); test('renders right when specified', () => { - const { container } = render( + const { container } = renderInTableFooter( ); @@ -52,7 +61,7 @@ describe('EuiTableFooterCell', () => { }); test('renders center when specified', () => { - const { container } = render( + const { container } = renderInTableFooter( ); @@ -62,7 +71,7 @@ describe('EuiTableFooterCell', () => { describe('width and style', () => { test('accepts style attribute', () => { - const { container } = render( + const { container } = renderInTableFooter( Test ); @@ -70,7 +79,7 @@ describe('EuiTableFooterCell', () => { }); test('accepts width attribute', () => { - const { container } = render( + const { container } = renderInTableFooter( Test ); @@ -78,7 +87,7 @@ describe('EuiTableFooterCell', () => { }); test('accepts width attribute as number', () => { - const { container } = render( + const { container } = renderInTableFooter( Test ); @@ -86,7 +95,7 @@ describe('EuiTableFooterCell', () => { }); test('resolves style and width attribute', () => { - const { container } = render( + const { container } = renderInTableFooter( Test diff --git a/src/components/table/table_header.test.tsx b/src/components/table/table_header.test.tsx index 99184636b97..82704768e15 100644 --- a/src/components/table/table_header.test.tsx +++ b/src/components/table/table_header.test.tsx @@ -15,20 +15,24 @@ import { EuiTableHeader } from './table_header'; describe('EuiTableHeader', () => { test('is rendered', () => { const { container } = render( - - children - + + + + +
children
); expect(container.firstChild).toMatchSnapshot(); }); test('is rendered without ', () => { const { container } = render( - - - children - - + + + + + + +
children
); expect(container.firstChild).toMatchSnapshot(); }); diff --git a/src/components/table/table_header_cell.test.tsx b/src/components/table/table_header_cell.test.tsx index ba5cb666770..78c960b07dc 100644 --- a/src/components/table/table_header_cell.test.tsx +++ b/src/components/table/table_header_cell.test.tsx @@ -15,8 +15,17 @@ import { EuiTableHeaderCell } from './table_header_cell'; import { RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '../../services'; import { WARNING_MESSAGE } from './utils'; +const renderInTableHeader = (cell: React.ReactElement) => + render( + + + {cell} + +
+ ); + test('renders EuiTableHeaderCell', () => { - const { container } = render( + const { container } = renderInTableHeader( children ); @@ -24,20 +33,22 @@ test('renders EuiTableHeaderCell', () => { }); test('renders td when children is null/undefined', () => { - const { container } = render(); + const { container } = renderInTableHeader( + + ); expect(container.firstChild).toMatchSnapshot(); }); describe('align', () => { test('defaults to left', () => { - const { container } = render(); + const { container } = renderInTableHeader(); expect(container.firstChild).toMatchSnapshot(); }); test('renders right when specified', () => { - const { container } = render( + const { container } = renderInTableHeader( ); @@ -45,7 +56,7 @@ describe('align', () => { }); test('renders center when specified', () => { - const { container } = render( + const { container } = renderInTableHeader( ); @@ -55,7 +66,7 @@ describe('align', () => { describe('sorting', () => { test('is rendered with isSorted', () => { - const { container } = render( + const { container } = renderInTableHeader( Test ); @@ -63,7 +74,7 @@ describe('sorting', () => { }); test('is rendered with isSortAscending', () => { - const { container } = render( + const { container } = renderInTableHeader( Test @@ -73,7 +84,7 @@ describe('sorting', () => { }); test('renders a button with onSort', () => { - const { container } = render( + const { container } = renderInTableHeader( {}}> Test @@ -83,7 +94,7 @@ describe('sorting', () => { }); test('does not render a button with readOnly', () => { - const { container } = render( + const { container } = renderInTableHeader( {}}> Test @@ -107,7 +118,7 @@ describe('width and style', () => { }); test('accepts style attribute', () => { - const { container } = render( + const { container } = renderInTableHeader( Test ); @@ -115,7 +126,7 @@ describe('width and style', () => { }); test('accepts width attribute', () => { - const { container } = render( + const { container } = renderInTableHeader( Test ); @@ -123,7 +134,7 @@ describe('width and style', () => { }); test('accepts width attribute as number', () => { - const { container } = render( + const { container } = renderInTableHeader( Test ); @@ -131,7 +142,7 @@ describe('width and style', () => { }); test('resolves style and width attribute', () => { - const { container } = render( + const { container } = renderInTableHeader( Test diff --git a/src/components/table/table_header_cell_checkbox.test.tsx b/src/components/table/table_header_cell_checkbox.test.tsx index 30f06c38fb5..e1a5a4486c1 100644 --- a/src/components/table/table_header_cell_checkbox.test.tsx +++ b/src/components/table/table_header_cell_checkbox.test.tsx @@ -13,6 +13,15 @@ import { render } from '../../test/rtl'; import { EuiTableHeaderCellCheckbox } from './table_header_cell_checkbox'; import { WARNING_MESSAGE } from './utils'; +const renderInTableHeader = (cell: React.ReactElement) => + render( + + + {cell} + +
+ ); + describe('EuiTableHeaderCellCheckbox', () => { const _consoleWarn = console.warn; beforeAll(() => { @@ -27,7 +36,7 @@ describe('EuiTableHeaderCellCheckbox', () => { }); test('is rendered', () => { - const { container } = render( + const { container } = renderInTableHeader( ); @@ -36,7 +45,7 @@ describe('EuiTableHeaderCellCheckbox', () => { describe('width and style', () => { test('accepts style attribute', () => { - const { container } = render( + const { container } = renderInTableHeader( Test @@ -46,7 +55,7 @@ describe('EuiTableHeaderCellCheckbox', () => { }); test('accepts width attribute', () => { - const { container } = render( + const { container } = renderInTableHeader( Test @@ -56,7 +65,7 @@ describe('EuiTableHeaderCellCheckbox', () => { }); test('accepts width attribute as number', () => { - const { container } = render( + const { container } = renderInTableHeader( Test @@ -66,7 +75,7 @@ describe('EuiTableHeaderCellCheckbox', () => { }); test('resolves style and width attribute', () => { - const { container } = render( + const { container } = renderInTableHeader( Test diff --git a/src/components/table/table_row.test.tsx b/src/components/table/table_row.test.tsx index ba7e68e029b..945df026f60 100644 --- a/src/components/table/table_row.test.tsx +++ b/src/components/table/table_row.test.tsx @@ -14,8 +14,15 @@ import { EuiTableRow } from './table_row'; import { EuiTableRowCell } from './table_row_cell'; +const renderInTable = (row: React.ReactElement) => + render( + + {row} +
+ ); + test('renders EuiTableRow', () => { - const { container } = render( + const { container } = renderInTable( hi @@ -26,7 +33,7 @@ test('renders EuiTableRow', () => { describe('isSelected', () => { test('renders true when specified', () => { - const { container } = render( + const { container } = renderInTable( diff --git a/src/components/table/table_row_cell.test.tsx b/src/components/table/table_row_cell.test.tsx index 1a3ef10ba43..b2f5a315a44 100644 --- a/src/components/table/table_row_cell.test.tsx +++ b/src/components/table/table_row_cell.test.tsx @@ -12,11 +12,20 @@ import { render } from '../../test/rtl'; import { EuiTableRowCell } from './table_row_cell'; -import { RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '../../services/alignment'; +import { CENTER_ALIGNMENT, RIGHT_ALIGNMENT } from '../../services/alignment'; import { WARNING_MESSAGE } from './utils'; +const renderInTableRow = (cell: React.ReactElement) => + render( + + + {cell} + +
+ ); + test('renders EuiTableRowCell', () => { - const { container } = render( + const { container } = renderInTableRow( children ); @@ -25,19 +34,23 @@ test('renders EuiTableRowCell', () => { describe('align', () => { test('defaults to left', () => { - const { container } = render(); + const { container } = renderInTableRow(); expect(container.firstChild).toMatchSnapshot(); }); test('renders right when specified', () => { - const { container } = render(); + const { container } = renderInTableRow( + + ); expect(container.firstChild).toMatchSnapshot(); }); test('renders center when specified', () => { - const { container } = render(); + const { container } = renderInTableRow( + + ); expect(container.firstChild).toMatchSnapshot(); }); @@ -45,19 +58,19 @@ describe('align', () => { describe('valign', () => { test('defaults to middle', () => { - const { container } = render(); + const { container } = renderInTableRow(); expect(container.firstChild).toMatchSnapshot(); }); test('renders top when specified', () => { - const { container } = render(); + const { container } = renderInTableRow(); expect(container.firstChild).toMatchSnapshot(); }); test('renders bottom when specified', () => { - const { container } = render(); + const { container } = renderInTableRow(); expect(container.firstChild).toMatchSnapshot(); }); @@ -65,13 +78,15 @@ describe('valign', () => { describe('textOnly', () => { test('defaults to true', () => { - const { container } = render(); + const { container } = renderInTableRow(); expect(container.firstChild).toMatchSnapshot(); }); test('is rendered when specified', () => { - const { container } = render(); + const { container } = renderInTableRow( + + ); expect(container.firstChild).toMatchSnapshot(); }); @@ -79,13 +94,15 @@ describe('textOnly', () => { describe('truncateText', () => { it('defaults to false', () => { - const { container } = render(); + const { container } = renderInTableRow(); expect(container.firstChild).toMatchSnapshot(); }); it('renders true', () => { - const { container } = render(); + const { container } = renderInTableRow( + + ); expect( container.querySelector('.euiTableCellContent--truncateText') @@ -94,7 +111,7 @@ describe('truncateText', () => { }); test('renders lines configuration', () => { - const { container } = render( + const { container } = renderInTableRow( ); @@ -110,7 +127,7 @@ describe('truncateText', () => { describe("children's className", () => { test('merges new classnames into existing ones', () => { - const { container } = render( + const { container } = renderInTableRow(
@@ -134,7 +151,7 @@ describe('width and style', () => { }); test('accepts style attribute', () => { - const { container } = render( + const { container } = renderInTableRow( Test ); @@ -142,7 +159,7 @@ describe('width and style', () => { }); test('accepts width attribute', () => { - const { container } = render( + const { container } = renderInTableRow( Test ); @@ -150,7 +167,7 @@ describe('width and style', () => { }); test('accepts width attribute as number', () => { - const { container } = render( + const { container } = renderInTableRow( Test ); @@ -158,7 +175,7 @@ describe('width and style', () => { }); test('resolves style and width attribute', () => { - const { container } = render( + const { container } = renderInTableRow( Test diff --git a/src/components/table/table_row_cell_checkbox.test.tsx b/src/components/table/table_row_cell_checkbox.test.tsx index 1f343495025..ac19e4c8263 100644 --- a/src/components/table/table_row_cell_checkbox.test.tsx +++ b/src/components/table/table_row_cell_checkbox.test.tsx @@ -15,7 +15,13 @@ import { EuiTableRowCellCheckbox } from './table_row_cell_checkbox'; describe('EuiTableRowCellCheckbox', () => { test('is rendered', () => { const { container } = render( - + + + + + + +
); expect(container.firstChild).toMatchSnapshot();