Skip to content

Commit b0fa1e4

Browse files
DAreRodzDAreRodz
committed
Add failing test
1 parent ed1a95b commit b0fa1e4

File tree

4 files changed

+162
-0
lines changed

4 files changed

+162
-0
lines changed

‎packages/e2e-tests/plugins/interactive-blocks/router-navigate/block.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"apiVersion": 2,
3+
"name": "test/router-navigate",
4+
"title": "E2E Interactivity tests - router navigate",
5+
"category": "text",
6+
"icon": "heart",
7+
"description": "",
8+
"supports": {
9+
"interactivity": true
10+
},
11+
"textdomain": "e2e-interactivity",
12+
"viewScript": "router-navigate-view",
13+
"render": "file:./render.php"
14+
}

‎packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<?php
2+
/**
3+
* HTML for testing the router navigate function.
4+
*
5+
* @package gutenberg-test-interactive-blocks
6+
* @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
7+
*/
8+
9+
?>
10+
11+
12+
<div data-wp-interactive data-wp-navigation-id="region-1">
13+
<h2 data-testid="title"><?php echo $attributes['title']; ?></h2>
14+
15+
<output
16+
data-testid="router navigations"
17+
data-wp-text="state.router.navigations"
18+
>NaN</output>
19+
<output
20+
data-testid="router status"
21+
data-wp-text="state.router.status"
22+
>undefined</output>
23+
24+
<?php
25+
if ( isset( $attributes['links'] ) ) {
26+
foreach ( $attributes['links'] as $key => $link ) {
27+
$i = $key += 1;
28+
echo <<<HTML
29+
<a
30+
data-testid="link $i"
31+
data-wp-on--click="actions.router.navigate"
32+
href="$link"
33+
>link $i</a>
34+
HTML;
35+
}
36+
}
37+
?>
38+
</div>

‎packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
( ( { wp } ) => {
2+
/**
3+
* WordPress dependencies
4+
*/
5+
const { store, navigate } = wp.interactivity;
6+
7+
store( {
8+
state: {
9+
router: {
10+
status: 'idle',
11+
navigations: 0,
12+
}
13+
},
14+
actions: {
15+
router: {
16+
navigate: async ( { state, event: e } ) => {
17+
e.preventDefault();
18+
19+
state.router.navigations += 1;
20+
state.router.status = 'busy';
21+
22+
await navigate( e.target.href );
23+
24+
state.router.navigations -= 1;
25+
26+
if ( state.router.navigations === 0) {
27+
state.router.status = 'idle';
28+
}
29+
},
30+
},
31+
},
32+
} );
33+
} )( window );

‎test/e2e/specs/interactivity/router-navigate.spec.ts

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* Internal dependencies
3+
*/
4+
import { test, expect } from './fixtures';
5+
6+
test.describe( 'Router navigate', () => {
7+
test.beforeAll( async ( { interactivityUtils: utils } ) => {
8+
await utils.activatePlugins();
9+
const link2 = await utils.addPostWithBlock( 'test/router-navigate', {
10+
alias: 'router navigate - link 2',
11+
attributes: { title: 'Link 2' },
12+
} );
13+
const link1 = await utils.addPostWithBlock( 'test/router-navigate', {
14+
alias: 'router navigate - link 1',
15+
attributes: { title: 'Link 1' },
16+
} );
17+
await utils.addPostWithBlock( 'test/router-navigate', {
18+
alias: 'router navigate - main',
19+
attributes: { title: 'Main', links: [ link1, link2 ] },
20+
} );
21+
} );
22+
23+
test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
24+
await page.goto( utils.getLink( 'router navigate - main' ) );
25+
} );
26+
27+
test.afterAll( async ( { interactivityUtils: utils } ) => {
28+
await utils.deactivatePlugins();
29+
await utils.deleteAllPosts();
30+
} );
31+
32+
test( 'should update the HTML only for the latest navigation', async ( {
33+
page,
34+
interactivityUtils: utils,
35+
} ) => {
36+
const link1 = utils.getLink( 'router navigate - link 1' );
37+
const link2 = utils.getLink( 'router navigate - link 2' );
38+
39+
const navigations = page.getByTestId( 'router navigations' );
40+
const status = page.getByTestId( 'router status' );
41+
const title = page.getByTestId( 'title' );
42+
43+
await expect( navigations ).toHaveText( '0' );
44+
await expect( status ).toHaveText( 'idle' );
45+
46+
let resolveLink1: Function;
47+
let resolveLink2: Function;
48+
49+
await page.route( link1, async ( route ) => {
50+
await new Promise( ( r ) => ( resolveLink1 = r ) );
51+
await route.continue();
52+
} );
53+
await page.route( link2, async ( route ) => {
54+
await new Promise( ( r ) => ( resolveLink2 = r ) );
55+
await route.continue();
56+
} );
57+
58+
await page.getByTestId( 'link 1' ).click( { delay: 60 } );
59+
await page.getByTestId( 'link 2' ).click( { delay: 60 } );
60+
61+
await expect( navigations ).toHaveText( '2' );
62+
await expect( status ).toHaveText( 'busy' );
63+
await expect( title ).toHaveText( 'Main' );
64+
65+
await Promise.resolve().then( () => resolveLink2() );
66+
67+
await expect( navigations ).toHaveText( '1' );
68+
await expect( status ).toHaveText( 'busy' );
69+
await expect( title ).toHaveText( 'Link 2' );
70+
71+
await Promise.resolve().then( () => resolveLink1() );
72+
73+
await expect( navigations ).toHaveText( '0' );
74+
await expect( status ).toHaveText( 'idle' );
75+
await expect( title ).toHaveText( 'Link 2' );
76+
} );
77+
} );

0 commit comments

Comments
 (0)