Skip to content

Commit

Permalink
Fix unit tests and update snapshots.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tellthemachines
tellthemachines committed Jan 13, 2021
1 parent fddc985 commit ce5a39b
Show file tree
Hide file tree
Showing 9 changed files with 84 additions and 33 deletions.
10 changes: 10 additions & 0 deletions packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,11 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified
"position": "bottom right",
}
}
toggleProps={
Object {
"describedBy": "Change text alignment",
}
}
/>
`;

Expand Down Expand Up @@ -126,5 +131,10 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
"position": "bottom right",
}
}
toggleProps={
Object {
"describedBy": "Change text alignment",
}
}
/>
`;
5 changes: 5 additions & 0 deletions ...ages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,5 +65,10 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
"isAlternate": true,
}
}
toggleProps={
Object {
"describedBy": "Change alignment",
}
}
/>
`;
3 changes: 3 additions & 0 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 @@ -51,6 +51,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
className="components-circular-option-picker__option-wrapper"
>
<button
aria-describedby={null}
aria-label="Color: red"
aria-pressed={true}
className="components-button components-circular-option-picker__option is-pressed"
Expand Down Expand Up @@ -91,6 +92,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
className="components-dropdown components-circular-option-picker__dropdown-link-action"
>
<button
aria-describedby={null}
aria-expanded={false}
aria-haspopup="true"
aria-label="Custom color picker"
Expand All @@ -102,6 +104,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
</button>
</div>
<button
aria-describedby={null}
className="components-button components-circular-option-picker__clear is-secondary is-small"
onClick={[Function]}
type="button"
Expand Down
59 changes: 37 additions & 22 deletions packages/components/src/button/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import { shallow } from 'enzyme';
import TestUtils from 'react-dom/test-utils';

/**
* WordPress dependencies
*/
Expand All @@ -18,7 +17,7 @@ import ButtonWithForwardedRef, { Button } from '../';
describe( 'Button', () => {
describe( 'basic rendering', () => {
it( 'should render a button element with only one class', () => {
const button = shallow( <Button /> );
const button = shallow( <Button /> ).find( 'button' );
expect( button.hasClass( 'components-button' ) ).toBe( true );
expect( button.hasClass( 'is-large' ) ).toBe( false );
expect( button.hasClass( 'is-primary' ) ).toBe( false );
Expand All @@ -30,62 +29,74 @@ describe( 'Button', () => {
} );

it( 'should render a button element with is-primary class', () => {
const button = shallow( <Button isPrimary /> );
const button = shallow( <Button isPrimary /> ).find( 'button' );
expect( button.hasClass( 'is-large' ) ).toBe( false );
expect( button.hasClass( 'is-primary' ) ).toBe( true );
} );

it( 'should render a button element with is-small class', () => {
const button = shallow( <Button isSecondary isSmall /> );
const button = shallow( <Button isSecondary isSmall /> ).find(
'button'
);
expect( button.hasClass( 'is-secondary' ) ).toBe( true );
expect( button.hasClass( 'is-large' ) ).toBe( false );
expect( button.hasClass( 'is-small' ) ).toBe( true );
expect( button.hasClass( 'is-primary' ) ).toBe( false );
} );

it( 'should render a button element with is-pressed without button class', () => {
const button = shallow( <Button isPressed /> );
const button = shallow( <Button isPressed /> ).find( 'button' );
expect( button.hasClass( 'is-pressed' ) ).toBe( true );
} );

it( 'should add a disabled prop to the button', () => {
const button = shallow( <Button disabled /> );
const button = shallow( <Button disabled /> ).find( 'button' );
expect( button.prop( 'disabled' ) ).toBe( true );
} );

it( 'should add only aria-disabled attribute when disabled and isFocusable are true', () => {
const button = shallow(
<Button disabled __experimentalIsFocusable />
);
).find( 'button' );
expect( button.prop( 'disabled' ) ).toBe( false );
expect( button.prop( 'aria-disabled' ) ).toBe( true );
} );

it( 'should not poss the prop target into the element', () => {
const button = shallow( <Button target="_blank" /> );
const button = shallow( <Button target="_blank" /> ).find(
'button'
);
expect( button.prop( 'target' ) ).toBeUndefined();
} );

it( 'should render with an additional className', () => {
const button = shallow( <Button className="gutenberg" /> );
const button = shallow( <Button className="gutenberg" /> ).find(
'button'
);

expect( button.hasClass( 'gutenberg' ) ).toBe( true );
} );

it( 'should render and additional WordPress prop of value awesome', () => {
const button = shallow( <Button WordPress="awesome" /> );
const button = shallow( <Button WordPress="awesome" /> ).find(
'button'
);

expect( button.prop( 'WordPress' ) ).toBe( 'awesome' );
} );

it( 'should render an icon button', () => {
const iconButton = shallow( <Button icon={ plusCircle } /> );
const iconButton = shallow( <Button icon={ plusCircle } /> ).find(
'button'
);
expect( iconButton.hasClass( 'has-icon' ) ).toBe( true );
expect( iconButton.prop( 'aria-label' ) ).toBeUndefined();
} );

it( 'should render a Dashicon component matching the wordpress icon', () => {
const iconButton = shallow( <Button icon={ plusCircle } /> );
const iconButton = shallow( <Button icon={ plusCircle } /> ).find(
'button'
);
expect( iconButton.find( 'Icon' ).dive() ).not.toBeNull();
} );

Expand All @@ -95,7 +106,7 @@ describe( 'Button', () => {
icon={ plusCircle }
children={ <p className="test">Test</p> }
/>
);
).find( 'button' );
expect( iconButton.find( 'Icon' ).dive() ).not.toBeNull();
expect( iconButton.find( '.test' ).shallow().text() ).toBe(
'Test'
Expand All @@ -105,7 +116,7 @@ describe( 'Button', () => {
it( 'should add an aria-label when the label property is used, with Tooltip wrapper', () => {
const iconButton = shallow(
<Button icon={ plusCircle } label="WordPress" />
);
).find( 'Tooltip' );
expect( iconButton.name() ).toBe( 'Tooltip' );
expect( iconButton.prop( 'text' ) ).toBe( 'WordPress' );
expect( iconButton.find( 'button' ).prop( 'aria-label' ) ).toBe(
Expand All @@ -114,7 +125,9 @@ describe( 'Button', () => {
} );

it( 'should support explicit aria-label override', () => {
const iconButton = shallow( <Button aria-label="Custom" /> );
const iconButton = shallow( <Button aria-label="Custom" /> ).find(
'button'
);
expect( iconButton.prop( 'aria-label' ) ).toBe( 'Custom' );
} );

Expand All @@ -125,15 +138,15 @@ describe( 'Button', () => {
label="WordPress"
showTooltip={ false }
/>
);
).find( 'button' );
expect( iconButton.name() ).toBe( 'button' );
expect( iconButton.prop( 'aria-label' ) ).toBe( 'WordPress' );
} );

it( 'should show the tooltip for empty children', () => {
const iconButton = shallow(
<Button icon={ plusCircle } label="WordPress" children={ [] } />
);
).find( 'Tooltip' );
expect( iconButton.name() ).toBe( 'Tooltip' );
expect( iconButton.prop( 'text' ) ).toBe( 'WordPress' );
} );
Expand All @@ -143,7 +156,7 @@ describe( 'Button', () => {
<Button icon={ plusCircle } label="WordPress">
Children
</Button>
);
).find( 'button' );
expect( iconButton.name() ).toBe( 'button' );
} );

Expand All @@ -152,14 +165,16 @@ describe( 'Button', () => {
<Button icon={ plusCircle } label="WordPress" showTooltip>
Children
</Button>
);
).find( 'Tooltip' );
expect( iconButton.name() ).toBe( 'Tooltip' );
} );
} );

describe( 'with href property', () => {
it( 'should render a link instead of a button with href prop', () => {
const button = shallow( <Button href="https://wordpress.org/" /> );
const button = shallow(
<Button href="https://wordpress.org/" />
).find( 'a' );

expect( button.type() ).toBe( 'a' );
expect( button.prop( 'href' ) ).toBe( 'https://wordpress.org/' );
Expand All @@ -168,15 +183,15 @@ describe( 'Button', () => {
it( 'should allow for the passing of the target prop when a link is created', () => {
const button = shallow(
<Button href="https://wordpress.org/" target="_blank" />
);
).find( 'a' );

expect( button.prop( 'target' ) ).toBe( '_blank' );
} );

it( 'should become a button again when disabled is supplied', () => {
const button = shallow(
<Button href="https://wordpress.org/" disabled />
);
).find( 'button' );

expect( button.type() ).toBe( 'button' );
} );
Expand Down
29 changes: 19 additions & 10 deletions packages/components/src/color-palette/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,16 +87,19 @@ exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`]
`;

exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`] = `
<button
aria-expanded={true}
aria-haspopup="true"
aria-label="Custom color picker"
className="components-button is-link"
onClick={[MockFunction]}
type="button"
>
Custom color
</button>
<Fragment>
<button
aria-describedby={null}
aria-expanded={true}
aria-haspopup="true"
aria-label="Custom color picker"
className="components-button is-link"
onClick={[MockFunction]}
type="button"
>
Custom color
</button>
</Fragment>
`;

exports[`ColorPalette Dropdown should render it correctly 1`] = `
Expand All @@ -117,6 +120,7 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
onClick={[Function]}
>
<button
aria-describedby={null}
aria-expanded={false}
aria-haspopup="true"
aria-label="Custom color picker"
Expand Down Expand Up @@ -333,6 +337,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
}
>
<button
aria-describedby={null}
aria-label="Color: red"
aria-pressed={true}
className="components-button components-circular-option-picker__option is-pressed"
Expand Down Expand Up @@ -432,6 +437,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
}
>
<button
aria-describedby={null}
aria-label="Color: white"
aria-pressed={false}
className="components-button components-circular-option-picker__option"
Expand Down Expand Up @@ -491,6 +497,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
}
>
<button
aria-describedby={null}
aria-label="Color: blue"
aria-pressed={false}
className="components-button components-circular-option-picker__option"
Expand Down Expand Up @@ -547,6 +554,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
onClick={[Function]}
>
<button
aria-describedby={null}
aria-expanded={false}
aria-haspopup="true"
aria-label="Custom color picker"
Expand All @@ -570,6 +578,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
onClick={[Function]}
>
<button
aria-describedby={null}
className="components-button components-circular-option-picker__clear is-secondary is-small"
onClick={[Function]}
type="button"
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-palette/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ describe( 'ColorPalette', () => {
} );

test( 'should call onToggle on click.', () => {
renderedToggleButton.simulate( 'click' );
renderedToggleButton.find( 'button' ).simulate( 'click' );

expect( onToggle ).toHaveBeenCalledTimes( 1 );
} );
Expand Down
6 changes: 6 additions & 0 deletions packages/components/src/color-picker/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
className="components-color-picker__inputs-toggle-wrapper"
>
<button
aria-describedby={null}
aria-label="Change color format"
className="components-button components-color-picker__inputs-toggle has-icon"
onBlur={[Function]}
Expand Down Expand Up @@ -354,6 +355,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
className="components-color-picker__inputs-toggle-wrapper"
>
<button
aria-describedby={null}
aria-label="Change color format"
className="components-button components-color-picker__inputs-toggle has-icon"
onBlur={[Function]}
Expand Down Expand Up @@ -546,6 +548,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
className="components-color-picker__inputs-toggle-wrapper"
>
<button
aria-describedby={null}
aria-label="Change color format"
className="components-button components-color-picker__inputs-toggle has-icon"
onBlur={[Function]}
Expand Down Expand Up @@ -738,6 +741,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
className="components-color-picker__inputs-toggle-wrapper"
>
<button
aria-describedby={null}
aria-label="Change color format"
className="components-button components-color-picker__inputs-toggle has-icon"
onBlur={[Function]}
Expand Down Expand Up @@ -930,6 +934,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
className="components-color-picker__inputs-toggle-wrapper"
>
<button
aria-describedby={null}
aria-label="Change color format"
className="components-button components-color-picker__inputs-toggle has-icon"
onBlur={[Function]}
Expand Down Expand Up @@ -1122,6 +1127,7 @@ exports[`ColorPicker should render color picker 1`] = `
className="components-color-picker__inputs-toggle-wrapper"
>
<button
aria-describedby={null}
aria-label="Change color format"
className="components-button components-color-picker__inputs-toggle has-icon"
onBlur={[Function]}
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ exports[`MoreMenu should match snapshot 1`] = `
text="Options"
>
<button
aria-describedby={null}
aria-expanded={false}
aria-haspopup="true"
aria-label="Options"
Expand Down
Loading

0 comments on commit ce5a39b

Please sign in to comment.