root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updating Messasge to use react-testing-library

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/components/Message/__snapshots__/test.js.snap
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"
> >
<h2> <div
Testing class="header"
</h2> >
<h2>
Testing
</h2>
</div>
<div
class="content"
>
<p>
Message content
</p>
</div>
</div> </div>
<div </DocumentFragment>
className="content"
>
<p>
Message content
</p>
</div>
</div>
`; `;
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"
> >
<h2> <div
Testing class="header"
</h2>
<button
onClick={[MockFunction]}
> >
<XSquare <h2>
color="currentColor" Testing
size="24" </h2>
/> <button>
Close <span
</button> data-component="XSquare"
data-props="{}"
/>
Close
</button>
</div>
<div
class="content"
>
<p>
Message content
</p>
</div>
</div> </div>
<div </DocumentFragment>
className="content"
>
<p>
Message content
</p>
</div>
</div>
`; `;
exports[`Message rendering with icon 1`] = ` exports[`Message rendering with icon 1`] = `
<div <DocumentFragment>
className="message"
>
<div <div
className="header" class="message"
> >
<Icon /> <div
<h2> class="header"
Testing >
</h2> Sample icon SVG
<h2>
Testing
</h2>
</div>
<div
class="content"
>
<p>
Message content
</p>
</div>
</div> </div>
<div </DocumentFragment>
className="content"
>
<p>
Message content
</p>
</div>
</div>
`; `;
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
<h2> data-component="AlertOctagon"
Testing data-props="{}"
</h2> />
<h2>
Testing
</h2>
</div>
<div
class="content"
>
<p>
Message content
</p>
</div>
</div> </div>
<div </DocumentFragment>
className="content"
>
<p>
Message content
</p>
</div>
</div>
`; `;

31
src/components/Message/test.js
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();
}); });
}); });