@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.0

package/src/components/contrast-checker/test/index.js

@@ -1,14 +1,11 @@
 /**
  * External dependencies
  */
-import { mount } from 'enzyme';
-import { render } from 'react-dom';
-import { act } from 'react-dom/test-utils';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
-import { Notice } from '@wordpress/components';
 import { speak } from '@wordpress/a11y';
 
 /**
@@ -32,12 +29,13 @@ describe( 'ContrastChecker', () => {
 		speak.mockReset();
 	} );
 
-	test( 'should render null when no colors are provided', () => {
-		expect( mount( <ContrastChecker /> ).html() ).toBeNull();
+	test( 'should render nothing when no colors are provided', () => {
+		const { container } = render( <ContrastChecker /> );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
-	test( 'should render null when no background or fallback background color is provided', () => {
-		const wrapper = mount(
+	test( 'should render nothing when no background or fallback background color is provided', () => {
+		const { container } = render(
 			<ContrastChecker
 				textColor={ textColor }
 				linkColor={ linkColor }
@@ -46,11 +44,11 @@ describe( 'ContrastChecker', () => {
 		);
 
 		expect( speak ).not.toHaveBeenCalled();
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
-	test( 'should render null when the colors meet AA WCAG guidelines.', () => {
-		const wrapper = mount(
+	test( 'should render nothing when the colors meet AA WCAG guidelines.', () => {
+		const { container } = render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
 				textColor={ textColor }
@@ -62,11 +60,11 @@ describe( 'ContrastChecker', () => {
 		);
 
 		expect( speak ).not.toHaveBeenCalled();
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	test( 'should render component when the text and background colors do not meet AA WCAG guidelines.', () => {
-		const wrapper = mount(
+		render(
 			<ContrastChecker
 				backgroundColor={ sameShade }
 				textColor={ sameShade }
@@ -79,13 +77,16 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'This color combination may be hard for people to read.'
 		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
-		);
+
+		expect(
+			screen.getByText(
+				'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+			)
+		).toBeVisible();
 	} );
 
 	test( 'should render component when the link and background colors do not meet AA WCAG guidelines.', () => {
-		const wrapper = mount(
+		render(
 			<ContrastChecker
 				backgroundColor={ sameShade }
 				textColor={ textColor }
@@ -99,13 +100,15 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'This color combination may be hard for people to read.'
 		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
-		);
+		expect(
+			screen.getByText(
+				'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
+			)
+		).toBeVisible();
 	} );
 
 	test( 'should render component when the link and text and background colors do not meet AA WCAG guidelines.', () => {
-		const wrapper = mount(
+		render(
 			<ContrastChecker
 				backgroundColor={ sameShade }
 				textColor={ sameShade }
@@ -119,13 +122,15 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'This color combination may be hard for people to read.'
 		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
-		);
+		expect(
+			screen.getByText(
+				'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+			)
+		).toBeVisible();
 	} );
 
-	test( 'should render render null if background color contains a transparency', () => {
-		const wrapper = mount(
+	test( 'should render nothing if background color contains a transparency', () => {
+		const { container } = render(
 			<ContrastChecker
 				backgroundColor={ colorWithTransparency }
 				textColor={ sameShade }
@@ -137,11 +142,11 @@ describe( 'ContrastChecker', () => {
 		);
 
 		expect( speak ).not.toHaveBeenCalled();
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
-	test( 'should render render null if text color contains a transparency', () => {
-		const wrapper = mount(
+	test( 'should render nothing if text color contains a transparency', () => {
+		const { container } = render(
 			<ContrastChecker
 				backgroundColor={ sameShade }
 				textColor={ colorWithTransparency }
@@ -152,11 +157,11 @@ describe( 'ContrastChecker', () => {
 		);
 
 		expect( speak ).not.toHaveBeenCalled();
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
-	test( 'should render render null if link color contains a transparency', () => {
-		const wrapper = mount(
+	test( 'should render nothing if link color contains a transparency', () => {
+		const { container } = render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
 				textColor={ textColor }
@@ -168,13 +173,13 @@ describe( 'ContrastChecker', () => {
 		);
 
 		expect( speak ).not.toHaveBeenCalled();
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	test( 'should render different message matching snapshot when background color has less brightness than text color.', () => {
 		const darkerShade = '#555';
 
-		const wrapper = mount(
+		render(
 			<ContrastChecker
 				backgroundColor={ darkerShade }
 				textColor={ sameShade }
@@ -187,13 +192,15 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'This color combination may be hard for people to read.'
 		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'
-		);
+		expect(
+			screen.getByText(
+				'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'
+			)
+		).toBeVisible();
 	} );
 
 	test( 'should take into consideration wherever text is large or not', () => {
-		const wrapperSmallText = mount(
+		const { container, rerender } = render(
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
@@ -204,11 +211,13 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'This color combination may be hard for people to read.'
 		);
-		expect( wrapperSmallText.find( Notice ).children().text() ).toBe(
-			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
-		);
+		expect(
+			screen.getByText(
+				'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+			)
+		).toBeVisible();
 
-		const wrapperLargeText = mount(
+		rerender(
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
@@ -216,11 +225,11 @@ describe( 'ContrastChecker', () => {
 			/>
 		);
 
-		expect( wrapperLargeText.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	test( 'should take into consideration the font size passed', () => {
-		const wrapperSmallFontSize = mount(
+		const { container, rerender } = render(
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
@@ -231,11 +240,13 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'This color combination may be hard for people to read.'
 		);
-		expect( wrapperSmallFontSize.find( Notice ).children().text() ).toBe(
-			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
-		);
+		expect(
+			screen.getByText(
+				'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+			)
+		).toBeVisible();
 
-		const wrapperLargeText = mount(
+		rerender(
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
@@ -243,11 +254,11 @@ describe( 'ContrastChecker', () => {
 			/>
 		);
 
-		expect( wrapperLargeText.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	test( 'should use isLargeText to make decisions if both isLargeText and fontSize props are passed', () => {
-		const wrapper = mount(
+		const { container, rerender } = render(
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
@@ -257,9 +268,9 @@ describe( 'ContrastChecker', () => {
 		);
 
 		expect( speak ).not.toHaveBeenCalled();
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 
-		const wrapperNoLargeText = mount(
+		rerender(
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
@@ -271,13 +282,15 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'This color combination may be hard for people to read.'
 		);
-		expect( wrapperNoLargeText.find( Notice ).children().text() ).toBe(
-			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
-		);
+		expect(
+			screen.getByText(
+				'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+			)
+		).toBeVisible();
 	} );
 
-	test( 'should render null when the colors meet AA WCAG guidelines, with only fallback colors.', () => {
-		const wrapper = mount(
+	test( 'should render nothing when the colors meet AA WCAG guidelines, with only fallback colors.', () => {
+		const { container } = render(
 			<ContrastChecker
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
@@ -286,11 +299,11 @@ describe( 'ContrastChecker', () => {
 		);
 
 		expect( speak ).not.toHaveBeenCalled();
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	test( 'should render messages when the textColor is valid, but the fallback backgroundColor conflicts.', () => {
-		const wrapper = mount(
+		render(
 			<ContrastChecker
 				textColor={ textColor }
 				fallbackBackgroundColor={ textColor }
@@ -300,13 +313,15 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'This color combination may be hard for people to read.'
 		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
-		);
+		expect(
+			screen.getByText(
+				'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+			)
+		).toBeVisible();
 	} );
 
 	test( 'should render messages when the linkColor is valid, but the fallback backgroundColor conflicts.', () => {
-		const wrapper = mount(
+		render(
 			<ContrastChecker
 				linkColor={ linkColor }
 				fallbackBackgroundColor={ linkColor }
@@ -316,40 +331,34 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'This color combination may be hard for people to read.'
 		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
-		);
+		expect(
+			screen.getByText(
+				'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
+			)
+		).toBeVisible();
 	} );
 
 	test( 'should re-announce if colors change, but still insufficient contrast', () => {
-		const appRoot = document.createElement( 'div' );
-
-		act( () => {
-			render(
-				<ContrastChecker
-					textColor={ textColor }
-					fallbackBackgroundColor={ textColor }
-				/>,
-				appRoot
-			);
-		} );
-
-		act( () => {
-			render(
-				<ContrastChecker
-					textColor={ backgroundColor }
-					fallbackBackgroundColor={ backgroundColor }
-				/>,
-				appRoot
-			);
-		} );
+		const { rerender } = render(
+			<ContrastChecker
+				textColor={ textColor }
+				fallbackBackgroundColor={ textColor }
+			/>
+		);
+
+		rerender(
+			<ContrastChecker
+				textColor={ backgroundColor }
+				fallbackBackgroundColor={ backgroundColor }
+			/>
+		);
 
 		expect( speak ).toHaveBeenCalledTimes( 2 );
 	} );
 
 	// enableAlphaChecker tests
-	test( 'should render null when the colors meet AA WCAG guidelines and alpha checker enabled.', () => {
-		const wrapper = mount(
+	test( 'should render nothing when the colors meet AA WCAG guidelines and alpha checker enabled.', () => {
+		const { container } = render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
 				textColor={ textColor }
@@ -359,11 +368,11 @@ describe( 'ContrastChecker', () => {
 		);
 
 		expect( speak ).not.toHaveBeenCalled();
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	test( 'should render component when the colors meet AA WCAG guidelines but the text color only has alpha transparency with alpha checker enabled.', () => {
-		const wrapper = mount(
+		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
 				textColor={ 'rgba(0,0,0,0.9)' }
@@ -376,13 +385,15 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'Transparent text may be hard for people to read.'
 		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'Transparent text may be hard for people to read.'
-		);
+		expect(
+			screen.getByText(
+				'Transparent text may be hard for people to read.'
+			)
+		).toBeVisible();
 	} );
 
 	test( 'should render component when the colors meet AA WCAG guidelines but the link color only has alpha transparency with alpha checker enabled.', () => {
-		const wrapper = mount(
+		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
 				linkColor={ 'rgba(0,0,0,0.9)' }
@@ -395,13 +406,15 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'Transparent text may be hard for people to read.'
 		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'Transparent text may be hard for people to read.'
-		);
+		expect(
+			screen.getByText(
+				'Transparent text may be hard for people to read.'
+			)
+		).toBeVisible();
 	} );
 
-	test( 'should render null when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => {
-		const wrapper = mount(
+	test( 'should render nothing when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => {
+		const { container } = render(
 			<ContrastChecker
 				backgroundColor={ 'rgba(255,255,255,0.7)' }
 				textColor={ textColor }
@@ -412,11 +425,11 @@ describe( 'ContrastChecker', () => {
 		);
 
 		expect( speak ).not.toHaveBeenCalled();
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
-	test( 'should render null if background color contains a transparency with alpha checker enabled.', () => {
-		const wrapper = mount(
+	test( 'should render nothing if background color contains a transparency with alpha checker enabled.', () => {
+		const { container } = render(
 			<ContrastChecker
 				backgroundColor={ colorWithTransparency }
 				textColor={ sameShade }
@@ -429,11 +442,11 @@ describe( 'ContrastChecker', () => {
 		);
 
 		expect( speak ).not.toHaveBeenCalled();
-		expect( wrapper.html() ).toBeNull();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	test( 'should render transparency warning only if one text is not readable but the other is transparent and the background color contains a transparency with alpha checker enabled.', () => {
-		const wrapper = mount(
+		render(
 			<ContrastChecker
 				backgroundColor={ colorWithTransparency }
 				textColor={ sameShade }
@@ -448,13 +461,15 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'Transparent text may be hard for people to read.'
 		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'Transparent text may be hard for people to read.'
-		);
+		expect(
+			screen.getByText(
+				'Transparent text may be hard for people to read.'
+			)
+		).toBeVisible();
 	} );
 
 	test( 'should render component and prioritize contrast warning when the colors do no meet AA WCAG guidelines and text has alpha transparency with the alpha checker enabled.', () => {
-		const wrapper = mount(
+		render(
 			<ContrastChecker
 				backgroundColor={ sameShade }
 				textColor={ 'rgba(0,0,0,0.9)' }
@@ -469,13 +484,15 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'This color combination may be hard for people to read.'
 		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
-		);
+		expect(
+			screen.getByText(
+				'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
+			)
+		).toBeVisible();
 	} );
 
 	test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => {
-		const wrapper = mount(
+		render(
 			<ContrastChecker
 				backgroundColor={ 'rgba(255,255,255,0.7)' }
 				linkColor={ 'rgba(0,0,0,0.7)' }
@@ -488,8 +505,10 @@ describe( 'ContrastChecker', () => {
 		expect( speak ).toHaveBeenCalledWith(
 			'Transparent text may be hard for people to read.'
 		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'Transparent text may be hard for people to read.'
-		);
+		expect(
+			screen.getByText(
+				'Transparent text may be hard for people to read.'
+			)
+		).toBeVisible();
 	} );
 } );

package/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -1,73 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
-<div
-  className="block-editor-default-block-appender has-visible-prompt"
-  data-root-client-id=""
->
-  <p
-    aria-label="Add default block"
-    className="block-editor-default-block-appender__content"
-    onClick={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    role="button"
-    tabIndex="0"
+<div>
+  <div
+    class="block-editor-default-block-appender has-visible-prompt"
+    data-root-client-id=""
   >
-    Type / to choose a block
-  </p>
-  <WithSelect(WithDispatch(IfCondition(Inserter)))
-    __experimentalIsQuick={true}
-    isAppender={true}
-    position="bottom right"
-  />
+    <p
+      aria-label="Add default block"
+      class="block-editor-default-block-appender__content"
+      role="button"
+      tabindex="0"
+    >
+      Type / to choose a block
+    </p>
+  </div>
 </div>
 `;
 
 exports[`DefaultBlockAppender should match snapshot 1`] = `
-<div
-  className="block-editor-default-block-appender has-visible-prompt"
-  data-root-client-id=""
->
-  <p
-    aria-label="Add default block"
-    className="block-editor-default-block-appender__content"
-    onClick={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    role="button"
-    tabIndex="0"
+<div>
+  <div
+    class="block-editor-default-block-appender has-visible-prompt"
+    data-root-client-id=""
   >
-    Type / to choose a block
-  </p>
-  <WithSelect(WithDispatch(IfCondition(Inserter)))
-    __experimentalIsQuick={true}
-    isAppender={true}
-    position="bottom right"
-  />
+    <p
+      aria-label="Add default block"
+      class="block-editor-default-block-appender__content"
+      role="button"
+      tabindex="0"
+    >
+      Type / to choose a block
+    </p>
+  </div>
 </div>
 `;
 
 exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
-<div
-  className="block-editor-default-block-appender"
-  data-root-client-id=""
->
-  <p
-    aria-label="Add default block"
-    className="block-editor-default-block-appender__content"
-    onClick={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    role="button"
-    tabIndex="0"
+<div>
+  <div
+    class="block-editor-default-block-appender"
+    data-root-client-id=""
   >
-    
-  </p>
-  <WithSelect(WithDispatch(IfCondition(Inserter)))
-    __experimentalIsQuick={true}
-    isAppender={true}
-    position="bottom right"
-  />
+    <p
+      aria-label="Add default block"
+      class="block-editor-default-block-appender__content"
+      role="button"
+      tabindex="0"
+    >
+      
+    </p>
+  </div>
 </div>
 `;