Skip to content

Commit d1edd71

Browse files
wise-king-sullymanwise-king-sullyman
committed
chore(tests): Fix RTL tests
1 parent 6d7286c commit d1edd71

File tree

2 files changed

+236
-20
lines changed

2 files changed

+236
-20
lines changed

‎src/app/__snapshots__/app.test.tsx.snap‎

Lines changed: 206 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,210 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`App tests should render default App component 1`] = `
4-
<BrowserRouter>
5-
<AppLayout>
6-
<AppRoutes />
7-
</AppLayout>
8-
</BrowserRouter>
4+
<DocumentFragment>
5+
<div
6+
class="pf-v5-c-page"
7+
>
8+
<div
9+
class="pf-v5-c-skip-to-content"
10+
>
11+
<a
12+
aria-disabled="false"
13+
class="pf-v5-c-button pf-m-primary"
14+
data-ouia-component-id="OUIA-Generated-Button-primary-1"
15+
data-ouia-component-type="PF5/Button"
16+
data-ouia-safe="true"
17+
href="#primary-app-container"
18+
>
19+
Skip to Content
20+
</a>
21+
</div>
22+
<header
23+
class="pf-v5-c-masthead pf-m-display-inline-on-md"
24+
>
25+
<span
26+
class="pf-v5-c-masthead__toggle"
27+
>
28+
<button
29+
aria-disabled="false"
30+
aria-label="Global navigation"
31+
class="pf-v5-c-button pf-m-plain"
32+
data-ouia-component-id="OUIA-Generated-Button-plain-1"
33+
data-ouia-component-type="PF5/Button"
34+
data-ouia-safe="true"
35+
type="button"
36+
>
37+
<svg
38+
aria-hidden="true"
39+
class="pf-v5-svg"
40+
fill="currentColor"
41+
height="1em"
42+
role="img"
43+
viewBox="0 0 448 512"
44+
width="1em"
45+
>
46+
<path
47+
d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
48+
/>
49+
</svg>
50+
</button>
51+
</span>
52+
<div
53+
class="pf-v5-c-masthead__main"
54+
>
55+
<span
56+
class="pf-v5-c-masthead__brand"
57+
>
58+
<img
59+
alt="Patterfly Logo"
60+
class="pf-v5-c-brand"
61+
src="test-file-stub"
62+
/>
63+
</span>
64+
</div>
65+
</header>
66+
<div
67+
aria-hidden="false"
68+
class="pf-v5-c-page__sidebar pf-m-expanded"
69+
id="page-sidebar"
70+
>
71+
<div
72+
class="pf-v5-c-page__sidebar-body"
73+
>
74+
<nav
75+
aria-label="Global"
76+
class="pf-v5-c-nav"
77+
data-ouia-component-id="OUIA-Generated-Nav-1"
78+
data-ouia-component-type="PF5/Nav"
79+
data-ouia-safe="true"
80+
id="nav-primary-simple"
81+
>
82+
<ul
83+
class="pf-v5-c-nav__list"
84+
id="nav-list-simple"
85+
role="list"
86+
>
87+
<li
88+
class="pf-v5-c-nav__item"
89+
data-ouia-component-id="OUIA-Generated-NavItem-1"
90+
data-ouia-component-type="PF5/NavItem"
91+
data-ouia-safe="true"
92+
>
93+
<a
94+
aria-current="page"
95+
class="pf-v5-c-nav__link pf-m-current active"
96+
href="/"
97+
>
98+
Dashboard
99+
</a>
100+
</li>
101+
<li
102+
class="pf-v5-c-nav__item"
103+
data-ouia-component-id="OUIA-Generated-NavItem-2"
104+
data-ouia-component-type="PF5/NavItem"
105+
data-ouia-safe="true"
106+
>
107+
<a
108+
class="pf-v5-c-nav__link"
109+
href="/support"
110+
>
111+
Support
112+
</a>
113+
</li>
114+
<li
115+
class="pf-v5-c-nav__item pf-m-expandable"
116+
data-ouia-component-id="OUIA-Generated-NavExpandable-1"
117+
data-ouia-component-type="PF5/NavExpandable"
118+
data-ouia-safe="true"
119+
>
120+
<button
121+
aria-expanded="false"
122+
class="pf-v5-c-nav__link"
123+
id="Settings-2"
124+
>
125+
Settings
126+
<span
127+
class="pf-v5-c-nav__toggle"
128+
>
129+
<span
130+
class="pf-v5-c-nav__toggle-icon"
131+
>
132+
<svg
133+
aria-hidden="true"
134+
class="pf-v5-svg"
135+
fill="currentColor"
136+
height="1em"
137+
role="img"
138+
viewBox="0 0 256 512"
139+
width="1em"
140+
>
141+
<path
142+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
143+
/>
144+
</svg>
145+
</span>
146+
</span>
147+
</button>
148+
<section
149+
aria-labelledby="Settings-2"
150+
class="pf-v5-c-nav__subnav"
151+
hidden=""
152+
>
153+
<ul
154+
class="pf-v5-c-nav__list"
155+
role="list"
156+
>
157+
<li
158+
class="pf-v5-c-nav__item"
159+
data-ouia-component-id="OUIA-Generated-NavItem-3"
160+
data-ouia-component-type="PF5/NavItem"
161+
data-ouia-safe="true"
162+
>
163+
<a
164+
class="pf-v5-c-nav__link"
165+
href="/settings/general"
166+
>
167+
General
168+
</a>
169+
</li>
170+
<li
171+
class="pf-v5-c-nav__item"
172+
data-ouia-component-id="OUIA-Generated-NavItem-4"
173+
data-ouia-component-type="PF5/NavItem"
174+
data-ouia-safe="true"
175+
>
176+
<a
177+
class="pf-v5-c-nav__link"
178+
href="/settings/profile"
179+
>
180+
Profile
181+
</a>
182+
</li>
183+
</ul>
184+
</section>
185+
</li>
186+
</ul>
187+
</nav>
188+
</div>
189+
</div>
190+
<main
191+
class="pf-v5-c-page__main"
192+
id="primary-app-container"
193+
tabindex="-1"
194+
>
195+
<section
196+
class="pf-v5-c-page__main-section"
197+
>
198+
<h1
199+
class="pf-v5-c-title pf-m-lg"
200+
data-ouia-component-id="OUIA-Generated-Title-1"
201+
data-ouia-component-type="PF5/Title"
202+
data-ouia-safe="true"
203+
>
204+
Dashboard Page Title!
205+
</h1>
206+
</section>
207+
</main>
208+
</div>
209+
</DocumentFragment>
9210
`;

‎src/app/app.test.tsx‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,55 @@
11
import * as React from 'react';
22
import App from '@app/index';
3-
import { fireEvent, render, screen, } from '@testing-library/react';
3+
import { render, screen, } from '@testing-library/react';
4+
import userEvent from '@testing-library/user-event'
5+
import '@testing-library/jest-dom'
46

57
describe('App tests', () => {
68
test('should render default App component', () => {
7-
render(<App />);
8-
expect(screen).toMatchSnapshot();
9+
const { asFragment } = render(<App />);
10+
11+
expect(asFragment()).toMatchSnapshot();
912
});
1013

1114
it('should render a nav-toggle button', () => {
1215
render(<App />);
13-
expect(screen.getByRole('button')).toBe(true);
16+
17+
expect(screen.getByRole('button', { name: "Global navigation"})).toBeVisible();
1418
});
1519

16-
it('should hide the sidebar on smaller viewports', () => {
20+
// I'm fairly sure that this test not going to work properly no matter what we do since JSDOM doesn't actually
21+
// draw anything. We could potentially make something work, likely using a different test environment, but
22+
// using Cypress for this kind of test would be more efficient.
23+
it.skip('should hide the sidebar on smaller viewports', () => {
1724
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 });
25+
1826
render(<App />);
27+
1928
window.dispatchEvent(new Event('resize'));
20-
expect(screen).container.querySelector('#page-sidebar').hasClass('pf-m-collapsed').toBeTruthy();
29+
30+
expect(screen.queryByRole('link', { name: "Dashboard"})).not.toBeInTheDocument();
2131
});
2232

2333
it('should expand the sidebar on larger viewports', () => {
24-
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1200 });
2534
render(<App />);
35+
2636
window.dispatchEvent(new Event('resize'));
27-
expect(screen).container.querySelector('#page-sidebar').hasClass('pf-m-expanded').toBeTruthy();
37+
38+
expect(screen.getByRole('link', { name: "Dashboard"})).toBeVisible();
2839
});
2940

30-
it('should hide the sidebar when clicking the nav-toggle button', () => {
31-
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1200 });
41+
it('should hide the sidebar when clicking the nav-toggle button', async () => {
42+
const user = userEvent.setup()
43+
3244
render(<App />);
45+
3346
window.dispatchEvent(new Event('resize'));
34-
const button = screen.getByRole('button');
35-
expect(screen).container.find('#page-sidebar').hasClass('pf-m-expanded').toBeTruthy();
36-
fireEvent.click(button);
37-
expect(screen).container.querySelector('#page-sidebar').hasClass('pf-m-collapsed').toBeTruthy();
38-
expect(screen).find('#page-sidebar').hasClass('pf-m-expanded').toBeFalsy();
47+
const button = screen.getByRole('button', { name: "Global navigation"})
48+
49+
expect(screen.getByRole('link', { name: "Dashboard"})).toBeVisible();
50+
51+
await user.click(button);
52+
53+
expect(screen.queryByRole('link', { name: "Dashboard"})).not.toBeInTheDocument();
3954
});
4055
});

0 commit comments

Comments
 (0)