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]);