Skip to content

Commit 5d7cb88

Browse files
ocielliottcocielliottc
committed
Added a test for the feedback submit page and corrected warnings.
1 parent e504dfe commit 5d7cb88

File tree

5 files changed

+244
-17
lines changed

5 files changed

+244
-17
lines changed

‎web-ui/src/components/feedback_submit_form/FeedbackSubmitForm.jsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ const FeedbackSubmitForm = ({
175175
type: UPDATE_TOAST,
176176
payload: {
177177
severity: 'error',
178-
toast: res.error
178+
toast: res?.error ?? 'Unknown Error'
179179
}
180180
});
181181
}
@@ -188,21 +188,10 @@ const FeedbackSubmitForm = ({
188188
<SkeletonLoader type="feedback_requests" />
189189
) : (
190190
<Root className="submit-form">
191-
<Typography className={classes.announcement} variant="h3">
191+
<Typography component={'span'} className={classes.announcement} variant="h3">
192192
{isReviewing ? 'Reviewing' : 'Submitting'} Feedback on{' '}
193193
<b>{requesteeName}</b>
194194
</Typography>
195-
{/* {!isReviewing && ( */}
196-
{/* <div className="wrapper"> */}
197-
{/* <InfoIcon style={{ color: blue[900], fontSize: '2vh' }}> */}
198-
{/* info-icon */}
199-
{/* </InfoIcon> */}
200-
{/* <Typography className={classes.tip}> */}
201-
{/* <b>Tip of the day: </b> */}
202-
{/* {tip} */}
203-
{/* </Typography> */}
204-
{/* </div> */}
205-
{/* )} */}
206195
{!isReviewing && (
207196
<Alert className={classes.warning} severity="warning">
208197
<AlertTitle>Notice!</AlertTitle>

‎web-ui/src/components/reviews/TeamMemberReview.jsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ const TeamMemberReview = ({
131131
: 'Self-Review'
132132
}
133133
{...a11yProps(0)}
134+
key={0}
134135
/>
135136
{reviews &&
136137
reviews.filter(r => !!r).map((review, index) => {
@@ -148,7 +149,10 @@ const TeamMemberReview = ({
148149
}
149150

150151
return (
151-
<Tab icon={icon} label={label} {...a11yProps(index + 1)} />
152+
<Tab key={index + 1}
153+
icon={icon}
154+
label={label}
155+
{...a11yProps(index + 1)} />
152156
);
153157
})}
154158
</Tabs>
@@ -158,7 +162,7 @@ const TeamMemberReview = ({
158162
index={value}
159163
onChangeIndex={handleChangeIndex}
160164
>
161-
<TabPanel value={value} index={0} dir={theme.direction}>
165+
<TabPanel key={0} value={value} index={0} dir={theme.direction}>
162166
{selfReview?.id ? (
163167
<FeedbackSubmitForm
164168
requesteeName={
@@ -179,7 +183,10 @@ const TeamMemberReview = ({
179183
review.status?.toUpperCase() === 'SUBMITTED');
180184

181185
return (
182-
<TabPanel value={value} index={index + 1} dir={theme.direction}>
186+
<TabPanel key={index + 1}
187+
value={value}
188+
index={index + 1}
189+
dir={theme.direction}>
183190
<FeedbackSubmitForm
184191
requesteeName={requesteeName}
185192
requestId={review.id}

‎web-ui/src/pages/FeedbackSubmitPage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ const FeedbackSubmitPage = () => {
173173
}, [feedbackRequest, selfReviewRequest, state]);
174174

175175
return (
176-
<Root className="feedback-submit-page">
176+
<Root data-testid={requestQuery} className="feedback-submit-page">
177177
{requestCanceled ? (
178178
<Typography className={classes.announcement} variant="h3">
179179
This feedback request has been canceled.

‎web-ui/src/pages/FeedbackSubmitPage.test.jsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React from 'react';
2+
import FeedbackSubmitPage from './FeedbackSubmitPage';
3+
import { AppContextProvider } from '../context/AppContext';
4+
import { http, HttpResponse } from 'msw';
5+
import { setupServer } from 'msw/node';
6+
import { MemoryRouter } from 'react-router-dom';
7+
8+
window.snackDispatch = vi.fn();
9+
10+
const userProfile = {
11+
id: 'member-id',
12+
name: 'Mitch Hedberg',
13+
role: ['MEMBER'],
14+
workEmail: '[email protected]',
15+
title: 'Strategic Placement Specialist',
16+
location: 'Roseville, Minnesota',
17+
memberProfile: {
18+
id: 'member-id',
19+
bioText: 'Died too young.',
20+
},
21+
};
22+
23+
const userStateWithPermission = {
24+
state: {
25+
csrf: 'csrf',
26+
userProfile: userProfile,
27+
teams: [],
28+
memberProfiles: [
29+
{
30+
id: 'some-id',
31+
name: 'James Johnson',
32+
},
33+
userProfile,
34+
],
35+
},
36+
dispatch: vi.fn(),
37+
};
38+
39+
const server = setupServer(
40+
http.get('http://localhost:8080/services/feedback/requests/request-id', ({ request }) => {
41+
return HttpResponse.json(
42+
{
43+
'id': 'request-id',
44+
'status': 'SUBMITTED',
45+
'requesteeId': userStateWithPermission.state.memberProfiles[0].id,
46+
'recipientId': userStateWithPermission.state.memberProfiles[1].id,
47+
},
48+
);
49+
}),
50+
http.get('http://localhost:8080/services/feedback/requests/canceled-request-id', ({ request }) => {
51+
return HttpResponse.json(
52+
{
53+
'id': 'canceled-request-id',
54+
'status': 'CANCELED',
55+
'requesteeId': userStateWithPermission.state.memberProfiles[0].id,
56+
'recipientId': userStateWithPermission.state.memberProfiles[1].id,
57+
},
58+
);
59+
}),
60+
);
61+
62+
beforeAll(() => server.listen({ onUnhandledRequest(request, print) {} }));
63+
afterEach(() => server.resetHandlers());
64+
afterAll(() => server.close());
65+
66+
it('renders correctly - submitted', async () => {
67+
await waitForSnapshot(
68+
'request-id',
69+
<AppContextProvider value={userStateWithPermission}>
70+
<MemoryRouter initialEntries={[{pathname: '/feedback/submit',
71+
search: '?request=request-id'}]}>
72+
<FeedbackSubmitPage />
73+
</MemoryRouter>
74+
</AppContextProvider>
75+
);
76+
});
77+
78+
it('renders correctly - canceled', async () => {
79+
await waitForSnapshot(
80+
'canceled-request-id',
81+
<AppContextProvider value={userStateWithPermission}>
82+
<MemoryRouter initialEntries={[{pathname: '/feedback/submit',
83+
search: '?request=canceled-request-id'}]}>
84+
<FeedbackSubmitPage />
85+
</MemoryRouter>
86+
</AppContextProvider>
87+
);
88+
});

‎web-ui/src/pages/__snapshots__/FeedbackSubmitPage.test.jsx.snap‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`renders correctly - canceled 1`] = `
4+
<div>
5+
<div
6+
class="feedback-submit-page css-qzd6ow"
7+
data-testid="canceled-request-id"
8+
>
9+
<h3
10+
class="MuiTypography-root MuiTypography-h3 FeedbackSubmitPage-announcement css-gepadz-MuiTypography-root"
11+
>
12+
This feedback request has been canceled.
13+
</h3>
14+
</div>
15+
</div>
16+
`;
17+
18+
exports[`renders correctly - submitted 1`] = `
19+
<div>
20+
<div
21+
class="feedback-submit-page css-qzd6ow"
22+
data-testid="request-id"
23+
>
24+
<div
25+
class="css-1cq2gqh"
26+
>
27+
<div
28+
class="MuiBox-root css-180b3ld"
29+
>
30+
<header
31+
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-hip9hq-MuiPaper-root-MuiAppBar-root"
32+
>
33+
<div
34+
class="MuiTabs-root css-1ujnqem-MuiTabs-root"
35+
>
36+
<div
37+
class="MuiTabs-scroller MuiTabs-fixed css-jpln7h-MuiTabs-scroller"
38+
style="overflow: hidden; margin-bottom: 0px;"
39+
>
40+
<div
41+
class="MuiTabs-flexContainer css-heg063-MuiTabs-flexContainer"
42+
role="tablist"
43+
>
44+
<button
45+
aria-controls="full-width-tabpanel-0"
46+
aria-selected="false"
47+
class="MuiButtonBase-root MuiTab-root MuiTab-labelIcon MuiTab-textColorInherit MuiTab-fullWidth css-u40yv4-MuiButtonBase-root-MuiTab-root"
48+
id="full-width-tab-0"
49+
role="tab"
50+
tabindex="-1"
51+
type="button"
52+
>
53+
<svg
54+
aria-hidden="true"
55+
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTab-iconWrapper css-i4bv87-MuiSvgIcon-root"
56+
data-testid="HourglassEmptyIcon"
57+
focusable="false"
58+
viewBox="0 0 24 24"
59+
>
60+
<path
61+
d="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2zm10 14.5V20H8v-3.5l4-4zm-4-5-4-4V4h8v3.5z"
62+
/>
63+
</svg>
64+
Self-Review
65+
</button>
66+
<button
67+
aria-controls="full-width-tabpanel-1"
68+
aria-selected="true"
69+
class="MuiButtonBase-root MuiTab-root MuiTab-labelIcon MuiTab-textColorInherit MuiTab-fullWidth Mui-selected css-u40yv4-MuiButtonBase-root-MuiTab-root"
70+
id="full-width-tab-1"
71+
role="tab"
72+
tabindex="0"
73+
type="button"
74+
>
75+
<svg
76+
aria-hidden="true"
77+
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTab-iconWrapper css-i4bv87-MuiSvgIcon-root"
78+
data-testid="CheckCircleIcon"
79+
focusable="false"
80+
viewBox="0 0 24 24"
81+
>
82+
<path
83+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"
84+
/>
85+
</svg>
86+
Your Review
87+
<span
88+
class="MuiTabs-indicator css-11yukd5-MuiTabs-indicator"
89+
/>
90+
</button>
91+
</div>
92+
</div>
93+
</div>
94+
</header>
95+
<div
96+
style="overflow-x: hidden;"
97+
>
98+
<div
99+
class="react-swipeable-view-container"
100+
style="flex-direction: row; transition: all 0s ease 0s; direction: ltr; display: flex; will-change: transform;"
101+
>
102+
<div
103+
aria-hidden="false"
104+
data-swipeable="true"
105+
style="width: 100%; flex-shrink: 0; overflow: auto;"
106+
>
107+
<div
108+
aria-labelledby="full-width-tab-1"
109+
dir="ltr"
110+
id="full-width-tabpanel-1"
111+
role="tabpanel"
112+
>
113+
<div
114+
class="MuiBox-root css-19kzrtu"
115+
>
116+
<p
117+
class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
118+
>
119+
<div
120+
class="submit-form css-1upxzzf"
121+
>
122+
<span
123+
class="MuiTypography-root MuiTypography-h3 FeedbackSubmitForm-announcement css-gepadz-MuiTypography-root"
124+
>
125+
Reviewing
126+
Feedback on
127+
128+
<b>
129+
James Johnson
130+
</b>
131+
</span>
132+
</div>
133+
</p>
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
</div>
143+
`;

0 commit comments

Comments
 (0)