From 2604748b37969dc8baf3b26ab1bc77f15a7a4317 Mon Sep 17 00:00:00 2001 From: Tony Tahmouch Date: Mon, 21 Feb 2022 10:40:57 -0500 Subject: [PATCH 1/5] First pass at automating some of the default state assertions for Social Icons, e.g., which Social Icons are rendered, in/active, hyperlinked, etc. The manual tests being referenced come from here: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/social-icons.md#tc001 --- package-lock.json | 10 -- .../src/social-link/edit.native.js | 7 +- .../src/social-link/test/index.native.js | 140 ++++++++++++++++++ packages/react-native-editor/ios/Podfile.lock | 12 +- test/native/setup.js | 6 + test/unit/config/global-mocks.js | 6 + 6 files changed, 163 insertions(+), 18 deletions(-) create mode 100644 packages/block-library/src/social-link/test/index.native.js diff --git a/package-lock.json b/package-lock.json index 5136812233a66..2b5b1a6aee093 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19364,16 +19364,6 @@ "yauzl": "^2.7.0" }, "dependencies": { - "are-we-there-yet": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz", - "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==", - "dev": true, - "requires": { - "delegates": "^1.0.0", - "readable-stream": "^3.6.0" - } - }, "gauge": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.1.tgz", diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js index 06bf104661819..f42f826589606 100644 --- a/packages/block-library/src/social-link/edit.native.js +++ b/packages/block-library/src/social-link/edit.native.js @@ -55,8 +55,11 @@ const SocialLinkEdit = ( { const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false ); const [ hasUrl, setHasUrl ] = useState( !! url ); - const activeIcon = - styles[ `wp-social-link-${ service }` ] || styles[ `wp-social-link` ]; + const activeIcon = styles[ `wp-social-link-${ service }` ] || + styles[ `wp-social-link` ] || { + backgroundColor: '#f0f0f0', + color: '#444', + }; const inactiveIcon = usePreferredColorSchemeStyle( styles.inactiveIcon, diff --git a/packages/block-library/src/social-link/test/index.native.js b/packages/block-library/src/social-link/test/index.native.js new file mode 100644 index 0000000000000..d809e362b6fd0 --- /dev/null +++ b/packages/block-library/src/social-link/test/index.native.js @@ -0,0 +1,140 @@ +/** + * External dependencies + */ +// noinspection DuplicatedCode +import { fireEvent, initializeEditor, waitFor, within } from 'test/helpers'; +/** + * WordPress dependencies + */ +import { registerCoreBlocks } from '@wordpress/block-library'; +import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks'; + +const unregisterBlocks = () => { + const blocks = getBlockTypes(); + + blocks.forEach( ( { name } ) => unregisterBlockType( name ) ); +}; + +describe( '', () => { + beforeAll( () => { + registerCoreBlocks(); + } ); + + afterAll( () => { + unregisterBlocks(); + } ); + + /** + * GIVEN an EDITOR is displayed; + * WHEN a SOCIAL ICONS BLOCK is selected from the BLOCK INSERTER; + */ + it( 'should display WORDPRESS, FACEBOOK, TWITTER, INSTAGRAM by default.', async () => { + // Arrange + const subject = await initializeEditor( {} ); + + // Act + fireEvent.press( + await waitFor( () => subject.getByA11yLabel( 'Add block' ) ) + ); + fireEvent.changeText( + await waitFor( () => + subject.getByPlaceholderText( 'Search blocks' ) + ), + 'social icons' + ); + fireEvent.press( + await waitFor( () => + subject.getByA11yLabel( 'Social Icons block' ) + ) + ); + fireEvent( + await waitFor( () => + within( + subject.getByA11yLabel( /Social Icons Block. Row 1/ ) + ).getByTestId( 'block-list-wrapper' ) + ), + 'layout', + { nativeEvent: { layout: { width: 100 } } } + ); + + // Assert + expect( + await waitFor( () => + subject.getByA11yLabel( /WordPress social icon/ ) + ) + ).toBeDefined(); + expect( + await waitFor( () => + subject.getByA11yLabel( /Facebook social icon/ ) + ) + ).toBeDefined(); + expect( + await waitFor( () => + subject.getByA11yLabel( /Twitter social icon/ ) + ) + ).toBeDefined(); + expect( + await waitFor( () => + subject.getByA11yLabel( /Instagram social icon/ ) + ) + ).toBeDefined(); + } ); + + /** + * GIVEN an EDITOR is displayed; + * WHEN a SOCIAL ICONS BLOCK is selected from the BLOCK INSERTER; + */ + it( `should display WORDPRESS with a URL set by default + AND should display FACEBOOK, TWITTER, INSTAGRAM with NO URL set by default.`, async () => { + // Arrange + const subject = await initializeEditor( {} ); + + // Act + fireEvent.press( + await waitFor( () => subject.getByA11yLabel( 'Add block' ) ) + ); + fireEvent.changeText( + await waitFor( () => + subject.getByPlaceholderText( 'Search blocks' ) + ), + 'social icons' + ); + fireEvent.press( + await waitFor( () => + subject.getByA11yLabel( 'Social Icons block' ) + ) + ); + fireEvent( + await waitFor( () => + within( + subject.getByA11yLabel( /Social Icons Block. Row 1/ ) + ).getByTestId( 'block-list-wrapper' ) + ), + 'layout', + { nativeEvent: { layout: { width: 100 } } } + ); + + // Assert + expect( + await waitFor( () => + subject.getByA11yHint( /WordPress has URL set/ ) + ) + ).toBeDefined(); + expect( + await waitFor( () => + subject.getByA11yHint( /Facebook has no URL set/ ) + ) + ).toBeDefined(); + expect( + await waitFor( () => + subject.getByA11yHint( /Twitter has no URL set/ ) + ) + ).toBeDefined(); + expect( + await waitFor( () => + subject.getByA11yHint( /Instagram has no URL set/ ) + ) + ).toBeDefined(); + // console.log( JSON.stringify( subject.toJSON(), null, 1 ) ); + } ); +} ); diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index a624bb601ac95..05aa428e89bc7 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -493,12 +493,12 @@ SPEC CHECKSUMS: React-logger: faee236598b0f7e1a5e3b68577016ac451f1f993 react-native-blur: ef741a08d020010ba65e411be0ab82d1d325e7ad react-native-get-random-values: 6296ac9e84928625ffb34ca74ab684bbda8747a8 - react-native-keyboard-aware-scroll-view: 0bc6c2dfe9056935a40dc1a70e764b7a1bbf6568 + react-native-keyboard-aware-scroll-view: 374b637c8684d7de50bd930df1a2d2b8fd49daa5 react-native-safe-area: c9cf765aa2dd96159476a99633e7d462ce5bb94f - react-native-safe-area-context: fb0338ddfcd1b163e1506d5ebd9b4444348e7501 + react-native-safe-area-context: 12756eb7af017b6ff6b4f50dc5a55eab299c62fd react-native-slider: d4c3367c5db5d2bec3ac0ab9d15ebb73d896034c - react-native-video: 41ac75a71f6a6d3a9f56ba792786c4fe77e22ac0 - react-native-webview: 8480d6e71b06e3d1d2fd644de6313108e7b65f90 + react-native-video: 7ebeec33e4e00837563d7315b633b00337079217 + react-native-webview: 5189276d033e3d3c5292d22e5a66ec48c9b2b04b React-perflogger: 5ab487cacfe6ec19bfe3d3f8072bf71eb07d63da React-RCTActionSheet: 03f25695e095fb5aa003828620943c74cc281fec React-RCTAnimation: eaf82da39f0c36fb0ef2a28df797c5f73a2a98ea @@ -511,8 +511,8 @@ SPEC CHECKSUMS: React-RCTVibration: 3e815c3d2dd2e0e931b68595b5b92d23ba38b3fb React-runtimeexecutor: 393e26602c1b248683372051e34db63e359e3b01 ReactCommon: c0263c1a41509aeb94be3214fa7bc3b71eae5ef6 - RNCClipboard: def60a5048b473addc5dbac5abee5d896c08ec1b - RNCMaskedView: 1c8ad5b657280e8c7ebf7866277e1ff820ae48c9 + RNCClipboard: 6e20baf63bfe3515c2b719a8c3d6797718098663 + RNCMaskedView: 579fdb1e0abb33cc0d38ee8d4942df9976a0533e RNGestureHandler: 0c0e58f463a725fa37d8643d50da6abf300f7844 RNReanimated: 7d8459391b2f3e1dc6dea919307db4adf4c1d254 RNScreens: ec0e85d1babdd61d7ec78c98072d9e6b62d96ff6 diff --git a/test/native/setup.js b/test/native/setup.js index eafb12d341548..a5832dbbccef6 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -222,6 +222,12 @@ jest.mock( '@wordpress/compose', () => { mockComponent( 'ResizeObserverMock' )( {} ), { width: 100, height: 100 }, ] ), + usePreferredColorSchemeStyle: jest.fn( () => { + return { + color: '#fff', + backgroundColor: '#0000003f', + }; + } ), }; } ); diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js index 29ca4ce94d4a6..81795b822c636 100644 --- a/test/unit/config/global-mocks.js +++ b/test/unit/config/global-mocks.js @@ -7,6 +7,12 @@ jest.mock( '@wordpress/compose', () => { , { width: 700, height: 500 }, ] ), + usePreferredColorSchemeStyle: jest.fn( () => { + return { + color: '#fff', + backgroundColor: '#0000003f', + }; + } ), }; } ); From 36e881080be6fda1bb4fdfd079f8bbb2ed70b85d Mon Sep 17 00:00:00 2001 From: Tony Tahmouch Date: Thu, 24 Feb 2022 13:59:49 -0500 Subject: [PATCH 2/5] Updated the `` component module to move the default active icon styles to a constant defined closer to the styles import, and mentioned where the values are derived. The rest of the changes are unrelated by came from a `npm run lint-js:fix`. --- .../src/social-link/edit.native.js | 18 +++++++++++------- .../src/social-link/test/index.native.js | 2 -- .../create-higher-order-component/index.ts | 4 ++-- .../data/src/redux-store/metadata/actions.js | 8 ++++---- 4 files changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js index f42f826589606..37d1a8bead2cf 100644 --- a/packages/block-library/src/social-link/edit.native.js +++ b/packages/block-library/src/social-link/edit.native.js @@ -26,6 +26,13 @@ import { withSelect } from '@wordpress/data'; import { getIconBySite, getNameBySite } from './social-list'; import styles from './editor.scss'; +/** + * These values are derived from `./socials-with-bg.scss`. + */ +const DEFAULT_ACTIVE_ICON_STYLES = { + backgroundColor: '#f0f0f0', + color: '#444', +}; const ANIMATION_DELAY = 300; const ANIMATION_DURATION = 400; @@ -54,13 +61,10 @@ const SocialLinkEdit = ( { const { url, service = name } = attributes; const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false ); const [ hasUrl, setHasUrl ] = useState( !! url ); - - const activeIcon = styles[ `wp-social-link-${ service }` ] || - styles[ `wp-social-link` ] || { - backgroundColor: '#f0f0f0', - color: '#444', - }; - + const activeIcon = + styles[ `wp-social-link-${ service }` ] || + styles[ `wp-social-link` ] || + DEFAULT_ACTIVE_ICON_STYLES; const inactiveIcon = usePreferredColorSchemeStyle( styles.inactiveIcon, styles.inactiveIconDark diff --git a/packages/block-library/src/social-link/test/index.native.js b/packages/block-library/src/social-link/test/index.native.js index d809e362b6fd0..0bb67778bc794 100644 --- a/packages/block-library/src/social-link/test/index.native.js +++ b/packages/block-library/src/social-link/test/index.native.js @@ -1,7 +1,6 @@ /** * External dependencies */ -// noinspection DuplicatedCode import { fireEvent, initializeEditor, waitFor, within } from 'test/helpers'; /** * WordPress dependencies @@ -135,6 +134,5 @@ describe( '', () => { subject.getByA11yHint( /Instagram has no URL set/ ) ) ).toBeDefined(); - // console.log( JSON.stringify( subject.toJSON(), null, 1 ) ); } ); } ); diff --git a/packages/compose/src/utils/create-higher-order-component/index.ts b/packages/compose/src/utils/create-higher-order-component/index.ts index 3e6cde72623f5..7494e8ff642c0 100644 --- a/packages/compose/src/utils/create-higher-order-component/index.ts +++ b/packages/compose/src/utils/create-higher-order-component/index.ts @@ -25,8 +25,8 @@ export type HigherOrderComponent< HOCProps extends Record< string, any > > = < * Given a function mapping a component to an enhanced component and modifier * name, returns the enhanced component augmented with a generated displayName. * - * @param mapComponent Function mapping component to enhanced component. - * @param modifierName Seed name from which to generated display name. + * @param mapComponent Function mapping component to enhanced component. + * @param modifierName Seed name from which to generated display name. * * @return Component class with generated display name assigned. */ diff --git a/packages/data/src/redux-store/metadata/actions.js b/packages/data/src/redux-store/metadata/actions.js index 01e4bbbb97424..00f70c56804a2 100644 --- a/packages/data/src/redux-store/metadata/actions.js +++ b/packages/data/src/redux-store/metadata/actions.js @@ -36,9 +36,9 @@ export function finishResolution( selectorName, args ) { * Returns an action object used in signalling that a batch of selector resolutions has * started. * - * @param {string} selectorName Name of selector for which resolver triggered. + * @param {string} selectorName Name of selector for which resolver triggered. * @param {unknown[][]} args Array of arguments to associate for uniqueness, each item - * is associated to a resolution. + * is associated to a resolution. * * @return {{ type: 'START_RESOLUTIONS', selectorName: string, args: unknown[][] }} Action object. */ @@ -54,9 +54,9 @@ export function startResolutions( selectorName, args ) { * Returns an action object used in signalling that a batch of selector resolutions has * completed. * - * @param {string} selectorName Name of selector for which resolver triggered. + * @param {string} selectorName Name of selector for which resolver triggered. * @param {unknown[][]} args Array of arguments to associate for uniqueness, each item - * is associated to a resolution. + * is associated to a resolution. * * @return {{ type: 'FINISH_RESOLUTIONS', selectorName: string, args: unknown[][] }} Action object. */ From 2b048169d4745b745a5c2bafd6c1d7fd7dcb8694 Mon Sep 17 00:00:00 2001 From: Tony Tahmouch Date: Thu, 24 Feb 2022 14:22:18 -0500 Subject: [PATCH 3/5] Removing the mocked hook, i.e., `usePreferredColorSchemeStyle`, from the "global mocks" as the "native mocks," i.e., `test/native/setup.js` are the only relevant ones for the component. --- test/unit/config/global-mocks.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js index 81795b822c636..29ca4ce94d4a6 100644 --- a/test/unit/config/global-mocks.js +++ b/test/unit/config/global-mocks.js @@ -7,12 +7,6 @@ jest.mock( '@wordpress/compose', () => { , { width: 700, height: 500 }, ] ), - usePreferredColorSchemeStyle: jest.fn( () => { - return { - color: '#fff', - backgroundColor: '#0000003f', - }; - } ), }; } ); From 301f6a62c6eb68cafacd8049ee884ed48efaad0f Mon Sep 17 00:00:00 2001 From: Tony Tahmouch Date: Tue, 1 Mar 2022 09:12:58 -0500 Subject: [PATCH 4/5] Removed the mocked `usePreferredColorSchemeStyle` hook in favor of just having default inactive icon styles in the `` component to avoid breaking snapshot assertions. --- .../block-library/src/social-link/edit.native.js | 16 +++++++++------- test/native/setup.js | 6 ------ 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js index 37d1a8bead2cf..ac79331687502 100644 --- a/packages/block-library/src/social-link/edit.native.js +++ b/packages/block-library/src/social-link/edit.native.js @@ -26,13 +26,14 @@ import { withSelect } from '@wordpress/data'; import { getIconBySite, getNameBySite } from './social-list'; import styles from './editor.scss'; -/** - * These values are derived from `./socials-with-bg.scss`. - */ const DEFAULT_ACTIVE_ICON_STYLES = { backgroundColor: '#f0f0f0', color: '#444', }; +const DEFAULT_INACTIVE_ICON_STYLES = { + backgroundColor: '#0000003f', + color: '#fff', +}; const ANIMATION_DELAY = 300; const ANIMATION_DURATION = 400; @@ -65,10 +66,11 @@ const SocialLinkEdit = ( { styles[ `wp-social-link-${ service }` ] || styles[ `wp-social-link` ] || DEFAULT_ACTIVE_ICON_STYLES; - const inactiveIcon = usePreferredColorSchemeStyle( - styles.inactiveIcon, - styles.inactiveIconDark - ); + const inactiveIcon = + usePreferredColorSchemeStyle( + styles.inactiveIcon, + styles.inactiveIconDark + ) || DEFAULT_INACTIVE_ICON_STYLES; const animatedValue = useRef( new Animated.Value( 0 ) ).current; diff --git a/test/native/setup.js b/test/native/setup.js index a5832dbbccef6..eafb12d341548 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -222,12 +222,6 @@ jest.mock( '@wordpress/compose', () => { mockComponent( 'ResizeObserverMock' )( {} ), { width: 100, height: 100 }, ] ), - usePreferredColorSchemeStyle: jest.fn( () => { - return { - color: '#fff', - backgroundColor: '#0000003f', - }; - } ), }; } ); From d061f18d73fc6bb405e7fb706379b3986ce0a1d2 Mon Sep 17 00:00:00 2001 From: Tony Tahmouch Date: Tue, 1 Mar 2022 10:18:09 -0500 Subject: [PATCH 5/5] Updating the NPM lock file. --- package-lock.json | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2b5b1a6aee093..a0465df071437 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18728,9 +18728,9 @@ }, "dependencies": { "ws": { - "version": "8.2.3", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", - "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.2.tgz", + "integrity": "sha512-Q6B6H2oc8QY3llc3cB8kVmQ6pnJWVQbP7Q5algTcIxx7YEpc0oU4NBVHlztA7Ekzfhw2r0rPducMUiCGWKQRzw==", "dev": true } } @@ -18764,9 +18764,9 @@ }, "dependencies": { "ws": { - "version": "8.2.3", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", - "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.1.tgz", + "integrity": "sha512-XkgWpJU3sHU7gX8f13NqTn6KQ85bd1WU7noBHTT8fSohx7OS1TPY8k+cyRPCzFkia7C4mM229yeHr1qK9sM4JQ==", "dev": true } } @@ -19382,12 +19382,12 @@ } }, "npmlog": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz", - "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.0.tgz", + "integrity": "sha512-ftpIiLjerL2tUg3dCqN8pOSoB90gqZlzv/gaZoxHaKjeLClrfJIEQ1Pdxi6qSzflz916Bljdy8dTWQ4J7hAFSQ==", "dev": true, "requires": { - "are-we-there-yet": "^2.0.0", + "are-we-there-yet": "^1.1.5", "console-control-strings": "^1.1.0", "gauge": "^3.0.0", "set-blocking": "^2.0.0" @@ -20138,9 +20138,9 @@ }, "dependencies": { "ws": { - "version": "8.2.3", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", - "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.2.tgz", + "integrity": "sha512-Q6B6H2oc8QY3llc3cB8kVmQ6pnJWVQbP7Q5algTcIxx7YEpc0oU4NBVHlztA7Ekzfhw2r0rPducMUiCGWKQRzw==", "dev": true } }