Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Social Icons - Begin Automating Existing Manual Test Cases. #39027

Merged
merged 5 commits into from
Mar 1, 2022
Merged

Social Icons - Begin Automating Existing Manual Test Cases. #39027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2604748
First pass at automating some of the default state assertions for Soc…
ttahmouch Feb 21, 2022
36e8810
Updated the `<SocialLinkEdit/>` component module to move the default …
ttahmouch Feb 24, 2022
2b04816
Removing the mocked hook, i.e., `usePreferredColorSchemeStyle`, from …
ttahmouch Feb 24, 2022
301f6a6
Removed the mocked `usePreferredColorSchemeStyle` hook in favor of ju…
ttahmouch Mar 1, 2022
d061f18
Updating the NPM lock file.
ttahmouch Mar 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 13 additions & 23 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

23 changes: 16 additions & 7 deletions packages/block-library/src/social-link/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ import { withSelect } from '@wordpress/data';
import { getIconBySite, getNameBySite } from './social-list';
import styles from './editor.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;

Expand Down Expand Up @@ -54,14 +62,15 @@ 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` ];

const inactiveIcon = usePreferredColorSchemeStyle(
styles.inactiveIcon,
styles.inactiveIconDark
);
styles[ `wp-social-link-${ service }` ] ||
styles[ `wp-social-link` ] ||
DEFAULT_ACTIVE_ICON_STYLES;
const inactiveIcon =
usePreferredColorSchemeStyle(
styles.inactiveIcon,
styles.inactiveIconDark
) || DEFAULT_INACTIVE_ICON_STYLES;

const animatedValue = useRef( new Animated.Value( 0 ) ).current;

Expand Down
138 changes: 138 additions & 0 deletions packages/block-library/src/social-link/test/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
/**
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tests written for the Edit Social Links Block type started to be derived from here:
https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/social-icons.md#tc001

They're just rudimentary at the moment to start incrementally, and keep the size of the PR down to easily discuss them. I planned to add more tests in future PRs when I started this.

* External dependencies
*/
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( '<SocialLinkEdit/>', () => {
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( {} );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The staging in each of these tests is purposefully redundant in an effort to keep the code easy to understand in isolation. I don't like DRY code in test suites personally, but the thought crossed my mind about checking for existing utils or creating one. It just doesn't feel worth it at the moment.


// 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();
} );
} );
4 changes: 2 additions & 2 deletions packages/compose/src/utils/create-higher-order-component/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ export type HigherOrderComponent< HOCProps extends Record< string, any > > = <
* Given a function mapping a component to an enhanced component and modifier
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes were generated with npm run lint-js:fix. They are unrelated to the implementation details of the component being tested, or the tests.

* 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.
*/
Expand Down
8 changes: 4 additions & 4 deletions packages/data/src/redux-store/metadata/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ export function finishResolution( selectorName, args ) {
* Returns an action object used in signalling that a batch of selector resolutions has
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes were generated by npm run lint-js:fix. They are unrelated to the implementation details of the component being tested, or the tests.

* 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.
*/
Expand All @@ -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.
*/
Expand Down
12 changes: 6 additions & 6 deletions packages/react-native-editor/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -493,12 +493,12 @@ SPEC CHECKSUMS:
React-logger: faee236598b0f7e1a5e3b68577016ac451f1f993
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes were generated. They are unrelated to the implementation details of the component being tested, or the tests.

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
Expand All @@ -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
Expand Down