1import { afterEach, describe, expect, it } from 'vitest'
2import { act, cleanup, render, screen } from '@testing-library/react'
3import user from "@testing-library/user-event"
4import { EntityTable } from '..'
5import { fetchMockApi } from './fetch-entity.mock'
6import { mockColumns } from './columns.mock'
7import { QueryClientProvider } from '@tanstack/react-query'
8import { queryClient } from '@marzneshin/utils'
9import '@testing-library/jest-dom'
10import {
11 MockDeleteConfirmationDialog,
12 MockDialog,
13 MockSettingsDialog
14} from './dialogs.mock'
15
16
17
18describe("Entity Table", () => {
19 afterEach(() => {
20 cleanup()
21 })
22
23 it('Renders Successfuly', () => {
24 const entityTable = render(
25 <QueryClientProvider client={queryClient}>
26 <EntityTable
27 fetchEntity={fetchMockApi}
28 MutationDialog={MockDialog}
29 DeleteConfirmationDialog={MockDeleteConfirmationDialog}
30 SettingsDialog={MockSettingsDialog}
31 columnsFn={mockColumns}
32 filteredColumn="name"
33 entityKey="users"
34 />
35 </QueryClientProvider>
36 )
37
38 expect(entityTable).toBeTruthy()
39 })
40
41 it('Mutation Dialog Invoked for Entity Creation when clicked on Create button', async () => {
42 const entityTable = render(
43 <QueryClientProvider client={queryClient}>
44 <EntityTable
45 fetchEntity={fetchMockApi}
46 MutationDialog={MockDialog}
47 DeleteConfirmationDialog={MockDeleteConfirmationDialog}
48 SettingsDialog={MockSettingsDialog}
49 columnsFn={mockColumns}
50 filteredColumn="name"
51 entityKey="users"
52 />
53 </QueryClientProvider>
54 )
55 const createBtn = await entityTable.findByLabelText('create-users')
56 await user.click(createBtn)
57
58 const createDialog = await screen.findByTestId("create-mutation-dialog")
59 expect(createDialog).toBeTruthy()
60 expect(createDialog).toBeInTheDocument();
61
62 })
63
64 it('Mutation Dialog Invoked for Entity Edition when clicked on Edit button', async () => {
65 const entityTable = render(
66 <QueryClientProvider client={queryClient}>
67 <EntityTable
68 fetchEntity={fetchMockApi}
69 MutationDialog={MockDialog}
70 DeleteConfirmationDialog={MockDeleteConfirmationDialog}
71 SettingsDialog={MockSettingsDialog}
72 columnsFn={mockColumns}
73 filteredColumn="name"
74 entityKey="users"
75 />
76 </QueryClientProvider>
77 )
78 const editBtn = await entityTable.findByRole('button', { name: 'Open menu' });
79 await act(async () => await user.click(editBtn))
80
81 const menuItem = await screen.findByRole('menuitem', { name: 'edit' });
82 await act(async () => await user.click(menuItem));
83
84 const editDialog = await screen.findByTestId("edit-mutation-dialog")
85 expect(editDialog).toBeTruthy()
86 expect(editDialog).toBeInTheDocument();
87
88 })
89 it('Settings Dialog Invoked for to observe related data to the entity when clicked on row of the entity on table', async () => {
90 const entityTable = render(
91 <QueryClientProvider client={queryClient}>
92 <EntityTable
93 fetchEntity={fetchMockApi}
94 MutationDialog={MockDialog}
95 DeleteConfirmationDialog={MockDeleteConfirmationDialog}
96 SettingsDialog={MockSettingsDialog}
97 columnsFn={mockColumns}
98 filteredColumn="name"
99 entityKey="users"
100 />
101 </QueryClientProvider>
102 )
103
104 const openBtn = await entityTable.findByRole('button', { name: 'Open menu' });
105 await act(async () => await user.click(openBtn))
106
107 const menuItem = await screen.findByRole('menuitem', { name: 'open' });
108 await act(async () => await user.click(menuItem));
109
110 const settingsDialog = await screen.findByTestId("settings-dialog")
111 expect(settingsDialog).toBeTruthy()
112 expect(settingsDialog).toBeInTheDocument();
113 })
114
115 it('Delete Confirmation Dialog Invoked for confirming the deletion of chosen entity from action list drop down by clicking on Delete button', async () => {
116 const entityTable = render(
117 <QueryClientProvider client={queryClient}>
118 <EntityTable
119 fetchEntity={fetchMockApi}
120 MutationDialog={MockDialog}
121 DeleteConfirmationDialog={MockDeleteConfirmationDialog}
122 SettingsDialog={MockSettingsDialog}
123 columnsFn={mockColumns}
124 filteredColumn="name"
125 entityKey="users"
126 />
127 </QueryClientProvider>
128 )
129
130 const deleteBtn = await entityTable.findByRole('button', { name: 'Open menu' });
131 await act(async () => await user.click(deleteBtn))
132
133 const menuItem = await screen.findByRole('menuitem', { name: 'delete' });
134 await act(async () => await user.click(menuItem));
135
136 const deleteConfirmationDialog = await screen.findByTestId("delete-confirmation-dialog")
137 expect(deleteConfirmationDialog).toBeTruthy()
138 expect(deleteConfirmationDialog).toBeInTheDocument();
139 })
140
141 describe('Entity Table Pagination', () => {
142 it('Paginate entities', () => { })
143 })
144})