Skip to content

Commit

Permalink
EWPP-2422: Make the container define the source area during tests.
Browse files Browse the repository at this point in the history
  • Loading branch information
imanoleguskiza committed Jul 15, 2022
1 parent 8e26e58 commit 22f42a7
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 39 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,57 @@
*/
#}
{# A source area with a complex selector, including encoded characters. #}
<div id="inpage-navigation-test-container" data-inpage-navigation-source-area="h3.heading,[data-test-attribute=&quot;heading&quot;]">

{# A nested source area, with a selector that overlaps partially the one above. #}
<div data-inpage-navigation-source-area="h3">
{# An element that will be picked by both selectors. First occurrence of an heading with "Details" as text. #}
<div class="inpage-navigation-container" data-inpage-navigation-source-area="h3.heading,[data-test-attribute=&quot;heading&quot;]">

{% set build = {
'#theme': 'oe_theme_helper_inpage_navigation_block',
'#title': title|default('Page contents'),
'#attached': {
'library': [
'oe_theme/inpage_navigation'
]
}
} %}
{{ build }}
<div id="inpage-navigation-test-container">
{# A nested source area, with a selector that overlaps partially the one above. #}
<div data-inpage-navigation-source-area="h3">
{# An element that will be picked by both selectors. First occurrence of an heading with "Details" as text. #}
<h3 class="heading">Details</h3>
<h3>Multiple words with spaces </h3>
<p>Lorem ipsum dolor sit.</p>
<h4>Small heading</h4>

{# Placed inside the nested source area to verify that outer selectors search inside nested areas. #}
<strong data-test-attribute="heading">Test on attribute selector.</strong>
<p data-test-attribute="content">Lorem ipsum dolor sit amet.</p>
</div>

{# Second occurrence of an heading with "Details" as text. #}
<h3 class="heading">Details</h3>
<h3>Multiple words with spaces </h3>
<p>Lorem ipsum dolor sit.</p>
<h4>Small heading</h4>

{# Placed inside the nested source area to verify that outer selectors search inside nested areas. #}
<strong data-test-attribute="heading">Test on attribute selector.</strong>
<p data-test-attribute="content">Lorem ipsum dolor sit amet.</p>
</div>

{# Second occurrence of an heading with "Details" as text. #}
<h3 class="heading">Details</h3>

{# An element with an already specified ID. #}
<h3 class="heading" id="details">More details</h3>

<h3>Not targeted</h3>
{# An element with an already specified ID. #}
<h3 class="heading" id="details">More details</h3>

<h3 class="heading">Title with <strong>HTML tags</strong></h3>
<h3>Not targeted</h3>

<h3 class="heading" id="nothing"><a> </a></h3>
<h3 class="heading">Title with <strong>HTML tags</strong></h3>

<h3 class="heading">~</h3>
<h3 class="heading" id="nothing"><a> </a></h3>

<h4 class="heading">Not targeted</h4>
<h3 class="heading">~</h3>

<h3 class="heading strip">Strip &#8255;\'!"#$%&()*+,./:;<=>?@[]^`{|}~ unwanted characters</h3>
<h4 class="heading">Not targeted</h4>

{# Scenarios to test the correct handling of object properties with Object.hasOwnProperty(). #}
{# An element with an existing ID that can represent a property of the Object prototype. #}
<h3 class="heading" id="constructor">Reserved keyword</h3>
<h3 class="heading strip">Strip &#8255;\'!"#$%&()*+,./:;<=>?@[]^`{|}~ unwanted characters</h3>

{# An element that will generate an ID that can represent a property of the Object prototype. #}
<h3 class="heading">Length</h3>
{# Scenarios to test the correct handling of object properties with Object.hasOwnProperty(). #}
{# An element with an existing ID that can represent a property of the Object prototype. #}
<h3 class="heading" id="constructor">Reserved keyword</h3>

<h3 class="heading">2022, a new year</h3>
{# An element that will generate an ID that can represent a property of the Object prototype. #}
<h3 class="heading">Length</h3>

<h3 class="heading">2022, a new year</h3>
</div>>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,16 @@
*/
#}
{{ attach_library('oe_theme_inpage_navigation_test/inpage_navigation_test') }}
{% set build = {
'#theme': 'oe_theme_helper_inpage_navigation_block',
'#title': title|default('Page contents'),
'#attached': {
'library': [
'oe_theme/inpage_navigation'
]
}
} %}
{{ build }}
<div id="inpage-navigation-test-container" data-inpage-navigation-source-area="h1">

<h3>Lorem ipsum dolor sit.</h3>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,6 @@ public function setUp(): void {
* Test the inpage navigation JS library functionality.
*/
public function testLibrary(): void {
// Place the block so there's an element that will host the generated items.
$this->drupalPlaceBlock('oe_theme_helper_inpage_navigation', [
'region' => 'content',
'weight' => -10,
'label_display' => FALSE,
'id' => 'inpage_navigation',
]);

$this->drupalGet('/oe-theme-inpage-navigation-test/content');
$assert_session = $this->assertSession();
Expand Down Expand Up @@ -98,7 +91,8 @@ public function testLibrary(): void {
// The heading starting with a non-alpha character gets a ref- prepended.
$this->assertEquals('ref-2022-a-new-year', $container->find('xpath', '/h3[@class="heading"][text()="2022, a new year"]')->getAttribute('id'));

$navigation = $assert_session->elementExists('css', '#block-inpage-navigation nav[data-ecl-inpage-navigation]');
$navigation = $assert_session->elementExists('css', '.oe-theme-ecl-inpage-navigation');

$assert = new InPageNavigationAssert();
$expected = [
'title' => 'Page contents',
Expand Down

0 comments on commit 22f42a7

Please sign in to comment.