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
WordPress · Sep 13, 2022 · 7543096 · 7543096
1 parent ce8c27a
commit 7543096
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 16 deletions.
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
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockIcon renders a Icon 1`] = `
+<div>
+  <span
+    class="block-editor-block-icon"
+  >
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 4.5h14c.3 0 .5.2.5.5v8.4l-3-2.9c-.3-.3-.8-.3-1 0L11.9 14 9 12c-.3-.2-.6-.2-.8 0l-3.6 2.6V5c-.1-.3.1-.5.4-.5zm14 15H5c-.3 0-.5-.2-.5-.5v-2.4l4.1-3 3 1.9c.3.2.7.2.9-.1L16 12l3.5 3.4V19c0 .3-.2.5-.5.5z"
+      />
+    </svg>
+  </span>
+</div>
+`;
diff --git 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( <BlockIcon icon={ image } /> );
+		const { container } = render( <BlockIcon icon={ image } /> );
 
-		expect(
-			wrapper.containsMatchingElement( <Icon icon={ image } /> )
-		).toBe( true );
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'renders a span without the has-colors classname', () => {
-		const wrapper = shallow( <BlockIcon icon={ image } /> );
+		const { container } = render( <BlockIcon icon={ image } /> );
 
-		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( <BlockIcon icon={ image } showColors /> );
+		const { container } = render( <BlockIcon icon={ image } showColors /> );
 
-		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(
+			<BlockIcon icon={ image } className="foo-bar" />
+		);
+
+		expect( container.firstChild ).toHaveClass( 'foo-bar' );
 	} );
 
 	it( 'skips adding background and foreground styles when colors are not enabled', () => {
-		const wrapper = shallow(
-			<BlockIcon icon={ { background: 'white', foreground: 'black' } } />
+		const { container } = render(
+			<BlockIcon
+				icon={ {
+					background: 'white',
+					foreground: 'black',
+					src: 'image',
+				} }
+			/>
 		);
 
-		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(
 			<BlockIcon
-				icon={ { background: 'white', foreground: 'black' } }
+				icon={ {
+					background: 'white',
+					foreground: 'black',
+					src: 'image',
+				} }
 				showColors
 			/>
 		);
 
-		expect( wrapper.find( 'span' ).prop( 'style' ) ).toEqual( {
+		expect( container.firstChild ).toHaveStyle( {
 			backgroundColor: 'white',
 			color: 'black',
 		} );