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

74
src/components/Message/__snapshots__/test.js.snap
View File

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

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 { shallow } from 'enzyme';
import { render } from 'react-testing-library';
import Message from 'components/Message';
describe('Message', () => {
test('rendering', () => {
const component = shallow(
const { asFragment } = render(
<Message heading="Testing">
<p>Message content</p>
</Message>
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test('rendering with icon', () => {
const Icon = () => 'Sample icon SVG';
const component = shallow(
const { asFragment } = render(
<Message heading="Testing" icon={ Icon }>
<p>Message content</p>
</Message>
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test('rendering with type', () => {
const component = shallow(
const { asFragment } = render(
<Message heading="Testing" type="error">
<p>Message content</p>
</Message>
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test('rendering with a close button', () => {
const component = shallow(
const { asFragment } = render(
<Message heading="Testing" onClose={ jest.fn() }>
<p>Message content</p>
</Message>
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
});