Skip to content

Commit f143652

Browse files
Linda Penglpatmo
Linda Peng
authored and
lpatmo
committed
Added mutationobserver shim and removed Ratings component since not needed for resources
1 parent dee7b19 commit f143652

File tree

6 files changed

+22376
-30114
lines changed

6 files changed

+22376
-30114
lines changed

‎package-lock.json

Lines changed: 22329 additions & 30047 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,21 @@
3636
"unfurl.js": "5.0.1"
3737
},
3838
"devDependencies": {
39+
"@babel/compat-data": "^7.9.0",
3940
"@babel/core": "^7.8.4",
4041
"@babel/plugin-transform-runtime": "^7.9.0",
4142
"@babel/preset-env": "^7.8.4",
4243
"@babel/preset-react": "^7.8.3",
44+
"@sheerun/mutationobserver-shim": "^0.3.3",
4345
"@storybook/addon-actions": "^5.3.9",
4446
"@storybook/addon-links": "^5.3.9",
4547
"@storybook/addons": "^5.3.9",
4648
"@storybook/preset-create-react-app": "^1.5.2",
4749
"@storybook/react": "^5.3.9",
50+
"@testing-library/dom": "^7.21.1",
4851
"@testing-library/jest-dom": "^5.1.1",
4952
"@testing-library/react": "^10.0.3",
53+
"@testing-library/user-event": "^12.0.11",
5054
"eslint": "^6.8.0",
5155
"eslint-config-prettier": "^6.10.0",
5256
"eslint-config-semistandard": "^15.0.0",

‎src/components/Auth/AuthForm.spec.js

Lines changed: 26 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from 'react';
2-
import { fireEvent, render, act, screen } from '@testing-library/react';
2+
import { render, act, screen } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
34
import '@testing-library/jest-dom/extend-expect';
45
import { BrowserRouter } from 'react-router-dom';
56
import AuthForm from './AuthForm';
67
import SignUpForm from './SignUpForm';
78
import LoginForm from './LoginForm';
9+
import MutationObserver from '@sheerun/mutationobserver-shim';
10+
window.MutationObserver = MutationObserver;
811

912
describe('AuthForm', () => {
1013
it('should render accordingly', () => {
@@ -22,7 +25,7 @@ describe('AuthForm', () => {
2225
describe('when clicking on the Log in button in the Sign Up Form', () => {
2326
it('should show the Login Form', async () => {
2427
render(<AuthForm />);
25-
fireEvent.click(screen.getByText('Log in'));
28+
userEvent.click(screen.getByText('Log in'));
2629
expect(await screen.findByTestId('loginForm')).toBeInTheDocument();
2730
expect(await screen.queryByTestId('signupForm')).toBeNull();
2831
});
@@ -31,8 +34,8 @@ describe('AuthForm', () => {
3134
describe('when clicking on the Sign up button in the Log In Form', () => {
3235
it('should show the Sign Up form', async () => {
3336
render(<AuthForm />);
34-
fireEvent.click(screen.getByText('Log in'));
35-
fireEvent.click(screen.getByText('Sign up'));
37+
userEvent.click(screen.getByText('Log in'));
38+
userEvent.click(screen.getByText('Sign up'));
3639
expect(await screen.queryByTestId('loginForm')).toBeNull();
3740
expect(await screen.findByText('Create an account')).toBeInTheDocument();
3841
});
@@ -58,27 +61,20 @@ describe('Signup', () => {
5861
},
5962
});
6063

61-
fireEvent.change(screen.getByLabelText(/username/i), {
62-
target: { value: 'Carolyne.Carter' },
63-
});
64+
userEvent.type(screen.getByLabelText(/username/i), 'Carolyne.Carter');
6465

65-
fireEvent.change(screen.getByLabelText(/password/i), {
66-
target: { value: 'password' },
67-
});
66+
userEvent.type(screen.getByLabelText(/password/i), 'password');
6867

69-
fireEvent.change(screen.getByLabelText(/email/i), {
70-
target: { value: '[email protected]' },
71-
});
68+
userEvent.type(
69+
screen.getByLabelText(/email/i),
70+
'[email protected]'
71+
);
7272

73-
fireEvent.change(screen.getByLabelText(/first name/i), {
74-
target: { value: 'Carolyne' },
75-
});
73+
userEvent.type(screen.getByLabelText(/first name/i), 'Carolyne');
7674

77-
fireEvent.change(screen.getByLabelText(/last name/i), {
78-
target: { value: 'Carter' },
79-
});
75+
userEvent.type(screen.getByLabelText(/last name/i), 'Carter');
8076

81-
fireEvent.click(screen.getByText('Sign Up'));
77+
userEvent.click(screen.getByText('Sign Up'));
8278

8379
await act(async () => mockRegisterResponse());
8480

@@ -92,16 +88,10 @@ describe('Signup', () => {
9288
</BrowserRouter>
9389
);
9490

95-
await act(async () => fireEvent.click(screen.getByTestId('submitButton')));
96-
expect(
97-
screen.getByText('"Username" is not allowed to be empty')
98-
).toBeInTheDocument();
99-
expect(
100-
screen.getByText('"Email" is not allowed to be empty')
101-
).toBeInTheDocument();
102-
expect(
103-
screen.getByText('"Password" is not allowed to be empty')
104-
).toBeInTheDocument();
91+
await act(async () => userEvent.click(screen.getByTestId('submitButton')));
92+
expect(screen.getByText('Username*').className).toContain('Mui-error');
93+
expect(screen.getByText('Email*').className).toContain('Mui-error');
94+
expect(screen.getByText('Password*').className).toContain('Mui-error');
10595
});
10696

10797
it('Show username length validation error', async () => {
@@ -110,13 +100,10 @@ describe('Signup', () => {
110100
<SignUpForm />
111101
</BrowserRouter>
112102
);
113-
console.log(screen.getByLabelText('Username*'));
114103

115-
fireEvent.change(screen.getByLabelText('Username*'), {
116-
target: { value: 'ga' },
117-
});
104+
userEvent.type(screen.getByLabelText('Username*'), 'ga');
118105

119-
await act(async () => fireEvent.click(screen.getByTestId('submitButton')));
106+
await act(async () => userEvent.click(screen.getByTestId('submitButton')));
120107
screen.debug();
121108
expect(
122109
screen.getByText('"Username" length must be at least 3 characters long')
@@ -141,24 +128,18 @@ describe('Login', () => {
141128
});
142129

143130
await act(async () =>
144-
fireEvent.change(getByLabelText(/username/i), {
145-
target: { value: 'Carolyne.Carter' },
146-
})
131+
userEvent.type(getByLabelText(/username/i), 'Carolyne.Carter')
147132
);
148133
await act(async () =>
149-
fireEvent.change(getByLabelText(/username/i), {
150-
target: { value: 'Carolyne.Carter' },
151-
})
134+
userEvent.type(getByLabelText(/username/i), 'Carolyne.Carter')
152135
);
153136

154137
await act(async () =>
155-
fireEvent.change(getByLabelText(/password/i), {
156-
target: { value: 'password' },
157-
})
138+
userEvent.type(getByLabelText(/password/i), 'password')
158139
);
159140

160141
const submit = getByRole('button');
161-
await act(async () => fireEvent.click(submit));
142+
await act(async () => userEvent.click(submit));
162143
await act(async () => mockLoginResponse());
163144
expect(mockLoginResponse).toHaveBeenCalledTimes(1);
164145
});

‎src/components/Auth/__snapshots__/AuthForm.spec.js.snap

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
exports[`AuthForm should render accordingly 1`] = `
44
<DocumentFragment>
55
<div
6-
class="MuiPaper-root MuiPaper-elevation3 MuiBox-root MuiBox-root-2 MuiPaper-rounded"
6+
class="MuiPaper-root MuiPaper-elevation3 MuiBox-root MuiBox-root-1 MuiPaper-rounded"
77
>
88
<form
99
autocomplete="off"
10-
class="MuiBox-root MuiBox-root-30"
10+
class="MuiBox-root MuiBox-root-2"
1111
data-testid="signupForm"
1212
novalidate=""
1313
>
1414
<h1
15-
class="MuiBox-root MuiBox-root-31"
15+
class="MuiBox-root MuiBox-root-3"
1616
>
1717
Create an account
1818
</h1>
@@ -39,11 +39,11 @@ exports[`AuthForm should render accordingly 1`] = `
3939
/>
4040
<fieldset
4141
aria-hidden="true"
42-
class="PrivateNotchedOutline-root-91 MuiOutlinedInput-notchedOutline"
42+
class="PrivateNotchedOutline-root-4 MuiOutlinedInput-notchedOutline"
4343
style="padding-left: 8px;"
4444
>
4545
<legend
46-
class="PrivateNotchedOutline-legend-92"
46+
class="PrivateNotchedOutline-legend-5"
4747
style="width: 0.01px;"
4848
>
4949
<span>
@@ -76,11 +76,11 @@ exports[`AuthForm should render accordingly 1`] = `
7676
/>
7777
<fieldset
7878
aria-hidden="true"
79-
class="PrivateNotchedOutline-root-91 MuiOutlinedInput-notchedOutline"
79+
class="PrivateNotchedOutline-root-4 MuiOutlinedInput-notchedOutline"
8080
style="padding-left: 8px;"
8181
>
8282
<legend
83-
class="PrivateNotchedOutline-legend-92"
83+
class="PrivateNotchedOutline-legend-5"
8484
style="width: 0.01px;"
8585
>
8686
<span>
@@ -113,11 +113,11 @@ exports[`AuthForm should render accordingly 1`] = `
113113
/>
114114
<fieldset
115115
aria-hidden="true"
116-
class="PrivateNotchedOutline-root-91 MuiOutlinedInput-notchedOutline"
116+
class="PrivateNotchedOutline-root-4 MuiOutlinedInput-notchedOutline"
117117
style="padding-left: 8px;"
118118
>
119119
<legend
120-
class="PrivateNotchedOutline-legend-92"
120+
class="PrivateNotchedOutline-legend-5"
121121
style="width: 0.01px;"
122122
>
123123
<span>
@@ -150,11 +150,11 @@ exports[`AuthForm should render accordingly 1`] = `
150150
/>
151151
<fieldset
152152
aria-hidden="true"
153-
class="PrivateNotchedOutline-root-91 MuiOutlinedInput-notchedOutline"
153+
class="PrivateNotchedOutline-root-4 MuiOutlinedInput-notchedOutline"
154154
style="padding-left: 8px;"
155155
>
156156
<legend
157-
class="PrivateNotchedOutline-legend-92"
157+
class="PrivateNotchedOutline-legend-5"
158158
style="width: 0.01px;"
159159
>
160160
<span>
@@ -187,11 +187,11 @@ exports[`AuthForm should render accordingly 1`] = `
187187
/>
188188
<fieldset
189189
aria-hidden="true"
190-
class="PrivateNotchedOutline-root-91 MuiOutlinedInput-notchedOutline"
190+
class="PrivateNotchedOutline-root-4 MuiOutlinedInput-notchedOutline"
191191
style="padding-left: 8px;"
192192
>
193193
<legend
194-
class="PrivateNotchedOutline-legend-92"
194+
class="PrivateNotchedOutline-legend-5"
195195
style="width: 0.01px;"
196196
>
197197
<span>
@@ -202,7 +202,7 @@ exports[`AuthForm should render accordingly 1`] = `
202202
</div>
203203
</div>
204204
<div
205-
class="MuiBox-root MuiBox-root-93"
205+
class="MuiBox-root MuiBox-root-6"
206206
>
207207
<button
208208
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
@@ -223,7 +223,7 @@ exports[`AuthForm should render accordingly 1`] = `
223223
<p>
224224
Already have an account?
225225
<button
226-
class="MuiBox-root MuiBox-root-125"
226+
class="MuiBox-root MuiBox-root-7"
227227
>
228228
Log in
229229
</button>

‎src/components/Resources/ResourceCard.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import Avatar from '@material-ui/core/Avatar';
1212
import IconButton from '@material-ui/core/IconButton';
1313
import Typography from '@material-ui/core/Typography';
1414
import Collapse from '@material-ui/core/Collapse';
15-
import Rating from '@material-ui/lab/Rating';
1615
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
1716
import Button from '@material-ui/core/Button';
1817
import MoreVertIcon from '@material-ui/icons/MoreVert';
@@ -100,12 +99,6 @@ export const ResourceCard = ({ guid, title, created, description, url }) => {
10099
</CardActions>
101100
<Collapse in={expanded} timeout="auto" unmountOnExit>
102101
<CardContent>
103-
<Rating
104-
name="customized-empty"
105-
value={2}
106-
precision={0.5}
107-
emptyIcon={<StarBorderIcon fontSize="inherit" />}
108-
/>
109102
<TextareaAutosize
110103
aria-label="Review"
111104
rows={3}

‎src/components/Resources/index.test.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { BrowserRouter as Route } from 'react-router-dom';
44
import '@testing-library/jest-dom/extend-expect';
55
import Resources from './index';
66
import axiosMock from 'axios';
7+
import MutationObserver from '@sheerun/mutationobserver-shim';
8+
window.MutationObserver = MutationObserver;
79

810
jest.mock('axios');
911

0 commit comments

Comments
 (0)