Updating InstallPrompt to use react-testing-library

This commit is contained in:
Jeff Avallone 2019-03-24 13:47:00 -04:00
parent e29b40990c
commit 4d31079ca2
3 changed files with 91 additions and 49 deletions

View File

@ -1,16 +1,57 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`InstallPrompt rendering 1`] = `""`; exports[`InstallPrompt accepting install prompt 1`] = `
<DocumentFragment>
<a
data-testid="install"
href="#install"
>
<span
data-component="Trans"
data-props="{}"
>
Add to Home Screen
</span>
</a>
</DocumentFragment>
`;
exports[`InstallPrompt rendering after an install prompt has been requested 1`] = `""`; exports[`InstallPrompt accepting install prompt 2`] = `<DocumentFragment />`;
exports[`InstallPrompt rejecting install prompt 1`] = `
<DocumentFragment>
<a
data-testid="install"
href="#install"
>
<span
data-component="Trans"
data-props="{}"
>
Add to Home Screen
</span>
</a>
</DocumentFragment>
`;
exports[`InstallPrompt rejecting install prompt 2`] = `<DocumentFragment />`;
exports[`InstallPrompt rendering 1`] = `<DocumentFragment />`;
exports[`InstallPrompt rendering after an install prompt has been requested 1`] = `<DocumentFragment />`;
exports[`InstallPrompt rendering after an install prompt has been requested 2`] = ` exports[`InstallPrompt rendering after an install prompt has been requested 2`] = `
<DocumentFragment>
<a <a
data-testid="install"
href="#install" href="#install"
onClick={[Function]}
> >
<Trans> <span
data-component="Trans"
data-props="{}"
>
Add to Home Screen Add to Home Screen
</Trans> </span>
</a> </a>
</DocumentFragment>
`; `;

View File

@ -43,7 +43,10 @@ class InstallPrompt extends React.PureComponent {
return null; return null;
} }
return <a href="#install" onClick={ this.handleInstall }> return <a href="#install"
data-testid="install"
onClick={ this.handleInstall }
>
<Trans>Add to Home Screen</Trans> <Trans>Add to Home Screen</Trans>
</a>; </a>;
} }

View File

@ -1,88 +1,86 @@
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { render, fireEvent } from 'react-testing-library';
import { InstallPrompt } from 'components/InstallPrompt'; import { InstallPrompt } from 'components/InstallPrompt';
describe('InstallPrompt', () => { describe('InstallPrompt', () => {
test('rendering', () => { test('rendering', () => {
const component = shallow( const { asFragment } = render(
<InstallPrompt /> <InstallPrompt />
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering after an install prompt has been requested', () => { test('rendering after an install prompt has been requested', () => {
const component = shallow( const { asFragment } = render(
<InstallPrompt /> <InstallPrompt />
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
component.instance().handleInstallPrompt({ const event = new Event('beforeinstallprompt', {
prompt: jest.fn() prompt: jest.fn()
}); });
fireEvent(window, event);
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('adding and removing event listener', () => { test('removing event listener', () => {
jest.spyOn(window, 'addEventListener'); jest.spyOn(window, 'addEventListener');
jest.spyOn(window, 'removeEventListener'); jest.spyOn(window, 'removeEventListener');
const component = shallow( const { unmount } = render(
<InstallPrompt /> <InstallPrompt />
); );
const handleInstallPrompt = component.instance().handleInstallPrompt;
expect(window.addEventListener).toHaveBeenCalledWith( unmount();
'beforeinstallprompt',
handleInstallPrompt);
component.unmount();
expect(window.removeEventListener).toHaveBeenCalledWith( expect(window.removeEventListener).toHaveBeenCalledWith(
'beforeinstallprompt', 'beforeinstallprompt',
handleInstallPrompt); expect.any(Function));
}); });
test('accepting install prompt', async () => { test('accepting install prompt', async () => {
const component = shallow( const { asFragment, getByTestId } = render(
<InstallPrompt /> <InstallPrompt />
); );
const promptObj = { const promptEvent = new Event('beforeinstallprompt');
prompt: jest.fn(), promptEvent.prompt = jest.fn();
userChoice: Promise.resolve() promptEvent.userChoice = Promise.resolve();
}; const clickEvent = new MouseEvent('click', { bubbles: true });
const eventObj = { preventDefault: jest.fn() }; jest.spyOn(clickEvent, 'preventDefault');
component.instance().handleInstallPrompt(promptObj); fireEvent(window, promptEvent);
component.find('a').simulate('click', eventObj); expect(asFragment()).toMatchSnapshot();
fireEvent(getByTestId('install'), clickEvent);
// Allow async code to run // Allow async code to run
await new Promise(resolve => setTimeout(resolve)); await new Promise(resolve => setTimeout(resolve));
expect(eventObj.preventDefault).toHaveBeenCalled(); expect(clickEvent.preventDefault).toHaveBeenCalled();
expect(promptObj.prompt).toHaveBeenCalled(); expect(promptEvent.prompt).toHaveBeenCalled();
expect(component.state('installPrompt')).toBeNull(); expect(asFragment()).toMatchSnapshot();
}); });
test('rejecting install prompt', async () => { test('rejecting install prompt', async () => {
const component = shallow( const { asFragment, getByTestId } = render(
<InstallPrompt /> <InstallPrompt />
); );
const promptObj = { const promptEvent = new Event('beforeinstallprompt');
prompt: jest.fn(), promptEvent.prompt = jest.fn();
userChoice: Promise.reject() promptEvent.userChoice = Promise.reject();
}; const clickEvent = new MouseEvent('click', { bubbles: true });
const eventObj = { preventDefault: jest.fn() }; jest.spyOn(clickEvent, 'preventDefault');
component.instance().handleInstallPrompt(promptObj); fireEvent(window, promptEvent);
component.find('a').simulate('click', eventObj); expect(asFragment()).toMatchSnapshot();
fireEvent(getByTestId('install'), clickEvent);
// Allow async code to run // Allow async code to run
await new Promise(resolve => setTimeout(resolve)); await new Promise(resolve => setTimeout(resolve));
expect(eventObj.preventDefault).toHaveBeenCalled(); expect(clickEvent.preventDefault).toHaveBeenCalled();
expect(promptObj.prompt).toHaveBeenCalled(); expect(promptEvent.prompt).toHaveBeenCalled();
expect(component.state('installPrompt')).toBeNull(); expect(asFragment()).toMatchSnapshot();
}); });
}); });