add unit test for short io call

packages/synapse-react-client/src/components/SharePageLinkButton/SharePageLinkButton.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+import { createWrapper } from '../../testutils/TestingLibraryUtils'
+import SharePageLinkButton, {
+  SharePageLinkButtonProps,
+} from './SharePageLinkButton'
+import { MOCK_SHORT_IO_URL } from '../../mocks/mockShortIo'
+import { server } from '../../mocks/msw/server'
+
+function renderComponent(props: SharePageLinkButtonProps) {
+  return render(<SharePageLinkButton {...props} />, {
+    wrapper: createWrapper(),
+  })
+}
+describe('SharePageLinkButton', () => {
+  beforeAll(() => server.listen())
+  afterEach(() => server.restoreHandlers())
+  afterAll(() => server.close())
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Replace clipboard.writeText with a mock
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: jest.fn().mockImplementation(() => Promise.resolve()),
+      },
+    })
+  })
+
+  it('Copies short.io response to clipboard', async () => {
+    renderComponent({ shortIoPublicApiKey: 'abc' })
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Share Page Link' }),
+    )
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+      MOCK_SHORT_IO_URL,
+    )
+  })
+})

packages/synapse-react-client/src/components/SharePageLinkButton/SharePageLinkButton.tsx

@@ -36,7 +36,6 @@ export const SharePageLinkButton: React.FunctionComponent<
             domain: domain,
           }),
         })
-
         if (!response.ok) {
           const responseText = await response.text()
           throw new Error(responseText)

packages/synapse-react-client/src/mocks/mockShortIo.ts

@@ -0,0 +1,12 @@
+export const MOCK_SHORT_IO_URL = 'https://short.io/abc123'
+export const mockShortIoResponse: any = (
+  originalURL: string,
+  domain: string,
+) => {
+  return {
+    id: '123456',
+    originalURL,
+    shortURL: MOCK_SHORT_IO_URL,
+    domain,
+  }
+}

packages/synapse-react-client/src/mocks/msw/handlers.ts

@@ -32,6 +32,7 @@ import { getResetTwoFactorAuthHandlers } from './handlers/resetTwoFactorAuthHand
 import { getMessageHandlers } from './handlers/messageHandlers'
 import { getFeatureFlagsOverride } from './handlers/featureFlagHandlers'
 import { getDoiHandler } from './handlers/doiHandlers'
+import { getShortIoHandlers } from './handlers/shortIoHandlers'
 
 // Simple utility type that just indicates that the response body could be an error like the Synapse backend may send.
 export type SynapseApiResponse<T> = T | SynapseError
@@ -75,6 +76,7 @@ const getHandlers = (backendOrigin: string, portalOrigin?: string) => [
   getFeatureFlagsOverride({ portalOrigin }),
   ...getHandlersForTableQuery(backendOrigin),
   ...getDoiHandler(backendOrigin),
+  ...getShortIoHandlers(),
 ]
 
 const handlers = getHandlers(

packages/synapse-react-client/src/mocks/msw/handlers/shortIoHandlers.ts

@@ -0,0 +1,12 @@
+import { rest } from 'msw'
+import { mockShortIoResponse } from '../../../mocks/mockShortIo'
+
+export const getShortIoHandlers = () => [
+  rest.post('https://api.short.io/links/public', async (req, res, ctx) => {
+    const body = await req.json()
+    return res(
+      ctx.status(200),
+      ctx.json(mockShortIoResponse(body.originalURL, body.domain)),
+    )
+  }),
+]