From 75430965663d1a31a0daf5c21fcee1f5c3c891bc Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 13 Sep 2022 11:02:51 +0300
Subject: [PATCH] Block Editor: Refactor `BlockIcon` tests to
`@testing-library/react` (#44089)
* Block Editor: Refactor BlockIcon tests to @testing-library/react
* Add a test for the custom className
---
.../test/__snapshots__/index.js.snap | 22 +++++++++
.../src/components/block-icon/test/index.js | 47 ++++++++++++-------
2 files changed, 53 insertions(+), 16 deletions(-)
create mode 100644 packages/block-editor/src/components/block-icon/test/__snapshots__/index.js.snap
diff --git a/packages/block-editor/src/components/block-icon/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-icon/test/__snapshots__/index.js.snap
new file mode 100644
index 0000000000000..977b1d1a5f6c8
--- /dev/null
+++ b/packages/block-editor/src/components/block-icon/test/__snapshots__/index.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockIcon renders a Icon 1`] = `
+
+`;
diff --git a/packages/block-editor/src/components/block-icon/test/index.js b/packages/block-editor/src/components/block-icon/test/index.js
index 83774a63dbc03..28d82660c54df 100644
--- a/packages/block-editor/src/components/block-icon/test/index.js
+++ b/packages/block-editor/src/components/block-icon/test/index.js
@@ -1,12 +1,11 @@
/**
* External dependencies
*/
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
/**
* WordPress dependencies
*/
-import { Icon } from '@wordpress/components';
import { image } from '@wordpress/icons';
/**
@@ -16,42 +15,58 @@ import BlockIcon from '../';
describe( 'BlockIcon', () => {
it( 'renders a Icon', () => {
- const wrapper = shallow( );
+ const { container } = render( );
- expect(
- wrapper.containsMatchingElement( )
- ).toBe( true );
+ expect( container ).toMatchSnapshot();
} );
it( 'renders a span without the has-colors classname', () => {
- const wrapper = shallow( );
+ const { container } = render( );
- expect( wrapper.find( 'span' ).hasClass( 'has-colors' ) ).toBe( false );
+ expect( container.firstChild ).not.toHaveClass( 'has-colors' );
} );
it( 'renders a span with the has-colors classname', () => {
- const wrapper = shallow( );
+ const { container } = render( );
- expect( wrapper.find( 'span' ).hasClass( 'has-colors' ) ).toBe( true );
+ expect( container.firstChild ).toHaveClass( 'has-colors' );
+ } );
+
+ it( 'supports adding a className to the wrapper', () => {
+ const { container } = render(
+
+ );
+
+ expect( container.firstChild ).toHaveClass( 'foo-bar' );
} );
it( 'skips adding background and foreground styles when colors are not enabled', () => {
- const wrapper = shallow(
-
+ const { container } = render(
+
);
- expect( wrapper.find( 'span' ).prop( 'style' ) ).toEqual( {} );
+ expect( container.firstChild ).not.toHaveAttribute( 'style' );
} );
it( 'adds background and foreground styles when colors are enabled', () => {
- const wrapper = shallow(
+ const { container } = render(
);
- expect( wrapper.find( 'span' ).prop( 'style' ) ).toEqual( {
+ expect( container.firstChild ).toHaveStyle( {
backgroundColor: 'white',
color: 'black',
} );