From d41fb4d9429ab495e35e67152893bc096c151273 Mon Sep 17 00:00:00 2001 From: katiegoines Date: Mon, 6 May 2024 12:35:18 -0700 Subject: [PATCH 1/6] unit tests --- jest.config.js | 4 +- .../Accordion/__tests__/Accordion.test.tsx | 24 ++- .../__tests__/FeatureFlags.test.tsx | 88 +++++++++++ .../__tests__/FeatureLists.test.tsx | 51 ++++++ .../Feedback/__tests__/index.test.tsx | 17 +- .../__tests__/FrameworkGrid.test.tsx | 19 +++ .../GlobalNav/__tests__/GlobalNav.test.tsx | 22 +++ src/components/Layout/LayoutHeader.tsx | 2 +- .../Layout/__tests__/Layout.test.tsx | 147 ++++++++++++++++++ src/components/Menu/__tests__/Menu.test.tsx | 131 ++++++++++++++++ .../SkipToMain/__tests__/SkipToMain.test.tsx | 16 ++ 11 files changed, 504 insertions(+), 17 deletions(-) create mode 100644 src/components/FeatureFlags/__tests__/FeatureFlags.test.tsx create mode 100644 src/components/FeatureLists/__tests__/FeatureLists.test.tsx create mode 100644 src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx create mode 100644 src/components/GlobalNav/__tests__/GlobalNav.test.tsx create mode 100644 src/components/Layout/__tests__/Layout.test.tsx create mode 100644 src/components/Menu/__tests__/Menu.test.tsx create mode 100644 src/components/SkipToMain/__tests__/SkipToMain.test.tsx diff --git a/jest.config.js b/jest.config.js index 336537e3cdd..563eed95c7e 100644 --- a/jest.config.js +++ b/jest.config.js @@ -14,11 +14,13 @@ module.exports = { setupFilesAfterEnv: ['/jest.setup.ts'], moduleNameMapper: { '\\.(css|less|scss)$': '/src/__mocks__/styleMock.js', + '@docsearch/css(.*)': '/src/__mocks__/styleMock.js', '@/components/(.*)': '/src/components/$1', '@/constants/(.*)': '/src/constants/$1', '@/utils/(.*)': '/src/utils/$1', '@/data/(.*)': '/src/data/$1', - '@/directory/(.*)': '/src/directory/$1' + '@/directory/(.*)': '/src/directory/$1', + '@/themes/(.*)': '/src/themes/$1' }, transformIgnorePatterns: [] }; diff --git a/src/components/Accordion/__tests__/Accordion.test.tsx b/src/components/Accordion/__tests__/Accordion.test.tsx index 3decf2377c5..1b8f6141e98 100644 --- a/src/components/Accordion/__tests__/Accordion.test.tsx +++ b/src/components/Accordion/__tests__/Accordion.test.tsx @@ -46,25 +46,39 @@ describe('Accordion', () => { expect(bodyText).toBeInTheDocument(); }); - it('should expand Accordion when heading is clicked', async () => { + it('should toggle Accordion when heading is clicked', async () => { render(component); const accordionHeading = screen.getByText('Accordion component example'); + const detailsEl = await screen.getByRole('group'); + const text = await screen.getByText(content); userEvent.click(accordionHeading); await waitFor(() => { - expect(screen.getByText(content)).toBeInTheDocument(); - expect(screen.getByText(content)).toBeVisible(); + expect(text).toBeVisible(); + expect(detailsEl).toHaveAttribute('open'); + }); + + userEvent.click(accordionHeading); + await waitFor(() => { + expect(text).not.toBeVisible(); + expect(detailsEl).not.toHaveAttribute('open'); }); }); it('should collapse Accordion when close button is clicked', async () => { render(component); - await screen.getByText(content); + const accordionHeading = screen.getByText('Accordion component example'); + userEvent.click(accordionHeading); + const detailsEl = await screen.getByRole('group'); + expect(detailsEl).toHaveAttribute('open'); + + const text = await screen.getByText(content); const closeButton = screen.getByRole('button'); userEvent.click(closeButton); await waitFor(() => { - expect(screen.getByText(content)).not.toBeVisible(); + expect(text).not.toBeVisible(); + expect(detailsEl).not.toHaveAttribute('open'); }); }); diff --git a/src/components/FeatureFlags/__tests__/FeatureFlags.test.tsx b/src/components/FeatureFlags/__tests__/FeatureFlags.test.tsx new file mode 100644 index 00000000000..ee43dca6b21 --- /dev/null +++ b/src/components/FeatureFlags/__tests__/FeatureFlags.test.tsx @@ -0,0 +1,88 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import FeatureFlags from '../index'; +import FeatureFlagSummary from '../FeatureFlagSummary'; + +describe('FeatureFlags', () => { + it('should render the FeatureFlags component', async () => { + render(); + const element = await screen.findByRole('heading', { name: 'appSync' }); + expect(element).toBeInTheDocument(); + }); + + it('should render the FeatureFlagSummary component', async () => { + const flag = { + description: + 'Changes the permission format to grant access to graphql operations instead of appsync control plane operations', + type: 'Feature', + valueType: 'Boolean', + versionAdded: '4.42.0', + deprecationDate: 'May 1st 2021', + values: [ + { + value: 'true', + description: 'Creates IAM policies to allow Query/Mutations', + defaultNewProject: true, + defaultExistingProject: false + }, + { + value: 'false', + description: + 'Uses previous policy format which allows control plane access to AppSync', + defaultNewProject: false, + defaultExistingProject: true + } + ] + }; + + const component = ( + + ); + render(component); + const element = await screen.findByRole('link', { + name: 'generateGraphQLPermissions' + }); + expect(element).toBeInTheDocument(); + }); + + it('should render the FeatureFlagSummary component without description if one doesn"t exist on the flag', async () => { + const flag = { + type: 'Feature', + valueType: 'Boolean', + versionAdded: '4.42.0', + deprecationDate: 'May 1st 2021', + values: [ + { + value: 'true', + description: 'Creates IAM policies to allow Query/Mutations', + defaultNewProject: true, + defaultExistingProject: false + }, + { + value: 'false', + description: + 'Uses previous policy format which allows control plane access to AppSync', + defaultNewProject: false, + defaultExistingProject: true + } + ] + }; + + const component = ( + + ); + render(component); + const element = await screen.findByRole('heading', { + name: 'generateGraphQLPermissions' + }); + expect(element.nextElementSibling?.tagName).not.toBe('P'); + }); +}); diff --git a/src/components/FeatureLists/__tests__/FeatureLists.test.tsx b/src/components/FeatureLists/__tests__/FeatureLists.test.tsx new file mode 100644 index 00000000000..45f6c77148f --- /dev/null +++ b/src/components/FeatureLists/__tests__/FeatureLists.test.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import { FeatureList, FeatureItem, PlatformFeatureList } from '../index'; + +describe('FeatureLists', () => { + const featureListComponent = ( + + + Deploy apps in Next.js, Nuxt.js, Gatsby, React, Vue, Angular (and more) + by simply connecting your Git repository. + + + ); + + it('should render the FeatureList component', async () => { + render(featureListComponent); + + const heading = await screen.findByRole('heading', { name: 'Deploy' }); + + expect(heading).toBeInTheDocument(); + expect(heading.tagName).toBe('H2'); + }); + + it('should render the FeatureItem component', async () => { + render(featureListComponent); + + const link = await screen.findByRole('link', { + name: 'SSR/SSG/ISR hosting support' + }); + + expect(link).toBeInTheDocument(); + }); + + it('should render the PlatformFeatureList component', async () => { + render(); + + const link = await screen.findByRole('link', { + name: 'Simple configuration' + }); + + const heading = await screen.findByRole('heading', { + name: 'Features for React' + }); + + expect(link).toBeInTheDocument(); + expect(heading).toBeInTheDocument(); + }); +}); diff --git a/src/components/Feedback/__tests__/index.test.tsx b/src/components/Feedback/__tests__/index.test.tsx index f93e48ff9f4..7b02eb5d5a4 100644 --- a/src/components/Feedback/__tests__/index.test.tsx +++ b/src/components/Feedback/__tests__/index.test.tsx @@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import * as trackModule from '../../../utils/track'; -jest.mock('next/router', () => ({ +const router = jest.mock('next/router', () => ({ useRouter() { return { route: '/', @@ -19,6 +19,8 @@ jest.mock('../../../utils/track', () => ({ })); describe('Feedback', () => { + const component = ; + it('should render component with thumbs up and thumbs down button', () => { const component = ; @@ -32,27 +34,22 @@ describe('Feedback', () => { }); it('should show response text when No is clicked', async () => { - const component = ; - render(component); - const thumbsDownButton = screen.getByText('No'); - const feedbackComponent = screen.getByText('Was this page helpful?'); - const feedbackText = screen.getByText('Can you provide more details?'); + const thumbsDownButton = screen.getByRole('button', { name: 'No' }); expect(thumbsDownButton).toBeInTheDocument(); - userEvent.click(feedbackComponent); + userEvent.click(thumbsDownButton); + const response = screen.getByRole('link'); await waitFor(() => { - expect(feedbackText).toBeVisible(); + expect(response.textContent).toBe('File an issue on GitHub'); }); }); it('should call trackFeedbackSubmission request when either button is clicked', async () => { jest.spyOn(trackModule, 'trackFeedbackSubmission'); - const component = ; - render(component); const thumbsDownButton = screen.getByText('No'); userEvent.click(thumbsDownButton); diff --git a/src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx b/src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx new file mode 100644 index 00000000000..80a6e0ddb27 --- /dev/null +++ b/src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import { FrameworkGrid } from '../index'; + +describe('FrameworkGrid', () => { + const component = ; + + it('should render the FrameworkGrid component', async () => { + render(component); + const framework = await screen.findByRole('link', { name: 'React' }); + expect(framework).toBeInTheDocument(); + }); + + it('should highlight icon of the currentKey', async () => { + render(component); + const framework = await screen.findByRole('link', { name: 'React' }); + expect(framework.classList).toContain('framework-grid__link--current'); + }); +}); diff --git a/src/components/GlobalNav/__tests__/GlobalNav.test.tsx b/src/components/GlobalNav/__tests__/GlobalNav.test.tsx new file mode 100644 index 00000000000..e9765060c04 --- /dev/null +++ b/src/components/GlobalNav/__tests__/GlobalNav.test.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import { LEFT_NAV_LINKS, RIGHT_NAV_LINKS } from '@/utils/globalnav'; +import { GlobalNav, NavMenuItem } from '@/components/GlobalNav/GlobalNav'; + +describe('GlobalNav', () => { + const component = ( + + ); + + it('should render the GlobalNav component', async () => { + render(component); + const link = await screen.findByRole('link', { name: 'About AWS Amplify' }); + expect(link).toBeInTheDocument(); + }); +}); diff --git a/src/components/Layout/LayoutHeader.tsx b/src/components/Layout/LayoutHeader.tsx index 67bc553a84f..42e09ea83a1 100644 --- a/src/components/Layout/LayoutHeader.tsx +++ b/src/components/Layout/LayoutHeader.tsx @@ -12,7 +12,7 @@ import { IconMenu, IconDoubleChevron } from '@/components/Icons'; import { Menu } from '@/components/Menu'; import { LayoutContext } from '@/components/Layout'; import { PlatformNavigator } from '@/components/PlatformNavigator'; -import flatDirectory from 'src/directory/flatDirectory.json'; +import flatDirectory from '@/directory/flatDirectory.json'; import { DocSearch } from '@docsearch/react'; import '@docsearch/css'; import { PageLastUpdated } from '../PageLastUpdated'; diff --git a/src/components/Layout/__tests__/Layout.test.tsx b/src/components/Layout/__tests__/Layout.test.tsx new file mode 100644 index 00000000000..cb4172c2062 --- /dev/null +++ b/src/components/Layout/__tests__/Layout.test.tsx @@ -0,0 +1,147 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import { Layout } from '../index'; +// import { LayoutProvider } from '../index'; +import userEvent from '@testing-library/user-event'; + +const routerMock = { + __esModule: true, + useRouter: () => { + return { + query: { platform: 'react' }, + pathname: '/[platform]/start/getting-started/introduction/', + asPath: '/[platform]/start/getting-started/introduction/' + }; + } +}; + +jest.mock('next/router', () => routerMock); + +describe('Layout', () => { + // const toggleMenuOpen = jest.fn(); + // const handleColorModeChange = jest.fn(); + + const layoutComponent = ( + + <> + + ); + + // const layoutProviderComponent = ( + // + // {layoutComponent} + // + // ); + + it('should render the Layout component', async () => { + render(layoutComponent); + const layout = await screen.getByRole('main', { name: 'Main content' }); + expect(layout).toBeInTheDocument(); + }); + + it('should show Layout with system color mode', async () => { + render(layoutComponent); + + const nav = await screen.getByRole('navigation', { + name: 'Amplify Dev Center - External links to additional Amplify resources' + }); + + const themeWrapper = nav.parentElement?.parentElement; + + expect(themeWrapper).toHaveAttribute('data-amplify-color-mode', 'system'); + }); + + it('should show Layout with dark color mode', async () => { + localStorage.setItem('colorMode', 'dark'); + render(layoutComponent); + + const nav = await screen.getByRole('navigation', { + name: 'Amplify Dev Center - External links to additional Amplify resources' + }); + + const themeWrapper = nav.parentElement?.parentElement; + + expect(themeWrapper).toHaveAttribute('data-amplify-color-mode', 'dark'); + }); + + // it('handleScroll test', async () => { + // render(layoutComponent); + // console.log(document.body.scrollTop); + + // const main = await screen.getByRole('main', { name: 'Main content' }); + // main.setAttribute('height', '500px'); + // console.log(main.scrollHeight); + + // // fireEvent.scroll(main, { target: { scrollY: 100 } }); + // fireEvent.scroll(main, { target: { scrollY: 30 } }); + + // console.log(document.body.scrollTop); + + // console.log(document.body.className); + + // // console.log(component.props.pageType); + // // console.log(document.body.className); + // }); + + it('should open menu on click of Menu button in mobile', async () => { + render(layoutComponent); + const menuButton = await screen.getByRole('button', { name: 'Menu' }); + const closeButton = await screen.getByRole('button', { + name: 'Close menu' + }); + expect(closeButton.classList).not.toContain( + 'layout-sidebar__mobile-toggle--open' + ); + userEvent.click(menuButton); + expect(closeButton.classList).toContain( + 'layout-sidebar__mobile-toggle--open' + ); + }); + + it('should close menu on click of Close button in mobile', async () => { + render(layoutComponent); + const menuButton = await screen.getByRole('button', { name: 'Menu' }); + const closeButton = await screen.getByRole('button', { + name: 'Close menu' + }); + userEvent.click(menuButton); + userEvent.click(closeButton); + expect(closeButton.classList).not.toContain( + 'layout-sidebar__mobile-toggle--open' + ); + expect(menuButton).toHaveFocus(); + }); + + it('should close menu on click outside of menu in mobile', async () => { + render(layoutComponent); + const menuButton = await screen.getByRole('button', { name: 'Menu' }); + const closeButton = await screen.getByRole('button', { + name: 'Close menu' + }); + const outsideMenu = document.getElementsByClassName( + 'layout-sidebar__backdrop--expanded' + ); + userEvent.click(menuButton); + userEvent.click(outsideMenu[0]); + + expect(closeButton.classList).not.toContain( + 'layout-sidebar__mobile-toggle--open' + ); + }); +}); diff --git a/src/components/Menu/__tests__/Menu.test.tsx b/src/components/Menu/__tests__/Menu.test.tsx new file mode 100644 index 00000000000..e84d88098f1 --- /dev/null +++ b/src/components/Menu/__tests__/Menu.test.tsx @@ -0,0 +1,131 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import { Menu } from '../index'; + +const routerMock = { + __esModule: true, + useRouter: () => { + return { + query: { platform: 'react' }, + pathname: '/[platform]/start/getting-started/introduction/', + asPath: '/[platform]/start/getting-started/introduction/' + }; + } +}; + +jest.mock('next/router', () => routerMock); + +const routerMockLegacy = { + __esModule: true, + useRouter: () => { + return { + query: { platform: 'react' }, + pathname: '/[platform]/tools/cli-legacy/overview', + asPath: '/[platform]/tools/cli-legacy/overview' + }; + } +}; + +jest.mock('next/router', () => routerMockLegacy); + +describe('Menu', () => { + // it('should render the Menu component', async () => { + // const component = ; + // render(component); + + // const menu = await screen.getByRole('navigation', { + // name: 'Main' + // }); + + // expect(menu).toBeInTheDocument(); + // }); + + it('should render the cli-legacy-specific menu', async () => { + const component = ( + + ); + + render(component); + const cliLegacyMenuItem = await screen.getByRole('link', { + name: 'Legacy (GraphQL Transformer v1)' + }); + expect(cliLegacyMenuItem).toBeInTheDocument(); + }); + + // it('should render the v5-specific menu', async () => { + // const menuComponent = ( + // + // ); + // render(menuComponent); + // const v5OnlyMenuItem = await screen.getByRole('link', { + // name: 'Typescript Strict Mode' + // }); + // expect(v5OnlyMenuItem).toBeInTheDocument(); + // }); + + // it('should render the gen2-specific menu', async () => { + // const menuComponent = ; + // render(menuComponent); + // const gen2OnlyMenuItem = await screen.getByRole('link', { + // name: 'How Amplify Gen 2 works' + // }); + // expect(gen2OnlyMenuItem).toBeInTheDocument(); + // }); + + // it('should render the sdk-specific menu', async () => { + // const menuComponent = ( + // + // ); + // render(menuComponent); + // const sdkOnlyMenuItem = await screen.getByRole('link', { + // name: 'AWS Mobile SDK - Overview' + // }); + // expect(sdkOnlyMenuItem).toBeInTheDocument(); + // }); + + // it('should render the MenuItem component', async () => { + // const component = ; + // render(component); + // const menuItems = await screen.getAllByRole('listitem'); + // const menuItem = menuItems[0]; + // expect(menuItem.classList).toContain('menu__list-item'); + // }); + + // it('should expand menu on Subcategory MenuItem click', async () => { + // const component = ; + // render(component); + // const menuItem = await screen.getByRole('link', { + // name: 'Existing AWS resources' + // }); + // expect(menuItem.classList).toContain('menu__list-item__link--subcategory'); + // expect(menuItem?.nextElementSibling?.classList).toContain( + // 'menu__list--hide' + // ); + // }); + + // it('handleFocus', async () => { + // const component = ; + // render(component); + // const menuItemLink = await screen.getByRole('link', { + // name: 'Existing AWS resources' + // }); + // const menuItem = menuItemLink.parentElement; + // menuItem?.focus(); + // }); + + // it('should not render MenuItem if pageNode does not exist', async () => { + // const component = ( + // + // ); + // render(component); + // const menuItems = await screen.getAllByRole('listitem'); + // // console.log(menuItems.key['prev/[platform]/build-a-backend/auth/set-up-auth/']); + // console.log(menuItems); + // // menuItems.forEach((item) => { + // // console.log(item.textContent); + // // }); + // }); +}); diff --git a/src/components/SkipToMain/__tests__/SkipToMain.test.tsx b/src/components/SkipToMain/__tests__/SkipToMain.test.tsx new file mode 100644 index 00000000000..33e8e1e264b --- /dev/null +++ b/src/components/SkipToMain/__tests__/SkipToMain.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import { SkipToMain } from '../index'; + +describe('SkipToMain', () => { + const component = ; + + it('should render the SkipToMain component', async () => { + render(component); + const link = await screen.findByRole('link', { + name: 'Skip to main content' + }); + expect(link).toBeInTheDocument(); + expect(link.getAttribute('href')).toBe('#pageMain'); + }); +}); From 36b5914d55b81cb70d1e80f879df5e7fa4ede38e Mon Sep 17 00:00:00 2001 From: katiegoines Date: Wed, 8 May 2024 14:00:54 -0700 Subject: [PATCH 2/6] working --- src/components/FeatureLists/__tests__/FeatureLists.test.tsx | 4 ++-- src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/FeatureLists/__tests__/FeatureLists.test.tsx b/src/components/FeatureLists/__tests__/FeatureLists.test.tsx index 45f6c77148f..e251f9d109f 100644 --- a/src/components/FeatureLists/__tests__/FeatureLists.test.tsx +++ b/src/components/FeatureLists/__tests__/FeatureLists.test.tsx @@ -7,7 +7,7 @@ describe('FeatureLists', () => { Deploy apps in Next.js, Nuxt.js, Gatsby, React, Vue, Angular (and more) by simply connecting your Git repository. @@ -35,7 +35,7 @@ describe('FeatureLists', () => { }); it('should render the PlatformFeatureList component', async () => { - render(); + render(); const link = await screen.findByRole('link', { name: 'Simple configuration' diff --git a/src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx b/src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx index 80a6e0ddb27..a27636e47ea 100644 --- a/src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx +++ b/src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx @@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react'; import { FrameworkGrid } from '../index'; describe('FrameworkGrid', () => { - const component = ; + const component = ; it('should render the FrameworkGrid component', async () => { render(component); From 4b5bffbff204338265cf809ec4369f82383fa0ba Mon Sep 17 00:00:00 2001 From: katiegoines Date: Mon, 13 May 2024 14:34:29 -0700 Subject: [PATCH 3/6] fixing tests --- .../__tests__/FeatureLists.test.tsx | 13 ++ .../__tests__/FrameworkGrid.test.tsx | 13 ++ .../GlobalNav/__tests__/GlobalNav.test.tsx | 15 +- .../Layout/__tests__/Layout.test.tsx | 30 ++-- src/components/Menu/__tests__/Menu.test.tsx | 143 ++++++++---------- 5 files changed, 116 insertions(+), 98 deletions(-) diff --git a/src/components/FeatureLists/__tests__/FeatureLists.test.tsx b/src/components/FeatureLists/__tests__/FeatureLists.test.tsx index e251f9d109f..d6b8ce77a53 100644 --- a/src/components/FeatureLists/__tests__/FeatureLists.test.tsx +++ b/src/components/FeatureLists/__tests__/FeatureLists.test.tsx @@ -2,6 +2,19 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import { FeatureList, FeatureItem, PlatformFeatureList } from '../index'; +const routerMock = { + __esModule: true, + useRouter: () => { + return { + query: { platform: 'react' }, + pathname: '/gen1/', + asPath: '/gen1/' + }; + } +}; + +jest.mock('next/router', () => routerMock); + describe('FeatureLists', () => { const featureListComponent = ( diff --git a/src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx b/src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx index a27636e47ea..30fb0e40bbc 100644 --- a/src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx +++ b/src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx @@ -2,6 +2,19 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import { FrameworkGrid } from '../index'; +const routerMock = { + __esModule: true, + useRouter: () => { + return { + query: { platform: 'react' }, + pathname: '/gen1/', + asPath: '/gen1/' + }; + } +}; + +jest.mock('next/router', () => routerMock); + describe('FrameworkGrid', () => { const component = ; diff --git a/src/components/GlobalNav/__tests__/GlobalNav.test.tsx b/src/components/GlobalNav/__tests__/GlobalNav.test.tsx index e9765060c04..9de9a3f5ae7 100644 --- a/src/components/GlobalNav/__tests__/GlobalNav.test.tsx +++ b/src/components/GlobalNav/__tests__/GlobalNav.test.tsx @@ -3,6 +3,19 @@ import { render, screen } from '@testing-library/react'; import { LEFT_NAV_LINKS, RIGHT_NAV_LINKS } from '@/utils/globalnav'; import { GlobalNav, NavMenuItem } from '@/components/GlobalNav/GlobalNav'; +const routerMock = { + __esModule: true, + useRouter: () => { + return { + query: { platform: 'react' }, + pathname: '/', + asPath: '/' + }; + } +}; + +jest.mock('next/router', () => routerMock); + describe('GlobalNav', () => { const component = ( { currentSite="Docs" isGen1={false} mainId="pageMain" - > + /> ); it('should render the GlobalNav component', async () => { diff --git a/src/components/Layout/__tests__/Layout.test.tsx b/src/components/Layout/__tests__/Layout.test.tsx index cb4172c2062..e8e6f3fe717 100644 --- a/src/components/Layout/__tests__/Layout.test.tsx +++ b/src/components/Layout/__tests__/Layout.test.tsx @@ -59,7 +59,7 @@ describe('Layout', () => { render(layoutComponent); const nav = await screen.getByRole('navigation', { - name: 'Amplify Dev Center - External links to additional Amplify resources' + name: 'Amplify Docs - External links to additional Amplify resources' }); const themeWrapper = nav.parentElement?.parentElement; @@ -72,7 +72,7 @@ describe('Layout', () => { render(layoutComponent); const nav = await screen.getByRole('navigation', { - name: 'Amplify Dev Center - External links to additional Amplify resources' + name: 'Amplify Docs - External links to additional Amplify resources' }); const themeWrapper = nav.parentElement?.parentElement; @@ -80,24 +80,24 @@ describe('Layout', () => { expect(themeWrapper).toHaveAttribute('data-amplify-color-mode', 'dark'); }); - // it('handleScroll test', async () => { - // render(layoutComponent); - // console.log(document.body.scrollTop); + // // it('handleScroll test', async () => { + // // render(layoutComponent); + // // console.log(document.body.scrollTop); - // const main = await screen.getByRole('main', { name: 'Main content' }); - // main.setAttribute('height', '500px'); - // console.log(main.scrollHeight); + // // const main = await screen.getByRole('main', { name: 'Main content' }); + // // main.setAttribute('height', '500px'); + // // console.log(main.scrollHeight); - // // fireEvent.scroll(main, { target: { scrollY: 100 } }); - // fireEvent.scroll(main, { target: { scrollY: 30 } }); + // // // fireEvent.scroll(main, { target: { scrollY: 100 } }); + // // fireEvent.scroll(main, { target: { scrollY: 30 } }); - // console.log(document.body.scrollTop); + // // console.log(document.body.scrollTop); - // console.log(document.body.className); + // // console.log(document.body.className); - // // console.log(component.props.pageType); - // // console.log(document.body.className); - // }); + // // // console.log(component.props.pageType); + // // // console.log(document.body.className); + // // }); it('should open menu on click of Menu button in mobile', async () => { render(layoutComponent); diff --git a/src/components/Menu/__tests__/Menu.test.tsx b/src/components/Menu/__tests__/Menu.test.tsx index e84d88098f1..949b71bed76 100644 --- a/src/components/Menu/__tests__/Menu.test.tsx +++ b/src/components/Menu/__tests__/Menu.test.tsx @@ -15,36 +15,23 @@ const routerMock = { jest.mock('next/router', () => routerMock); -const routerMockLegacy = { - __esModule: true, - useRouter: () => { - return { - query: { platform: 'react' }, - pathname: '/[platform]/tools/cli-legacy/overview', - asPath: '/[platform]/tools/cli-legacy/overview' - }; - } -}; - -jest.mock('next/router', () => routerMockLegacy); - describe('Menu', () => { - // it('should render the Menu component', async () => { - // const component = ; - // render(component); + it('should render the Menu component', async () => { + const component = ; + render(component); - // const menu = await screen.getByRole('navigation', { - // name: 'Main' - // }); + const menu = await screen.getByRole('navigation', { + name: 'Main' + }); - // expect(menu).toBeInTheDocument(); - // }); + expect(menu).toBeInTheDocument(); + }); it('should render the cli-legacy-specific menu', async () => { const component = ( ); @@ -55,77 +42,69 @@ describe('Menu', () => { expect(cliLegacyMenuItem).toBeInTheDocument(); }); - // it('should render the v5-specific menu', async () => { - // const menuComponent = ( - // - // ); - // render(menuComponent); - // const v5OnlyMenuItem = await screen.getByRole('link', { - // name: 'Typescript Strict Mode' - // }); - // expect(v5OnlyMenuItem).toBeInTheDocument(); - // }); - - // it('should render the gen2-specific menu', async () => { - // const menuComponent = ; - // render(menuComponent); - // const gen2OnlyMenuItem = await screen.getByRole('link', { - // name: 'How Amplify Gen 2 works' - // }); - // expect(gen2OnlyMenuItem).toBeInTheDocument(); - // }); + it('should render the v5-specific menu', async () => { + const menuComponent = ( + + ); + render(menuComponent); + const v5OnlyMenuItem = await screen.getByRole('link', { + name: 'Typescript Strict Mode' + }); + expect(v5OnlyMenuItem).toBeInTheDocument(); + }); - // it('should render the sdk-specific menu', async () => { - // const menuComponent = ( - // - // ); - // render(menuComponent); - // const sdkOnlyMenuItem = await screen.getByRole('link', { - // name: 'AWS Mobile SDK - Overview' - // }); - // expect(sdkOnlyMenuItem).toBeInTheDocument(); - // }); + it('should render the sdk-specific menu', async () => { + const menuComponent = ( + + ); + render(menuComponent); + const sdkOnlyMenuItem = await screen.getByRole('link', { + name: 'AWS Mobile SDK - Overview' + }); + expect(sdkOnlyMenuItem).toBeInTheDocument(); + }); - // it('should render the MenuItem component', async () => { - // const component = ; - // render(component); - // const menuItems = await screen.getAllByRole('listitem'); - // const menuItem = menuItems[0]; - // expect(menuItem.classList).toContain('menu__list-item'); - // }); + it('should render the MenuItem component', async () => { + const component = ; + render(component); + const menuItems = await screen.getAllByRole('listitem'); + const menuItem = menuItems[0]; + expect(menuItem.classList).toContain('menu__list-item'); + }); - // it('should expand menu on Subcategory MenuItem click', async () => { - // const component = ; - // render(component); - // const menuItem = await screen.getByRole('link', { - // name: 'Existing AWS resources' - // }); - // expect(menuItem.classList).toContain('menu__list-item__link--subcategory'); - // expect(menuItem?.nextElementSibling?.classList).toContain( - // 'menu__list--hide' - // ); - // }); + it('should expand menu on Subcategory MenuItem click', async () => { + const component = ; + render(component); + const menuItem = await screen.getByRole('link', { + name: 'Authentication' + }); + expect(menuItem.classList).toContain('menu__list-item__link--subcategory'); + expect(menuItem?.nextElementSibling?.classList).toContain( + 'menu__list--hide' + ); + }); // it('handleFocus', async () => { // const component = ; // render(component); // const menuItemLink = await screen.getByRole('link', { - // name: 'Existing AWS resources' + // name: 'Set up Amplify Auth' // }); // const menuItem = menuItemLink.parentElement; // menuItem?.focus(); + // expect // }); - // it('should not render MenuItem if pageNode does not exist', async () => { - // const component = ( - // - // ); - // render(component); - // const menuItems = await screen.getAllByRole('listitem'); - // // console.log(menuItems.key['prev/[platform]/build-a-backend/auth/set-up-auth/']); - // console.log(menuItems); - // // menuItems.forEach((item) => { - // // console.log(item.textContent); - // // }); - // }); + it('should not render MenuItem if pageNode does not exist', async () => { + const component = ( + + ); + render(component); + // const menuItems = await screen.getAllByRole('listitem'); + // console.log(menuItems.key['prev/[platform]/build-a-backend/auth/set-up-auth/']); + // console.log(menuItems); + // menuItems.forEach((item) => { + // console.log(item.textContent); + // }); + }); }); From ba9f0ad0063199c757a3d7e1a0a3fd9c6cb19c61 Mon Sep 17 00:00:00 2001 From: katiegoines Date: Mon, 20 May 2024 10:29:23 -0700 Subject: [PATCH 4/6] add popover test --- .../__tests__/GetStartedPopover.test.tsx | 53 +++++++-- src/components/Menu/__tests__/Menu.test.tsx | 110 ------------------ 2 files changed, 43 insertions(+), 120 deletions(-) delete mode 100644 src/components/Menu/__tests__/Menu.test.tsx diff --git a/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx b/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx index 230ec106964..759e5eea6e0 100644 --- a/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx +++ b/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; -import { GetStartedPopover } from '../index'; +import { GetStartedPopover, generateGetStartedLinks } from '../index'; import userEvent from '@testing-library/user-event'; import { IconAndroid, @@ -34,7 +34,8 @@ describe('GetStartedPopover', () => { pathname: getStartedHref, query: { platform: 'react' } }, - icon: + icon: , + platform: 'react' }, { title: 'JavaScript', @@ -42,7 +43,8 @@ describe('GetStartedPopover', () => { pathname: getStartedHref, query: { platform: 'javascript' } }, - icon: + icon: , + platform: 'javascript' }, { title: 'Flutter', @@ -50,7 +52,8 @@ describe('GetStartedPopover', () => { pathname: getStartedHref, query: { platform: 'flutter' } }, - icon: + icon: , + platform: 'flutter' }, { title: 'Swift', @@ -58,7 +61,8 @@ describe('GetStartedPopover', () => { pathname: getStartedHref, query: { platform: 'swift' } }, - icon: + icon: , + platform: 'swift' }, { title: 'Android', @@ -66,7 +70,8 @@ describe('GetStartedPopover', () => { pathname: getStartedHref, query: { platform: 'android' } }, - icon: + icon: , + platform: 'android' }, { title: 'React Native', @@ -74,7 +79,8 @@ describe('GetStartedPopover', () => { pathname: getStartedHref, query: { platform: 'react-native' } }, - icon: + icon: , + platform: 'react-native' }, { title: 'Angular', @@ -82,7 +88,8 @@ describe('GetStartedPopover', () => { pathname: getStartedHref, query: { platform: 'angular' } }, - icon: + icon: , + platform: 'angular' }, { title: 'Next.js', @@ -90,7 +97,8 @@ describe('GetStartedPopover', () => { pathname: getStartedHref, query: { platform: 'nextjs' } }, - icon: + icon: , + platform: 'nextjs' }, { title: 'Vue', @@ -98,7 +106,8 @@ describe('GetStartedPopover', () => { pathname: getStartedHref, query: { platform: 'vue' } }, - icon: + icon: , + platform: 'vue' } ]; @@ -106,6 +115,13 @@ describe('GetStartedPopover', () => { ); + const componentWithGeneratedLinks = ( + + ); + it('should render the GetStartedPopover component', async () => { render(component); @@ -285,4 +301,21 @@ describe('GetStartedPopover', () => { '/gen1/nextjs/start/getting-started/introduction' ); }); + + it('should generate getStartedLinks using generateGetStartedLinks function', async () => { + render(componentWithGeneratedLinks); + + const swiftOption = await screen.findByRole('link', { name: 'Swift' }); + const angularOption = await screen.findByRole('link', { name: 'Angular' }); + const nextjsOption = await screen.findByRole('link', { name: 'Next.js' }); + expect(swiftOption.getAttribute('href')).toContain( + '/swift/start/quickstart' + ); + expect(angularOption.getAttribute('href')).toContain( + '/angular/start/quickstart' + ); + expect(nextjsOption.getAttribute('href')).toContain( + '/nextjs/start/quickstart' + ); + }); }); diff --git a/src/components/Menu/__tests__/Menu.test.tsx b/src/components/Menu/__tests__/Menu.test.tsx deleted file mode 100644 index 949b71bed76..00000000000 --- a/src/components/Menu/__tests__/Menu.test.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import * as React from 'react'; -import { render, screen } from '@testing-library/react'; -import { Menu } from '../index'; - -const routerMock = { - __esModule: true, - useRouter: () => { - return { - query: { platform: 'react' }, - pathname: '/[platform]/start/getting-started/introduction/', - asPath: '/[platform]/start/getting-started/introduction/' - }; - } -}; - -jest.mock('next/router', () => routerMock); - -describe('Menu', () => { - it('should render the Menu component', async () => { - const component = ; - render(component); - - const menu = await screen.getByRole('navigation', { - name: 'Main' - }); - - expect(menu).toBeInTheDocument(); - }); - - it('should render the cli-legacy-specific menu', async () => { - const component = ( - - ); - - render(component); - const cliLegacyMenuItem = await screen.getByRole('link', { - name: 'Legacy (GraphQL Transformer v1)' - }); - expect(cliLegacyMenuItem).toBeInTheDocument(); - }); - - it('should render the v5-specific menu', async () => { - const menuComponent = ( - - ); - render(menuComponent); - const v5OnlyMenuItem = await screen.getByRole('link', { - name: 'Typescript Strict Mode' - }); - expect(v5OnlyMenuItem).toBeInTheDocument(); - }); - - it('should render the sdk-specific menu', async () => { - const menuComponent = ( - - ); - render(menuComponent); - const sdkOnlyMenuItem = await screen.getByRole('link', { - name: 'AWS Mobile SDK - Overview' - }); - expect(sdkOnlyMenuItem).toBeInTheDocument(); - }); - - it('should render the MenuItem component', async () => { - const component = ; - render(component); - const menuItems = await screen.getAllByRole('listitem'); - const menuItem = menuItems[0]; - expect(menuItem.classList).toContain('menu__list-item'); - }); - - it('should expand menu on Subcategory MenuItem click', async () => { - const component = ; - render(component); - const menuItem = await screen.getByRole('link', { - name: 'Authentication' - }); - expect(menuItem.classList).toContain('menu__list-item__link--subcategory'); - expect(menuItem?.nextElementSibling?.classList).toContain( - 'menu__list--hide' - ); - }); - - // it('handleFocus', async () => { - // const component = ; - // render(component); - // const menuItemLink = await screen.getByRole('link', { - // name: 'Set up Amplify Auth' - // }); - // const menuItem = menuItemLink.parentElement; - // menuItem?.focus(); - // expect - // }); - - it('should not render MenuItem if pageNode does not exist', async () => { - const component = ( - - ); - render(component); - // const menuItems = await screen.getAllByRole('listitem'); - // console.log(menuItems.key['prev/[platform]/build-a-backend/auth/set-up-auth/']); - // console.log(menuItems); - // menuItems.forEach((item) => { - // console.log(item.textContent); - // }); - }); -}); From b88780bf4d006298df72a7d1d5eab0afd6e510ef Mon Sep 17 00:00:00 2001 From: katiegoines Date: Mon, 20 May 2024 10:31:38 -0700 Subject: [PATCH 5/6] remove comments --- .../Layout/__tests__/Layout.test.tsx | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/components/Layout/__tests__/Layout.test.tsx b/src/components/Layout/__tests__/Layout.test.tsx index e8e6f3fe717..e63036a2b36 100644 --- a/src/components/Layout/__tests__/Layout.test.tsx +++ b/src/components/Layout/__tests__/Layout.test.tsx @@ -80,25 +80,6 @@ describe('Layout', () => { expect(themeWrapper).toHaveAttribute('data-amplify-color-mode', 'dark'); }); - // // it('handleScroll test', async () => { - // // render(layoutComponent); - // // console.log(document.body.scrollTop); - - // // const main = await screen.getByRole('main', { name: 'Main content' }); - // // main.setAttribute('height', '500px'); - // // console.log(main.scrollHeight); - - // // // fireEvent.scroll(main, { target: { scrollY: 100 } }); - // // fireEvent.scroll(main, { target: { scrollY: 30 } }); - - // // console.log(document.body.scrollTop); - - // // console.log(document.body.className); - - // // // console.log(component.props.pageType); - // // // console.log(document.body.className); - // // }); - it('should open menu on click of Menu button in mobile', async () => { render(layoutComponent); const menuButton = await screen.getByRole('button', { name: 'Menu' }); From 59ec94a19f77dbdd3e546278abaafd446e3e4eed Mon Sep 17 00:00:00 2001 From: katiegoines Date: Mon, 20 May 2024 10:32:31 -0700 Subject: [PATCH 6/6] remove comments --- src/components/Layout/__tests__/Layout.test.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/components/Layout/__tests__/Layout.test.tsx b/src/components/Layout/__tests__/Layout.test.tsx index e63036a2b36..ac116f9725a 100644 --- a/src/components/Layout/__tests__/Layout.test.tsx +++ b/src/components/Layout/__tests__/Layout.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import { Layout } from '../index'; -// import { LayoutProvider } from '../index'; import userEvent from '@testing-library/user-event'; const routerMock = { @@ -18,9 +17,6 @@ const routerMock = { jest.mock('next/router', () => routerMock); describe('Layout', () => { - // const toggleMenuOpen = jest.fn(); - // const handleColorModeChange = jest.fn(); - const layoutComponent = ( { ); - // const layoutProviderComponent = ( - // - // {layoutComponent} - // - // ); - it('should render the Layout component', async () => { render(layoutComponent); const layout = await screen.getByRole('main', { name: 'Main content' });