diff --git a/src/components/GenSwitcher/GenSwitcher.tsx b/src/components/GenSwitcher/GenSwitcher.tsx
index 11dffdef7f1..7eafb98799f 100644
--- a/src/components/GenSwitcher/GenSwitcher.tsx
+++ b/src/components/GenSwitcher/GenSwitcher.tsx
@@ -24,11 +24,7 @@ export const GenSwitcher = ({ isGen1, testId }: GenSwitcherProps) => {
{isGen1 ? 'Gen 1' : 'Gen 2'}
Open Amplify generation navigation
-
+
Gen 2 {isGen1 ? '' : }
diff --git a/src/components/GetStartedPopover/GetStartedPopover.tsx b/src/components/GetStartedPopover/GetStartedPopover.tsx
index da0661ee45d..1c2603c08b1 100644
--- a/src/components/GetStartedPopover/GetStartedPopover.tsx
+++ b/src/components/GetStartedPopover/GetStartedPopover.tsx
@@ -16,11 +16,13 @@ export type GetStartedLinksType = {
type GetStartedPopoverType = {
platform: Platform | typeof DEFAULT_PLATFORM;
getStartedLinks: GetStartedLinksType[];
+ testId?: string;
};
export const GetStartedPopover = ({
platform,
- getStartedLinks
+ getStartedLinks,
+ testId
}: GetStartedPopoverType) => {
const isGen1Page = useIsGen1Page();
@@ -47,7 +49,7 @@ export const GetStartedPopover = ({
Toggle getting started guides navigation
-
+
{getStartedLinks.map((link, index) => {
return (
routerMock);
describe('GetStartedPopover', () => {
const getStartedHref = '/[platform]/start/quickstart/';
+ const testId = 'getStartedTestId';
+ const popoverTestId = `${testId}-popoverList`;
const getStartedLinks = [
{
title: 'React',
@@ -112,7 +114,11 @@ describe('GetStartedPopover', () => {
];
const component = (
-
+
);
const componentWithGeneratedLinks = (
@@ -149,9 +155,7 @@ describe('GetStartedPopover', () => {
const button = await screen.findByRole('button', {
name: 'Toggle getting started guides navigation'
});
- const dropdown = await screen.findByRole('navigation', {
- name: 'Getting started guides for other platforms'
- });
+ const dropdown = screen.getByTestId(popoverTestId);
expect(dropdown.classList).not.toContain('popover--expanded');
userEvent.click(button);
@@ -180,9 +184,7 @@ describe('GetStartedPopover', () => {
const button = await screen.findByRole('button', {
name: 'Toggle getting started guides navigation'
});
- const dropdown = await screen.findByRole('navigation', {
- name: 'Getting started guides for other platforms'
- });
+ const dropdown = screen.getByTestId(popoverTestId);
userEvent.click(button);
expect(dropdown.classList).toContain('popover--expanded');
@@ -195,9 +197,7 @@ describe('GetStartedPopover', () => {
const button = await screen.findByRole('button', {
name: 'Toggle getting started guides navigation'
});
- const dropdown = await screen.findByRole('navigation', {
- name: 'Getting started guides for other platforms'
- });
+ const dropdown = screen.getByTestId(popoverTestId);
const platformOptions =
document.getElementsByClassName('popover-list__link');
diff --git a/src/components/PlatformNavigator/__tests__/PlatformNavigator.test.tsx b/src/components/PlatformNavigator/__tests__/PlatformNavigator.test.tsx
index e3625a7993b..b809c20a206 100644
--- a/src/components/PlatformNavigator/__tests__/PlatformNavigator.test.tsx
+++ b/src/components/PlatformNavigator/__tests__/PlatformNavigator.test.tsx
@@ -26,8 +26,15 @@ const flatDirectoryMock = {
jest.mock('@/directory/flatDirectory.json', () => flatDirectoryMock);
describe('PlatformNavigator', () => {
+ const testId = 'platformNavTestId';
+ const popoverTestId = `${testId}-popoverList`;
+
const component = (
-
+
);
it('should render the PlatformNavigator component', async () => {
@@ -71,7 +78,7 @@ describe('PlatformNavigator', () => {
render(component);
const platformButton = await screen.getByRole('button');
- const popover = await screen.getByRole('navigation');
+ const popover = screen.getByTestId(popoverTestId);
const popoverFirstItem = popover.children[0].children[1];
userEvent.click(platformButton);
userEvent.tab();
@@ -84,9 +91,15 @@ describe('PlatformNavigator', () => {
});
it('should use current pathname when platform exists for that path', async () => {
- render();
+ render(
+
+ );
- const popover = await screen.getByRole('navigation');
+ const popover = screen.getByTestId(popoverTestId);
const popoverFirstItem = popover.children[0].children[0];
expect(popoverFirstItem.children[0].getAttribute('href')).toBe(
'/react/build-ui/figma-to-code'
@@ -94,9 +107,15 @@ describe('PlatformNavigator', () => {
});
it('should use platform root url when platform does not exist for current pathname', async () => {
- render();
+ render(
+
+ );
- const popover = await screen.getByRole('navigation');
+ const popover = screen.getByTestId(popoverTestId);
// Flutter
const popoverFirstItem = popover.children[0].children[6];
diff --git a/src/components/PlatformNavigator/index.tsx b/src/components/PlatformNavigator/index.tsx
index 412effaabcb..59a0559c039 100644
--- a/src/components/PlatformNavigator/index.tsx
+++ b/src/components/PlatformNavigator/index.tsx
@@ -14,11 +14,13 @@ import {
type PlatformNavigatorProps = {
currentPlatform: Platform;
isGen1: boolean;
+ testId?: string;
};
export function PlatformNavigator({
currentPlatform,
- isGen1
+ isGen1,
+ testId
}: PlatformNavigatorProps) {
const { pathname } = useRouter();
@@ -57,7 +59,7 @@ export function PlatformNavigator({
{platformTitle}
diff --git a/src/components/Popover/PopoverList.tsx b/src/components/Popover/PopoverList.tsx
index 0a2111f7305..ca1f4bf9b8b 100644
--- a/src/components/Popover/PopoverList.tsx
+++ b/src/components/Popover/PopoverList.tsx
@@ -5,15 +5,9 @@ import { usePopover } from './usePopover';
interface PopoverListProps extends ViewProps {
anchor?: 'left' | 'right';
fullWidth?: boolean;
- /**
- * @description
- * Accessible label for the nav item. Required since we are using a