From 6fb1ee93cd418f595476980a475f54f475698fc6 Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Thu, 16 May 2024 19:09:38 +0800
Subject: [PATCH] fix: fix dialog tests

---
 .../DropdownActions/DropdownActions.test.tsx       |  5 +++--
 src/components/Dialog/Dialog.test.tsx              | 14 ++++++++------
 src/components/Dialog/index.tsx                    |  8 +++-----
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/CollectionDigest/DropdownActions/DropdownActions.test.tsx b/src/components/CollectionDigest/DropdownActions/DropdownActions.test.tsx
index 3ec27ffb4b..0e455e5cd9 100644
--- a/src/components/CollectionDigest/DropdownActions/DropdownActions.test.tsx
+++ b/src/components/CollectionDigest/DropdownActions/DropdownActions.test.tsx
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
+import { TEST_ID } from '~/common/enums'
 import { render, screen, waitFor } from '~/common/utils/test'
 import { MOCK_COLLECTION } from '~/stories/mocks'
 
@@ -29,9 +30,9 @@ describe('<CollectionDigest/DropdownActions>', () => {
     })
     expect($editButton).toBeInTheDocument()
     $editButton.click()
-    const $editDialog = screen.getByRole('dialog', { name: 'Edit collection' })
+    const $editDialog = screen.getByTestId(TEST_ID.DIALOG_EDIT_COLLECTION)
     expect($editDialog).toBeInTheDocument()
-    screen.getByRole('button', { name: 'Close' }).click()
+    screen.getByRole('button', { name: 'Close', hidden: true }).click()
     await waitFor(() => {
       expect(
         screen.queryByRole('button', { name: 'Close' })
diff --git a/src/components/Dialog/Dialog.test.tsx b/src/components/Dialog/Dialog.test.tsx
index 95abb35af1..6194b90249 100644
--- a/src/components/Dialog/Dialog.test.tsx
+++ b/src/components/Dialog/Dialog.test.tsx
@@ -51,15 +51,17 @@ describe('<Dialog>', () => {
 
     // open dialog
     fireEvent.click(screen.getByRole('button', { name: 'Open' }))
-    expect(screen.getAllByText('Header')).toHaveLength(2)
-    expect(screen.getByText('Content')).toBeInTheDocument()
+    expect(screen.getAllByText('Header')[0]).toBeInTheDocument()
+    expect(screen.getAllByText('Content')[0]).toBeInTheDocument()
 
     // click confirm
-    fireEvent.click(screen.getByRole('button', { name: 'Confirm' }))
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Confirm', hidden: true })
+    )
     expect(onClickConfirm).toHaveBeenCalledTimes(1)
 
     // close dialog
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Close', hidden: true }))
     await waitFor(() => {
       expect(screen.queryByText('Content')).not.toBeInTheDocument()
     })
@@ -75,7 +77,7 @@ describe('<Dialog>', () => {
     )
 
     expect(screen.getAllByText('Header')).toHaveLength(2)
-    expect(screen.getByText('Content')).toBeInTheDocument()
+    expect(screen.getAllByText('Content')[0]).toBeInTheDocument()
 
     // click outside
     fireEvent.mouseDown(document.body)
@@ -95,7 +97,7 @@ describe('<Dialog>', () => {
   //   )
 
   //   expect(screen.getAllByText('Header')).toHaveLength(2)
-  //   expect(screen.getByText('Content')).toBeInTheDocument()
+  //   expect(screen.getAllByText('Content')[0]).toBeInTheDocument()
 
   //   // hit ESC
   //   fireEvent.keyDown(container, { key: 'Escape' })
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 0afbd04ab0..eb88a79ea2 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -52,7 +52,6 @@ const Container: React.FC<
   smBgColor,
   smUpBgColor,
   hidePaddingBottom,
-  testId,
   onDismiss,
   dismissOnClickOutside = false,
   dismissOnHandle = true,
@@ -98,7 +97,6 @@ const Container: React.FC<
 
   return (
     <div
-      {...(testId ? { 'data-test-id': testId } : {})}
       ref={node}
       className={containerClasses}
       style={style}
@@ -234,7 +232,7 @@ export const Dialog: React.ComponentType<
   RoundedButton: typeof RoundedButton
   Lazy: typeof Lazy
 } = (props) => {
-  const { isOpen } = props
+  const { isOpen, testId } = props
   const [mounted, setMounted] = useState(isOpen)
 
   useEffect(() => {
@@ -248,14 +246,14 @@ export const Dialog: React.ComponentType<
   }
 
   return (
-    <>
+    <div {...(testId ? { 'data-test-id': testId } : {})}>
       <Media at="sm">
         <SimpleDialog {...props} mounted={mounted} setMounted={setMounted} />
       </Media>
       <Media greaterThan="sm">
         <AnimatedDilaog {...props} mounted={mounted} setMounted={setMounted} />
       </Media>
-    </>
+    </div>
   )
 }