Updating Header to use react-testing-library

This commit is contained in:
Jeff Avallone 2019-03-24 14:02:54 -04:00
parent 791142005e
commit 53def33627
3 changed files with 465 additions and 287 deletions

View File

@ -1,182 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Header closing the Privacy Policy modal 1`] = `
<Fragment>
<Modal
ariaHideApp={true}
bodyOpenClassName="ReactModal__Body--open"
closeTimeoutMS={0}
isOpen={true}
onRequestClose={[Function]}
parentSelector={[Function]}
portalClassName="ReactModalPortal"
role="dialog"
shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={true}
shouldFocusAfterRender={true}
shouldReturnFocusAfterClose={true}
>
<withI18nextTranslation(PrivacyPolicy)
onClose={[Function]}
/>
</Modal>
<header
className="header"
data-banner={null}
>
<h1>
<mockConstructor
to="/"
>
Regexper
</mockConstructor>
</h1>
<ul
className="list"
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<Gitlab
color="currentColor"
size="24"
/>
<Trans>
Source on GitLab
</Trans>
</a>
</li>
<li>
<mockConstructor
onClick={[Function]}
to="/privacy"
>
<Trans>
Privacy Policy
</Trans>
</mockConstructor>
</li>
<li>
<withI18nextTranslation(InstallPrompt) />
</li>
<li
data-requires-js={true}
>
<withI18nextTranslation(LocaleSwitcher) />
</li>
</ul>
</header>
</Fragment>
`;
exports[`Header closing the Privacy Policy modal 2`] = `
<Fragment>
<Modal
ariaHideApp={true}
bodyOpenClassName="ReactModal__Body--open"
closeTimeoutMS={0}
isOpen={false}
onRequestClose={[Function]}
parentSelector={[Function]}
portalClassName="ReactModalPortal"
role="dialog"
shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={true}
shouldFocusAfterRender={true}
shouldReturnFocusAfterClose={true}
>
<withI18nextTranslation(PrivacyPolicy)
onClose={[Function]}
/>
</Modal>
<header
className="header"
data-banner={null}
>
<h1>
<mockConstructor
to="/"
>
Regexper
</mockConstructor>
</h1>
<ul
className="list"
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<Gitlab
color="currentColor"
size="24"
/>
<Trans>
Source on GitLab
</Trans>
</a>
</li>
<li>
<mockConstructor
onClick={[Function]}
to="/privacy"
>
<Trans>
Privacy Policy
</Trans>
</mockConstructor>
</li>
<li>
<withI18nextTranslation(InstallPrompt) />
</li>
<li
data-requires-js={true}
>
<withI18nextTranslation(LocaleSwitcher) />
</li>
</ul>
</header>
</Fragment>
`;
exports[`Header opening the Privacy Policy modal 1`] = ` exports[`Header opening the Privacy Policy modal 1`] = `
<Fragment> <DocumentFragment>
<Modal <span
ariaHideApp={true} data-component="Modal"
bodyOpenClassName="ReactModal__Body--open" data-props="{
closeTimeoutMS={0} \\"isOpen\\": true
isOpen={true} }"
onRequestClose={[Function]}
parentSelector={[Function]}
portalClassName="ReactModalPortal"
role="dialog"
shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={true}
shouldFocusAfterRender={true}
shouldReturnFocusAfterClose={true}
> >
<withI18nextTranslation(PrivacyPolicy) <span
onClose={[Function]} data-component="withI18nextTranslation(PrivacyPolicy)"
data-props="{}"
/> />
</Modal> </span>
<header <header
className="header" class="header"
data-banner={null}
> >
<h1> <h1>
<mockConstructor <a
to="/" href="/"
> >
Regexper Regexper
</mockConstructor> </a>
</h1> </h1>
<ul <ul
className="list" class="list"
> >
<li> <li>
<a <a
@ -184,71 +32,380 @@ exports[`Header opening the Privacy Policy modal 1`] = `
rel="external noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
<Gitlab <span
color="currentColor" data-component="Gitlab"
size="24" data-props="{}"
/> />
<Trans> <span
data-component="Trans"
data-props="{}"
>
Source on GitLab Source on GitLab
</Trans> </span>
</a> </a>
</li> </li>
<li> <li>
<mockConstructor <a
onClick={[Function]} data-testid="privacy-link"
to="/privacy" href="/privacy"
>
<span
data-component="Trans"
data-props="{}"
> >
<Trans>
Privacy Policy Privacy Policy
</Trans> </span>
</mockConstructor> </a>
</li> </li>
<li> <li>
<withI18nextTranslation(InstallPrompt) /> <span
data-component="withI18nextTranslation(InstallPrompt)"
data-props="{}"
/>
</li> </li>
<li <li
data-requires-js={true} data-requires-js="true"
> >
<withI18nextTranslation(LocaleSwitcher) /> <span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-props="{}"
/>
</li> </li>
</ul> </ul>
</header> </header>
</Fragment> </DocumentFragment>
`;
exports[`Header opening the Privacy Policy modal while holding alt key 1`] = `
<DocumentFragment>
<span
data-component="Modal"
data-props="{
\\"isOpen\\": false
}"
>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-props="{}"
/>
</span>
<header
class="header"
>
<h1>
<a
href="/"
>
Regexper
</a>
</h1>
<ul
class="list"
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<span
data-component="Gitlab"
data-props="{}"
/>
<span
data-component="Trans"
data-props="{}"
>
Source on GitLab
</span>
</a>
</li>
<li>
<a
data-testid="privacy-link"
href="/privacy"
>
<span
data-component="Trans"
data-props="{}"
>
Privacy Policy
</span>
</a>
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-props="{}"
/>
</li>
<li
data-requires-js="true"
>
<span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-props="{}"
/>
</li>
</ul>
</header>
</DocumentFragment>
`;
exports[`Header opening the Privacy Policy modal while holding ctrl key 1`] = `
<DocumentFragment>
<span
data-component="Modal"
data-props="{
\\"isOpen\\": false
}"
>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-props="{}"
/>
</span>
<header
class="header"
>
<h1>
<a
href="/"
>
Regexper
</a>
</h1>
<ul
class="list"
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<span
data-component="Gitlab"
data-props="{}"
/>
<span
data-component="Trans"
data-props="{}"
>
Source on GitLab
</span>
</a>
</li>
<li>
<a
data-testid="privacy-link"
href="/privacy"
>
<span
data-component="Trans"
data-props="{}"
>
Privacy Policy
</span>
</a>
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-props="{}"
/>
</li>
<li
data-requires-js="true"
>
<span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-props="{}"
/>
</li>
</ul>
</header>
</DocumentFragment>
`;
exports[`Header opening the Privacy Policy modal while holding meta key 1`] = `
<DocumentFragment>
<span
data-component="Modal"
data-props="{
\\"isOpen\\": false
}"
>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-props="{}"
/>
</span>
<header
class="header"
>
<h1>
<a
href="/"
>
Regexper
</a>
</h1>
<ul
class="list"
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<span
data-component="Gitlab"
data-props="{}"
/>
<span
data-component="Trans"
data-props="{}"
>
Source on GitLab
</span>
</a>
</li>
<li>
<a
data-testid="privacy-link"
href="/privacy"
>
<span
data-component="Trans"
data-props="{}"
>
Privacy Policy
</span>
</a>
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-props="{}"
/>
</li>
<li
data-requires-js="true"
>
<span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-props="{}"
/>
</li>
</ul>
</header>
</DocumentFragment>
`;
exports[`Header opening the Privacy Policy modal while holding shift key 1`] = `
<DocumentFragment>
<span
data-component="Modal"
data-props="{
\\"isOpen\\": false
}"
>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-props="{}"
/>
</span>
<header
class="header"
>
<h1>
<a
href="/"
>
Regexper
</a>
</h1>
<ul
class="list"
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<span
data-component="Gitlab"
data-props="{}"
/>
<span
data-component="Trans"
data-props="{}"
>
Source on GitLab
</span>
</a>
</li>
<li>
<a
data-testid="privacy-link"
href="/privacy"
>
<span
data-component="Trans"
data-props="{}"
>
Privacy Policy
</span>
</a>
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-props="{}"
/>
</li>
<li
data-requires-js="true"
>
<span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-props="{}"
/>
</li>
</ul>
</header>
</DocumentFragment>
`; `;
exports[`Header rendering 1`] = ` exports[`Header rendering 1`] = `
<Fragment> <DocumentFragment>
<Modal <span
ariaHideApp={true} data-component="Modal"
bodyOpenClassName="ReactModal__Body--open" data-props="{
closeTimeoutMS={0} \\"isOpen\\": false
isOpen={false} }"
onRequestClose={[Function]}
parentSelector={[Function]}
portalClassName="ReactModalPortal"
role="dialog"
shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={true}
shouldFocusAfterRender={true}
shouldReturnFocusAfterClose={true}
> >
<withI18nextTranslation(PrivacyPolicy) <span
onClose={[Function]} data-component="withI18nextTranslation(PrivacyPolicy)"
data-props="{}"
/> />
</Modal> </span>
<header <header
className="header" class="header"
data-banner="testing" data-banner="testing"
> >
<h1> <h1>
<mockConstructor <a
to="/" href="/"
> >
Regexper Regexper
</mockConstructor> </a>
</h1> </h1>
<ul <ul
className="list" class="list"
> >
<li> <li>
<a <a
@ -256,71 +413,75 @@ exports[`Header rendering 1`] = `
rel="external noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
<Gitlab <span
color="currentColor" data-component="Gitlab"
size="24" data-props="{}"
/> />
<Trans> <span
data-component="Trans"
data-props="{}"
>
Source on GitLab Source on GitLab
</Trans> </span>
</a> </a>
</li> </li>
<li> <li>
<mockConstructor <a
onClick={[Function]} data-testid="privacy-link"
to="/privacy" href="/privacy"
>
<span
data-component="Trans"
data-props="{}"
> >
<Trans>
Privacy Policy Privacy Policy
</Trans> </span>
</mockConstructor> </a>
</li> </li>
<li> <li>
<withI18nextTranslation(InstallPrompt) /> <span
data-component="withI18nextTranslation(InstallPrompt)"
data-props="{}"
/>
</li> </li>
<li <li
data-requires-js={true} data-requires-js="true"
> >
<withI18nextTranslation(LocaleSwitcher) /> <span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-props="{}"
/>
</li> </li>
</ul> </ul>
</header> </header>
</Fragment> </DocumentFragment>
`; `;
exports[`Header rendering with no banner 1`] = ` exports[`Header rendering with no banner 1`] = `
<Fragment> <DocumentFragment>
<Modal <span
ariaHideApp={true} data-component="Modal"
bodyOpenClassName="ReactModal__Body--open" data-props="{
closeTimeoutMS={0} \\"isOpen\\": false
isOpen={false} }"
onRequestClose={[Function]}
parentSelector={[Function]}
portalClassName="ReactModalPortal"
role="dialog"
shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={true}
shouldFocusAfterRender={true}
shouldReturnFocusAfterClose={true}
> >
<withI18nextTranslation(PrivacyPolicy) <span
onClose={[Function]} data-component="withI18nextTranslation(PrivacyPolicy)"
data-props="{}"
/> />
</Modal> </span>
<header <header
className="header" class="header"
data-banner={null}
> >
<h1> <h1>
<mockConstructor <a
to="/" href="/"
> >
Regexper Regexper
</mockConstructor> </a>
</h1> </h1>
<ul <ul
className="list" class="list"
> >
<li> <li>
<a <a
@ -328,34 +489,46 @@ exports[`Header rendering with no banner 1`] = `
rel="external noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
<Gitlab <span
color="currentColor" data-component="Gitlab"
size="24" data-props="{}"
/> />
<Trans> <span
data-component="Trans"
data-props="{}"
>
Source on GitLab Source on GitLab
</Trans> </span>
</a> </a>
</li> </li>
<li> <li>
<mockConstructor <a
onClick={[Function]} data-testid="privacy-link"
to="/privacy" href="/privacy"
>
<span
data-component="Trans"
data-props="{}"
> >
<Trans>
Privacy Policy Privacy Policy
</Trans> </span>
</mockConstructor> </a>
</li> </li>
<li> <li>
<withI18nextTranslation(InstallPrompt) /> <span
data-component="withI18nextTranslation(InstallPrompt)"
data-props="{}"
/>
</li> </li>
<li <li
data-requires-js={true} data-requires-js="true"
> >
<withI18nextTranslation(LocaleSwitcher) /> <span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-props="{}"
/>
</li> </li>
</ul> </ul>
</header> </header>
</Fragment> </DocumentFragment>
`; `;

View File

@ -64,7 +64,10 @@ class Header extends React.PureComponent {
</a> </a>
</li> </li>
<li> <li>
<Link to="/privacy" onClick={ this.handleOpen }> <Link to="/privacy"
data-testid="privacy-link"
onClick={ this.handleOpen }
>
<Trans>Privacy Policy</Trans> <Trans>Privacy Policy</Trans>
</Link> </Link>
</li> </li>

View File

@ -1,60 +1,62 @@
jest.mock('react-modal', () =>
require('__mocks__/component-mock')('react-modal'));
jest.mock('react-feather/dist/icons/gitlab', () =>
require('__mocks__/component-mock')('react-feather/dist/icons/gitlab'));
jest.mock('components/LocaleSwitcher', () =>
require('__mocks__/component-mock')('components/LocaleSwitcher'));
jest.mock('components/InstallPrompt', () =>
require('__mocks__/component-mock')('components/InstallPrompt'));
jest.mock('components/PrivacyPolicy', () =>
require('__mocks__/component-mock')('components/PrivacyPolicy'));
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { render, fireEvent } from 'react-testing-library';
import { Header } from 'components/Header'; import { Header } from 'components/Header';
describe('Header', () => { describe('Header', () => {
test('rendering', () => { test('rendering', () => {
const component = shallow( const { asFragment } = render(
<Header banner="testing" /> <Header banner="testing" />
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering with no banner', () => { test('rendering with no banner', () => {
const component = shallow( const { asFragment } = render(
<Header banner={ false } /> <Header banner={ false } />
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('opening the Privacy Policy modal', () => { test('opening the Privacy Policy modal', () => {
const component = shallow( const { asFragment, getByTestId } = render(
<Header banner={ false } /> <Header banner={ false } />
); );
const eventObj = { preventDefault: jest.fn() }; const event = new MouseEvent('click', { bubbles: true });
jest.spyOn(event, 'preventDefault');
component.instance().handleOpen(eventObj); fireEvent(getByTestId('privacy-link'), event);
expect(eventObj.preventDefault).toHaveBeenCalled(); expect(event.preventDefault).toHaveBeenCalled();
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
['shift', 'ctrl', 'alt', 'meta'].forEach(key => { ['shift', 'ctrl', 'alt', 'meta'].forEach(key => {
test(`opening the Privacy Policy modal while holding ${ key } key`, () => { test(`opening the Privacy Policy modal while holding ${ key } key`, () => {
const component = shallow( const { asFragment, getByTestId } = render(
<Header banner={ false } /> <Header banner={ false } />
); );
const eventObj = { preventDefault: jest.fn() }; const event = new MouseEvent('click', {
bubbles: true,
component.instance().handleOpen({ [key + 'Key']: true, ...eventObj }); [key + 'Key']: true
expect(eventObj.preventDefault).not.toHaveBeenCalled();
expect(component.state('showModal')).toEqual(false);
}); });
jest.spyOn(event, 'preventDefault');
fireEvent(getByTestId('privacy-link'), event);
expect(event.preventDefault).not.toHaveBeenCalled();
expect(asFragment()).toMatchSnapshot();
}); });
test('closing the Privacy Policy modal', () => {
const component = shallow(
<Header banner={ false } />
);
component.setState({ showModal: true });
expect(component).toMatchSnapshot();
component.instance().handleClose();
expect(component).toMatchSnapshot();
}); });
}); });