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

Updating InstallPrompt to use hooks

Browse Source
This commit is contained in:
Jeff Avallone 2019-03-26 21:12:35 -04:00
parent f9b3d5dbd7
commit 18427f9fc6
4 changed files with 34 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Header/__snapshots__/test.js.snap
View File

@ -59,7 +59,7 @@ exports[`Header opening the Privacy Policy modal 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -135,7 +135,7 @@ exports[`Header opening the Privacy Policy modal while holding alt key 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -211,7 +211,7 @@ exports[`Header opening the Privacy Policy modal while holding ctrl key 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -287,7 +287,7 @@ exports[`Header opening the Privacy Policy modal while holding meta key 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -363,7 +363,7 @@ exports[`Header opening the Privacy Policy modal while holding shift key 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -440,7 +440,7 @@ exports[`Header rendering 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -516,7 +516,7 @@ exports[`Header rendering with no banner 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>

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

@ -1,41 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
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 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 />`;

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

@ -1,30 +1,12 @@
import React from 'react';
import { withTranslation, Trans } from 'react-i18next';
import React, { useState, useEffect, useCallback } from 'react';
import { Trans } from 'react-i18next';
class InstallPrompt extends React.PureComponent {
state = {
installPrompt: null
}
const InstallPrompt = () => {
const [ installPrompt, updateInstallPrompt ] = useState(null);
componentDidMount() {
window.addEventListener('beforeinstallprompt', this.handleInstallPrompt);
}
componentWillUnmount() {
window.removeEventListener('beforeinstallprompt', this.handleInstallPrompt);
}
handleInstallPrompt = event => {
this.setState({
installPrompt: event
});
}
handleInstall = async event => {
const handleInstall = useCallback(async event => {
event.preventDefault();
const { installPrompt } = this.state;
try {
installPrompt.prompt();
await installPrompt.userChoice;
@ -33,11 +15,16 @@ class InstallPrompt extends React.PureComponent {
// User cancelled install
}
this.setState({ installPrompt: null });
}
updateInstallPrompt(null);
}, [installPrompt, updateInstallPrompt]);
render() {
const { installPrompt } = this.state;
useEffect(() => {
window.addEventListener('beforeinstallprompt', updateInstallPrompt);
return () => {
window.removeEventListener('beforeinstallprompt', updateInstallPrompt);
};
});
if (!installPrompt) {
return null;
@ -45,12 +32,10 @@ class InstallPrompt extends React.PureComponent {
return <a href="#install"
data-testid="install"
onClick={ this.handleInstall }
onClick={ handleInstall }
>
<Trans>Add to Home Screen</Trans>
</a>;
}
}
};
export { InstallPrompt };
export default withTranslation()(InstallPrompt);
export default InstallPrompt;

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

@ -1,7 +1,7 @@
import React from 'react';
import { render, fireEvent } from 'react-testing-library';
import { InstallPrompt } from 'components/InstallPrompt';
import InstallPrompt from 'components/InstallPrompt';
describe('InstallPrompt', () => {
test('rendering', () => {
@ -39,48 +39,4 @@ describe('InstallPrompt', () => {
'beforeinstallprompt',
expect.any(Function));
});
test('accepting install prompt', async () => {
const { asFragment, getByTestId } = render(
<InstallPrompt />
);
const promptEvent = new Event('beforeinstallprompt');
promptEvent.prompt = jest.fn();
promptEvent.userChoice = Promise.resolve();
const clickEvent = new MouseEvent('click', { bubbles: true });
jest.spyOn(clickEvent, 'preventDefault');
fireEvent(window, promptEvent);
expect(asFragment()).toMatchSnapshot();
fireEvent(getByTestId('install'), clickEvent);
// Allow async code to run
await new Promise(resolve => setTimeout(resolve));
expect(clickEvent.preventDefault).toHaveBeenCalled();
expect(promptEvent.prompt).toHaveBeenCalled();
expect(asFragment()).toMatchSnapshot();
});
test('rejecting install prompt', async () => {
const { asFragment, getByTestId } = render(
<InstallPrompt />
);
const promptEvent = new Event('beforeinstallprompt');
promptEvent.prompt = jest.fn();
promptEvent.userChoice = Promise.reject();
const clickEvent = new MouseEvent('click', { bubbles: true });
jest.spyOn(clickEvent, 'preventDefault');
fireEvent(window, promptEvent);
expect(asFragment()).toMatchSnapshot();
fireEvent(getByTestId('install'), clickEvent);
// Allow async code to run
await new Promise(resolve => setTimeout(resolve));
expect(clickEvent.preventDefault).toHaveBeenCalled();
expect(promptEvent.prompt).toHaveBeenCalled();
expect(asFragment()).toMatchSnapshot();
});
});