Skip to content

Commit

Permalink
[test] Clear emotion cache between tests (#24837)
Browse files Browse the repository at this point in the history
  • Loading branch information
eps1lon authored Feb 9, 2021
1 parent b9ab841 commit ea8d7f1
Show file tree
Hide file tree
Showing 3 changed files with 181 additions and 124 deletions.
113 changes: 67 additions & 46 deletions packages/material-ui/src/Avatar/Avatar.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,122 +74,143 @@ describe('<Avatar />', () => {
});

describe('font icon avatar', () => {
let container;
let avatar;
let icon;

before(() => {
container = render(
<Avatar className="my-avatar" data-my-prop="woofAvatar">
<span className="my-icon-font">icon</span>
it('should render a div containing an font icon', () => {
const { container } = render(
<Avatar>
<span className="my-icon-font" data-testid="icon">
icon
</span>
</Avatar>,
).container;
avatar = container.firstChild;
icon = avatar.firstChild;
});
);
const avatar = container.firstChild;
const icon = avatar.firstChild;

it('should render a div containing an font icon', () => {
expect(avatar).to.have.tagName('div');
expect(icon).to.have.tagName('span');
expect(icon).to.have.class('my-icon-font');
expect(icon).to.have.text('icon');
});

it('should merge user classes & spread custom props to the root node', () => {
const { container } = render(
<Avatar className="my-avatar" data-my-prop="woofAvatar">
<span>icon</span>
</Avatar>,
);
const avatar = container.firstChild;

expect(avatar).to.have.class(classes.root);
expect(avatar).to.have.class('my-avatar');
expect(avatar).to.have.attribute('data-my-prop', 'woofAvatar');
});

it('should apply the colorDefault class', () => {
const { container } = render(
<Avatar data-testid="avatar">
<span>icon</span>
</Avatar>,
);
const avatar = container.firstChild;

expect(avatar).to.have.class(classes.colorDefault);
});
});

describe('svg icon avatar', () => {
let container;
let avatar;

before(() => {
container = render(
<Avatar className="my-avatar" data-my-prop="woofAvatar">
it('should render a div containing an svg icon', () => {
const container = render(
<Avatar>
<CancelIcon />
</Avatar>,
).container;
avatar = container.firstChild;
});
const avatar = container.firstChild;

it('should render a div containing an svg icon', () => {
expect(avatar).to.have.tagName('div');
const cancelIcon = avatar.firstChild;
expect(cancelIcon).to.have.attribute('data-testid', 'CancelIcon');
});

it('should merge user classes & spread custom props to the root node', () => {
const container = render(
<Avatar className="my-avatar" data-my-prop="woofAvatar">
<CancelIcon />
</Avatar>,
).container;
const avatar = container.firstChild;

expect(avatar).to.have.class(classes.root);
expect(avatar).to.have.class('my-avatar');
expect(avatar).to.have.attribute('data-my-prop', 'woofAvatar');
});

it('should apply the colorDefault class', () => {
const container = render(
<Avatar>
<CancelIcon />
</Avatar>,
).container;
const avatar = container.firstChild;

expect(avatar).to.have.class(classes.colorDefault);
});
});

describe('text avatar', () => {
let container;
let avatar;

before(() => {
container = render(
<Avatar className="my-avatar" data-my-prop="woofAvatar">
OT
</Avatar>,
).container;
avatar = container.firstChild;
});

it('should render a div containing a string', () => {
const container = render(<Avatar>OT</Avatar>).container;
const avatar = container.firstChild;

expect(avatar).to.have.tagName('div');
expect(avatar.firstChild).to.text('OT');
});

it('should merge user classes & spread custom props to the root node', () => {
const container = render(
<Avatar className="my-avatar" data-my-prop="woofAvatar">
OT
</Avatar>,
).container;
const avatar = container.firstChild;

expect(avatar).to.have.class(classes.root);
expect(avatar).to.have.class('my-avatar');
expect(avatar).to.have.attribute('data-my-prop', 'woofAvatar');
});

it('should apply the colorDefault class', () => {
const container = render(<Avatar>OT</Avatar>).container;
const avatar = container.firstChild;

expect(avatar).to.have.class(classes.colorDefault);
});
});

describe('falsey avatar', () => {
let container;
let avatar;

before(() => {
container = render(
<Avatar className="my-avatar" data-my-prop="woofAvatar">
{0}
</Avatar>,
).container;
avatar = container.firstChild;
});

it('should render with defaultColor class when supplied with a child with falsey value', () => {
const container = render(<Avatar>{0}</Avatar>).container;
const avatar = container.firstChild;

expect(avatar).to.have.tagName('div');
expect(avatar.firstChild).to.text('0');
});

it('should merge user classes & spread custom props to the root node', () => {
const container = render(
<Avatar className="my-avatar" data-my-prop="woofAvatar">
{0}
</Avatar>,
).container;
const avatar = container.firstChild;

expect(avatar).to.have.class(classes.root);
expect(avatar).to.have.class('my-avatar');
expect(avatar).to.have.attribute('data-my-prop', 'woofAvatar');
});

it('should apply the colorDefault class', () => {
const container = render(<Avatar>{0}</Avatar>).container;
const avatar = container.firstChild;

expect(avatar).to.have.class(classes.colorDefault);
});
});
Expand Down
115 changes: 63 additions & 52 deletions packages/material-ui/src/ButtonBase/Ripple.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,108 +18,119 @@ describe('<Ripple />', () => {
});

describe('starting and stopping', () => {
let wrapper;

before(() => {
wrapper = render(
it('should start the ripple', () => {
const { container, setProps } = render(
<Ripple classes={classes} timeout={0} rippleX={0} rippleY={0} rippleSize={11} />,
);
});

it('should start the ripple', () => {
wrapper.setProps({ in: true });
const ripple = wrapper.container.querySelector('span');
setProps({ in: true });

const ripple = container.querySelector('span');
expect(ripple).to.have.class(classes.rippleVisible);
});

it('should stop the ripple', () => {
wrapper.setProps({ in: true });
wrapper.setProps({ in: false });
const child = wrapper.container.querySelector('span > span');
const { container, setProps } = render(
<Ripple classes={classes} in timeout={0} rippleX={0} rippleY={0} rippleSize={11} />,
);

setProps({ in: false });

const child = container.querySelector('span > span');
expect(child).to.have.class(classes.childLeaving);
});
});

describe('pulsating and stopping 1', () => {
let wrapper;

before(() => {
wrapper = render(
<Ripple
classes={classes}
timeout={0}
in={false}
rippleX={0}
rippleY={0}
rippleSize={11}
pulsate
/>,
it('should render the ripple inside a pulsating Ripple', () => {
const { container } = render(
<Ripple classes={classes} timeout={0} rippleX={0} rippleY={0} rippleSize={11} pulsate />,
);
});

it('should render the ripple inside a pulsating Ripple', () => {
const ripple = wrapper.container.querySelector('span');
const ripple = container.querySelector('span');
expect(ripple).to.have.class(classes.ripple);
expect(ripple).to.have.class(classes.ripplePulsate);
const child = wrapper.container.querySelector('span > span');
const child = container.querySelector('span > span');
expect(child).to.have.class(classes.childPulsate);
});

it('should start the ripple', () => {
wrapper.setProps({ in: true });
const ripple = wrapper.container.querySelector('span');
const { container, setProps } = render(
<Ripple classes={classes} timeout={0} rippleX={0} rippleY={0} rippleSize={11} pulsate />,
);

setProps({ in: true });

const ripple = container.querySelector('span');
expect(ripple).to.have.class(classes.rippleVisible);
const child = wrapper.container.querySelector('span > span');
const child = container.querySelector('span > span');
expect(child).to.have.class(classes.childPulsate);
});

it('should stop the ripple', () => {
wrapper.setProps({ in: true });
wrapper.setProps({ in: false });
const child = wrapper.container.querySelector('span > span');
const { container, setProps } = render(
<Ripple classes={classes} timeout={0} rippleX={0} rippleY={0} rippleSize={11} pulsate />,
);

setProps({ in: true });
setProps({ in: false });
const child = container.querySelector('span > span');
expect(child).to.have.class(classes.childLeaving);
});
});

describe('pulsating and stopping 2', () => {
let wrapper;
let clock;
let callbackSpy;

beforeEach(() => {
callbackSpy = spy();
wrapper = render(
clock = useFakeTimers();
});

afterEach(() => {
clock.restore();
});

it('handleExit should trigger a timer', () => {
const handleExited = spy();
const { setProps } = render(
<Ripple
classes={classes}
timeout={550}
in
onExited={callbackSpy}
onExited={handleExited}
rippleX={0}
rippleY={0}
rippleSize={11}
pulsate
/>,
);
clock = useFakeTimers();
});

afterEach(() => {
clock.restore();
});

it('handleExit should trigger a timer', () => {
wrapper.setProps({ in: false });
setProps({ in: false });
clock.tick(549);
expect(callbackSpy.callCount).to.equal(0);
expect(handleExited.callCount).to.equal(0);
clock.tick(1);
expect(callbackSpy.callCount).to.equal(1);
expect(handleExited.callCount).to.equal(1);
});

it('unmount should defuse the handleExit timer', () => {
wrapper.setProps({ in: false });
wrapper.unmount();
const handleExited = spy();
const { setProps, unmount } = render(
<Ripple
classes={classes}
timeout={550}
in
onExited={handleExited}
rippleX={0}
rippleY={0}
rippleSize={11}
pulsate
/>,
);

setProps({ in: false });
unmount();
clock.tick(550);
expect(callbackSpy.callCount).to.equal(0);
expect(handleExited.callCount).to.equal(0);
});
});
});
Loading

0 comments on commit ea8d7f1

Please sign in to comment.