-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Components: Refactor Icon
tests to @testing-library/react
#44051
Changes from 4 commits
fa8a107
03efa9f
f2b162f
5f77e01
385c25a
9d47343
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,71 +1,67 @@ | ||||||
/** | ||||||
* External dependencies | ||||||
*/ | ||||||
import { shallow } from 'enzyme'; | ||||||
|
||||||
/** | ||||||
* WordPress dependencies | ||||||
*/ | ||||||
import { Component } from '@wordpress/element'; | ||||||
import { render, screen } from '@testing-library/react'; | ||||||
|
||||||
/** | ||||||
* Internal dependencies | ||||||
*/ | ||||||
import Dashicon from '../../dashicon'; | ||||||
import Icon from '../'; | ||||||
import { Path, SVG } from '../../'; | ||||||
|
||||||
describe( 'Icon', () => { | ||||||
const testId = 'icon'; | ||||||
const className = 'example-class'; | ||||||
const svg = ( | ||||||
<SVG> | ||||||
<Path d="M5 4v3h5.5v12h3V7H19V4z" /> | ||||||
</SVG> | ||||||
); | ||||||
const style = { fill: 'red' }; | ||||||
|
||||||
it( 'renders nothing when icon omitted', () => { | ||||||
const wrapper = shallow( <Icon /> ); | ||||||
render( <Icon data-testid={ testId } /> ); | ||||||
|
||||||
expect( wrapper.type() ).toBeNull(); | ||||||
expect( screen.queryByTestId( testId ) ).not.toBeInTheDocument(); | ||||||
} ); | ||||||
|
||||||
it( 'renders a dashicon by slug', () => { | ||||||
const wrapper = shallow( <Icon icon="format-image" /> ); | ||||||
render( <Icon data-testid={ testId } icon="format-image" /> ); | ||||||
|
||||||
expect( wrapper.find( 'Dashicon' ).prop( 'icon' ) ).toBe( | ||||||
'format-image' | ||||||
expect( screen.getByTestId( testId ) ).toHaveClass( | ||||||
'dashicons-format-image' | ||||||
); | ||||||
} ); | ||||||
|
||||||
it( 'renders a function', () => { | ||||||
const wrapper = shallow( <Icon icon={ () => <span /> } /> ); | ||||||
render( <Icon icon={ () => <span data-testid={ testId } /> } /> ); | ||||||
|
||||||
expect( wrapper.name() ).toBe( 'span' ); | ||||||
expect( screen.getByTestId( testId ) ).toBeInTheDocument(); | ||||||
} ); | ||||||
|
||||||
it( 'renders an element', () => { | ||||||
const wrapper = shallow( <Icon icon={ <span /> } /> ); | ||||||
render( <Icon icon={ <span data-testid={ testId } /> } /> ); | ||||||
|
||||||
expect( wrapper.name() ).toBe( 'span' ); | ||||||
expect( screen.getByTestId( testId ) ).toBeInTheDocument(); | ||||||
} ); | ||||||
|
||||||
it( 'renders an svg element', () => { | ||||||
const wrapper = shallow( <Icon icon={ svg } /> ); | ||||||
render( <Icon data-testid={ testId } icon={ svg } /> ); | ||||||
|
||||||
expect( wrapper.name() ).toBe( 'SVG' ); | ||||||
expect( screen.getByTestId( testId ) ).toBeInTheDocument(); | ||||||
} ); | ||||||
|
||||||
it( 'renders an svg element with a default width and height of 24', () => { | ||||||
const wrapper = shallow( <Icon icon={ svg } /> ); | ||||||
render( <Icon data-testid={ testId } icon={ svg } /> ); | ||||||
const icon = screen.queryByTestId( testId ); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should be able to use
Suggested change
|
||||||
|
||||||
expect( wrapper.prop( 'width' ) ).toBe( 24 ); | ||||||
expect( wrapper.prop( 'height' ) ).toBe( 24 ); | ||||||
expect( icon ).toHaveAttribute( 'width', '24' ); | ||||||
expect( icon ).toHaveAttribute( 'height', '24' ); | ||||||
} ); | ||||||
|
||||||
it( 'renders an svg element and override its width and height', () => { | ||||||
const wrapper = shallow( | ||||||
render( | ||||||
<Icon | ||||||
data-testid={ testId } | ||||||
icon={ | ||||||
<SVG width={ 64 } height={ 64 }> | ||||||
<Path d="M5 4v3h5.5v12h3V7H19V4z" /> | ||||||
|
@@ -74,73 +70,26 @@ describe( 'Icon', () => { | |||||
size={ 32 } | ||||||
/> | ||||||
); | ||||||
const icon = screen.queryByTestId( testId ); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
expect( wrapper.prop( 'width' ) ).toBe( 32 ); | ||||||
expect( wrapper.prop( 'height' ) ).toBe( 32 ); | ||||||
expect( icon ).toHaveAttribute( 'width', '32' ); | ||||||
expect( icon ).toHaveAttribute( 'height', '32' ); | ||||||
} ); | ||||||
|
||||||
it( 'renders an svg element and does not override width and height if already specified', () => { | ||||||
const wrapper = shallow( <Icon icon={ svg } size={ 32 } /> ); | ||||||
render( <Icon data-testid={ testId } icon={ svg } size={ 32 } /> ); | ||||||
const icon = screen.queryByTestId( testId ); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
expect( wrapper.prop( 'width' ) ).toBe( 32 ); | ||||||
expect( wrapper.prop( 'height' ) ).toBe( 32 ); | ||||||
expect( icon ).toHaveAttribute( 'width', '32' ); | ||||||
expect( icon ).toHaveAttribute( 'height', '32' ); | ||||||
} ); | ||||||
|
||||||
it( 'renders a component', () => { | ||||||
class MyComponent extends Component { | ||||||
render() { | ||||||
return <span />; | ||||||
} | ||||||
} | ||||||
const wrapper = shallow( <Icon icon={ MyComponent } /> ); | ||||||
|
||||||
expect( wrapper.name() ).toBe( 'MyComponent' ); | ||||||
} ); | ||||||
|
||||||
describe( 'props passing', () => { | ||||||
class MyComponent extends Component { | ||||||
render() { | ||||||
return <span className={ this.props.className } />; | ||||||
} | ||||||
} | ||||||
|
||||||
describe.each( [ | ||||||
[ 'dashicon', { icon: 'format-image' } ], | ||||||
[ 'dashicon element', { icon: <Dashicon icon="format-image" /> } ], | ||||||
[ 'element', { icon: <span /> } ], | ||||||
[ 'svg element', { icon: svg } ], | ||||||
[ 'component', { icon: MyComponent } ], | ||||||
] )( '%s', ( label, props ) => { | ||||||
it( 'should pass through size', () => { | ||||||
if ( label === 'svg element' ) { | ||||||
// Custom logic for SVG elements tested separately. | ||||||
// | ||||||
// See: `renders an svg element and passes the size as its width and height` | ||||||
return; | ||||||
} | ||||||
|
||||||
if ( [ 'dashicon', 'dashicon element' ].includes( label ) ) { | ||||||
// `size` prop isn't passed through, since dashicon doesn't accept it. | ||||||
return; | ||||||
} | ||||||
|
||||||
const wrapper = shallow( <Icon { ...props } size={ 32 } /> ); | ||||||
|
||||||
expect( wrapper.prop( 'size' ) ).toBe( 32 ); | ||||||
} ); | ||||||
|
||||||
it( 'should pass through all other props', () => { | ||||||
const wrapper = shallow( | ||||||
<Icon | ||||||
{ ...props } | ||||||
style={ style } | ||||||
className={ className } | ||||||
/> | ||||||
); | ||||||
const MyComponent = () => ( | ||||||
<span data-testid={ testId } className={ className } /> | ||||||
); | ||||||
render( <Icon icon={ MyComponent } /> ); | ||||||
|
||||||
expect( wrapper.prop( 'style' ) ).toBe( style ); | ||||||
expect( wrapper.prop( 'className' ) ).toBe( className ); | ||||||
} ); | ||||||
} ); | ||||||
expect( screen.getByTestId( testId ) ).toHaveClass( className ); | ||||||
} ); | ||||||
} ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does it make sense to use
.toBeVisible()
which is a bit more specific than.toBeInTheDocument()
?