diff --git a/components/sharing/__tests__/sharing-links.test.tsx b/components/sharing/__tests__/sharing-links.test.tsx index 1022f33..15f46c7 100644 --- a/components/sharing/__tests__/sharing-links.test.tsx +++ b/components/sharing/__tests__/sharing-links.test.tsx @@ -13,7 +13,7 @@ import { PocketSharingButton, WhatsappSharingButton, NativeSharingButton, - // AllSharingButtons, + AllSharingButtons, } from '../sharing-links'; const testSharingData: SharingLinkWithMessageProps = { @@ -188,3 +188,48 @@ describe('Native Web Sharing Button', () => { expect(svg).not.toBeInTheDocument(); }); }); + +describe('All Sharing Links', () => { + let shareMock: jest.SpyInstance; + + beforeAll(() => { + // Create a spy on console (console.log in this case) and provide some mocked implementation + // In mocking global objects it's usually better than simple `jest.fn()` + // because you can `unmock` it in clean way doing `mockRestore` + shareMock = jest.fn().mockResolvedValue({}); + // eslint-disable-next-line @typescript-eslint/ban-ts-ignore + // @ts-ignore + jest.spyOn(window, 'navigator', 'get').mockImplementation(() => ({ + share: shareMock, + })); + }); + afterAll(() => { + // Restore mock after all tests are done, so it won't affect other test suites + jest.restoreAllMocks(); + }); + beforeEach(() => { + // Clear mock (all calls etc) after each test. + // It's needed when you're using console somewhere in the tests so you have clean mock each time + jest.clearAllMocks(); + }); + + test(`renders all Sharing Links, but doesn't render the Web Native Sharing Button when SSR'ing`, async () => { + const { getAllByText } = render(); + + const spans = getAllByText(new RegExp(socialShareLabel.replace(':platformName', ''))); + + expect(spans).toHaveLength(standardSharingLinks.length); + }); + + test(`renders all Sharing Links including the Web Native Sharing Button when in the browser`, async () => { + Object.defineProperty(process, 'browser', { + value: true, + }); + + const { getAllByText } = render(); + + const spans = getAllByText(new RegExp(socialShareLabel.replace(':platformName', ''))); + + expect(spans).toHaveLength(standardSharingLinks.length + 1); + }); +}); diff --git a/components/sharing/sharing-links.tsx b/components/sharing/sharing-links.tsx index b6d06e8..c0f4b2f 100644 --- a/components/sharing/sharing-links.tsx +++ b/components/sharing/sharing-links.tsx @@ -159,16 +159,14 @@ export const NativeSharingButton: React.FC = ({ className, }) => { const onNativeShareButtonClick = useCallback(async () => { - if (navigator.share) { - try { - await navigator.share({ - title: message, - text: message, - url: link, - }); - } catch (err) { - console.error('Error using Native Web Sharing\n\n', err); - } + try { + await (navigator.share as NavigatorShare)({ + title: message, + text: message, + url: link, + }); + } catch (err) { + console.error('Error using Native Web Sharing\n\n', err); } }, [link, message]);