fix(modal-close): some modal close unexpectedly clicking on the overlay

src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx

@@ -55,7 +55,7 @@ export const BriefDescription: FC<Props> = ({ trend, onClose, selectTrending })
   }, [handleClose])
 
   return (
-    <BaseModal id="briefDescription" kind="regular" noWrap onClose={handleClose}>
+    <BaseModal id="briefDescription" kind="regular" noWrap onClose={handleClose} preventOutsideClose>
       {trend.audio_EN ? (
         <>
           <Flex direction="row" justify="flex-start" m={20}>

src/components/Modal/index.tsx

@@ -132,6 +132,7 @@ export const BaseModal = ({
     <>
       <Bg
         align="center"
+        data-testid="modal-overlay"
         hideBg={hideBg}
         justify="center"
         onClick={(e) => {

src/components/SettingsModal/SettingsView/GraphBlueprint/__tests__/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { GraphBlueprint } from '../index'
 
@@ -15,8 +15,10 @@ describe('GraphBlueprint', () => {
   it('should display only one Custom node', async () => {
     render(<GraphBlueprint />)
 
-    const customNodes = await screen.findAllByText('Custom')
+    waitFor(async () => {
+      const customNodes = await screen.findAllByText('Custom')
 
-    expect(customNodes).toHaveLength(1)
+      expect(customNodes).toHaveLength(1)
+    })
   })
 })

src/components/SettingsModal/SettingsView/index.tsx

@@ -75,7 +75,7 @@ export const SettingsView: React.FC<Props> = ({ onClose }) => {
   ]
 
   return (
-    <Wrapper direction="column">
+    <Wrapper data-testid="settings-modal" direction="column">
       <SettingsHeader>
         <StyledTabs aria-label="settings tabs" onChange={handleChange} value={value}>
           {tabs.map((tab, index) => (

src/components/SettingsModal/__tests__/index.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable padding-line-between-statements */
+import '@testing-library/jest-dom'
+import { fireEvent, render } from '@testing-library/react'
+import * as modalStore from '../../../stores/useModalStore'
+import { SettingsModal } from '../index'
+
+jest.mock('../../../stores/useModalStore', () => ({
+  useModalStore: jest.fn(),
+  useModal: jest.fn().mockImplementation((id) => ({
+    close: jest.fn(),
+    open: jest.fn(),
+    visible: id === 'settings',
+  })),
+  useSomeModalIsOpen: jest.fn(),
+}))
+
+describe('SettingsModal', () => {
+  it('Settings Modal does not close on overlay click', () => {
+    const { getByTestId } = render(<SettingsModal />)
+
+    const overlay = getByTestId('modal-overlay')
+
+    fireEvent.click(overlay)
+
+    // Check Settings modal is still open
+    const modalContent = getByTestId('settings-modal')
+    expect(modalContent).toBeInTheDocument()
+
+    // Check close function was not called
+    const { close } = modalStore.useModal('settings')
+
+    expect(close).not.toHaveBeenCalled()
+  })
+})

src/components/SettingsModal/index.tsx

@@ -7,7 +7,7 @@ export const SettingsModal = () => {
   const { visible } = useModal('addItem')
 
   return visible ? null : (
-    <BaseModal background="BG1" id="settings" noWrap onClose={close}>
+    <BaseModal background="BG1" id="settings" noWrap onClose={close} preventOutsideClose>
       <SettingsView onClose={close} />
     </BaseModal>
   )

src/components/SourcesTableModal/SourcesView/index.tsx

@@ -76,7 +76,7 @@ export const SourcesView = () => {
   })
 
   return (
-    <Wrapper direction="column">
+    <Wrapper data-testid="sources-table" direction="column">
       <StyledTabs aria-label="sources tabs" onChange={handleChange} value={value}>
         {tabs.map((tab, index) => (
           <StyledTab key={tab.label} color={colors.white} disableRipple label={tab.label} {...a11yProps(index)} />

src/components/SourcesTableModal/__tests__/index.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable padding-line-between-statements */
+import '@testing-library/jest-dom'
+import { fireEvent, render } from '@testing-library/react'
+import * as modalStore from '~/stores/useModalStore'
+import { SourcesTableModal } from '../index'
+
+jest.mock('~/stores/useModalStore', () => ({
+    useModalStore: jest.fn(),
+    useModal: jest.fn().mockImplementation((id) => ({
+        close: jest.fn(),
+        open: jest.fn(),
+        visible: id === 'sourcesTable',
+    })),
+    useSomeModalIsOpen: jest.fn(),
+}))
+
+describe('SourcesTable Modal', () => {
+    it('SourcesTable Modal does not close on overlay click', () => {
+        const { getByTestId } = render(<SourcesTableModal />)
+
+        const overlay = getByTestId('modal-overlay')
+
+        fireEvent.click(overlay)
+
+        // Check SourcesTable modal is still open
+        const modalContent = getByTestId('sources-table')
+        expect(modalContent).toBeInTheDocument()
+
+        // Check close function was not called
+        const { close } = modalStore.useModal('sourcesTable')
+
+        expect(close).not.toHaveBeenCalled()
+    })
+})

src/components/SourcesTableModal/index.tsx

@@ -7,7 +7,7 @@ export const SourcesTableModal = () => {
   const { visible } = useModal('addContent')
 
   return visible ? null : (
-    <BaseModal background="BG1" id="sourcesTable" kind="large" noWrap onClose={close}>
+    <BaseModal background="BG1" id="sourcesTable" kind="large" noWrap onClose={close} preventOutsideClose>
       <SourcesView />
     </BaseModal>
   )