Skip to content

Commit 4b94713

Browse files
thelovekeshthelovekesh
committed
Add test cases for interactivity API click and async-click directive detection
1 parent afb5af6 commit 4b94713

File tree

1 file changed

+76
-0
lines changed

1 file changed

+76
-0
lines changed

‎tests/php/test-class-amp-core-block-handler.php

+76
Original file line numberDiff line numberDiff line change
@@ -716,6 +716,82 @@ public function get_ampify_navigation_block_test_data() {
716716
</nav>
717717
',
718718
],
719+
'interactivity_api_enabled_with_async_click' => [
720+
'block_attrs' => [
721+
'overlayMenu' => 'mobile',
722+
'openSubmenusOnClick' => true,
723+
],
724+
'block_markup' => '
725+
<nav class="is-responsive items-justified-right wp-block-navigation is-horizontal is-content-justification-right is-layout-flex wp-container-core-navigation-layout-1 wp-block-navigation-is-layout-flex" aria-label="Navigation" data-wp-interactive="" data-wp-context="{&quot;core&quot;:{&quot;navigation&quot;:{&quot;overlayOpenedBy&quot;:[],&quot;type&quot;:&quot;overlay&quot;,&quot;roleAttribute&quot;:&quot;&quot;,&quot;ariaLabel&quot;:&quot;Menu&quot;}}}">
726+
<button aria-haspopup="true" aria-label="Open menu" class="wp-block-navigation__responsive-container-open" data-wp-on-async--click="actions.core.navigation.openMenuOnClick" data-wp-on--keydown="actions.core.navigation.handleMenuKeydown">
727+
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
728+
<rect x="4" y="7.5" width="16" height="1.5"></rect>
729+
<rect x="4" y="15" width="16" height="1.5"></rect>
730+
</svg>
731+
</button>
732+
<div class="wp-block-navigation__responsive-container" style="" id="modal-1" data-wp-class--has-modal-open="selectors.core.navigation.isMenuOpen" data-wp-class--is-menu-open="selectors.core.navigation.isMenuOpen" data-wp-effect="effects.core.navigation.initMenu" data-wp-on--keydown="actions.core.navigation.handleMenuKeydown" data-wp-on--focusout="actions.core.navigation.handleMenuFocusout" tabindex="-1">
733+
<div class="wp-block-navigation__responsive-close" tabindex="-1">
734+
<div class="wp-block-navigation__responsive-dialog" data-wp-bind--aria-modal="selectors.core.navigation.ariaModal" data-wp-bind--aria-label="selectors.core.navigation.ariaLabel" data-wp-bind--role="selectors.core.navigation.roleAttribute" data-wp-effect="effects.core.navigation.focusFirstElement">
735+
<button aria-label="Close menu" class="wp-block-navigation__responsive-container-close" data-wp-on-async--click="actions.core.navigation.closeMenuOnClick">
736+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
737+
<path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
738+
</svg>
739+
</button>
740+
<div class="wp-block-navigation__responsive-container-content" id="modal-1-content">
741+
<ul class="wp-block-navigation__container is-responsive items-justified-right wp-block-navigation">
742+
<li class=" wp-block-navigation-item wp-block-navigation-link">
743+
<a class="wp-block-navigation-item__content" href="https://example.com/sample-page/">
744+
<span class="wp-block-navigation-item__label">Sample Page</span>
745+
</a>
746+
</li>
747+
<li class=" wp-block-navigation-item wp-block-navigation-link">
748+
<a class="wp-block-navigation-item__content" href="https://example.com/2023/10/16/hello-world/">
749+
<span class="wp-block-navigation-item__label">Hello world!</span>
750+
</a>
751+
</li>
752+
</ul>
753+
</div>
754+
</div>
755+
</div>
756+
</div>
757+
</nav>
758+
',
759+
'expected_markup' => '
760+
<nav class="is-responsive items-justified-right wp-block-navigation is-horizontal is-content-justification-right is-layout-flex wp-container-core-navigation-layout-1 wp-block-navigation-is-layout-flex" aria-label="Navigation" data-wp-interactive data-wp-context="{&quot;core&quot;:{&quot;navigation&quot;:{&quot;overlayOpenedBy&quot;:[],&quot;type&quot;:&quot;overlay&quot;,&quot;roleAttribute&quot;:&quot;&quot;,&quot;ariaLabel&quot;:&quot;Menu&quot;}}}">
761+
<button aria-haspopup="true" aria-label="Open menu" class="wp-block-navigation__responsive-container-open" on="tap:AMP.setState({ modal_1_expanded: !modal_1_expanded })" data-wp-on--keydown="actions.core.navigation.handleMenuKeydown">
762+
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
763+
<rect x="4" y="7.5" width="16" height="1.5"></rect>
764+
<rect x="4" y="15" width="16" height="1.5"></rect>
765+
</svg>
766+
</button>
767+
<div [aria-hidden]="modal_1_expanded ? \'false\' : \'true\'" aria-hidden="true" [class]="modal_1_expanded ? \'wp-block-navigation__responsive-container is-menu-open has-modal-open\' : \'wp-block-navigation__responsive-container\'" class="wp-block-navigation__responsive-container" style id="modal-1" data-wp-class--has-modal-open="selectors.core.navigation.isMenuOpen" data-wp-class--is-menu-open="selectors.core.navigation.isMenuOpen" data-wp-effect="effects.core.navigation.initMenu" data-wp-on--keydown="actions.core.navigation.handleMenuKeydown" data-wp-on--focusout="actions.core.navigation.handleMenuFocusout" tabindex="-1">
768+
<div class="wp-block-navigation__responsive-close" tabindex="-1">
769+
<div class="wp-block-navigation__responsive-dialog" data-wp-bind--aria-modal="selectors.core.navigation.ariaModal" data-wp-bind--aria-label="selectors.core.navigation.ariaLabel" data-wp-bind--role="selectors.core.navigation.roleAttribute" data-wp-effect="effects.core.navigation.focusFirstElement">
770+
<button aria-label="Close menu" class="wp-block-navigation__responsive-container-close" on="tap:AMP.setState({ modal_1_expanded: !modal_1_expanded })">
771+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
772+
<path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
773+
</svg>
774+
</button>
775+
<div class="wp-block-navigation__responsive-container-content" id="modal-1-content">
776+
<ul class="wp-block-navigation__container is-responsive items-justified-right wp-block-navigation">
777+
<li class=" wp-block-navigation-item wp-block-navigation-link">
778+
<a class="wp-block-navigation-item__content" href="https://example.com/sample-page/">
779+
<span class="wp-block-navigation-item__label">Sample Page</span>
780+
</a>
781+
</li>
782+
<li class=" wp-block-navigation-item wp-block-navigation-link">
783+
<a class="wp-block-navigation-item__content" href="https://example.com/2023/10/16/hello-world/">
784+
<span class="wp-block-navigation-item__label">Hello world!</span>
785+
</a>
786+
</li>
787+
</ul>
788+
</div>
789+
</div>
790+
</div>
791+
</div>
792+
</nav>
793+
',
794+
],
719795
];
720796
}
721797

0 commit comments

Comments
 (0)