Skip to content

Commit 5eefad3

Browse files
author
katiegoines
committed
filling out tests
1 parent 9e12ac2 commit 5eefad3

File tree

7 files changed

+187
-15
lines changed

7 files changed

+187
-15
lines changed

‎src/components/FeatureFlags/__tests__/FeatureFlags.test.tsx

Lines changed: 80 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,88 @@
11
import * as React from 'react';
2-
import { render } from '@testing-library/react';
2+
import { render, screen } from '@testing-library/react';
33
import FeatureFlags from '../index';
4+
import FeatureFlagSummary from '../FeatureFlagSummary';
45

56
describe('FeatureFlags', () => {
6-
const component = <FeatureFlags></FeatureFlags>;
7-
87
it('should render the FeatureFlags component', async () => {
8+
render(<FeatureFlags></FeatureFlags>);
9+
const element = await screen.findByRole('heading', { name: 'appSync' });
10+
expect(element).toBeInTheDocument();
11+
});
12+
13+
it('should render the FeatureFlagSummary component', async () => {
14+
const flag = {
15+
description:
16+
'Changes the permission format to grant access to graphql operations instead of appsync control plane operations',
17+
type: 'Feature',
18+
valueType: 'Boolean',
19+
versionAdded: '4.42.0',
20+
deprecationDate: 'May 1st 2021',
21+
values: [
22+
{
23+
value: 'true',
24+
description: 'Creates IAM policies to allow Query/Mutations',
25+
defaultNewProject: true,
26+
defaultExistingProject: false
27+
},
28+
{
29+
value: 'false',
30+
description:
31+
'Uses previous policy format which allows control plane access to AppSync',
32+
defaultNewProject: false,
33+
defaultExistingProject: true
34+
}
35+
]
36+
};
37+
38+
const component = (
39+
<FeatureFlagSummary
40+
key={`feature-flag-summary-${1}`}
41+
name={'generateGraphQLPermissions'}
42+
feature={flag}
43+
/>
44+
);
45+
render(component);
46+
const element = await screen.findByRole('link', {
47+
name: 'generateGraphQLPermissions'
48+
});
49+
expect(element).toBeInTheDocument();
50+
});
51+
52+
it('should render the FeatureFlagSummary component without description if one doesn"t exist on the flag', async () => {
53+
const flag = {
54+
type: 'Feature',
55+
valueType: 'Boolean',
56+
versionAdded: '4.42.0',
57+
deprecationDate: 'May 1st 2021',
58+
values: [
59+
{
60+
value: 'true',
61+
description: 'Creates IAM policies to allow Query/Mutations',
62+
defaultNewProject: true,
63+
defaultExistingProject: false
64+
},
65+
{
66+
value: 'false',
67+
description:
68+
'Uses previous policy format which allows control plane access to AppSync',
69+
defaultNewProject: false,
70+
defaultExistingProject: true
71+
}
72+
]
73+
};
74+
75+
const component = (
76+
<FeatureFlagSummary
77+
key={`feature-flag-summary-${1}`}
78+
name={'generateGraphQLPermissions'}
79+
feature={flag}
80+
/>
81+
);
982
render(component);
83+
const element = await screen.findByRole('heading', {
84+
name: 'generateGraphQLPermissions'
85+
});
86+
expect(element.nextElementSibling.tagName).not.toBe('P');
1087
});
1188
});

‎src/components/FeatureLists/__tests__/FeatureLists.test.tsx

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,51 @@
11
import * as React from 'react';
2-
import { render } from '@testing-library/react';
3-
import { FeatureLists } from '../index';
2+
import { render, screen } from '@testing-library/react';
3+
import { FeatureList, FeatureItem, PlatformFeatureList } from '../index';
44

55
describe('FeatureLists', () => {
6-
const component = <FeatureLists></FeatureLists>;
6+
const featureListComponent = (
7+
<FeatureList heading="Deploy" level={2}>
8+
<FeatureItem
9+
linkText="SSR/SSG/ISR hosting support"
10+
href="/gen2/deploy-and-host/hosting/"
11+
>
12+
Deploy apps in Next.js, Nuxt.js, Gatsby, React, Vue, Angular (and more)
13+
by simply connecting your Git repository.
14+
</FeatureItem>
15+
</FeatureList>
16+
);
717

8-
it('should render the FeatureFlags component', async () => {
9-
render(component);
18+
it('should render the FeatureList component', async () => {
19+
render(featureListComponent);
20+
21+
const heading = await screen.findByRole('heading', { name: 'Deploy' });
22+
23+
expect(heading).toBeInTheDocument();
24+
expect(heading.tagName).toBe('H2');
25+
});
26+
27+
it('should render the FeatureItem component', async () => {
28+
render(featureListComponent);
29+
30+
const link = await screen.findByRole('link', {
31+
name: 'SSR/SSG/ISR hosting support'
32+
});
33+
34+
expect(link).toBeInTheDocument();
35+
});
36+
37+
it('should render the PlatformFeatureList component', async () => {
38+
render(<PlatformFeatureList platform={'react'} />);
39+
40+
const link = await screen.findByRole('link', {
41+
name: 'Simple configuration'
42+
});
43+
44+
const heading = await screen.findByRole('heading', {
45+
name: 'Features for React'
46+
});
47+
48+
expect(link).toBeInTheDocument();
49+
expect(heading).toBeInTheDocument();
1050
});
1151
});

‎src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
import * as React from 'react';
2-
import { render } from '@testing-library/react';
2+
import { render, screen } from '@testing-library/react';
33
import { FrameworkGrid } from '../index';
44

55
describe('FrameworkGrid', () => {
6-
const component = <FrameworkGrid></FrameworkGrid>;
6+
const component = <FrameworkGrid currentKey={'react'}></FrameworkGrid>;
77

88
it('should render the FrameworkGrid component', async () => {
99
render(component);
10+
const framework = await screen.findByRole('link', { name: 'React' });
11+
expect(framework).toBeInTheDocument();
12+
});
13+
14+
it('should highlight icon of the currentKey', async () => {
15+
render(component);
16+
const framework = await screen.findByRole('link', { name: 'React' });
17+
expect(framework.classList).toContain('framework-grid__link--current');
1018
});
1119
});

‎src/components/GlobalNav/__tests__/GlobalNav.test.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { render } from '@testing-library/react';
2+
import { render, screen } from '@testing-library/react';
33
import { LEFT_NAV_LINKS, RIGHT_NAV_LINKS } from '@/utils/globalnav';
44
import { GlobalNav, NavMenuItem } from '@/components/GlobalNav/GlobalNav';
55

@@ -16,5 +16,7 @@ describe('GlobalNav', () => {
1616

1717
it('should render the GlobalNav component', async () => {
1818
render(component);
19+
const link = await screen.findByRole('link', { name: 'About AWS Amplify' });
20+
expect(link).toBeInTheDocument();
1921
});
2022
});

‎src/components/Layout/__tests__/Layout.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ describe('Layout', () => {
6464

6565
it('colorChangeMode test', async () => {
6666
render(layoutProviderComponent);
67-
expect(toggleMenuOpen).toHaveBeenCalled();
68-
// expect(mockHandleColorModeChange).toHaveBeenCalledWith(2);
67+
// expect(toggleMenuOpen).toHaveBeenCalled();
68+
// expect(handleColorModeChange).toHaveBeenCalledWith(2);
6969

7070
// expect(window.localStorage.getItem('colorMode')).toBe('system');
7171
});

‎src/components/Menu/__tests__/Menu.test.tsx

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { render, screen, fireEvent } from '@testing-library/react';
2+
import { render, screen } from '@testing-library/react';
33
import { Menu } from '../index';
44

55
const routerMock = {
@@ -78,13 +78,42 @@ describe('Menu', () => {
7878
expect(menuItem.classList).toContain('menu__list-item');
7979
});
8080

81+
// needs help
8182
it('should expand menu on Subcategory MenuItem click', async () => {
8283
const component = <Menu currentPlatform="react" path="/"></Menu>;
8384
render(component);
8485
const menuItem = await screen.getByRole('link', {
8586
name: 'Existing AWS resources'
8687
});
8788
expect(menuItem.classList).toContain('menu__list-item__link--subcategory');
88-
fireEvent.click(menuItem);
89+
expect(menuItem?.nextElementSibling?.classList).toContain(
90+
'menu__list--hide'
91+
);
92+
// userEvent.click(menuItem);
93+
// console.log(menuItem.nextElementSibling);
94+
});
95+
96+
// needs help
97+
it('handleFocus', async () => {
98+
const component = <Menu currentPlatform="react" path="/"></Menu>;
99+
render(component);
100+
const menuItemLink = await screen.getByRole('link', {
101+
name: 'Existing AWS resources'
102+
});
103+
const menuItem = menuItemLink.parentElement;
104+
menuItem?.focus();
105+
});
106+
107+
it('should not render MenuItem if pageNode does not exist', async () => {
108+
// const component = (
109+
// <Menu currentPlatform="react" path="/[platform]/prev"></Menu>
110+
// );
111+
// render(component);
112+
// const menuItems = await screen.getAllByRole('listitem');
113+
// // console.log(menuItems.key['prev/[platform]/build-a-backend/auth/set-up-auth/']);
114+
// // console.log(menuItems);
115+
// // menuItems.forEach((item) => {
116+
// // console.log(item.textContent);
117+
// // });
89118
});
90119
});

‎src/components/SkipToMain/__tests__/SkipToMain.test.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { SkipToMain } from '../index';
4+
5+
describe('SkipToMain', () => {
6+
const component = <SkipToMain mainId={'pageMain'} />;
7+
8+
it('should render the SkipToMain component', async () => {
9+
render(component);
10+
const link = await screen.findByRole('link', {
11+
name: 'Skip to main content'
12+
});
13+
expect(link).toBeInTheDocument();
14+
expect(link.getAttribute('href')).toBe('#pageMain');
15+
});
16+
});

0 commit comments

Comments
 (0)