fix: missing wait for element in copy-to-clipboard-button.spec.tsx

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.spec.tsx

@@ -6,40 +6,36 @@
 import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
 import { CopyToClipboardButton } from './copy-to-clipboard-button'
 import { act, render, screen } from '@testing-library/react'
+import React from 'react'
 import * as uuidModule from 'uuid'
 
 jest.mock('uuid')
 
 describe('Copy to clipboard button', () => {
   const copyContent = 'Copy McCopy Content. Electric Copyloo'
-  const copyToClipboardButton = <CopyToClipboardButton content={copyContent} />
   const uuidMock = '35a35a31-c259-48c4-b75a-8da99859dcdb' // https://xkcd.com/221/
   const overlayId = `copied_${uuidMock}`
+  let originalClipboard: Clipboard
 
-  const mockClipboard = async (copyIsSuccessful: boolean, testFunction: () => Promise<void>) => {
+  beforeAll(async () => {
-    const originalClipboard = window.navigator.clipboard
+    await mockI18n()
-    const writeTextMock = jest.fn().mockImplementation(() => (copyIsSuccessful ? Promise.resolve() : Promise.reject()))
+    originalClipboard = window.navigator.clipboard
+    jest.spyOn(uuidModule, 'v4').mockReturnValue(uuidMock)
+  })
+
+  afterAll(() => {
     Object.assign(global.navigator, {
-      clipboard: {
+      clipboard: originalClipboard
-        writeText: writeTextMock
-      }
     })
-
+    jest.resetAllMocks()
-    try {
+    jest.resetModules()
-      await testFunction()
+  })
-      expect(writeTextMock).toHaveBeenCalledWith(copyContent)
-    } finally {
-      Object.assign(global.navigator, {
-        clipboard: originalClipboard
-      })
-    }
-  }
 
   const testButton = async (expectSuccess: boolean) => {
-    const view = render(copyToClipboardButton)
+    const view = render(<CopyToClipboardButton content={copyContent} />)
     expect(view.container).toMatchSnapshot()
     const button = await screen.findByTitle('renderer.highlightCode.copyCode')
-    await act<void>(() => {
+    act(() => {
       button.click()
     })
     const tooltip = await screen.findByRole('tooltip')
@@ -48,17 +44,35 @@ describe('Copy to clipboard button', () => {
     expect(view.container).toMatchSnapshot()
   }
 
-  beforeAll(async () => {
+  const mockClipboard = (copyIsSuccessful: boolean): jest.Mock => {
-    await mockI18n()
+    const writeTextToClipboardSpy = jest.fn(() =>
-    jest.spyOn(uuidModule, 'v4').mockReturnValue(uuidMock)
+      copyIsSuccessful ? Promise.resolve() : Promise.reject('mocked clipboard failed')
+    )
+    Object.assign(global.navigator, {
+      clipboard: {
+        writeText: writeTextToClipboardSpy
+      }
+    })
+    return writeTextToClipboardSpy
+  }
+
+  it('shows an success text if writing succeeded', async () => {
+    const writeTextToClipboardSpy = mockClipboard(true)
+    await testButton(true)
+    expect(writeTextToClipboardSpy).toHaveBeenCalledWith(copyContent)
   })
 
-  afterAll(() => {
+  it('shows an error text if writing failed', async () => {
-    jest.resetAllMocks()
+    const writeTextToClipboardSpy = mockClipboard(false)
-    jest.resetModules()
+    await testButton(false)
+    expect(writeTextToClipboardSpy).toHaveBeenCalledWith(copyContent)
   })
 
-  it('shows an success text if writing succeeded', () => mockClipboard(true, () => testButton(true)))
+  it("show an error text if clipboard api isn't available", async () => {
-  it('shows an error text if writing failed', () => mockClipboard(false, () => testButton(false)))
+    Object.assign(global.navigator, {
-  it("show an error text if clipboard api isn't available", () => testButton(false))
+      clipboard: undefined
+    })
+
+    await testButton(false)
+  })
 })