Update test renderer in few components, (https://github.com/woocommerce/woocommerce-admin/pull/7425)
from `react-test-renderer` to `{ render } from '@testing-library/react'`,
to avoid confision like https://github.com/woocommerce/woocommerce-admin/pull/7378#issuecomment-885870676.
Update snapshots respectively.
This commit is contained in:
Tomek Wytrębowicz
GitHub
parent
52e69697f8
commit
4e153faa35
|
|
@ -1,11 +1,78 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`AnimationSlider it renders correctly 1`] = `
|
exports[`AnimationSlider it renders correctly 1`] = `
|
||||||
<div
|
Object {
|
||||||
className="woocommerce-slide-animation animate-left"
|
"asFragment": [Function],
|
||||||
>
|
"baseElement": <body>
|
||||||
<div>
|
<div>
|
||||||
<div />
|
<div
|
||||||
</div>
|
class="woocommerce-slide-animation animate-left"
|
||||||
</div>
|
>
|
||||||
|
<div>
|
||||||
|
<div />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>,
|
||||||
|
"container": <div>
|
||||||
|
<div
|
||||||
|
class="woocommerce-slide-animation animate-left"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
"debug": [Function],
|
||||||
|
"findAllByAltText": [Function],
|
||||||
|
"findAllByDisplayValue": [Function],
|
||||||
|
"findAllByLabelText": [Function],
|
||||||
|
"findAllByPlaceholderText": [Function],
|
||||||
|
"findAllByRole": [Function],
|
||||||
|
"findAllByTestId": [Function],
|
||||||
|
"findAllByText": [Function],
|
||||||
|
"findAllByTitle": [Function],
|
||||||
|
"findByAltText": [Function],
|
||||||
|
"findByDisplayValue": [Function],
|
||||||
|
"findByLabelText": [Function],
|
||||||
|
"findByPlaceholderText": [Function],
|
||||||
|
"findByRole": [Function],
|
||||||
|
"findByTestId": [Function],
|
||||||
|
"findByText": [Function],
|
||||||
|
"findByTitle": [Function],
|
||||||
|
"getAllByAltText": [Function],
|
||||||
|
"getAllByDisplayValue": [Function],
|
||||||
|
"getAllByLabelText": [Function],
|
||||||
|
"getAllByPlaceholderText": [Function],
|
||||||
|
"getAllByRole": [Function],
|
||||||
|
"getAllByTestId": [Function],
|
||||||
|
"getAllByText": [Function],
|
||||||
|
"getAllByTitle": [Function],
|
||||||
|
"getByAltText": [Function],
|
||||||
|
"getByDisplayValue": [Function],
|
||||||
|
"getByLabelText": [Function],
|
||||||
|
"getByPlaceholderText": [Function],
|
||||||
|
"getByRole": [Function],
|
||||||
|
"getByTestId": [Function],
|
||||||
|
"getByText": [Function],
|
||||||
|
"getByTitle": [Function],
|
||||||
|
"queryAllByAltText": [Function],
|
||||||
|
"queryAllByDisplayValue": [Function],
|
||||||
|
"queryAllByLabelText": [Function],
|
||||||
|
"queryAllByPlaceholderText": [Function],
|
||||||
|
"queryAllByRole": [Function],
|
||||||
|
"queryAllByTestId": [Function],
|
||||||
|
"queryAllByText": [Function],
|
||||||
|
"queryAllByTitle": [Function],
|
||||||
|
"queryByAltText": [Function],
|
||||||
|
"queryByDisplayValue": [Function],
|
||||||
|
"queryByLabelText": [Function],
|
||||||
|
"queryByPlaceholderText": [Function],
|
||||||
|
"queryByRole": [Function],
|
||||||
|
"queryByTestId": [Function],
|
||||||
|
"queryByText": [Function],
|
||||||
|
"queryByTitle": [Function],
|
||||||
|
"rerender": [Function],
|
||||||
|
"unmount": [Function],
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import renderer from 'react-test-renderer';
|
import { render } from '@testing-library/react';
|
||||||
import { createElement } from '@wordpress/element';
|
import { createElement } from '@wordpress/element';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -11,13 +11,11 @@ import AnimationSlider from '../';
|
||||||
|
|
||||||
describe( 'AnimationSlider', () => {
|
describe( 'AnimationSlider', () => {
|
||||||
test( 'it renders correctly', () => {
|
test( 'it renders correctly', () => {
|
||||||
const tree = renderer
|
const component = render(
|
||||||
.create(
|
<AnimationSlider animationKey={ 0 } animate={ 'left' }>
|
||||||
<AnimationSlider animationKey={ 0 } animate={ 'left' }>
|
{ () => <div /> }
|
||||||
{ () => <div /> }
|
</AnimationSlider>
|
||||||
</AnimationSlider>
|
);
|
||||||
)
|
expect( component ).toMatchSnapshot();
|
||||||
.toJSON();
|
|
||||||
expect( tree ).toMatchSnapshot();
|
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,112 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`DropdownButton it renders correctly 1`] = `
|
exports[`DropdownButton it renders correctly 1`] = `
|
||||||
<button
|
Object {
|
||||||
className="components-button woocommerce-dropdown-button"
|
"asFragment": [Function],
|
||||||
type="button"
|
"baseElement": <body>
|
||||||
>
|
<p
|
||||||
<div
|
class="a11y-speak-intro-text"
|
||||||
className="woocommerce-dropdown-button__labels"
|
hidden="hidden"
|
||||||
>
|
id="a11y-speak-intro-text"
|
||||||
<span>
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
foo
|
>
|
||||||
</span>
|
Notifications
|
||||||
</div>
|
</p>
|
||||||
</button>
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="assertive"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-assertive"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="polite"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-polite"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="components-button woocommerce-dropdown-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="woocommerce-dropdown-button__labels"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</body>,
|
||||||
|
"container": <div>
|
||||||
|
<button
|
||||||
|
class="components-button woocommerce-dropdown-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="woocommerce-dropdown-button__labels"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>,
|
||||||
|
"debug": [Function],
|
||||||
|
"findAllByAltText": [Function],
|
||||||
|
"findAllByDisplayValue": [Function],
|
||||||
|
"findAllByLabelText": [Function],
|
||||||
|
"findAllByPlaceholderText": [Function],
|
||||||
|
"findAllByRole": [Function],
|
||||||
|
"findAllByTestId": [Function],
|
||||||
|
"findAllByText": [Function],
|
||||||
|
"findAllByTitle": [Function],
|
||||||
|
"findByAltText": [Function],
|
||||||
|
"findByDisplayValue": [Function],
|
||||||
|
"findByLabelText": [Function],
|
||||||
|
"findByPlaceholderText": [Function],
|
||||||
|
"findByRole": [Function],
|
||||||
|
"findByTestId": [Function],
|
||||||
|
"findByText": [Function],
|
||||||
|
"findByTitle": [Function],
|
||||||
|
"getAllByAltText": [Function],
|
||||||
|
"getAllByDisplayValue": [Function],
|
||||||
|
"getAllByLabelText": [Function],
|
||||||
|
"getAllByPlaceholderText": [Function],
|
||||||
|
"getAllByRole": [Function],
|
||||||
|
"getAllByTestId": [Function],
|
||||||
|
"getAllByText": [Function],
|
||||||
|
"getAllByTitle": [Function],
|
||||||
|
"getByAltText": [Function],
|
||||||
|
"getByDisplayValue": [Function],
|
||||||
|
"getByLabelText": [Function],
|
||||||
|
"getByPlaceholderText": [Function],
|
||||||
|
"getByRole": [Function],
|
||||||
|
"getByTestId": [Function],
|
||||||
|
"getByText": [Function],
|
||||||
|
"getByTitle": [Function],
|
||||||
|
"queryAllByAltText": [Function],
|
||||||
|
"queryAllByDisplayValue": [Function],
|
||||||
|
"queryAllByLabelText": [Function],
|
||||||
|
"queryAllByPlaceholderText": [Function],
|
||||||
|
"queryAllByRole": [Function],
|
||||||
|
"queryAllByTestId": [Function],
|
||||||
|
"queryAllByText": [Function],
|
||||||
|
"queryAllByTitle": [Function],
|
||||||
|
"queryByAltText": [Function],
|
||||||
|
"queryByDisplayValue": [Function],
|
||||||
|
"queryByLabelText": [Function],
|
||||||
|
"queryByPlaceholderText": [Function],
|
||||||
|
"queryByRole": [Function],
|
||||||
|
"queryByTestId": [Function],
|
||||||
|
"queryByText": [Function],
|
||||||
|
"queryByTitle": [Function],
|
||||||
|
"rerender": [Function],
|
||||||
|
"unmount": [Function],
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import renderer from 'react-test-renderer';
|
import { render } from '@testing-library/react';
|
||||||
import { createElement } from '@wordpress/element';
|
import { createElement } from '@wordpress/element';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -11,9 +11,7 @@ import DropdownButton from '../';
|
||||||
|
|
||||||
describe( 'DropdownButton', () => {
|
describe( 'DropdownButton', () => {
|
||||||
test( 'it renders correctly', () => {
|
test( 'it renders correctly', () => {
|
||||||
const tree = renderer
|
const component = render( <DropdownButton labels={ [ 'foo' ] } /> );
|
||||||
.create( <DropdownButton labels={ [ 'foo' ] } /> )
|
expect( component ).toMatchSnapshot();
|
||||||
.toJSON();
|
|
||||||
expect( tree ).toMatchSnapshot();
|
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import renderer from 'react-test-renderer';
|
import { render } from '@testing-library/react';
|
||||||
import { noop } from 'lodash';
|
import { noop } from 'lodash';
|
||||||
import { createElement } from '@wordpress/element';
|
import { createElement } from '@wordpress/element';
|
||||||
|
|
||||||
|
|
@ -30,7 +30,7 @@ const hierarchicalList = [
|
||||||
|
|
||||||
describe( 'SearchListControl', () => {
|
describe( 'SearchListControl', () => {
|
||||||
test( 'should render a search box and list of options', () => {
|
test( 'should render a search box and list of options', () => {
|
||||||
const component = renderer.create(
|
const component = render(
|
||||||
<SearchListControl
|
<SearchListControl
|
||||||
instanceId={ 1 }
|
instanceId={ 1 }
|
||||||
list={ list }
|
list={ list }
|
||||||
|
|
@ -38,11 +38,11 @@ describe( 'SearchListControl', () => {
|
||||||
onChange={ noop }
|
onChange={ noop }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect( component.toJSON() ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'should render a search box and list of options with a custom className', () => {
|
test( 'should render a search box and list of options with a custom className', () => {
|
||||||
const component = renderer.create(
|
const component = render(
|
||||||
<SearchListControl
|
<SearchListControl
|
||||||
instanceId={ 1 }
|
instanceId={ 1 }
|
||||||
className="test-search"
|
className="test-search"
|
||||||
|
|
@ -51,11 +51,11 @@ describe( 'SearchListControl', () => {
|
||||||
onChange={ noop }
|
onChange={ noop }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect( component.toJSON() ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'should render a search box, a list of options, and 1 selected item', () => {
|
test( 'should render a search box, a list of options, and 1 selected item', () => {
|
||||||
const component = renderer.create(
|
const component = render(
|
||||||
<SearchListControl
|
<SearchListControl
|
||||||
instanceId={ 1 }
|
instanceId={ 1 }
|
||||||
list={ list }
|
list={ list }
|
||||||
|
|
@ -63,11 +63,11 @@ describe( 'SearchListControl', () => {
|
||||||
onChange={ noop }
|
onChange={ noop }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect( component.toJSON() ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'should render a search box, a list of options, and 2 selected item', () => {
|
test( 'should render a search box, a list of options, and 2 selected item', () => {
|
||||||
const component = renderer.create(
|
const component = render(
|
||||||
<SearchListControl
|
<SearchListControl
|
||||||
instanceId={ 1 }
|
instanceId={ 1 }
|
||||||
list={ list }
|
list={ list }
|
||||||
|
|
@ -75,11 +75,11 @@ describe( 'SearchListControl', () => {
|
||||||
onChange={ noop }
|
onChange={ noop }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect( component.toJSON() ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'should render a search box and no options', () => {
|
test( 'should render a search box and no options', () => {
|
||||||
const component = renderer.create(
|
const component = render(
|
||||||
<SearchListControl
|
<SearchListControl
|
||||||
instanceId={ 1 }
|
instanceId={ 1 }
|
||||||
list={ [] }
|
list={ [] }
|
||||||
|
|
@ -87,11 +87,11 @@ describe( 'SearchListControl', () => {
|
||||||
onChange={ noop }
|
onChange={ noop }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect( component.toJSON() ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'should render a search box with a search term, and only matching options', () => {
|
test( 'should render a search box with a search term, and only matching options', () => {
|
||||||
const component = renderer.create(
|
const component = render(
|
||||||
<SearchListControl
|
<SearchListControl
|
||||||
instanceId={ 1 }
|
instanceId={ 1 }
|
||||||
list={ list }
|
list={ list }
|
||||||
|
|
@ -101,11 +101,11 @@ describe( 'SearchListControl', () => {
|
||||||
debouncedSpeak={ noop }
|
debouncedSpeak={ noop }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect( component.toJSON() ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'should render a search box with a search term, and only matching options, regardless of case sensitivity', () => {
|
test( 'should render a search box with a search term, and only matching options, regardless of case sensitivity', () => {
|
||||||
const component = renderer.create(
|
const component = render(
|
||||||
<SearchListControl
|
<SearchListControl
|
||||||
instanceId={ 1 }
|
instanceId={ 1 }
|
||||||
list={ list }
|
list={ list }
|
||||||
|
|
@ -115,11 +115,11 @@ describe( 'SearchListControl', () => {
|
||||||
debouncedSpeak={ noop }
|
debouncedSpeak={ noop }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect( component.toJSON() ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'should render a search box with a search term, and no matching options', () => {
|
test( 'should render a search box with a search term, and no matching options', () => {
|
||||||
const component = renderer.create(
|
const component = render(
|
||||||
<SearchListControl
|
<SearchListControl
|
||||||
instanceId={ 1 }
|
instanceId={ 1 }
|
||||||
list={ list }
|
list={ list }
|
||||||
|
|
@ -129,12 +129,12 @@ describe( 'SearchListControl', () => {
|
||||||
debouncedSpeak={ noop }
|
debouncedSpeak={ noop }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect( component.toJSON() ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'should render a search box and list of options, with a custom search input message', () => {
|
test( 'should render a search box and list of options, with a custom search input message', () => {
|
||||||
const messages = { search: 'Testing search label' };
|
const messages = { search: 'Testing search label' };
|
||||||
const component = renderer.create(
|
const component = render(
|
||||||
<SearchListControl
|
<SearchListControl
|
||||||
instanceId={ 1 }
|
instanceId={ 1 }
|
||||||
list={ list }
|
list={ list }
|
||||||
|
|
@ -143,14 +143,14 @@ describe( 'SearchListControl', () => {
|
||||||
messages={ messages }
|
messages={ messages }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect( component.toJSON() ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'should render a search box and list of options, with a custom render callback for each item', () => {
|
test( 'should render a search box and list of options, with a custom render callback for each item', () => {
|
||||||
const renderItem = ( { item } ) => (
|
const renderItem = ( { item } ) => (
|
||||||
<div key={ item.id }>{ item.name }!</div>
|
<div key={ item.id }>{ item.name }!</div>
|
||||||
); // eslint-disable-line
|
); // eslint-disable-line
|
||||||
const component = renderer.create(
|
const component = render(
|
||||||
<SearchListControl
|
<SearchListControl
|
||||||
instanceId={ 1 }
|
instanceId={ 1 }
|
||||||
list={ list }
|
list={ list }
|
||||||
|
|
@ -159,11 +159,11 @@ describe( 'SearchListControl', () => {
|
||||||
renderItem={ renderItem }
|
renderItem={ renderItem }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect( component.toJSON() ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'should render a search box and list of hierarchical options', () => {
|
test( 'should render a search box and list of hierarchical options', () => {
|
||||||
const component = renderer.create(
|
const component = render(
|
||||||
<SearchListControl
|
<SearchListControl
|
||||||
instanceId={ 1 }
|
instanceId={ 1 }
|
||||||
list={ hierarchicalList }
|
list={ hierarchicalList }
|
||||||
|
|
@ -172,6 +172,6 @@ describe( 'SearchListControl', () => {
|
||||||
isHierarchical
|
isHierarchical
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect( component.toJSON() ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,112 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`SectionHeader it renders correctly 1`] = `
|
exports[`SectionHeader it renders correctly 1`] = `
|
||||||
<div
|
Object {
|
||||||
className="woocommerce-section-header"
|
"asFragment": [Function],
|
||||||
>
|
"baseElement": <body>
|
||||||
<h2
|
<p
|
||||||
className="woocommerce-section-header__title woocommerce-section-header__header-item"
|
class="a11y-speak-intro-text"
|
||||||
>
|
hidden="hidden"
|
||||||
A SectionHeader Example
|
id="a11y-speak-intro-text"
|
||||||
</h2>
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
<hr
|
>
|
||||||
role="presentation"
|
Notifications
|
||||||
/>
|
</p>
|
||||||
</div>
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="assertive"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-assertive"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="polite"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-polite"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="woocommerce-section-header"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="woocommerce-section-header__title woocommerce-section-header__header-item"
|
||||||
|
>
|
||||||
|
A SectionHeader Example
|
||||||
|
</h2>
|
||||||
|
<hr
|
||||||
|
role="presentation"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>,
|
||||||
|
"container": <div>
|
||||||
|
<div
|
||||||
|
class="woocommerce-section-header"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="woocommerce-section-header__title woocommerce-section-header__header-item"
|
||||||
|
>
|
||||||
|
A SectionHeader Example
|
||||||
|
</h2>
|
||||||
|
<hr
|
||||||
|
role="presentation"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
"debug": [Function],
|
||||||
|
"findAllByAltText": [Function],
|
||||||
|
"findAllByDisplayValue": [Function],
|
||||||
|
"findAllByLabelText": [Function],
|
||||||
|
"findAllByPlaceholderText": [Function],
|
||||||
|
"findAllByRole": [Function],
|
||||||
|
"findAllByTestId": [Function],
|
||||||
|
"findAllByText": [Function],
|
||||||
|
"findAllByTitle": [Function],
|
||||||
|
"findByAltText": [Function],
|
||||||
|
"findByDisplayValue": [Function],
|
||||||
|
"findByLabelText": [Function],
|
||||||
|
"findByPlaceholderText": [Function],
|
||||||
|
"findByRole": [Function],
|
||||||
|
"findByTestId": [Function],
|
||||||
|
"findByText": [Function],
|
||||||
|
"findByTitle": [Function],
|
||||||
|
"getAllByAltText": [Function],
|
||||||
|
"getAllByDisplayValue": [Function],
|
||||||
|
"getAllByLabelText": [Function],
|
||||||
|
"getAllByPlaceholderText": [Function],
|
||||||
|
"getAllByRole": [Function],
|
||||||
|
"getAllByTestId": [Function],
|
||||||
|
"getAllByText": [Function],
|
||||||
|
"getAllByTitle": [Function],
|
||||||
|
"getByAltText": [Function],
|
||||||
|
"getByDisplayValue": [Function],
|
||||||
|
"getByLabelText": [Function],
|
||||||
|
"getByPlaceholderText": [Function],
|
||||||
|
"getByRole": [Function],
|
||||||
|
"getByTestId": [Function],
|
||||||
|
"getByText": [Function],
|
||||||
|
"getByTitle": [Function],
|
||||||
|
"queryAllByAltText": [Function],
|
||||||
|
"queryAllByDisplayValue": [Function],
|
||||||
|
"queryAllByLabelText": [Function],
|
||||||
|
"queryAllByPlaceholderText": [Function],
|
||||||
|
"queryAllByRole": [Function],
|
||||||
|
"queryAllByTestId": [Function],
|
||||||
|
"queryAllByText": [Function],
|
||||||
|
"queryAllByTitle": [Function],
|
||||||
|
"queryByAltText": [Function],
|
||||||
|
"queryByDisplayValue": [Function],
|
||||||
|
"queryByLabelText": [Function],
|
||||||
|
"queryByPlaceholderText": [Function],
|
||||||
|
"queryByRole": [Function],
|
||||||
|
"queryByTestId": [Function],
|
||||||
|
"queryByText": [Function],
|
||||||
|
"queryByTitle": [Function],
|
||||||
|
"rerender": [Function],
|
||||||
|
"unmount": [Function],
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import renderer from 'react-test-renderer';
|
import { render } from '@testing-library/react';
|
||||||
import { createElement } from '@wordpress/element';
|
import { createElement } from '@wordpress/element';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -16,9 +16,9 @@ describe( 'SectionHeader', () => {
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( 'it renders correctly', () => {
|
test( 'it renders correctly', () => {
|
||||||
const tree = renderer
|
const component = render(
|
||||||
.create( <SectionHeader title="A SectionHeader Example" /> )
|
<SectionHeader title="A SectionHeader Example" />
|
||||||
.toJSON();
|
);
|
||||||
expect( tree ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
|
|
|
||||||
|
|
@ -1,112 +1,545 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`Tag <Tag label="foo" /> should render a tag with the label foo 1`] = `
|
exports[`Tag <Tag label="foo" /> should render a tag with the label foo 1`] = `
|
||||||
<span
|
Object {
|
||||||
className="woocommerce-tag"
|
"asFragment": [Function],
|
||||||
>
|
"baseElement": <body>
|
||||||
<span
|
<p
|
||||||
className="woocommerce-tag__text"
|
class="a11y-speak-intro-text"
|
||||||
id="woocommerce-tag__label-0"
|
hidden="hidden"
|
||||||
>
|
id="a11y-speak-intro-text"
|
||||||
<span
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
className="screen-reader-text"
|
|
||||||
>
|
>
|
||||||
foo
|
Notifications
|
||||||
</span>
|
</p>
|
||||||
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="assertive"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-assertive"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="polite"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-polite"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<span
|
||||||
|
class="woocommerce-tag"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="woocommerce-tag__text"
|
||||||
|
id="woocommerce-tag__label-0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="screen-reader-text"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</body>,
|
||||||
|
"container": <div>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
class="woocommerce-tag"
|
||||||
>
|
>
|
||||||
foo
|
<span
|
||||||
|
class="woocommerce-tag__text"
|
||||||
|
id="woocommerce-tag__label-0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="screen-reader-text"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</div>,
|
||||||
</span>
|
"debug": [Function],
|
||||||
|
"findAllByAltText": [Function],
|
||||||
|
"findAllByDisplayValue": [Function],
|
||||||
|
"findAllByLabelText": [Function],
|
||||||
|
"findAllByPlaceholderText": [Function],
|
||||||
|
"findAllByRole": [Function],
|
||||||
|
"findAllByTestId": [Function],
|
||||||
|
"findAllByText": [Function],
|
||||||
|
"findAllByTitle": [Function],
|
||||||
|
"findByAltText": [Function],
|
||||||
|
"findByDisplayValue": [Function],
|
||||||
|
"findByLabelText": [Function],
|
||||||
|
"findByPlaceholderText": [Function],
|
||||||
|
"findByRole": [Function],
|
||||||
|
"findByTestId": [Function],
|
||||||
|
"findByText": [Function],
|
||||||
|
"findByTitle": [Function],
|
||||||
|
"getAllByAltText": [Function],
|
||||||
|
"getAllByDisplayValue": [Function],
|
||||||
|
"getAllByLabelText": [Function],
|
||||||
|
"getAllByPlaceholderText": [Function],
|
||||||
|
"getAllByRole": [Function],
|
||||||
|
"getAllByTestId": [Function],
|
||||||
|
"getAllByText": [Function],
|
||||||
|
"getAllByTitle": [Function],
|
||||||
|
"getByAltText": [Function],
|
||||||
|
"getByDisplayValue": [Function],
|
||||||
|
"getByLabelText": [Function],
|
||||||
|
"getByPlaceholderText": [Function],
|
||||||
|
"getByRole": [Function],
|
||||||
|
"getByTestId": [Function],
|
||||||
|
"getByText": [Function],
|
||||||
|
"getByTitle": [Function],
|
||||||
|
"queryAllByAltText": [Function],
|
||||||
|
"queryAllByDisplayValue": [Function],
|
||||||
|
"queryAllByLabelText": [Function],
|
||||||
|
"queryAllByPlaceholderText": [Function],
|
||||||
|
"queryAllByRole": [Function],
|
||||||
|
"queryAllByTestId": [Function],
|
||||||
|
"queryAllByText": [Function],
|
||||||
|
"queryAllByTitle": [Function],
|
||||||
|
"queryByAltText": [Function],
|
||||||
|
"queryByDisplayValue": [Function],
|
||||||
|
"queryByLabelText": [Function],
|
||||||
|
"queryByPlaceholderText": [Function],
|
||||||
|
"queryByRole": [Function],
|
||||||
|
"queryByTestId": [Function],
|
||||||
|
"queryByText": [Function],
|
||||||
|
"queryByTitle": [Function],
|
||||||
|
"rerender": [Function],
|
||||||
|
"unmount": [Function],
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Tag <Tag label="foo" popoverContents={ <p>This is a popover</p> } /> should render a tag with a popover 1`] = `
|
exports[`Tag <Tag label="foo" popoverContents={ <p>This is a popover</p> } /> should render a tag with a popover 1`] = `
|
||||||
<span
|
Object {
|
||||||
className="woocommerce-tag"
|
"asFragment": [Function],
|
||||||
>
|
"baseElement": <body>
|
||||||
<button
|
<p
|
||||||
className="components-button woocommerce-tag__text"
|
class="a11y-speak-intro-text"
|
||||||
id="woocommerce-tag__label-2"
|
hidden="hidden"
|
||||||
onClick={[Function]}
|
id="a11y-speak-intro-text"
|
||||||
type="button"
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="screen-reader-text"
|
|
||||||
>
|
>
|
||||||
foo
|
Notifications
|
||||||
</span>
|
</p>
|
||||||
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="assertive"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-assertive"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="polite"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-polite"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<span
|
||||||
|
class="woocommerce-tag"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="components-button woocommerce-tag__text"
|
||||||
|
id="woocommerce-tag__label-2"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="screen-reader-text"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</body>,
|
||||||
|
"container": <div>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
class="woocommerce-tag"
|
||||||
>
|
>
|
||||||
foo
|
<button
|
||||||
|
class="components-button woocommerce-tag__text"
|
||||||
|
id="woocommerce-tag__label-2"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="screen-reader-text"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</div>,
|
||||||
</span>
|
"debug": [Function],
|
||||||
|
"findAllByAltText": [Function],
|
||||||
|
"findAllByDisplayValue": [Function],
|
||||||
|
"findAllByLabelText": [Function],
|
||||||
|
"findAllByPlaceholderText": [Function],
|
||||||
|
"findAllByRole": [Function],
|
||||||
|
"findAllByTestId": [Function],
|
||||||
|
"findAllByText": [Function],
|
||||||
|
"findAllByTitle": [Function],
|
||||||
|
"findByAltText": [Function],
|
||||||
|
"findByDisplayValue": [Function],
|
||||||
|
"findByLabelText": [Function],
|
||||||
|
"findByPlaceholderText": [Function],
|
||||||
|
"findByRole": [Function],
|
||||||
|
"findByTestId": [Function],
|
||||||
|
"findByText": [Function],
|
||||||
|
"findByTitle": [Function],
|
||||||
|
"getAllByAltText": [Function],
|
||||||
|
"getAllByDisplayValue": [Function],
|
||||||
|
"getAllByLabelText": [Function],
|
||||||
|
"getAllByPlaceholderText": [Function],
|
||||||
|
"getAllByRole": [Function],
|
||||||
|
"getAllByTestId": [Function],
|
||||||
|
"getAllByText": [Function],
|
||||||
|
"getAllByTitle": [Function],
|
||||||
|
"getByAltText": [Function],
|
||||||
|
"getByDisplayValue": [Function],
|
||||||
|
"getByLabelText": [Function],
|
||||||
|
"getByPlaceholderText": [Function],
|
||||||
|
"getByRole": [Function],
|
||||||
|
"getByTestId": [Function],
|
||||||
|
"getByText": [Function],
|
||||||
|
"getByTitle": [Function],
|
||||||
|
"queryAllByAltText": [Function],
|
||||||
|
"queryAllByDisplayValue": [Function],
|
||||||
|
"queryAllByLabelText": [Function],
|
||||||
|
"queryAllByPlaceholderText": [Function],
|
||||||
|
"queryAllByRole": [Function],
|
||||||
|
"queryAllByTestId": [Function],
|
||||||
|
"queryAllByText": [Function],
|
||||||
|
"queryAllByTitle": [Function],
|
||||||
|
"queryByAltText": [Function],
|
||||||
|
"queryByDisplayValue": [Function],
|
||||||
|
"queryByLabelText": [Function],
|
||||||
|
"queryByPlaceholderText": [Function],
|
||||||
|
"queryByRole": [Function],
|
||||||
|
"queryByTestId": [Function],
|
||||||
|
"queryByText": [Function],
|
||||||
|
"queryByTitle": [Function],
|
||||||
|
"rerender": [Function],
|
||||||
|
"unmount": [Function],
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Tag <Tag label="foo" remove={ noop } /> should render a tag with a close button 1`] = `
|
exports[`Tag <Tag label="foo" remove={ noop } /> should render a tag with a close button 1`] = `
|
||||||
<span
|
Object {
|
||||||
className="woocommerce-tag has-remove"
|
"asFragment": [Function],
|
||||||
>
|
"baseElement": <body>
|
||||||
<span
|
<p
|
||||||
className="woocommerce-tag__text"
|
class="a11y-speak-intro-text"
|
||||||
id="woocommerce-tag__label-1"
|
hidden="hidden"
|
||||||
>
|
id="a11y-speak-intro-text"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
>
|
||||||
|
Notifications
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="assertive"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-assertive"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="polite"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-polite"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<span
|
||||||
|
class="woocommerce-tag has-remove"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="woocommerce-tag__text"
|
||||||
|
id="woocommerce-tag__label-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="screen-reader-text"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
aria-describedby="woocommerce-tag__label-1"
|
||||||
|
aria-label="Remove foo"
|
||||||
|
class="components-button woocommerce-tag__remove"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="clear-icon"
|
||||||
|
focusable="false"
|
||||||
|
height="20"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L13.0607 12L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L12 13.0607L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L10.9393 12L8.46967 9.53033C8.17678 9.23744 8.17678 8.76256 8.46967 8.46967C8.76256 8.17678 9.23744 8.17678 9.53033 8.46967L12 10.9393L14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</body>,
|
||||||
|
"container": <div>
|
||||||
<span
|
<span
|
||||||
className="screen-reader-text"
|
class="woocommerce-tag has-remove"
|
||||||
>
|
>
|
||||||
foo
|
<span
|
||||||
|
class="woocommerce-tag__text"
|
||||||
|
id="woocommerce-tag__label-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="screen-reader-text"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
aria-describedby="woocommerce-tag__label-1"
|
||||||
|
aria-label="Remove foo"
|
||||||
|
class="components-button woocommerce-tag__remove"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="clear-icon"
|
||||||
|
focusable="false"
|
||||||
|
height="20"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L13.0607 12L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L12 13.0607L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L10.9393 12L8.46967 9.53033C8.17678 9.23744 8.17678 8.76256 8.46967 8.46967C8.76256 8.17678 9.23744 8.17678 9.53033 8.46967L12 10.9393L14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</span>
|
</span>
|
||||||
<span
|
</div>,
|
||||||
aria-hidden="true"
|
"debug": [Function],
|
||||||
>
|
"findAllByAltText": [Function],
|
||||||
foo
|
"findAllByDisplayValue": [Function],
|
||||||
</span>
|
"findAllByLabelText": [Function],
|
||||||
</span>
|
"findAllByPlaceholderText": [Function],
|
||||||
<button
|
"findAllByRole": [Function],
|
||||||
aria-describedby="woocommerce-tag__label-1"
|
"findAllByTestId": [Function],
|
||||||
aria-label="Remove foo"
|
"findAllByText": [Function],
|
||||||
className="components-button woocommerce-tag__remove"
|
"findAllByTitle": [Function],
|
||||||
type="button"
|
"findByAltText": [Function],
|
||||||
>
|
"findByDisplayValue": [Function],
|
||||||
<svg
|
"findByLabelText": [Function],
|
||||||
aria-hidden={true}
|
"findByPlaceholderText": [Function],
|
||||||
className="clear-icon"
|
"findByRole": [Function],
|
||||||
focusable={false}
|
"findByTestId": [Function],
|
||||||
height={20}
|
"findByText": [Function],
|
||||||
role="img"
|
"findByTitle": [Function],
|
||||||
viewBox="0 0 24 24"
|
"getAllByAltText": [Function],
|
||||||
width={20}
|
"getAllByDisplayValue": [Function],
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
"getAllByLabelText": [Function],
|
||||||
>
|
"getAllByPlaceholderText": [Function],
|
||||||
<path
|
"getAllByRole": [Function],
|
||||||
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L13.0607 12L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L12 13.0607L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L10.9393 12L8.46967 9.53033C8.17678 9.23744 8.17678 8.76256 8.46967 8.46967C8.76256 8.17678 9.23744 8.17678 9.53033 8.46967L12 10.9393L14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967Z"
|
"getAllByTestId": [Function],
|
||||||
/>
|
"getAllByText": [Function],
|
||||||
</svg>
|
"getAllByTitle": [Function],
|
||||||
</button>
|
"getByAltText": [Function],
|
||||||
</span>
|
"getByDisplayValue": [Function],
|
||||||
|
"getByLabelText": [Function],
|
||||||
|
"getByPlaceholderText": [Function],
|
||||||
|
"getByRole": [Function],
|
||||||
|
"getByTestId": [Function],
|
||||||
|
"getByText": [Function],
|
||||||
|
"getByTitle": [Function],
|
||||||
|
"queryAllByAltText": [Function],
|
||||||
|
"queryAllByDisplayValue": [Function],
|
||||||
|
"queryAllByLabelText": [Function],
|
||||||
|
"queryAllByPlaceholderText": [Function],
|
||||||
|
"queryAllByRole": [Function],
|
||||||
|
"queryAllByTestId": [Function],
|
||||||
|
"queryAllByText": [Function],
|
||||||
|
"queryAllByTitle": [Function],
|
||||||
|
"queryByAltText": [Function],
|
||||||
|
"queryByDisplayValue": [Function],
|
||||||
|
"queryByLabelText": [Function],
|
||||||
|
"queryByPlaceholderText": [Function],
|
||||||
|
"queryByRole": [Function],
|
||||||
|
"queryByTestId": [Function],
|
||||||
|
"queryByText": [Function],
|
||||||
|
"queryByTitle": [Function],
|
||||||
|
"rerender": [Function],
|
||||||
|
"unmount": [Function],
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Tag <Tag label="foo" screenReaderLabel="FooBar" /> should render a tag with a screen reader label 1`] = `
|
exports[`Tag <Tag label="foo" screenReaderLabel="FooBar" /> should render a tag with a screen reader label 1`] = `
|
||||||
<span
|
Object {
|
||||||
className="woocommerce-tag"
|
"asFragment": [Function],
|
||||||
>
|
"baseElement": <body>
|
||||||
<span
|
<p
|
||||||
className="woocommerce-tag__text"
|
class="a11y-speak-intro-text"
|
||||||
id="woocommerce-tag__label-3"
|
hidden="hidden"
|
||||||
>
|
id="a11y-speak-intro-text"
|
||||||
<span
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
className="screen-reader-text"
|
|
||||||
>
|
>
|
||||||
FooBar
|
Notifications
|
||||||
</span>
|
</p>
|
||||||
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="assertive"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-assertive"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-atomic="true"
|
||||||
|
aria-live="polite"
|
||||||
|
aria-relevant="additions text"
|
||||||
|
class="a11y-speak-region"
|
||||||
|
id="a11y-speak-polite"
|
||||||
|
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<span
|
||||||
|
class="woocommerce-tag"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="woocommerce-tag__text"
|
||||||
|
id="woocommerce-tag__label-3"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="screen-reader-text"
|
||||||
|
>
|
||||||
|
FooBar
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</body>,
|
||||||
|
"container": <div>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
class="woocommerce-tag"
|
||||||
>
|
>
|
||||||
foo
|
<span
|
||||||
|
class="woocommerce-tag__text"
|
||||||
|
id="woocommerce-tag__label-3"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="screen-reader-text"
|
||||||
|
>
|
||||||
|
FooBar
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
foo
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</div>,
|
||||||
</span>
|
"debug": [Function],
|
||||||
|
"findAllByAltText": [Function],
|
||||||
|
"findAllByDisplayValue": [Function],
|
||||||
|
"findAllByLabelText": [Function],
|
||||||
|
"findAllByPlaceholderText": [Function],
|
||||||
|
"findAllByRole": [Function],
|
||||||
|
"findAllByTestId": [Function],
|
||||||
|
"findAllByText": [Function],
|
||||||
|
"findAllByTitle": [Function],
|
||||||
|
"findByAltText": [Function],
|
||||||
|
"findByDisplayValue": [Function],
|
||||||
|
"findByLabelText": [Function],
|
||||||
|
"findByPlaceholderText": [Function],
|
||||||
|
"findByRole": [Function],
|
||||||
|
"findByTestId": [Function],
|
||||||
|
"findByText": [Function],
|
||||||
|
"findByTitle": [Function],
|
||||||
|
"getAllByAltText": [Function],
|
||||||
|
"getAllByDisplayValue": [Function],
|
||||||
|
"getAllByLabelText": [Function],
|
||||||
|
"getAllByPlaceholderText": [Function],
|
||||||
|
"getAllByRole": [Function],
|
||||||
|
"getAllByTestId": [Function],
|
||||||
|
"getAllByText": [Function],
|
||||||
|
"getAllByTitle": [Function],
|
||||||
|
"getByAltText": [Function],
|
||||||
|
"getByDisplayValue": [Function],
|
||||||
|
"getByLabelText": [Function],
|
||||||
|
"getByPlaceholderText": [Function],
|
||||||
|
"getByRole": [Function],
|
||||||
|
"getByTestId": [Function],
|
||||||
|
"getByText": [Function],
|
||||||
|
"getByTitle": [Function],
|
||||||
|
"queryAllByAltText": [Function],
|
||||||
|
"queryAllByDisplayValue": [Function],
|
||||||
|
"queryAllByLabelText": [Function],
|
||||||
|
"queryAllByPlaceholderText": [Function],
|
||||||
|
"queryAllByRole": [Function],
|
||||||
|
"queryAllByTestId": [Function],
|
||||||
|
"queryAllByText": [Function],
|
||||||
|
"queryAllByTitle": [Function],
|
||||||
|
"queryByAltText": [Function],
|
||||||
|
"queryByDisplayValue": [Function],
|
||||||
|
"queryByLabelText": [Function],
|
||||||
|
"queryByPlaceholderText": [Function],
|
||||||
|
"queryByRole": [Function],
|
||||||
|
"queryByTestId": [Function],
|
||||||
|
"queryByText": [Function],
|
||||||
|
"queryByTitle": [Function],
|
||||||
|
"rerender": [Function],
|
||||||
|
"unmount": [Function],
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import renderer from 'react-test-renderer';
|
import { render } from '@testing-library/react';
|
||||||
import { createElement } from '@wordpress/element';
|
import { createElement } from '@wordpress/element';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -13,30 +13,26 @@ const noop = () => {};
|
||||||
|
|
||||||
describe( 'Tag', () => {
|
describe( 'Tag', () => {
|
||||||
test( '<Tag label="foo" /> should render a tag with the label foo', () => {
|
test( '<Tag label="foo" /> should render a tag with the label foo', () => {
|
||||||
const tree = renderer.create( <Tag label="foo" /> ).toJSON();
|
const component = render( <Tag label="foo" /> );
|
||||||
expect( tree ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( '<Tag label="foo" remove={ noop } /> should render a tag with a close button', () => {
|
test( '<Tag label="foo" remove={ noop } /> should render a tag with a close button', () => {
|
||||||
const tree = renderer
|
const component = render( <Tag label="foo" remove={ noop } /> );
|
||||||
.create( <Tag label="foo" remove={ noop } /> )
|
expect( component ).toMatchSnapshot();
|
||||||
.toJSON();
|
|
||||||
expect( tree ).toMatchSnapshot();
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( '<Tag label="foo" popoverContents={ <p>This is a popover</p> } /> should render a tag with a popover', () => {
|
test( '<Tag label="foo" popoverContents={ <p>This is a popover</p> } /> should render a tag with a popover', () => {
|
||||||
const tree = renderer
|
const component = render(
|
||||||
.create(
|
<Tag label="foo" popoverContents={ <p>This is a popover</p> } />
|
||||||
<Tag label="foo" popoverContents={ <p>This is a popover</p> } />
|
);
|
||||||
)
|
expect( component ).toMatchSnapshot();
|
||||||
.toJSON();
|
|
||||||
expect( tree ).toMatchSnapshot();
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
test( '<Tag label="foo" screenReaderLabel="FooBar" /> should render a tag with a screen reader label', () => {
|
test( '<Tag label="foo" screenReaderLabel="FooBar" /> should render a tag with a screen reader label', () => {
|
||||||
const tree = renderer
|
const component = render(
|
||||||
.create( <Tag label="foo" screenReaderLabel="FooBar" /> )
|
<Tag label="foo" screenReaderLabel="FooBar" />
|
||||||
.toJSON();
|
);
|
||||||
expect( tree ).toMatchSnapshot();
|
expect( component ).toMatchSnapshot();
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue