From a067c7459b303c66f3bd6c7214d1426796edc08f Mon Sep 17 00:00:00 2001
From: Yaroslav Chuiko <32570823+YaroslavChuiko@users.noreply.github.com>
Date: Thu, 3 Oct 2024 21:37:15 +0300
Subject: [PATCH] Bound confirm on resource delete (#2568)

* bound confirm on resource delete

* increased tests coverage

* fexed tests
---
 .../my-resources-table/MyResourcesTable.tsx   |  26 ++++-
 .../enhanced-table/enhancedTable.interface.ts |   2 +
 .../my-resources/MyResourcesTable.spec.jsx    | 102 ++++++++++++++++++
 3 files changed, 126 insertions(+), 4 deletions(-)
 create mode 100644 tests/unit/containers/my-resources/MyResourcesTable.spec.jsx

diff --git a/src/containers/my-resources/my-resources-table/MyResourcesTable.tsx b/src/containers/my-resources/my-resources-table/MyResourcesTable.tsx
index c399ee41a..74461948e 100644
--- a/src/containers/my-resources/my-resources-table/MyResourcesTable.tsx
+++ b/src/containers/my-resources/my-resources-table/MyResourcesTable.tsx
@@ -5,6 +5,7 @@ import { PaginationProps } from '@mui/material'
 import { useAppDispatch } from '~/hooks/use-redux'
 import useAxios from '~/hooks/use-axios'
 import useConfirm from '~/hooks/use-confirm'
+import { useModalContext } from '~/context/modal-context'
 import AppPagination from '~/components/app-pagination/AppPagination'
 import EnhancedTable, {
   EnhancedTableProps
@@ -19,6 +20,7 @@ import {
   ResourcesTabsEnum
 } from '~/types'
 import { roundedBorderTable } from '~/containers/my-cooperations/cooperations-container/CooperationContainer.styles'
+import ChangeResourceConfirmModal from '~/containers/change-resource-confirm-modal/ChangeResourceConfirmModal'
 import { openAlert } from '~/redux/features/snackbarSlice'
 import { getErrorKey } from '~/utils/get-error-key'
 
@@ -47,6 +49,7 @@ const MyResourcesTable = <T extends TableItem>({
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
   const { openDialog } = useConfirm()
+  const { openModal } = useModalContext()
 
   const { page, onChange } = pagination
   const { response, getData } = data
@@ -86,10 +89,25 @@ const MyResourcesTable = <T extends TableItem>({
   }
 
   const onDelete = (id: string) => {
-    openDialog({
-      message: 'myResourcesPage.confirmDeletionMessage',
-      sendConfirm: (isConfirmed: boolean) => void handleDelete(id, isConfirmed),
-      title: `myResourcesPage.${resource}.confirmDeletionTitle`
+    const currentResource = response.items.find((item) => item._id === id)
+
+    const handleConfirm = () => {
+      openDialog({
+        message: 'myResourcesPage.confirmDeletionMessage',
+        sendConfirm: (isConfirmed: boolean) =>
+          void handleDelete(id, isConfirmed),
+        title: `myResourcesPage.${resource}.confirmDeletionTitle`
+      })
+    }
+
+    openModal({
+      component: (
+        <ChangeResourceConfirmModal
+          onConfirm={handleConfirm}
+          resourceId={id}
+          title={currentResource?.title ?? currentResource?.fileName}
+        />
+      )
     })
   }
 
diff --git a/src/types/components/enhanced-table/enhancedTable.interface.ts b/src/types/components/enhanced-table/enhancedTable.interface.ts
index 526879ea1..06dac0ece 100644
--- a/src/types/components/enhanced-table/enhancedTable.interface.ts
+++ b/src/types/components/enhanced-table/enhancedTable.interface.ts
@@ -20,6 +20,8 @@ export interface TableRowAction {
 
 export interface TableItem {
   _id: string
+  title?: string
+  fileName?: string
 }
 
 export interface TableSelect<I> {
diff --git a/tests/unit/containers/my-resources/MyResourcesTable.spec.jsx b/tests/unit/containers/my-resources/MyResourcesTable.spec.jsx
new file mode 100644
index 000000000..3409efed9
--- /dev/null
+++ b/tests/unit/containers/my-resources/MyResourcesTable.spec.jsx
@@ -0,0 +1,102 @@
+import { fireEvent, screen } from '@testing-library/react'
+
+import MyResourcesTable from '~/containers/my-resources/my-resources-table/MyResourcesTable'
+
+import { renderWithProviders } from '~tests/test-utils'
+
+vi.mock('~/components/enhanced-table/EnhancedTable', () => ({
+  default: ({ rowActions }) => (
+    <div data-testid='table'>
+      {rowActions.map(({ label, func }) => (
+        <button data-testid={label} key={label} onClick={func}>
+          {label}
+        </button>
+      ))}
+    </div>
+  )
+}))
+
+vi.mock('~/components/app-pagination/AppPagination', () => ({
+  default: () => <div data-testid='pagination' />
+}))
+
+vi.mock(
+  '~/containers/change-resource-confirm-modal/ChangeResourceConfirmModal',
+  () => ({
+    default: () => <div data-testid='confirmModal' />
+  })
+)
+
+const lessonMock = {
+  _id: '64e49ce305b3353b2ae6309e',
+  author: '648afee884936e09a37deaaa',
+  title: 'eew',
+  description: 'dsdfd',
+  attachments: [],
+  createdAt: '2023-08-22T11:32:51.995Z',
+  updatedAt: '2023-08-22T11:32:51.995Z'
+}
+
+const responseItemsMock = Array(10)
+  .fill()
+  .map((_, index) => ({
+    ...lessonMock,
+    _id: `${index}`,
+    title: index + lessonMock.title
+  }))
+
+const props = {
+  resource: 'lessons',
+  pagination: {
+    page: 1,
+    onChange: vi.fn()
+  },
+  data: {
+    response: {
+      items: responseItemsMock,
+      count: 10
+    },
+    getData: vi.fn()
+  },
+  actions: {
+    onEdit: vi.fn(),
+    onDuplicate: vi.fn()
+  },
+  services: {
+    deleteService: vi.fn()
+  }
+}
+
+describe('MyResourcesTable test', () => {
+  beforeEach(async () => {
+    renderWithProviders(<MyResourcesTable {...props} />)
+  })
+
+  it('should render table and pagination', () => {
+    const table = screen.getByTestId('table')
+    const pagination = screen.getByTestId('pagination')
+
+    expect(table).toBeInTheDocument()
+    expect(pagination).toBeInTheDocument()
+  })
+
+  it('should render table action buttons', async () => {
+    const editButton = await screen.findByTestId('common.edit')
+    const deleteButton = await screen.findByText('common.delete')
+    const duplicateButton = await screen.findByText('common.duplicate')
+
+    expect(editButton).toBeInTheDocument()
+    expect(deleteButton).toBeInTheDocument()
+    expect(duplicateButton).toBeInTheDocument()
+  })
+
+  it('should run onDelete action', async () => {
+    const deleteButton = await screen.findByText('common.delete')
+
+    fireEvent.click(deleteButton)
+
+    const modal = await screen.findByTestId('confirmModal')
+
+    expect(modal).toBeInTheDocument()
+  })
+})