Testing: Remove unnecessary Enzyme React 16 workarounds (#14156)

* Testing: Bump `enzyme-adapter-react-16` to 1.10.0 * Testing: Avoid unforwarded Button mock No longer necessary with native support for forwardRef in Enzyme * Testing: Un-skip BlockControls snapshot test
WordPress · Feb 28, 2019 · fe2136d · fe2136d
1 parent 4472b1b
commit fe2136d
Show file tree

Hide file tree

Showing 21 changed files with 78 additions and 94 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/src/button/__mocks__/index.js b/packages/components/src/button/__mocks__/index.js
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -180,15 +180,15 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
   <div
     className="components-color-palette__custom-clear-wrapper"
   >
-    <Button
+    <ForwardRef(Button)
       className="components-color-palette__clear"
       isDefault={true}
       isSmall={true}
       onClick={[Function]}
       type="button"
     >
       Clear
-    </Button>
+    </ForwardRef(Button)>
   </div>
 </div>
 `;
@@ -272,15 +272,15 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       renderContent={[Function]}
       renderToggle={[Function]}
     />
-    <Button
+    <ForwardRef(Button)
       className="components-color-palette__clear"
       isDefault={true}
       isSmall={true}
       onClick={[Function]}
       type="button"
     >
       Clear
-    </Button>
+    </ForwardRef(Button)>
   </div>
 </div>
 `;
diff --git a/packages/components/src/color-palette/test/index.js b/packages/components/src/color-palette/test/index.js
@@ -8,8 +8,6 @@ import { shallow } from 'enzyme';
  */
 import ColorPalette from '../';
 
-jest.mock( '../../button' );
-
 describe( 'ColorPalette', () => {
 	const colors = [ { name: 'red', color: '#f00' }, { name: 'white', color: '#fff' }, { name: 'blue', color: '#00f' } ];
 	const currentColor = '#f00';

diff --git a/packages/components/src/icon-button/test/index.js b/packages/components/src/icon-button/test/index.js
@@ -8,8 +8,6 @@ import { shallow } from 'enzyme';
  */
 import IconButton from '../';
 
-jest.mock( '../../button' );
-
 describe( 'IconButton', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an top level element with only a class property', () => {
@@ -30,15 +28,15 @@ describe( 'IconButton', () => {
 
 		it( 'should add an aria-label when the label property is used', () => {
 			const iconButton = shallow( <IconButton label="WordPress">WordPress</IconButton> );
-			expect( iconButton.name() ).toBe( 'Button' );
+			expect( iconButton.name() ).toBe( 'ForwardRef(Button)' );
 			expect( iconButton.prop( 'aria-label' ) ).toBe( 'WordPress' );
 		} );
 
 		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', () => {
 			const iconButton = shallow( <IconButton label="WordPress" /> );
 			expect( iconButton.name() ).toBe( 'Tooltip' );
 			expect( iconButton.prop( 'text' ) ).toBe( 'WordPress' );
-			expect( iconButton.find( 'Button' ).prop( 'aria-label' ) ).toBe( 'WordPress' );
+			expect( iconButton.find( 'ForwardRef(Button)' ).prop( 'aria-label' ) ).toBe( 'WordPress' );
 		} );
 
 		it( 'should support explicit aria-label override', () => {
@@ -60,12 +58,12 @@ describe( 'IconButton', () => {
 			const iconButton = shallow( <IconButton label="WordPress" tooltip="Custom" /> );
 			expect( iconButton.name() ).toBe( 'Tooltip' );
 			expect( iconButton.prop( 'text' ) ).toBe( 'Custom' );
-			expect( iconButton.find( 'Button' ).prop( 'aria-label' ) ).toBe( 'WordPress' );
+			expect( iconButton.find( 'ForwardRef(Button)' ).prop( 'aria-label' ) ).toBe( 'WordPress' );
 		} );
 
 		it( 'should allow tooltip disable', () => {
 			const iconButton = shallow( <IconButton label="WordPress" tooltip={ false } /> );
-			expect( iconButton.name() ).toBe( 'Button' );
+			expect( iconButton.name() ).toBe( 'ForwardRef(Button)' );
 			expect( iconButton.prop( 'aria-label' ) ).toBe( 'WordPress' );
 		} );
 

diff --git a/packages/components/src/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap
@@ -17,7 +17,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
 `;
 
 exports[`MenuItem should match snapshot when info is provided 1`] = `
-<Button
+<ForwardRef(Button)
   aria-describedby="edit-post-feature-toggle__info-1"
   className="components-menu-item__button"
   role="menuitem"
@@ -36,7 +36,7 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
   <Shortcut
     className="components-menu-item__shortcut"
   />
-</Button>
+</ForwardRef(Button)>
 `;
 
 exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
@@ -55,13 +55,13 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
 `;
 
 exports[`MenuItem should match snapshot when only label provided 1`] = `
-<Button
+<ForwardRef(Button)
   className="components-menu-item__button"
   role="menuitem"
 >
   My item
   <Shortcut
     className="components-menu-item__shortcut"
   />
-</Button>
+</ForwardRef(Button)>
 `;
diff --git a/packages/components/src/menu-item/test/index.js b/packages/components/src/menu-item/test/index.js
@@ -9,8 +9,6 @@ import { noop } from 'lodash';
  */
 import { MenuItem } from '../';
 
-jest.mock( '../../button' );
-
 describe( 'MenuItem', () => {
 	it( 'should match snapshot when only label provided', () => {
 		const wrapper = shallow(

diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
@@ -8,8 +8,6 @@ import { shallow, mount } from 'enzyme';
  */
 import { PanelBody } from '../body';
 
-jest.mock( '../../button' );
-
 describe( 'PanelBody', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an empty div with the matching className', () => {

diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
@@ -23,7 +23,7 @@ exports[`MoreMenu should match snapshot 1`] = `
           position="bottom"
           text="Show more tools & options"
         >
-          <Button
+          <ForwardRef(Button)
             aria-expanded={false}
             aria-label="Show more tools & options"
             className="components-icon-button"
@@ -79,7 +79,7 @@ exports[`MoreMenu should match snapshot 1`] = `
                 </SVG>
               </Dashicon>
             </button>
-          </Button>
+          </ForwardRef(Button)>
         </Tooltip>
       </IconButton>
     </div>

diff --git a/packages/edit-post/src/components/header/more-menu/test/index.js b/packages/edit-post/src/components/header/more-menu/test/index.js
@@ -8,8 +8,6 @@ import { mount } from 'enzyme';
  */
 import MoreMenu from '../index';
 
-jest.mock( '../../../../../../components/src/button' );
-
 describe( 'MoreMenu', () => {
 	it( 'should match snapshot', () => {
 		const wrapper = mount(

diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/index.js b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/index.js
@@ -9,8 +9,6 @@ import { render } from '@wordpress/element';
  */
 import PluginPostPublishPanel from '../';
 
-jest.mock( '../../../../../../components/src/button' );
-
 describe( 'PluginPostPublishPanel', () => {
 	test( 'renders fill properly', () => {
 		const div = document.createElement( 'div' );

diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js
@@ -9,8 +9,6 @@ import { render } from '@wordpress/element';
  */
 import PluginPrePublishPanel from '../';
 
-jest.mock( '../../../../../../components/src/button' );
-
 describe( 'PluginPrePublishPanel', () => {
 	test( 'renders fill properly', () => {
 		const div = document.createElement( 'div' );

diff --git a/packages/editor/src/components/block-controls/test/__snapshots__/index.js.snap b/packages/editor/src/components/block-controls/test/__snapshots__/index.js.snap
@@ -1,32 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BlockControls Should render a dynamic toolbar of controls 1`] = `
-<Fill
-  name="Block.Toolbar"
->
-  <Toolbar
-    controls={
-      Array [
-        Object {
-          "align": "left",
-          "icon": "editor-alignleft",
-          "title": "Align left",
-        },
-        Object {
-          "align": "center",
-          "icon": "editor-aligncenter",
-          "title": "Align center",
-        },
-        Object {
-          "align": "right",
-          "icon": "editor-alignright",
-          "title": "Align right",
-        },
-      ]
+exports[`BlockControls should render a dynamic toolbar of controls 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "clientId": undefined,
+      "focusedElement": null,
+      "isSelected": true,
+      "name": undefined,
+      "setFocusedElement": [Function],
     }
-  />
-  <p>
-    Child
-  </p>
-</Fill>
+  }
+>
+  <WithFilters(Edit)
+    isSelected={true}
+  >
+    <IfBlockEditSelected(BlockControlsFill)
+      controls={
+        Array [
+          Object {
+            "align": "left",
+            "icon": "editor-alignleft",
+            "title": "Align left",
+          },
+          Object {
+            "align": "center",
+            "icon": "editor-aligncenter",
+            "title": "Align center",
+          },
+          Object {
+            "align": "right",
+            "icon": "editor-alignright",
+            "title": "Align right",
+          },
+        ]
+      }
+    >
+      <p>
+        Child
+      </p>
+    </IfBlockEditSelected(BlockControlsFill)>
+  </WithFilters(Edit)>
+</ContextProvider>
 `;
diff --git a/packages/editor/src/components/block-controls/test/index.js b/packages/editor/src/components/block-controls/test/index.js
@@ -6,7 +6,8 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { BlockControls } from '../';
+import BlockControls from '../';
+import BlockEdit from '../../block-edit';
 
 describe( 'BlockControls', () => {
 	const controls = [
@@ -27,9 +28,15 @@ describe( 'BlockControls', () => {
 		},
 	];
 
-	// Skipped temporarily until Enzyme publishes new version that works with React 16.3.0 APIs.
-	// eslint-disable-next-line jest/no-disabled-tests
-	test.skip( 'Should render a dynamic toolbar of controls', () => {
-		expect( shallow( <BlockControls controls={ controls } children={ <p>Child</p> } /> ) ).toMatchSnapshot();
+	it( 'should render a dynamic toolbar of controls', () => {
+		const wrapper = shallow(
+			<BlockEdit isSelected>
+				<BlockControls controls={ controls }>
+					<p>Child</p>
+				</BlockControls>
+			</BlockEdit>
+		);
+
+		expect( wrapper ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PostPreviewButton render() should render currentPostLink otherwise 1`] = `
-<Button
+<ForwardRef(Button)
   className="editor-post-preview"
   disabled={false}
   href="https://wordpress.org/?p=1"
@@ -20,11 +20,11 @@ exports[`PostPreviewButton render() should render currentPostLink otherwise 1`]
   >
     Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.
   </WithSelect(WithDispatch(DotTip))>
-</Button>
+</ForwardRef(Button)>
 `;
 
 exports[`PostPreviewButton render() should render previewLink if provided 1`] = `
-<Button
+<ForwardRef(Button)
   className="editor-post-preview"
   disabled={false}
   href="https://wordpress.org/?p=1&preview=true"
@@ -43,5 +43,5 @@ exports[`PostPreviewButton render() should render previewLink if provided 1`] =
   >
     Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.
   </WithSelect(WithDispatch(DotTip))>
-</Button>
+</ForwardRef(Button)>
 `;
diff --git a/packages/editor/src/components/post-preview-button/test/index.js b/packages/editor/src/components/post-preview-button/test/index.js
@@ -8,8 +8,6 @@ import { shallow } from 'enzyme';
  */
 import { PostPreviewButton } from '../';
 
-jest.mock( '../../../../../components/src/button' );
-
 describe( 'PostPreviewButton', () => {
 	describe( 'setPreviewWindowLink()', () => {
 		it( 'should do nothing if there is no preview window', () => {

diff --git a/packages/editor/src/components/post-publish-button/test/index.js b/packages/editor/src/components/post-publish-button/test/index.js
@@ -8,8 +8,6 @@ import { shallow } from 'enzyme';
  */
 import { PostPublishButton } from '../';
 
-jest.mock( '../../../../../components/src/button' );
-
 describe( 'PostPublishButton', () => {
 	describe( 'aria-disabled', () => {
 		it( 'should be true if post is currently saving', () => {
@@ -196,6 +194,6 @@ describe( 'PostPublishButton', () => {
 			/>
 		);
 
-		expect( wrapper.find( 'Button' ).prop( 'isBusy' ) ).toBe( true );
+		expect( wrapper.find( 'ForwardRef(Button)' ).prop( 'isBusy' ) ).toBe( true );
 	} );
 } );
diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
@@ -8,6 +8,7 @@
 ### Internal
 
 - The bundled `enzyme` dependency has been updated from requiring `^3.7.0` to requiring `^3.9.0` ([#13922](https://github.com/WordPress/gutenberg/pull/13922)).
+- The bundled `enzyme-adapter-react-16` dependency has been updated from requiring `^1.6.0` to requiring `^1.10.0` ([#13922](https://github.com/WordPress/gutenberg/pull/13922)).
 
 ## 3.0.3 (2018-11-20)
 

diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
@@ -33,7 +33,7 @@
 		"@wordpress/jest-console": "file:../jest-console",
 		"babel-jest": "^24.1.0",
 		"enzyme": "^3.9.0",
-		"enzyme-adapter-react-16": "^1.9.1",
+		"enzyme-adapter-react-16": "^1.10.0",
 		"enzyme-to-json": "^3.3.5"
 	},
 	"peerDependencies": {