Updating Messasge to use react-testing-library
This commit is contained in:
parent
53def33627
commit
a1281543e2
@ -1,99 +1,105 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Message rendering 1`] = `
|
||||
<div
|
||||
className="message"
|
||||
>
|
||||
<DocumentFragment>
|
||||
<div
|
||||
className="header"
|
||||
class="message"
|
||||
>
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
<div
|
||||
class="header"
|
||||
>
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Message rendering with a close button 1`] = `
|
||||
<div
|
||||
className="message"
|
||||
>
|
||||
<DocumentFragment>
|
||||
<div
|
||||
className="header"
|
||||
class="message"
|
||||
>
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
<button
|
||||
onClick={[MockFunction]}
|
||||
<div
|
||||
class="header"
|
||||
>
|
||||
<XSquare
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Close
|
||||
</button>
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
<button>
|
||||
<span
|
||||
data-component="XSquare"
|
||||
data-props="{}"
|
||||
/>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Message rendering with icon 1`] = `
|
||||
<div
|
||||
className="message"
|
||||
>
|
||||
<DocumentFragment>
|
||||
<div
|
||||
className="header"
|
||||
class="message"
|
||||
>
|
||||
<Icon />
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
<div
|
||||
class="header"
|
||||
>
|
||||
Sample icon SVG
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</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"
|
||||
/>
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
<div
|
||||
class="header"
|
||||
>
|
||||
<span
|
||||
data-component="AlertOctagon"
|
||||
data-props="{}"
|
||||
/>
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user