Skip to content

Commit d40df33

Browse files
marcosvega91marcosvega91
authored
[Avatar] Migrate to testing-library (#20697)
1 parent de70fa4 commit d40df33

File tree

1 file changed

+81
-64
lines changed

1 file changed

+81
-64
lines changed

‎packages/material-ui/src/Avatar/Avatar.test.js

+81-64
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import * as React from 'react';
2-
import { assert } from 'chai';
2+
import { expect } from 'chai';
3+
import { createClientRender, fireEvent } from 'test/utils/createClientRender';
4+
import { createMount, getClasses } from '@material-ui/core/test-utils';
5+
import { spy } from 'sinon';
36
import CancelIcon from '../internal/svg-icons/Cancel';
4-
import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils';
57
import describeConformance from '../test-utils/describeConformance';
68
import Avatar from './Avatar';
79

810
describe('<Avatar />', () => {
911
let mount;
10-
let shallow;
1112
let classes;
13+
const render = createClientRender();
1214

1315
before(() => {
1416
mount = createMount({ strict: true });
15-
shallow = createShallow({ dive: true });
1617
classes = getClasses(<Avatar />);
1718
});
1819

@@ -30,156 +31,172 @@ describe('<Avatar />', () => {
3031

3132
describe('image avatar', () => {
3233
it('should render a div containing an img', () => {
33-
const wrapper = shallow(
34+
const { container } = render(
3435
<Avatar
3536
className="my-avatar"
3637
src="something.jpg"
3738
alt="Hello World!"
3839
data-my-prop="woofAvatar"
3940
/>,
4041
);
41-
42-
assert.strictEqual(wrapper.name(), 'div');
43-
assert.strictEqual(wrapper.childAt(0).name(), 'img');
44-
assert.strictEqual(wrapper.hasClass(classes.root), true);
45-
assert.strictEqual(wrapper.hasClass('my-avatar'), true);
46-
assert.strictEqual(wrapper.props()['data-my-prop'], 'woofAvatar');
47-
assert.strictEqual(wrapper.hasClass(classes.colorDefault), false);
48-
const img = wrapper.childAt(0);
49-
assert.strictEqual(img.hasClass(classes.img), true);
50-
assert.strictEqual(img.props().alt, 'Hello World!');
51-
assert.strictEqual(img.props().src, 'something.jpg');
42+
const avatar = container.firstChild;
43+
const img = avatar.firstChild;
44+
expect(avatar.tagName).to.equal('DIV');
45+
expect(img.tagName).to.equal('IMG');
46+
expect(avatar).to.have.class(classes.root);
47+
expect(avatar).to.have.class('my-avatar');
48+
expect(avatar).to.have.attribute('data-my-prop', 'woofAvatar');
49+
expect(avatar).to.not.have.class(classes.colorDefault);
50+
expect(img).to.have.class(classes.img);
51+
expect(img).to.have.attribute('alt', 'Hello World!');
52+
expect(img).to.have.attribute('src', 'something.jpg');
5253
});
5354

5455
it('should be able to add more props to the image', () => {
55-
const onError = () => {};
56-
const wrapper = shallow(<Avatar src="something.jpg" imgProps={{ onError }} />);
57-
assert.strictEqual(wrapper.childAt(0).props().onError, onError);
56+
const onError = spy();
57+
const { container } = render(<Avatar src="something.jpg" imgProps={{ onError }} />);
58+
const img = container.querySelector('img');
59+
fireEvent.error(img);
60+
expect(onError.callCount).to.equal(1);
5861
});
5962
});
6063

6164
describe('image avatar with unrendered children', () => {
6265
it('should render a div containing an img, not children', () => {
63-
const wrapper = mount(<Avatar src="something.jpg">MB</Avatar>);
64-
assert.strictEqual(wrapper.find('img').length, 1);
65-
assert.strictEqual(wrapper.text(), '');
66+
const { container } = render(<Avatar src="something.jpg">MB</Avatar>);
67+
const avatar = container.firstChild;
68+
const imgs = container.querySelectorAll('img');
69+
expect(imgs.length).to.equal(1);
70+
expect(avatar).to.have.text('');
6671
});
6772

6873
it('should be able to add more props to the image', () => {
69-
const onError = () => {};
70-
const wrapper = mount(<Avatar src="something.jpg" imgProps={{ onError }} />);
71-
assert.strictEqual(wrapper.find('img').props().onError, onError);
74+
const onError = spy();
75+
const { container } = render(<Avatar src="something.jpg" imgProps={{ onError }} />);
76+
const img = container.querySelector('img');
77+
fireEvent.error(img);
78+
expect(onError.callCount).to.equal(1);
7279
});
7380
});
7481

7582
describe('font icon avatar', () => {
76-
let wrapper;
83+
let container;
84+
let avatar;
85+
let icon;
7786

7887
before(() => {
79-
wrapper = shallow(
88+
container = render(
8089
<Avatar className="my-avatar" data-my-prop="woofAvatar">
8190
<span className="my-icon-font">icon</span>
8291
</Avatar>,
83-
);
92+
).container;
93+
avatar = container.firstChild;
94+
icon = avatar.firstChild;
8495
});
8596

8697
it('should render a div containing an font icon', () => {
87-
const icon = wrapper.childAt(0);
88-
assert.strictEqual(wrapper.name(), 'div');
89-
assert.strictEqual(icon.name(), 'span');
90-
assert.strictEqual(icon.hasClass('my-icon-font'), true);
91-
assert.strictEqual(icon.text(), 'icon');
98+
expect(avatar.tagName).to.equal('DIV');
99+
expect(icon.tagName).to.equal('SPAN');
100+
expect(icon).to.have.class('my-icon-font');
101+
expect(icon).to.have.text('icon');
92102
});
93103

94104
it('should merge user classes & spread custom props to the root node', () => {
95-
assert.strictEqual(wrapper.hasClass(classes.root), true);
96-
assert.strictEqual(wrapper.hasClass('my-avatar'), true);
97-
assert.strictEqual(wrapper.props()['data-my-prop'], 'woofAvatar');
105+
expect(avatar).to.have.class(classes.root);
106+
expect(avatar).to.have.class('my-avatar');
107+
expect(avatar).to.have.attribute('data-my-prop', 'woofAvatar');
98108
});
99109

100110
it('should apply the colorDefault class', () => {
101-
assert.strictEqual(wrapper.hasClass(classes.colorDefault), true);
111+
expect(avatar).to.have.class(classes.colorDefault);
102112
});
103113
});
104114

105115
describe('svg icon avatar', () => {
106-
let wrapper;
116+
let container;
117+
let avatar;
107118

108119
before(() => {
109-
wrapper = shallow(
120+
container = render(
110121
<Avatar className="my-avatar" data-my-prop="woofAvatar">
111122
<CancelIcon />
112123
</Avatar>,
113-
);
124+
).container;
125+
avatar = container.firstChild;
114126
});
115127

116128
it('should render a div containing an svg icon', () => {
117-
assert.strictEqual(wrapper.name(), 'div');
118-
assert.strictEqual(wrapper.childAt(0).type(), CancelIcon);
129+
expect(avatar.tagName).to.equal('DIV');
130+
const cancelIcon = avatar.firstChild;
131+
expect(cancelIcon).to.have.attribute('data-mui-test', 'CancelIcon');
119132
});
120133

121134
it('should merge user classes & spread custom props to the root node', () => {
122-
assert.strictEqual(wrapper.hasClass(classes.root), true);
123-
assert.strictEqual(wrapper.hasClass('my-avatar'), true);
124-
assert.strictEqual(wrapper.props()['data-my-prop'], 'woofAvatar');
135+
expect(avatar).to.have.class(classes.root);
136+
expect(avatar).to.have.class('my-avatar');
137+
expect(avatar).to.have.attribute('data-my-prop', 'woofAvatar');
125138
});
126139

127140
it('should apply the colorDefault class', () => {
128-
assert.strictEqual(wrapper.hasClass(classes.colorDefault), true);
141+
expect(avatar).to.have.class(classes.colorDefault);
129142
});
130143
});
131144

132145
describe('text avatar', () => {
133-
let wrapper;
146+
let container;
147+
let avatar;
134148

135149
before(() => {
136-
wrapper = shallow(
150+
container = render(
137151
<Avatar className="my-avatar" data-my-prop="woofAvatar">
138152
OT
139153
</Avatar>,
140-
);
154+
).container;
155+
avatar = container.firstChild;
141156
});
142157

143158
it('should render a div containing a string', () => {
144-
assert.strictEqual(wrapper.name(), 'div');
145-
assert.strictEqual(wrapper.childAt(0).text(), 'OT');
159+
expect(avatar.tagName).to.equal('DIV');
160+
expect(avatar.firstChild).to.text('OT');
146161
});
147162

148163
it('should merge user classes & spread custom props to the root node', () => {
149-
assert.strictEqual(wrapper.hasClass(classes.root), true);
150-
assert.strictEqual(wrapper.hasClass('my-avatar'), true);
151-
assert.strictEqual(wrapper.props()['data-my-prop'], 'woofAvatar');
164+
expect(avatar).to.have.class(classes.root);
165+
expect(avatar).to.have.class('my-avatar');
166+
expect(avatar).to.have.attribute('data-my-prop', 'woofAvatar');
152167
});
153168

154169
it('should apply the colorDefault class', () => {
155-
assert.strictEqual(wrapper.hasClass(classes.colorDefault), true);
170+
expect(avatar).to.have.class(classes.colorDefault);
156171
});
157172
});
158173

159174
describe('falsey avatar', () => {
160-
let wrapper;
175+
let container;
176+
let avatar;
161177

162178
before(() => {
163-
wrapper = shallow(
179+
container = render(
164180
<Avatar className="my-avatar" data-my-prop="woofAvatar">
165181
{0}
166182
</Avatar>,
167-
);
183+
).container;
184+
avatar = container.firstChild;
168185
});
169186

170187
it('should render with defaultColor class when supplied with a child with falsey value', () => {
171-
assert.strictEqual(wrapper.name(), 'div');
172-
assert.strictEqual(wrapper.text(), '0');
188+
expect(avatar.tagName).to.equal('DIV');
189+
expect(avatar.firstChild).to.text('0');
173190
});
174191

175192
it('should merge user classes & spread custom props to the root node', () => {
176-
assert.strictEqual(wrapper.hasClass(classes.root), true);
177-
assert.strictEqual(wrapper.hasClass('my-avatar'), true);
178-
assert.strictEqual(wrapper.props()['data-my-prop'], 'woofAvatar');
193+
expect(avatar).to.have.class(classes.root);
194+
expect(avatar).to.have.class('my-avatar');
195+
expect(avatar).to.have.attribute('data-my-prop', 'woofAvatar');
179196
});
180197

181198
it('should apply the colorDefault class', () => {
182-
assert.strictEqual(wrapper.hasClass(classes.colorDefault), true);
199+
expect(avatar).to.have.class(classes.colorDefault);
183200
});
184201
});
185202
});

0 commit comments

Comments
 (0)