diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js index 9b0182d0a2367d..82909ea5b6ca05 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js @@ -1,64 +1,70 @@ import React from 'react'; -import { assert } from 'chai'; -import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils'; +import { expect } from 'chai'; +import { createClientRender } from 'test/utils/createClientRender'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; import describeConformance from '../test-utils/describeConformance'; import Paper from '../Paper'; import SnackbarContent from './SnackbarContent'; describe('', () => { let mount; - let shallow; let classes; + const render = createClientRender({ strict: true }); before(() => { mount = createMount({ strict: true }); - shallow = createShallow({ untilSelector: 'withStyles(Paper)' }); classes = getClasses(); }); - after(() => { - mount.cleanUp(); - }); - describeConformance(, () => ({ classes, inheritComponent: Paper, mount, refInstanceof: window.HTMLDivElement, skip: ['componentProp'], + after: () => mount.cleanUp(), })); describe('prop: action', () => { it('should render the action', () => { const action = action; - const wrapper = shallow(); - assert.strictEqual(wrapper.childAt(1).hasClass(classes.action), true); - assert.strictEqual(wrapper.childAt(1).contains(action), true); + const { container } = render( + , + ); + expect(container.querySelector(`.${classes.action}`)).to.have.class(classes.action); + expect(container.querySelector(`.${classes.action}`)).to.contain('span'); }); it('should render an array of elements', () => { const action0 = action0; const action1 = action1; - const wrapper = shallow(); - assert.strictEqual(wrapper.childAt(1).hasClass(classes.action), true); - assert.strictEqual(wrapper.childAt(1).contains(action0), true); - assert.strictEqual(wrapper.childAt(1).contains(action1), true); + const { getByText } = render( + , + ); + expect(getByText('action0')).to.not.be.null; + expect(getByText('action1')).to.not.be.null; }); }); describe('prop: message', () => { it('should render the message', () => { - const message = message; - const wrapper = shallow(); - assert.strictEqual(wrapper.childAt(0).hasClass(classes.message), true); - assert.strictEqual(wrapper.childAt(0).contains(message), true); + const message = 'message prop text'; + const { getByRole } = render({message}} />); + expect(getByRole('alert')).to.have.text(message); }); }); describe('prop: role', () => { - it('should render the role', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.props().role, 'alert'); + it('renders the default role', () => { + const { getByRole } = render(); + expect(getByRole('alert')).to.have.text('alert message'); + }); + + it('can override the role', () => { + const { queryByRole } = render( + , + ); + expect(queryByRole('alertdialog')).to.have.text('alertdialog message'); }); }); });