fix(@clayui/vertical-nav): Update tests and snapshots

liferay · Jan 16, 2024 · 714281d · 714281d
1 parent 7e2a35b
commit 714281d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 26 deletions.
diff --git a/packages/clay-core/src/vertical-nav/__tests__/__snapshots__/BasicRendering.tsx.snap b/packages/clay-core/src/vertical-nav/__tests__/__snapshots__/BasicRendering.tsx.snap
@@ -37,10 +37,10 @@ exports[`VerticalNav basic rendering render dynamic content 1`] = `
           role="none"
         >
           <button
+            aria-controls="clay-id-6"
             aria-expanded="false"
-            aria-haspopup="true"
             class="nav-link collapse-icon collapsed btn btn-unstyled"
-            role="button"
+            role="menuitem"
             type="button"
           >
             Home

diff --git a/packages/clay-nav/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-nav/src/__tests__/__snapshots__/index.tsx.snap
@@ -37,10 +37,10 @@ exports[`ClayVerticalNav renders 1`] = `
           role="none"
         >
           <button
+            aria-controls="clay-id-2"
             aria-expanded="true"
-            aria-haspopup="true"
             class="nav-link collapse-icon btn btn-unstyled"
-            role="button"
+            role="menuitem"
             type="button"
           >
             Home
@@ -73,6 +73,7 @@ exports[`ClayVerticalNav renders 1`] = `
           </button>
           <ul
             class="nav nav-stacked"
+            id="clay-id-2"
             role="menu"
           >
             <li

diff --git a/packages/clay-nav/src/__tests__/index.tsx b/packages/clay-nav/src/__tests__/index.tsx
@@ -4,12 +4,7 @@
  */
 
 import {ClayVerticalNav} from '..';
-import {
-	cleanup,
-	fireEvent,
-	getAllByRole as docGetAllByRole,
-	render,
-} from '@testing-library/react';
+import {cleanup, fireEvent, render} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -92,11 +87,11 @@ describe('ClayVerticalNav', () => {
 	});
 
 	it('expand items by pressing the right arrow key', () => {
-		const {getAllByRole} = render(
+		const {getByText} = render(
 			<ClayVerticalNav items={ITEMS} spritemap="/path/to" />
 		);
 
-		const [, , projects] = getAllByRole('button');
+		const projects = getByText('Projects');
 
 		userEvent.tab();
 		userEvent.tab();
@@ -109,11 +104,11 @@ describe('ClayVerticalNav', () => {
 	});
 
 	it('collapse items by pressing the left arrow key', () => {
-		const {getAllByRole} = render(
+		const {getByText} = render(
 			<ClayVerticalNav items={ITEMS} spritemap="/path/to" />
 		);
 
-		const [, , projects] = getAllByRole('button');
+		const projects = getByText('Projects');
 
 		userEvent.tab();
 		userEvent.tab();
@@ -130,11 +125,11 @@ describe('ClayVerticalNav', () => {
 	});
 
 	it('moves focus to first item if item is expanded', () => {
-		const {getAllByRole} = render(
+		const {getByText} = render(
 			<ClayVerticalNav items={ITEMS} spritemap="/path/to" />
 		);
 
-		const [, , projects] = getAllByRole('button');
+		const projects = getByText('Projects');
 
 		userEvent.tab();
 		userEvent.tab();
@@ -147,20 +142,17 @@ describe('ClayVerticalNav', () => {
 
 		userEvent.keyboard('[ArrowRight]');
 
-		const [first] = docGetAllByRole(
-			projects!.parentNode as HTMLElement,
-			'menuitem'
-		);
+		const first = getByText('Five');
 
 		expect(first).toEqual(document.activeElement);
 	});
 
 	it('move focus to parent if focus is on child when pressing left arrow key', () => {
-		const {getAllByRole} = render(
+		const {getByText} = render(
 			<ClayVerticalNav items={ITEMS} spritemap="/path/to" />
 		);
 
-		const [, , projects] = getAllByRole('button');
+		const projects = getByText('Projects');
 
 		userEvent.tab();
 		userEvent.tab();
@@ -173,10 +165,7 @@ describe('ClayVerticalNav', () => {
 
 		userEvent.keyboard('[ArrowRight]');
 
-		const [first] = docGetAllByRole(
-			projects!.parentNode as HTMLElement,
-			'menuitem'
-		);
+		const first = getByText('Five');
 
 		expect(first).toEqual(document.activeElement);