From ce5a39ba2d27e275b0650d8de11e9270a98ecccd Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 12 Jan 2021 15:08:42 +1100
Subject: [PATCH] Fix unit tests and update snapshots.

---
 .../test/__snapshots__/index.js.snap          | 10 ++++
 .../test/__snapshots__/index.js.snap          |  5 ++
 .../test/__snapshots__/control.js.snap        |  3 +
 packages/components/src/button/test/index.js  | 59 ++++++++++++-------
 .../test/__snapshots__/index.js.snap          | 29 +++++----
 .../src/color-palette/test/index.js           |  2 +-
 .../test/__snapshots__/index.js.snap          |  6 ++
 .../test/__snapshots__/index.js.snap          |  1 +
 .../enable-custom-fields.js.snap              |  2 +
 9 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
index 3fb02929f40ced..c6699db92e4961 100644
--- a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
@@ -54,6 +54,11 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified
       "position": "bottom right",
     }
   }
+  toggleProps={
+    Object {
+      "describedBy": "Change text alignment",
+    }
+  }
 />
 `;
 
@@ -126,5 +131,10 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
       "position": "bottom right",
     }
   }
+  toggleProps={
+    Object {
+      "describedBy": "Change text alignment",
+    }
+  }
 />
 `;
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
index 7ee8dca3dac494..5910fc1b29e976 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
@@ -65,5 +65,10 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
       "isAlternate": true,
     }
   }
+  toggleProps={
+    Object {
+      "describedBy": "Change alignment",
+    }
+  }
 />
 `;
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 789949e13e9c09..1328665a03eb5d 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -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"
@@ -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"
@@ -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"
diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js
index 49de9ef1d59ad2..cb973cb71dfbe2 100644
--- a/packages/components/src/button/test/index.js
+++ b/packages/components/src/button/test/index.js
@@ -3,7 +3,6 @@
  */
 import { shallow } from 'enzyme';
 import TestUtils from 'react-dom/test-utils';
-
 /**
  * WordPress dependencies
  */
@@ -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 );
@@ -30,13 +29,15 @@ 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 );
@@ -44,48 +45,58 @@ describe( 'Button', () => {
 		} );
 
 		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();
 		} );
 
@@ -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'
@@ -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(
@@ -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' );
 		} );
 
@@ -125,7 +138,7 @@ describe( 'Button', () => {
 					label="WordPress"
 					showTooltip={ false }
 				/>
-			);
+			).find( 'button' );
 			expect( iconButton.name() ).toBe( 'button' );
 			expect( iconButton.prop( 'aria-label' ) ).toBe( 'WordPress' );
 		} );
@@ -133,7 +146,7 @@ describe( 'Button', () => {
 		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' );
 		} );
@@ -143,7 +156,7 @@ describe( 'Button', () => {
 				<Button icon={ plusCircle } label="WordPress">
 					Children
 				</Button>
-			);
+			).find( 'button' );
 			expect( iconButton.name() ).toBe( 'button' );
 		} );
 
@@ -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/' );
@@ -168,7 +183,7 @@ 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' );
 		} );
@@ -176,7 +191,7 @@ describe( 'Button', () => {
 		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' );
 		} );
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 93e90b9b95908f..1db3cdb27938f3 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -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`] = `
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
diff --git a/packages/components/src/color-palette/test/index.js b/packages/components/src/color-palette/test/index.js
index 22d28ed762b4f7..7cc0a05e41f9be 100644
--- a/packages/components/src/color-palette/test/index.js
+++ b/packages/components/src/color-palette/test/index.js
@@ -101,7 +101,7 @@ describe( 'ColorPalette', () => {
 			} );
 
 			test( 'should call onToggle on click.', () => {
-				renderedToggleButton.simulate( 'click' );
+				renderedToggleButton.find( 'button' ).simulate( 'click' );
 
 				expect( onToggle ).toHaveBeenCalledTimes( 1 );
 			} );
diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
index 4fdc373fe966bd..e523f743a0ddda 100644
--- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
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
index 7dfc1004081211..af117caedc07b9 100644
--- 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
@@ -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"
diff --git a/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
index 73f69e0b93df00..fee4ac787e9698 100644
--- a/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
@@ -61,6 +61,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
     A page reload is required for this change. Make sure your content is saved before reloading.
   </p>
   <button
+    aria-describedby={null}
     className="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
     disabled={false}
     onClick={[Function]}
@@ -176,6 +177,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
     A page reload is required for this change. Make sure your content is saved before reloading.
   </p>
   <button
+    aria-describedby={null}
     className="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
     disabled={false}
     onClick={[Function]}