Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| { | ||
| "$schema": "https://schemas.wp.org/trunk/block.json", | ||
| "apiVersion": 2, | ||
| "name": "test/get-server-state", | ||
| "title": "E2E Interactivity tests - getServerState", | ||
| "category": "text", | ||
| "icon": "heart", | ||
| "description": "", | ||
| "supports": { | ||
| "interactivity": true | ||
| }, | ||
| "textdomain": "e2e-interactivity", | ||
| "viewScriptModule": "file:./view.js", | ||
| "render": "file:./render.php" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <?php | ||
| /** | ||
| * HTML for testing the getServerState() function. | ||
| * | ||
| * @package gutenberg-test-interactive-blocks | ||
| */ | ||
|
|
||
| if ( isset( $attributes['state'] ) ) { | ||
| wp_interactivity_state( 'test/get-server-state', $attributes['state'] ); | ||
| } | ||
| ?> | ||
|
|
||
| <div | ||
| data-wp-interactive="test/get-server-state" | ||
| data-wp-watch="callbacks.updateState" | ||
| > | ||
| <div data-testid="prop" data-wp-text="state.prop"></div> | ||
| <div data-testid="nested.prop" data-wp-text="state.nested.prop"></div> | ||
| <div data-testid="newProp" data-wp-text="state.newProp"></div> | ||
| <div data-testid="nested.newProp" data-wp-text="state.nested.newProp"></div> | ||
|
|
||
| <button | ||
| data-testid="tryToUpdateServerState" | ||
| data-wp-on--click="actions.tryToUpdateServerState" | ||
| > | ||
| try update | ||
| </button> | ||
|
|
||
|
|
||
| <nav> | ||
| <?php | ||
| if ( isset( $attributes['links'] ) ) { | ||
| foreach ( $attributes['links'] as $key => $link ) { | ||
| $i = $key += 1; | ||
| echo <<<HTML | ||
| <a | ||
| data-testid="link $i" | ||
| data-wp-on--click="actions.navigate" | ||
| href="$link" | ||
| >link $i</a> | ||
| HTML; | ||
| } | ||
| } | ||
| ?> | ||
| </nav> | ||
| </div> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <?php return array( | ||
| 'dependencies' => array( | ||
| '@wordpress/interactivity', | ||
| array( | ||
| 'id' => '@wordpress/interactivity-router', | ||
| 'import' => 'dynamic', | ||
| ), | ||
| ), | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { store, getServerState } from '@wordpress/interactivity'; | ||
|
|
||
| const { state } = store( 'test/get-server-state', { | ||
| actions: { | ||
| *navigate( e ) { | ||
| e.preventDefault(); | ||
| const { actions } = yield import( | ||
| '@wordpress/interactivity-router' | ||
| ); | ||
| yield actions.navigate( e.target.href ); | ||
| }, | ||
| tryToUpdateServerState() { | ||
| getServerState().prop = 'updated from client'; | ||
| }, | ||
| }, | ||
| callbacks: { | ||
| updateState() { | ||
| const { prop, newProp, nested } = getServerState(); | ||
| state.prop = prop; | ||
| state.newProp = newProp; | ||
| state.nested.prop = nested.prop; | ||
| state.nested.newProp = nested.newProp; | ||
| }, | ||
| }, | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { test, expect } from './fixtures'; | ||
|
|
||
| test.describe( 'getServerState()', () => { | ||
| test.beforeAll( async ( { interactivityUtils: utils } ) => { | ||
| await utils.activatePlugins(); | ||
| const link1 = await utils.addPostWithBlock( 'test/get-server-state', { | ||
| alias: 'getServerState() - link 1', | ||
| attributes: { | ||
| state: { | ||
| prop: 'link 1', | ||
| newProp: 'link 1', | ||
| nested: { | ||
| prop: 'link 1', | ||
| newProp: 'link 1', | ||
| }, | ||
| }, | ||
| }, | ||
| } ); | ||
| const link2 = await utils.addPostWithBlock( 'test/get-server-state', { | ||
| alias: 'getServerState() - link 2', | ||
| attributes: { | ||
| state: { | ||
| prop: 'link 2', | ||
| newProp: 'link 2', | ||
| nested: { | ||
| prop: 'link 2', | ||
| newProp: 'link 2', | ||
| }, | ||
| }, | ||
| }, | ||
| } ); | ||
| await utils.addPostWithBlock( 'test/get-server-state', { | ||
| alias: 'getServerState() - main', | ||
| attributes: { | ||
| title: 'Main', | ||
| links: [ link1, link2 ], | ||
| state: { | ||
| prop: 'main', | ||
| nested: { | ||
| prop: 'main', | ||
| }, | ||
| }, | ||
| }, | ||
| } ); | ||
| } ); | ||
|
|
||
| test.beforeEach( async ( { interactivityUtils: utils, page } ) => { | ||
| await page.goto( utils.getLink( 'getServerState() - main' ) ); | ||
| } ); | ||
|
|
||
| test.afterAll( async ( { interactivityUtils: utils } ) => { | ||
| await utils.deactivatePlugins(); | ||
| await utils.deleteAllPosts(); | ||
| } ); | ||
|
|
||
| test( 'should update existing state props on navigation', async ( { | ||
| page, | ||
| } ) => { | ||
| const prop = page.getByTestId( 'prop' ); | ||
| const nestedProp = page.getByTestId( 'nested.prop' ); | ||
|
|
||
| await expect( prop ).toHaveText( 'main' ); | ||
| await expect( nestedProp ).toHaveText( 'main' ); | ||
|
|
||
| await page.getByTestId( 'link 1' ).click(); | ||
|
|
||
| await expect( prop ).toHaveText( 'link 1' ); | ||
| await expect( nestedProp ).toHaveText( 'link 1' ); | ||
|
|
||
| await page.goBack(); | ||
| await expect( prop ).toHaveText( 'main' ); | ||
| await expect( nestedProp ).toHaveText( 'main' ); | ||
|
|
||
| await page.getByTestId( 'link 2' ).click(); | ||
|
|
||
| await expect( prop ).toHaveText( 'link 2' ); | ||
| await expect( nestedProp ).toHaveText( 'link 2' ); | ||
| } ); | ||
|
|
||
| test( 'should add new state props and keep them on navigation', async ( { | ||
| page, | ||
| } ) => { | ||
| const newProp = page.getByTestId( 'newProp' ); | ||
| const nestedNewProp = page.getByTestId( 'nested.newProp' ); | ||
|
|
||
| await expect( newProp ).toBeEmpty(); | ||
| await expect( nestedNewProp ).toBeEmpty(); | ||
|
|
||
| await page.getByTestId( 'link 1' ).click(); | ||
|
|
||
| await expect( newProp ).toHaveText( 'link 1' ); | ||
| await expect( nestedNewProp ).toHaveText( 'link 1' ); | ||
|
|
||
| await page.goBack(); | ||
| await expect( newProp ).toHaveText( 'link 1' ); | ||
| await expect( nestedNewProp ).toHaveText( 'link 1' ); | ||
|
|
||
| await page.getByTestId( 'link 2' ).click(); | ||
|
|
||
| await expect( newProp ).toHaveText( 'link 2' ); | ||
| await expect( nestedNewProp ).toHaveText( 'link 2' ); | ||
| } ); | ||
|
|
||
| test( 'should not be modifiable', async ( { page } ) => { | ||
| const prop = page.getByTestId( 'prop' ); | ||
|
|
||
| await expect( prop ).toHaveText( 'main' ); | ||
|
|
||
| await page.getByTestId( 'tryToUpdateServerState' ).click(); | ||
| await expect( prop ).not.toHaveText( 'updated from client' ); | ||
| await expect( prop ).toHaveText( 'main' ); | ||
|
|
||
| await page.getByTestId( 'link 1' ).click(); | ||
| await expect( prop ).toHaveText( 'link 1' ); | ||
| } ); | ||
| } ); |