Adds snapshots for the Split Button component (https://github.com/woocommerce/woocommerce-admin/pull/891)
* Adds snapshots for the Split Button component * Update snapshots * Remove duplicate test
This commit is contained in:
Jonathan Belcher
GitHub
parent
0cbe3034d8
commit
a308fcc830
|
|
@ -0,0 +1,212 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SplitButton it should render a simple split button 1`] = `
|
||||
<div
|
||||
className="woocommerce-split-button"
|
||||
>
|
||||
<button
|
||||
className="components-button woocommerce-split-button__main-action"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
/>
|
||||
<div
|
||||
className="woocommerce-split-button__menu"
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="true"
|
||||
className="components-button components-icon-button woocommerce-split-button__menu-toggle"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="dashicon dashicons-arrow-down"
|
||||
focusable="false"
|
||||
height={20}
|
||||
role="img"
|
||||
viewBox="0 0 20 20"
|
||||
width={20}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15 8l-4.03 6L7 8h8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`SplitButton it should render a split button with Foo as main label 1`] = `
|
||||
<div
|
||||
className="woocommerce-split-button has-label"
|
||||
>
|
||||
<button
|
||||
className="components-button woocommerce-split-button__main-action"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
Foo
|
||||
</button>
|
||||
<div
|
||||
className="woocommerce-split-button__menu"
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="true"
|
||||
className="components-button components-icon-button woocommerce-split-button__menu-toggle"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="dashicon dashicons-arrow-down"
|
||||
focusable="false"
|
||||
height={20}
|
||||
role="img"
|
||||
viewBox="0 0 20 20"
|
||||
width={20}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15 8l-4.03 6L7 8h8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`SplitButton it should render a split button with a menu label 1`] = `
|
||||
<div
|
||||
className="woocommerce-split-button"
|
||||
>
|
||||
<button
|
||||
className="components-button woocommerce-split-button__main-action"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
/>
|
||||
<div
|
||||
className="woocommerce-split-button__menu"
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="true"
|
||||
aria-label="Select an action"
|
||||
className="components-button components-icon-button woocommerce-split-button__menu-toggle"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="dashicon dashicons-arrow-down"
|
||||
focusable="false"
|
||||
height={20}
|
||||
role="img"
|
||||
viewBox="0 0 20 20"
|
||||
width={20}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15 8l-4.03 6L7 8h8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`SplitButton it should render a split button with isPrimary theme 1`] = `
|
||||
<div
|
||||
className="woocommerce-split-button is-primary"
|
||||
>
|
||||
<button
|
||||
className="components-button woocommerce-split-button__main-action"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
/>
|
||||
<div
|
||||
className="woocommerce-split-button__menu"
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="true"
|
||||
className="components-button components-icon-button woocommerce-split-button__menu-toggle"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="dashicon dashicons-arrow-down"
|
||||
focusable="false"
|
||||
height={20}
|
||||
role="img"
|
||||
viewBox="0 0 20 20"
|
||||
width={20}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15 8l-4.03 6L7 8h8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`SplitButton it should render a split button with pencil as main button 1`] = `
|
||||
<div
|
||||
className="woocommerce-split-button"
|
||||
>
|
||||
<button
|
||||
className="components-button components-icon-button woocommerce-split-button__main-action"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
className="gridicon gridicons-pencil"
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
width={24}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M13 6l5 5-9.507 9.507c-.686-.686-.69-1.794-.012-2.485l-.002-.003c-.69.676-1.8.673-2.485-.013-.677-.677-.686-1.762-.036-2.455l-.008-.008c-.694.65-1.78.64-2.456-.036L13 6zm7.586-.414l-2.172-2.172c-.78-.78-2.047-.78-2.828 0L14 5l5 5 1.586-1.586c.78-.78.78-2.047 0-2.828zM3 18v3h3c0-1.657-1.343-3-3-3z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
className="woocommerce-split-button__menu"
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="true"
|
||||
className="components-button components-icon-button woocommerce-split-button__menu-toggle"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="dashicon dashicons-arrow-down"
|
||||
focusable="false"
|
||||
height={20}
|
||||
role="img"
|
||||
viewBox="0 0 20 20"
|
||||
width={20}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15 8l-4.03 6L7 8h8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
import Gridicon from 'gridicons';
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import SplitButton from '../';
|
||||
|
||||
const controls = [
|
||||
{
|
||||
label: 'Up',
|
||||
onClick: () => alert( 'Primary Up clicked' ),
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
onClick: () => alert( 'Primary Right clicked' ),
|
||||
},
|
||||
];
|
||||
|
||||
describe( 'SplitButton', () => {
|
||||
test( 'it should render a simple split button', () => {
|
||||
const tree = renderer.create( <SplitButton controls={ controls } /> ).toJSON();
|
||||
expect( tree ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'it should render a split button with isPrimary theme', () => {
|
||||
const tree = renderer.create( <SplitButton controls={ controls } isPrimary /> ).toJSON();
|
||||
expect( tree ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'it should render a split button with Foo as main label', () => {
|
||||
const tree = renderer.create( <SplitButton controls={ controls } mainLabel="Foo" /> ).toJSON();
|
||||
expect( tree ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'it should render a split button with pencil as main button', () => {
|
||||
const tree = renderer
|
||||
.create( <SplitButton controls={ controls } mainIcon={ <Gridicon icon="pencil" /> } /> )
|
||||
.toJSON();
|
||||
expect( tree ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
test( 'it should render a split button with a menu label', () => {
|
||||
const tree = renderer
|
||||
.create( <SplitButton controls={ controls } menuLabel="Select an action" /> )
|
||||
.toJSON();
|
||||
expect( tree ).toMatchSnapshot();
|
||||
} );
|
||||
} );
|
||||
Loading…
Reference in New Issue