From 8ff2348c3c40cf46e18c5492df3f2d57e28fa82b Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Tue, 25 Oct 2022 16:36:49 +0300 Subject: [PATCH] Tests: Use container instead of container.firstChild for snapshots (#45278) --- .../test/__snapshots__/index.js.snap | 24 +- .../components/block-breadcrumb/test/index.js | 2 +- .../test/__snapshots__/control.js.snap | 168 +++++----- .../components/color-palette/test/control.js | 2 +- .../test/__snapshots__/index.tsx.snap | 28 +- .../components/src/form-toggle/test/index.tsx | 2 +- .../h-stack/test/__snapshots__/index.tsx.snap | 66 ++-- .../components/src/h-stack/test/index.tsx | 6 +- .../test/__snapshots__/index.js.snap | 26 +- .../components/src/item-group/test/index.js | 2 +- .../text/test/__snapshots__/index.tsx.snap | 34 ++- packages/components/src/text/test/index.tsx | 4 +- .../test/__snapshots__/index.tsx.snap | 288 +++++++++--------- .../src/toggle-group-control/test/index.tsx | 4 +- .../tree-grid/test/__snapshots__/cell.js.snap | 38 +-- .../__snapshots__/roving-tab-index.js.snap | 4 +- .../tree-grid/test/__snapshots__/row.js.snap | 62 ++-- .../components/src/tree-grid/test/cell.js | 2 +- .../src/tree-grid/test/roving-tab-index.js | 2 +- packages/components/src/tree-grid/test/row.js | 4 +- .../context-system-provider.js.snap | 40 +-- .../context/test/context-system-provider.js | 6 +- .../test/__snapshots__/index.js.snap | 34 ++- .../src/ui/control-group/test/index.js | 2 +- .../test/__snapshots__/index.js.snap | 48 +-- .../src/ui/control-label/test/index.js | 6 +- .../test/__snapshots__/index.js.snap | 64 ++-- .../src/ui/form-group/test/index.js | 4 +- .../shortcut/test/__snapshots__/index.js.snap | 2 +- .../components/src/ui/shortcut/test/index.js | 2 +- .../spinner/test/__snapshots__/index.js.snap | 96 +++--- .../components/src/ui/spinner/test/index.js | 2 +- .../v-stack/test/__snapshots__/index.tsx.snap | 66 ++-- .../components/src/v-stack/test/index.tsx | 6 +- .../src/view/test/__snapshots__/index.js.snap | 58 ++-- packages/components/src/view/test/index.js | 10 +- .../test/__snapshots__/index.js.snap | 10 +- .../plugin-post-status-info/test/index.js | 2 +- 38 files changed, 647 insertions(+), 579 deletions(-) diff --git a/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap index 85dd26bc0a7f3b..01f2d73d3e5f96 100644 --- a/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap @@ -1,16 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`BlockBreadcrumb should render correctly 1`] = ` - + `; diff --git a/packages/block-editor/src/components/block-breadcrumb/test/index.js b/packages/block-editor/src/components/block-breadcrumb/test/index.js index ee8d2bc57af037..dcdf242831c710 100644 --- a/packages/block-editor/src/components/block-breadcrumb/test/index.js +++ b/packages/block-editor/src/components/block-breadcrumb/test/index.js @@ -12,7 +12,7 @@ describe( 'BlockBreadcrumb', () => { it( 'should render correctly', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); describe( 'Root label text', () => { diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 6ea0541d50696b..ddc08d9985fbbc 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -117,114 +117,116 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` min-width: 0; } -
+
-
-
- -
- - Test Color - -
-
+ +
+ + Test Color + +
+
- -
-
+ + red + + + f00 + + +
-
-
-
- + +
-
- + + `; diff --git a/packages/block-editor/src/components/color-palette/test/control.js b/packages/block-editor/src/components/color-palette/test/control.js index e3e90ea0bac836..3a5dcc657a94c4 100644 --- a/packages/block-editor/src/components/color-palette/test/control.js +++ b/packages/block-editor/src/components/color-palette/test/control.js @@ -22,6 +22,6 @@ describe( 'ColorPaletteControl', () => { /> ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); } ); diff --git a/packages/components/src/form-toggle/test/__snapshots__/index.tsx.snap b/packages/components/src/form-toggle/test/__snapshots__/index.tsx.snap index 67617127fcebde..878fce1586b348 100644 --- a/packages/components/src/form-toggle/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/form-toggle/test/__snapshots__/index.tsx.snap @@ -1,20 +1,22 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`FormToggle basic rendering should render a span element with an unchecked checkbox 1`] = ` - - +
- - + class="components-form-toggle" + > + + + + +
`; exports[`FormToggle basic rendering should render an id prop for the input checkbox 1`] = ` diff --git a/packages/components/src/form-toggle/test/index.tsx b/packages/components/src/form-toggle/test/index.tsx index 38b84b86c226b7..57c603dc4143ad 100644 --- a/packages/components/src/form-toggle/test/index.tsx +++ b/packages/components/src/form-toggle/test/index.tsx @@ -36,7 +36,7 @@ describe( 'FormToggle', () => { const { container } = render( ); expect( getInput() ).not.toBeChecked(); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); it( 'should render a checked checkbox when providing checked prop', () => { diff --git a/packages/components/src/h-stack/test/__snapshots__/index.tsx.snap b/packages/components/src/h-stack/test/__snapshots__/index.tsx.snap index 2de0fd5e8ea459..bb7cd65d8f3771 100644 --- a/packages/components/src/h-stack/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/h-stack/test/__snapshots__/index.tsx.snap @@ -25,17 +25,19 @@ exports[`props should render alignment 1`] = ` min-width: 0; } -
+
-
+ class="components-flex components-h-stack emotion-0 emotion-1" + data-wp-c16t="true" + data-wp-component="HStack" + > +
+
+
`; @@ -63,17 +65,19 @@ exports[`props should render correctly 1`] = ` min-width: 0; } -
-
+
+ class="components-flex components-h-stack emotion-0 emotion-1" + data-wp-c16t="true" + data-wp-component="HStack" + > +
+
+
`; @@ -101,16 +105,18 @@ exports[`props should render spacing 1`] = ` min-width: 0; } -
-
+
+ class="components-flex components-h-stack emotion-0 emotion-1" + data-wp-c16t="true" + data-wp-component="HStack" + > +
+
+
`; diff --git a/packages/components/src/h-stack/test/index.tsx b/packages/components/src/h-stack/test/index.tsx index 56190f81db4cdd..ea4f9c94fbe7f8 100644 --- a/packages/components/src/h-stack/test/index.tsx +++ b/packages/components/src/h-stack/test/index.tsx @@ -17,7 +17,7 @@ describe( 'props', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); test( 'should render alignment', () => { @@ -27,7 +27,7 @@ describe( 'props', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); test( 'should render spacing', () => { @@ -37,6 +37,6 @@ describe( 'props', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); } ); diff --git a/packages/components/src/item-group/test/__snapshots__/index.js.snap b/packages/components/src/item-group/test/__snapshots__/index.js.snap index 227174e8104591..3758362b5a831a 100644 --- a/packages/components/src/item-group/test/__snapshots__/index.js.snap +++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap @@ -82,22 +82,24 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = ` border-radius: 2px; } -
+
- Code is poetry +
+ Code is poetry +
diff --git a/packages/components/src/item-group/test/index.js b/packages/components/src/item-group/test/index.js index 6858c7cfa47d4e..c43e49ba1fa71c 100644 --- a/packages/components/src/item-group/test/index.js +++ b/packages/components/src/item-group/test/index.js @@ -16,7 +16,7 @@ describe( 'ItemGroup', () => { Code is poetry ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); it( 'should show borders when the isBordered prop is true', () => { diff --git a/packages/components/src/text/test/__snapshots__/index.tsx.snap b/packages/components/src/text/test/__snapshots__/index.tsx.snap index 2d962f51c74f65..e7fa80f09625cf 100644 --- a/packages/components/src/text/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/text/test/__snapshots__/index.tsx.snap @@ -31,17 +31,19 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] = box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset; } - +
- Lorem ipsum. + + Lorem ipsum. + - +
`; exports[`Text snapshot tests should render correctly 1`] = ` @@ -53,11 +55,13 @@ exports[`Text snapshot tests should render correctly 1`] = ` font-weight: normal; } - - Lorem ipsum. - +
+ + Lorem ipsum. + +
`; diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx index 2b4f4c4d6ae5df..cb33a017bcdbd9 100644 --- a/packages/components/src/text/test/index.tsx +++ b/packages/components/src/text/test/index.tsx @@ -14,7 +14,7 @@ describe( 'Text', () => { describe( 'snapshot tests', () => { test( 'should render correctly', () => { const { container } = render( Lorem ipsum. ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); } ); @@ -116,7 +116,7 @@ describe( 'Text', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); // It'll have a length of 1 because there shouldn't be anything but the single span being rendered. expect( container.firstChild?.childNodes ).toHaveLength( 1 ); } ); diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap index 51b1f8b9100cf9..8a2c3e53d14806 100644 --- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap @@ -178,103 +178,105 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = ` line-height: 1; } -
+
- - Test Toggle Group Control - -
-
-
@@ -425,76 +427,78 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = ` line-height: 1; } -
+
- - Test Toggle Group Control - -
-
-
diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx index b6f2d9a5be49dc..a23280612444ef 100644 --- a/packages/components/src/toggle-group-control/test/index.tsx +++ b/packages/components/src/toggle-group-control/test/index.tsx @@ -48,7 +48,7 @@ describe( 'ToggleGroupControl', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); it( 'with icons', () => { const { container } = render( @@ -69,7 +69,7 @@ describe( 'ToggleGroupControl', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); } ); it( 'should call onChange with proper value', () => { diff --git a/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap b/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap index 2e6955e823dd73..889b883f36c480 100644 --- a/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap +++ b/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap @@ -1,25 +1,27 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TreeGridCell uses a child render function to render children 1`] = ` -
- +
-
- - + + - - -
-
- Click Me! - -
+ + + + + +
`; diff --git a/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap b/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap index aa77ed429bd2ed..83de76cbb88a1c 100644 --- a/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap +++ b/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap @@ -2,6 +2,8 @@ exports[`RovingTabIndex does not render any elements other than its children 1`] = `
- child element +
+ child element +
`; diff --git a/packages/components/src/tree-grid/test/__snapshots__/row.js.snap b/packages/components/src/tree-grid/test/__snapshots__/row.js.snap index a5cbe7d37aa303..33d2a05bf27939 100644 --- a/packages/components/src/tree-grid/test/__snapshots__/row.js.snap +++ b/packages/components/src/tree-grid/test/__snapshots__/row.js.snap @@ -1,36 +1,40 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TreeGridRow forwards other props to the rendered tr element 1`] = ` - - - - - - -
- Test -
+
+ + + + + + +
+ Test +
+
`; exports[`TreeGridRow renders a tr with support for level, positionInSet and setSize props 1`] = ` - - - - - - -
- Test -
+
+ + + + + + +
+ Test +
+
`; diff --git a/packages/components/src/tree-grid/test/cell.js b/packages/components/src/tree-grid/test/cell.js index 4caf3857823699..7e62f751512d24 100644 --- a/packages/components/src/tree-grid/test/cell.js +++ b/packages/components/src/tree-grid/test/cell.js @@ -49,6 +49,6 @@ describe( 'TreeGridCell', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); } ); diff --git a/packages/components/src/tree-grid/test/roving-tab-index.js b/packages/components/src/tree-grid/test/roving-tab-index.js index e1a05f367ce6ef..f346de4f0a1a3a 100644 --- a/packages/components/src/tree-grid/test/roving-tab-index.js +++ b/packages/components/src/tree-grid/test/roving-tab-index.js @@ -16,6 +16,6 @@ describe( 'RovingTabIndex', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); } ); diff --git a/packages/components/src/tree-grid/test/row.js b/packages/components/src/tree-grid/test/row.js index afd867ca3bfc1f..77b092c0735224 100644 --- a/packages/components/src/tree-grid/test/row.js +++ b/packages/components/src/tree-grid/test/row.js @@ -20,7 +20,7 @@ describe( 'TreeGridRow', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); it( 'forwards other props to the rendered tr element', () => { @@ -39,6 +39,6 @@ describe( 'TreeGridRow', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); } ); diff --git a/packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap b/packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap index 0191524d2c644b..b69da20537207f 100644 --- a/packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap +++ b/packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap @@ -1,29 +1,35 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`props should render _override props 1`] = ` -
- Code is Poetry +
+
+ Code is Poetry +
`; exports[`props should render context props 1`] = ` -
- Code is Poetry +
+
+ Code is Poetry +
`; exports[`props should render correctly 1`] = ` -
+
+
+
`; diff --git a/packages/components/src/ui/context/test/context-system-provider.js b/packages/components/src/ui/context/test/context-system-provider.js index e8c2b5c56286f9..8b052bc06c27fe 100644 --- a/packages/components/src/ui/context/test/context-system-provider.js +++ b/packages/components/src/ui/context/test/context-system-provider.js @@ -30,7 +30,7 @@ describe( 'props', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); test( 'should render context props', () => { @@ -60,7 +60,7 @@ describe( 'props', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); expect( container.firstChild.innerHTML ).toContain( 'Code is Poetry' ); } ); @@ -98,7 +98,7 @@ describe( 'props', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); const el = container.querySelector( '.test-component' ); diff --git a/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap index b5ab9da09702f5..d9f26aa5af8d20 100644 --- a/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap @@ -28,22 +28,24 @@ exports[`props should render correctly 1`] = ` z-index: 1; } -
- - + + +
`; diff --git a/packages/components/src/ui/control-group/test/index.js b/packages/components/src/ui/control-group/test/index.js index 6bfd4318b8c13a..0587c329b40569 100644 --- a/packages/components/src/ui/control-group/test/index.js +++ b/packages/components/src/ui/control-group/test/index.js @@ -17,6 +17,6 @@ describe( 'props', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); } ); diff --git a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap b/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap index d0582df5cde06a..ffe2d42932d002 100644 --- a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap @@ -37,13 +37,15 @@ exports[`props should render correctly 1`] = ` } } - +
+ +
`; exports[`props should render no truncate 1`] = ` @@ -79,13 +81,15 @@ exports[`props should render no truncate 1`] = ` } } - +
+ +
`; exports[`props should render size 1`] = ` @@ -125,11 +129,13 @@ exports[`props should render size 1`] = ` } } - +
+ +
`; diff --git a/packages/components/src/ui/control-label/test/index.js b/packages/components/src/ui/control-label/test/index.js index e5b46f73bb043e..20a9c99c833b0a 100644 --- a/packages/components/src/ui/control-label/test/index.js +++ b/packages/components/src/ui/control-label/test/index.js @@ -12,7 +12,7 @@ describe( 'props', () => { test( 'should render correctly', () => { const { container } = render( Label ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); test( 'should render htmlFor', () => { @@ -28,7 +28,7 @@ describe( 'props', () => { Label ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); test( 'should render no truncate', () => { @@ -36,6 +36,6 @@ describe( 'props', () => { Label ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); } ); diff --git a/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap index b0df52ceb94f04..b10a44c09d5d8b 100644 --- a/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap @@ -38,23 +38,25 @@ exports[`props should render alignLabel 1`] = ` } } -
-
`; @@ -96,22 +98,24 @@ exports[`props should render vertically 1`] = ` } } -
-
`; diff --git a/packages/components/src/ui/form-group/test/index.js b/packages/components/src/ui/form-group/test/index.js index f221d7352c317e..a9c0edb70efadb 100644 --- a/packages/components/src/ui/form-group/test/index.js +++ b/packages/components/src/ui/form-group/test/index.js @@ -67,7 +67,7 @@ describe( 'props', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); test( 'should render vertically', () => { @@ -77,7 +77,7 @@ describe( 'props', () => { ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); } ); /* eslint-enable no-restricted-syntax */ diff --git a/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap b/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap index 43b32bfa080401..edd4ed91bc3529 100644 --- a/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap @@ -10,4 +10,4 @@ exports[`Shortcut should render a span with the shortcut text 1`] = ` `; -exports[`Shortcut should render null when no shortcut is provided 1`] = `null`; +exports[`Shortcut should render null when no shortcut is provided 1`] = `
`; diff --git a/packages/components/src/ui/shortcut/test/index.js b/packages/components/src/ui/shortcut/test/index.js index 09329cfdf34cf9..7dc49f7b3f6632 100644 --- a/packages/components/src/ui/shortcut/test/index.js +++ b/packages/components/src/ui/shortcut/test/index.js @@ -11,7 +11,7 @@ import { Shortcut } from '..'; describe( 'Shortcut', () => { it( 'should render null when no shortcut is provided', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container ).toMatchSnapshot(); } ); it( 'should render a span with the shortcut text', () => { diff --git a/packages/components/src/ui/spinner/test/__snapshots__/index.js.snap b/packages/components/src/ui/spinner/test/__snapshots__/index.js.snap index 054fff26111b61..a97207b549fd0f 100644 --- a/packages/components/src/ui/spinner/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/spinner/test/__snapshots__/index.js.snap @@ -179,58 +179,60 @@ exports[`props should render correctly 1`] = ` transform: rotate( 330deg ) translate( 0, -130% ); } -