VideoPress block: Initial setting tests #5751

SiobhyB · 2023-05-10T08:22:37Z

Part of the coverage efforts outlined in #5734

Description

The changes in this PR introduce tests that ensure the VideoPress block's title, description, and Playback settings can be successfully updated, as well as some of the settings in the Playback Bar Color and Privacy and Rating panels.

Note, the following are not covered by this PR, and will be worked on in separate PRs:

Rating and Privacy picker selection.
Various color selections for Playback Bar Color.
Setting synchronization between the app and the web.

To test:

Verify the HTML in the snapshot file matches with the reality of what the block's HTML would look after making the relevant changes.
Run the TEST_RN_PLATFORM=ios npm run test src/test/videopress/edit.js and TEST_RN_PLATFORM=android npm run test src/test/videopress/edit.js commands from the terminal to verify the tests pass as expected. Also, verify the tests on this PR pass.

PR submission checklist:

I have considered adding unit tests where possible.
I have considered if this change warrants user-facing release notes more info and have added them to RELEASE-NOTES.txt if necessary.

This commit introduces a set of constants related to the VideoPress block settings, including default props, block HTML, playback settings, color settings, rating options, privacy options, and additional settings. These constants will be used to manage and manipulate VideoPress block properties in a more organised and maintainable manner.

This commit contains the code necessary to initialize the editor with existing HTML and open the block's settings. It serves as the groundwork for future tests, which will actually change the block's settings.

peril-wordpress-mobile · 2023-05-10T08:31:54Z

Wanna run full suite of Android and iOS UI tests? Click here and 'Approve' CI job!

src/test/videopress/edit.js

SiobhyB · 2023-05-10T08:38:10Z

src/test/videopress/constants.js

+	'Preload Metadata',
+];
+
+export const PLAYBACK_BAR_COLOR_SETTINGS = [ 'Dynamic color' ];


I plan to work on adding the color selections in a future PR.

SiobhyB · 2023-05-10T11:26:23Z

src/test/videopress/local-helpers/constants.js

+	'Preload Metadata',
+];
+
+export const PLAYBACK_BAR_COLOR_SETTINGS = [ 'Dynamic color' ];


This will be added to in an upcoming PR.

fluiddot

When running the tests I got several warnings with the following message

Warning: An update to Player inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });

Seems the player component is being updated after executing some of the actions. It would be great to incorporate a check for this in the test cases to avoid the warning.

fluiddot · 2023-05-10T15:18:20Z

src/test/videopress/local-helpers/constants.js

Ah interesting, this will be also helpful for the upload test cases.

src/test/videopress/local-helpers/utils.js

src/test/videopress/edit.js

fluiddot · 2023-05-10T15:32:48Z

src/test/videopress/edit.js

+	PLAYBACK_SETTINGS.forEach( ( setting ) => {
+		it( `should update Playback Settings section's ${ setting } setting`, async () => {


Jest provides a function to run the same tests with different data, sharing here in case you want to use it.

fluiddot · 2023-05-10T15:34:03Z

src/test/videopress/edit.js

+	let screen;
+
+	beforeEach( async () => {
+		// Arrange
+		screen = await initializeBlockWithHTML();
+
+		await selectAndOpenBlockSettings( screen );
+	} );


Nitpick: Usually in integration tests, we have all the arrange, act, and expectation parts contained within the it function. This introduces a bit of redundancy but in general, helps readability as you can see in the same place what the test case is doing.

Happy to go with the standard here, updated in 77aa2c9.

This addresses the feedback received here: #5751 (review)

Refactored following feedback here: #5751 (comment)

As per this feedback, this introduces redundancy, but is a tradeoff for readability: #5751 (comment)

Discussion here: #5751 (comment)

SiobhyB · 2023-05-10T16:51:27Z

@fluiddot thank you for the review 🙇‍♀️

Seems the player component is being updated after executing some of the actions. It would be great to incorporate a check for this in the test cases to avoid the warning.

I've gone ahead to address this in 881272b, and believe I've addressed your other feedback too. Let me know if there's anything else that needs improving here.

fluiddot

I noticed several logs with the following message when running the tests. Seems the block is trying to fetch the metadata via fetchVideoItem function but fails. If we don't need that data for these tests, maybe we could mock that function, WDYT?

videopress:lib:fetch-video-item updating retry from 0 to 1

fluiddot · 2023-05-11T08:31:53Z

src/test/videopress/edit.js

+		jest.runOnlyPendingTimers();
+


When running the command TEST_RN_PLATFORM=ios npm run test src/test/videopress/edit.js I'm getting the following warning:

A function to advance timers was called but the timers APIs are not mocked with fake timers. Call `jest.useFakeTimers({legacyFakeTimers: true})` in this test file or enable fake timers for all tests by setting {'enableGlobally': true, 'legacyFakeTimers': true} in Jest configuration file. Stack Trace: 46 | await addBlock( screen, 'VideoPress' ); 47 | > 48 | jest.runOnlyPendingTimers(); | ^ 49 | 50 | // Get block 51 | const videoPressBlock = await getBlock( screen, 'VideoPress' ); Error: at FakeTimers._checkFakeTimers (node_modules/@jest/fake-timers/build/legacyFakeTimers.js:394:13) at FakeTimers.runOnlyPendingTimers (node_modules/@jest/fake-timers/build/legacyFakeTimers.js:189:10) at Object.runOnlyPendingTimers (src/test/videopress/edit.js:48:8) at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9) at tryCallOne (gutenberg/node_modules/promise/lib/core.js:37:12) at gutenberg/node_modules/promise/lib/core.js:123:15 at flush (gutenberg/node_modules/asap/raw.js:50:29)

Probably we could use the withFakeTimers helper to address the issue:

// When the block is inserted, it automatically opens the media picker. // On iOS, this picker is displayed using a timer, so we need to run it // to allow any DOM update. await withFakeTimers( () => jest.runOnlyPendingTimers() );

Thank you, I've gone ahead to implement that in b0be14a.

Further context: #5751 (comment)

fluiddot

LGTM 🎊 !

I confirmed that all tests passed ✅ . Not a blocker, but we might consider adding the mock I suggested here to avoid the fetch failures when the block tries to sync the metadata.

SiobhyB · 2023-05-15T09:55:41Z

Thanks @fluiddot! I'll go ahead to merge as-is and address mocking fetchVideoItem as part of a separate PR. 🙇‍♀️

Siobhan added 9 commits May 10, 2023 09:10

tests: Groundwork to open block settings

37a1b22

This commit contains the code necessary to initialize the editor with existing HTML and open the block's settings. It serves as the groundwork for future tests, which will actually change the block's settings.

test: Update title setting

cc02d62

test: Update description setting

511633c

test: Loop through and toggle playback settings

bc3235e

test: Loop through and update playback bar color

8344e75

test: Loop through and select rating options

82b595e

test: Loop through and select privacy options

423bd40

test: Loop through remaining privacy options

7aa3d3c

SiobhyB self-assigned this May 10, 2023

SiobhyB added Testing Anything related to automated tests VideoPress block labels May 10, 2023

add: Snapshots for all setting tests

32c779e

refactor: Update Gutenberg reference

120f7c1

SiobhyB commented May 10, 2023

View reviewed changes

src/test/videopress/edit.js Outdated Show resolved Hide resolved

SiobhyB commented May 10, 2023

View reviewed changes

Siobhan added 3 commits May 10, 2023 09:44

refactor: Address linting errors

5116183

refactor: Update Gutenberg reference

e80b267

refactor: Remove unnecessary "await"

67e13d7

SiobhyB mentioned this pull request May 10, 2023

[RNMobile] Test Helpers: Provide onPickerButtonPressed arg to setupPicker helper WordPress/gutenberg#50493

Closed

Siobhan added 4 commits May 10, 2023 10:04

refactor: Rearrange helper files under new folder

f985aab

fix: Exclude test files under "local-helpers"

1a5615f

refactor: Align JSDocs

55aa397

refactor: Align JSDocs comment

9748066

SiobhyB force-pushed the add/videopress-setting-tests branch 2 times, most recently from 9ee7b0b to b4bfd6d Compare May 10, 2023 11:15

Siobhan added 3 commits May 10, 2023 12:16

refactor: Update Gutenberg submodule reference

53b030a

refactor: Remove privacy and rating settings

b4bfd6d

refactor: Remove unused import

f8736c8

SiobhyB commented May 10, 2023

View reviewed changes

SiobhyB marked this pull request as ready for review May 10, 2023 11:34

SiobhyB requested review from jhnstn and fluiddot May 10, 2023 11:35

SiobhyB mentioned this pull request May 10, 2023

VideoPress block: Add tests to verify Privacy and Rating settings #5754

Merged

2 tasks

fluiddot reviewed May 10, 2023

View reviewed changes

Siobhan added 5 commits May 10, 2023 17:33

refactor: Wrap state change in act

881272b

This addresses the feedback received here: #5751 (review)

refactor: Remove unnecessary helper

5293b8b

Refactored following feedback here: #5751 (comment)

refactor: Move all 'act' logic is to it statement

77aa2c9

As per this feedback, this introduces redundancy, but is a tradeoff for readability: #5751 (comment)

fix: Run timers after adding block

d56e303

Discussion here: #5751 (comment)

Merge branch 'trunk' into add/videopress-setting-tests

266b2a2

fluiddot reviewed May 11, 2023

View reviewed changes

Siobhan added 3 commits May 11, 2023 18:24

Merge branch 'trunk' into add/videopress-setting-tests

faeb39e

fix: Ensure timer runs as expected after addBlock

b0be14a

Further context: #5751 (comment)

refactor: Remove unused import

4670e1a

SiobhyB requested a review from fluiddot May 11, 2023 18:22

fluiddot approved these changes May 12, 2023

View reviewed changes

SiobhyB merged commit 9360b7d into trunk May 15, 2023

SiobhyB deleted the add/videopress-setting-tests branch May 15, 2023 09:55

SiobhyB mentioned this pull request May 15, 2023

VideoPress block: Add tests to verify Playback Bar Colors can be set #5778

Merged

2 tasks

fluiddot mentioned this pull request May 26, 2023

Integration tests #5734

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VideoPress block: Initial setting tests #5751

VideoPress block: Initial setting tests #5751

SiobhyB commented May 10, 2023 •

edited

Loading

peril-wordpress-mobile bot commented May 10, 2023 •

edited

Loading

SiobhyB May 10, 2023

SiobhyB May 10, 2023

fluiddot left a comment

fluiddot May 10, 2023

fluiddot May 10, 2023

fluiddot May 10, 2023

SiobhyB May 10, 2023

SiobhyB commented May 10, 2023

fluiddot left a comment

fluiddot May 11, 2023

SiobhyB May 11, 2023

fluiddot left a comment

SiobhyB commented May 15, 2023

		PLAYBACK_SETTINGS.forEach( ( setting ) => {
		it( `should update Playback Settings section's ${ setting } setting`, async () => {

VideoPress block: Initial setting tests #5751

VideoPress block: Initial setting tests #5751

Conversation

SiobhyB commented May 10, 2023 • edited Loading

Description

To test:

peril-wordpress-mobile bot commented May 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fluiddot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SiobhyB commented May 10, 2023

fluiddot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fluiddot left a comment

Choose a reason for hiding this comment

SiobhyB commented May 15, 2023

SiobhyB commented May 10, 2023 •

edited

Loading

peril-wordpress-mobile bot commented May 10, 2023 •

edited

Loading