initial commit
This commit is contained in:
@ -0,0 +1,312 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Chip should render children nodes 1`] = `
|
||||
<li
|
||||
className="wc-block-components-chip wc-block-components-chip--radius-small"
|
||||
>
|
||||
<span
|
||||
aria-hidden={false}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
Test
|
||||
</span>
|
||||
Lorem Ipsum
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`Chip should render defined radius 1`] = `
|
||||
<li
|
||||
className="wc-block-components-chip wc-block-components-chip--radius-large"
|
||||
>
|
||||
<span
|
||||
aria-hidden={false}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
Test
|
||||
</span>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`Chip should render nodes as the text 1`] = `
|
||||
<li
|
||||
className="wc-block-components-chip wc-block-components-chip--radius-small"
|
||||
>
|
||||
<span
|
||||
aria-hidden={false}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
<h1>
|
||||
Test
|
||||
</h1>
|
||||
</span>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`Chip should render screen reader text 1`] = `
|
||||
<li
|
||||
className="wc-block-components-chip wc-block-components-chip--radius-small"
|
||||
>
|
||||
<span
|
||||
aria-hidden={true}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
Test
|
||||
</span>
|
||||
<span
|
||||
className="screen-reader-text"
|
||||
>
|
||||
Test 2
|
||||
</span>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`Chip should render text 1`] = `
|
||||
<li
|
||||
className="wc-block-components-chip wc-block-components-chip--radius-small"
|
||||
>
|
||||
<span
|
||||
aria-hidden={false}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
Test
|
||||
</span>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`Chip with custom wrapper should render a chip made up of a div instead of a li 1`] = `
|
||||
<div
|
||||
className="wc-block-components-chip wc-block-components-chip--radius-small"
|
||||
>
|
||||
<span
|
||||
aria-hidden={false}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
Test
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`RemovableChip should render custom aria label 1`] = `
|
||||
<li
|
||||
className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
|
||||
>
|
||||
<span
|
||||
aria-hidden={false}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
<h1>
|
||||
Test
|
||||
</h1>
|
||||
</span>
|
||||
<button
|
||||
aria-label="Aria test"
|
||||
className="wc-block-components-chip__remove"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="wc-block-components-chip__remove-icon"
|
||||
focusable={false}
|
||||
height={16}
|
||||
role="img"
|
||||
viewBox="0 0 20 20"
|
||||
width={16}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`RemovableChip should render default aria label if text is a node 1`] = `
|
||||
<li
|
||||
className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
|
||||
>
|
||||
<span
|
||||
aria-hidden={true}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
<h1>
|
||||
Test
|
||||
</h1>
|
||||
</span>
|
||||
<span
|
||||
className="screen-reader-text"
|
||||
>
|
||||
Test 2
|
||||
</span>
|
||||
<button
|
||||
aria-label="Remove \\"Test 2\\""
|
||||
className="wc-block-components-chip__remove"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="wc-block-components-chip__remove-icon"
|
||||
focusable={false}
|
||||
height={16}
|
||||
role="img"
|
||||
viewBox="0 0 20 20"
|
||||
width={16}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`RemovableChip should render screen reader text aria label 1`] = `
|
||||
<li
|
||||
className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
|
||||
>
|
||||
<span
|
||||
aria-hidden={true}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
Test
|
||||
</span>
|
||||
<span
|
||||
className="screen-reader-text"
|
||||
>
|
||||
Test 2
|
||||
</span>
|
||||
<button
|
||||
aria-label="Remove \\"Test 2\\""
|
||||
className="wc-block-components-chip__remove"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="wc-block-components-chip__remove-icon"
|
||||
focusable={false}
|
||||
height={16}
|
||||
role="img"
|
||||
viewBox="0 0 20 20"
|
||||
width={16}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`RemovableChip should render text and the remove button 1`] = `
|
||||
<li
|
||||
className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
|
||||
>
|
||||
<span
|
||||
aria-hidden={false}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
Test
|
||||
</span>
|
||||
<button
|
||||
aria-label="Remove \\"Test\\""
|
||||
className="wc-block-components-chip__remove"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="wc-block-components-chip__remove-icon"
|
||||
focusable={false}
|
||||
height={16}
|
||||
role="img"
|
||||
viewBox="0 0 20 20"
|
||||
width={16}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`RemovableChip should render with disabled remove button 1`] = `
|
||||
<li
|
||||
className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
|
||||
>
|
||||
<span
|
||||
aria-hidden={false}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
Test
|
||||
</span>
|
||||
<button
|
||||
aria-label="Remove \\"Test\\""
|
||||
className="wc-block-components-chip__remove"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="wc-block-components-chip__remove-icon"
|
||||
focusable={false}
|
||||
height={16}
|
||||
role="img"
|
||||
viewBox="0 0 20 20"
|
||||
width={16}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`RemovableChip with removeOnAnyClick should be a button when removeOnAnyClick is set to true 1`] = `
|
||||
<button
|
||||
aria-label="Remove \\"Test\\""
|
||||
className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
>
|
||||
<span
|
||||
aria-hidden={false}
|
||||
className="wc-block-components-chip__text"
|
||||
>
|
||||
Test
|
||||
</span>
|
||||
<span
|
||||
aria-hidden={true}
|
||||
className="wc-block-components-chip__remove"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="wc-block-components-chip__remove-icon"
|
||||
focusable={false}
|
||||
height={16}
|
||||
role="img"
|
||||
viewBox="0 0 20 20"
|
||||
width={16}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
@ -0,0 +1,109 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import TestRenderer from 'react-test-renderer';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Chip, RemovableChip } from '..';
|
||||
|
||||
describe( 'Chip', () => {
|
||||
test( 'should render text', () => {
|
||||
const component = TestRenderer.create( <Chip text="Test" /> );
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'should render nodes as the text', () => {
|
||||
const component = TestRenderer.create(
|
||||
<Chip text={ <h1>Test</h1> } />
|
||||
);
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'should render defined radius', () => {
|
||||
const component = TestRenderer.create(
|
||||
<Chip text="Test" radius="large" />
|
||||
);
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'should render screen reader text', () => {
|
||||
const component = TestRenderer.create(
|
||||
<Chip text="Test" screenReaderText="Test 2" />
|
||||
);
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'should render children nodes', () => {
|
||||
const component = TestRenderer.create(
|
||||
<Chip text="Test">Lorem Ipsum</Chip>
|
||||
);
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
describe( 'with custom wrapper', () => {
|
||||
test( 'should render a chip made up of a div instead of a li', () => {
|
||||
const component = TestRenderer.create(
|
||||
<Chip text="Test" element="div" />
|
||||
);
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'RemovableChip', () => {
|
||||
test( 'should render text and the remove button', () => {
|
||||
const component = TestRenderer.create( <RemovableChip text="Test" /> );
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'should render with disabled remove button', () => {
|
||||
const component = TestRenderer.create(
|
||||
<RemovableChip text="Test" disabled={ true } />
|
||||
);
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'should render custom aria label', () => {
|
||||
const component = TestRenderer.create(
|
||||
<RemovableChip text={ <h1>Test</h1> } ariaLabel="Aria test" />
|
||||
);
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'should render default aria label if text is a node', () => {
|
||||
const component = TestRenderer.create(
|
||||
<RemovableChip text={ <h1>Test</h1> } screenReaderText="Test 2" />
|
||||
);
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'should render screen reader text aria label', () => {
|
||||
const component = TestRenderer.create(
|
||||
<RemovableChip text="Test" screenReaderText="Test 2" />
|
||||
);
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
describe( 'with removeOnAnyClick', () => {
|
||||
test( 'should be a button when removeOnAnyClick is set to true', () => {
|
||||
const component = TestRenderer.create(
|
||||
<RemovableChip text="Test" removeOnAnyClick={ true } />
|
||||
);
|
||||
|
||||
expect( component.toJSON() ).toMatchSnapshot();
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
Reference in New Issue
Block a user