Skip to content

Commit

Permalink
Tests: Use container instead of container.firstChild for snapshots (#…
Browse files Browse the repository at this point in the history 
…45278)
  • Loading branch information
@tyxla
tyxla authored Oct 25, 2022
1 parent a96f315 commit 8ff2348
Show file tree
Hide file tree
Showing 38 changed files with 647 additions and 579 deletions.
24 changes: 13 additions & 11 deletions packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`BlockBreadcrumb should render correctly 1`] = `
<ul
aria-label="Block breadcrumb"
class="block-editor-block-breadcrumb"
role="list"
>
<li
aria-current="true"
class="block-editor-block-breadcrumb__current"
<div>
<ul
aria-label="Block breadcrumb"
class="block-editor-block-breadcrumb"
role="list"
>
Document
</li>
</ul>
<li
aria-current="true"
class="block-editor-block-breadcrumb__current"
>
Document
</li>
</ul>
</div>
`;
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-breadcrumb/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe( 'BlockBreadcrumb', () => {
it( 'should render correctly', () => {
const { container } = render( <BlockBreadcrumb /> );

expect( container.firstChild ).toMatchSnapshot();
expect( container ).toMatchSnapshot();
} );

describe( 'Root label text', () => {
Expand Down
168 changes: 85 additions & 83 deletions packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,114 +117,116 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
min-width: 0;
}
<div
class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
>
<div>
<div
class="components-base-control__field emotion-2 emotion-3"
class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
>
<fieldset
class="block-editor-color-gradient-control__fieldset"
<div
class="components-base-control__field emotion-2 emotion-3"
>
<div
class="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
data-wp-c16t="true"
data-wp-component="VStack"
<fieldset
class="block-editor-color-gradient-control__fieldset"
>
<legend>
<div
class="block-editor-color-gradient-control__color-indicator"
>
<span
class="components-base-control__label emotion-6 emotion-7"
>
Test Color
</span>
</div>
</legend>
<div
class="block-editor-color-gradient-control__panel"
class="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
data-wp-c16t="true"
data-wp-component="VStack"
>
<legend>
<div
class="block-editor-color-gradient-control__color-indicator"
>
<span
class="components-base-control__label emotion-6 emotion-7"
>
Test Color
</span>
</div>
</legend>
<div
class="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
data-wp-c16t="true"
data-wp-component="VStack"
class="block-editor-color-gradient-control__panel"
>
<div
class="components-dropdown"
tabindex="-1"
class="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
data-wp-c16t="true"
data-wp-component="VStack"
>
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
data-wp-c16t="true"
data-wp-component="Flex"
style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
<div
class="components-dropdown"
tabindex="-1"
>
<span
class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
red
</span>
<span
class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
data-wp-c16t="true"
data-wp-component="FlexItem"
data-wp-component="Flex"
style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
>
f00
</span>
</button>
</div>
<div
class="components-circular-option-picker"
>
<span
class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
red
</span>
<span
class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
f00
</span>
</button>
</div>
<div
class="components-circular-option-picker__swatches"
class="components-circular-option-picker"
>
<div
class="components-circular-option-picker__option-wrapper"
class="components-circular-option-picker__swatches"
>
<button
aria-label="Color: red"
aria-pressed="true"
class="components-button components-circular-option-picker__option is-pressed"
style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
type="button"
/>
<svg
aria-hidden="true"
fill="#000"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
<div
class="components-circular-option-picker__option-wrapper"
>
<path
d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
<button
aria-label="Color: red"
aria-pressed="true"
class="components-button components-circular-option-picker__option is-pressed"
style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
type="button"
/>
</svg>
<svg
aria-hidden="true"
fill="#000"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
/>
</svg>
</div>
</div>
</div>
<div
class="components-circular-option-picker__custom-clear-wrapper"
>
<button
class="components-button components-circular-option-picker__clear is-tertiary"
type="button"
<div
class="components-circular-option-picker__custom-clear-wrapper"
>
Clear
</button>
<button
class="components-button components-circular-option-picker__clear is-tertiary"
type="button"
>
Clear
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</fieldset>
</div>
</div>
</div>
`;
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/color-palette/test/control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,6 @@ describe( 'ColorPaletteControl', () => {
/>
);

expect( container.firstChild ).toMatchSnapshot();
expect( container ).toMatchSnapshot();
} );
} );
28 changes: 15 additions & 13 deletions packages/components/src/form-toggle/test/__snapshots__/index.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -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`] = `
<span
class="components-form-toggle"
>
<input
class="components-form-toggle__input"
type="checkbox"
/>
<div>
<span
class="components-form-toggle__track"
/>
<span
class="components-form-toggle__thumb"
/>
</span>
class="components-form-toggle"
>
<input
class="components-form-toggle__input"
type="checkbox"
/>
<span
class="components-form-toggle__track"
/>
<span
class="components-form-toggle__thumb"
/>
</span>
</div>
`;

exports[`FormToggle basic rendering should render an id prop for the input checkbox 1`] = `
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/form-toggle/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe( 'FormToggle', () => {
const { container } = render( <FormToggle onChange={ noop } /> );

expect( getInput() ).not.toBeChecked();
expect( container.firstChild ).toMatchSnapshot();
expect( container ).toMatchSnapshot();
} );

it( 'should render a checked checkbox when providing checked prop', () => {
Expand Down
66 changes: 36 additions & 30 deletions packages/components/src/h-stack/test/__snapshots__/index.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,19 @@ exports[`props should render alignment 1`] = `
min-width: 0;
}
<div
class="components-flex components-h-stack emotion-0 emotion-1"
data-wp-c16t="true"
data-wp-component="HStack"
>
<div>
<div
class="emotion-2 emotion-1"
/>
<div
class="emotion-2 emotion-1"
/>
class="components-flex components-h-stack emotion-0 emotion-1"
data-wp-c16t="true"
data-wp-component="HStack"
>
<div
class="emotion-2 emotion-1"
/>
<div
class="emotion-2 emotion-1"
/>
</div>
</div>
`;

Expand Down Expand Up @@ -63,17 +65,19 @@ exports[`props should render correctly 1`] = `
min-width: 0;
}
<div
class="components-flex components-h-stack emotion-0 emotion-1"
data-wp-c16t="true"
data-wp-component="HStack"
>
<div
class="emotion-2 emotion-1"
/>
<div>
<div
class="emotion-2 emotion-1"
/>
class="components-flex components-h-stack emotion-0 emotion-1"
data-wp-c16t="true"
data-wp-component="HStack"
>
<div
class="emotion-2 emotion-1"
/>
<div
class="emotion-2 emotion-1"
/>
</div>
</div>
`;

Expand Down Expand Up @@ -101,16 +105,18 @@ exports[`props should render spacing 1`] = `
min-width: 0;
}
<div
class="components-flex components-h-stack emotion-0 emotion-1"
data-wp-c16t="true"
data-wp-component="HStack"
>
<div
class="emotion-2 emotion-1"
/>
<div>
<div
class="emotion-2 emotion-1"
/>
class="components-flex components-h-stack emotion-0 emotion-1"
data-wp-c16t="true"
data-wp-component="HStack"
>
<div
class="emotion-2 emotion-1"
/>
<div
class="emotion-2 emotion-1"
/>
</div>
</div>
`;
Loading

0 comments on commit 8ff2348

Please sign in to comment.