Updating InstallPrompt to use hooks
This commit is contained in:
parent
f9b3d5dbd7
commit
18427f9fc6
@ -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>
|
||||
|
@ -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 />`;
|
||||
|
@ -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,24 +15,27 @@ class InstallPrompt extends React.PureComponent {
|
||||
// User cancelled install
|
||||
}
|
||||
|
||||
this.setState({ installPrompt: null });
|
||||
updateInstallPrompt(null);
|
||||
}, [installPrompt, updateInstallPrompt]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('beforeinstallprompt', updateInstallPrompt);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('beforeinstallprompt', updateInstallPrompt);
|
||||
};
|
||||
});
|
||||
|
||||
if (!installPrompt) {
|
||||
return null;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { installPrompt } = this.state;
|
||||
return <a href="#install"
|
||||
data-testid="install"
|
||||
onClick={ handleInstall }
|
||||
>
|
||||
<Trans>Add to Home Screen</Trans>
|
||||
</a>;
|
||||
};
|
||||
|
||||
if (!installPrompt) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <a href="#install"
|
||||
data-testid="install"
|
||||
onClick={ this.handleInstall }
|
||||
>
|
||||
<Trans>Add to Home Screen</Trans>
|
||||
</a>;
|
||||
}
|
||||
}
|
||||
|
||||
export { InstallPrompt };
|
||||
export default withTranslation()(InstallPrompt);
|
||||
export default InstallPrompt;
|
||||
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user