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

Updating InstallPrompt to use react-testing-library

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

51
src/components/InstallPrompt/__snapshots__/test.js.snap
View File

@ -1,16 +1,57 @@
// 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`] = `
<DocumentFragment>
<a
data-testid="install"
href="#install"
onClick={[Function]}
>
<Trans>
<span
data-component="Trans"
data-props="{}"
>
Add to Home Screen
</Trans>
</span>
</a>
</DocumentFragment>
`;

5
src/components/InstallPrompt/index.js
View File

@ -43,7 +43,10 @@ class InstallPrompt extends React.PureComponent {
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>
</a>;
}

74
src/components/InstallPrompt/test.js
View File

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