Updating Messasge to use react-testing-library

This commit is contained in:
Jeff Avallone 2019-03-24 14:09:05 -04:00
parent 53def33627
commit a1281543e2
2 changed files with 101 additions and 82 deletions

View File

@ -1,99 +1,105 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Message rendering 1`] = ` exports[`Message rendering 1`] = `
<div <DocumentFragment>
className="message"
>
<div <div
className="header" class="message"
>
<div
class="header"
> >
<h2> <h2>
Testing Testing
</h2> </h2>
</div> </div>
<div <div
className="content" class="content"
> >
<p> <p>
Message content Message content
</p> </p>
</div> </div>
</div> </div>
</DocumentFragment>
`; `;
exports[`Message rendering with a close button 1`] = ` exports[`Message rendering with a close button 1`] = `
<div <DocumentFragment>
className="message"
>
<div <div
className="header" class="message"
>
<div
class="header"
> >
<h2> <h2>
Testing Testing
</h2> </h2>
<button <button>
onClick={[MockFunction]} <span
> data-component="XSquare"
<XSquare data-props="{}"
color="currentColor"
size="24"
/> />
Close Close
</button> </button>
</div> </div>
<div <div
className="content" class="content"
> >
<p> <p>
Message content Message content
</p> </p>
</div> </div>
</div> </div>
</DocumentFragment>
`; `;
exports[`Message rendering with icon 1`] = ` exports[`Message rendering with icon 1`] = `
<div <DocumentFragment>
className="message"
>
<div <div
className="header" class="message"
> >
<Icon /> <div
class="header"
>
Sample icon SVG
<h2> <h2>
Testing Testing
</h2> </h2>
</div> </div>
<div <div
className="content" class="content"
> >
<p> <p>
Message content Message content
</p> </p>
</div> </div>
</div> </div>
</DocumentFragment>
`; `;
exports[`Message rendering with type 1`] = ` exports[`Message rendering with type 1`] = `
<div <DocumentFragment>
className="message error"
>
<div <div
className="header" class="message error"
> >
<AlertOctagon <div
color="currentColor" class="header"
size="24" >
<span
data-component="AlertOctagon"
data-props="{}"
/> />
<h2> <h2>
Testing Testing
</h2> </h2>
</div> </div>
<div <div
className="content" class="content"
> >
<p> <p>
Message content Message content
</p> </p>
</div> </div>
</div> </div>
</DocumentFragment>
`; `;

View File

@ -1,43 +1,56 @@
jest.mock('react-feather/dist/icons/info', () =>
require('__mocks__/component-mock')('react-feather/dist/icons/info'));
jest.mock('react-feather/dist/icons/alert-octagon', () =>
require('__mocks__/component-mock')(
'react-feather/dist/icons/alert-octagon'
));
jest.mock('react-feather/dist/icons/alert-triangle', () =>
require('__mocks__/component-mock')(
'react-feather/dist/icons/alert-triangle'
));
jest.mock('react-feather/dist/icons/x-square', () =>
require('__mocks__/component-mock')('react-feather/dist/icons/x-square'));
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { render } from 'react-testing-library';
import Message from 'components/Message'; import Message from 'components/Message';
describe('Message', () => { describe('Message', () => {
test('rendering', () => { test('rendering', () => {
const component = shallow( const { asFragment } = render(
<Message heading="Testing"> <Message heading="Testing">
<p>Message content</p> <p>Message content</p>
</Message> </Message>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering with icon', () => { test('rendering with icon', () => {
const Icon = () => 'Sample icon SVG'; const Icon = () => 'Sample icon SVG';
const component = shallow( const { asFragment } = render(
<Message heading="Testing" icon={ Icon }> <Message heading="Testing" icon={ Icon }>
<p>Message content</p> <p>Message content</p>
</Message> </Message>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering with type', () => { test('rendering with type', () => {
const component = shallow( const { asFragment } = render(
<Message heading="Testing" type="error"> <Message heading="Testing" type="error">
<p>Message content</p> <p>Message content</p>
</Message> </Message>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering with a close button', () => { test('rendering with a close button', () => {
const component = shallow( const { asFragment } = render(
<Message heading="Testing" onClose={ jest.fn() }> <Message heading="Testing" onClose={ jest.fn() }>
<p>Message content</p> <p>Message content</p>
</Message> </Message>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
}); });