From b13b4922e00ae0f26a015c9181d85b5153497b9f Mon Sep 17 00:00:00 2001
From: Domino987 <domino987@gmail.com>
Date: Thu, 6 Jul 2023 20:25:36 +0200
Subject: [PATCH] add detail panel test

---
 __tests__/detailPanel.test.js | 86 +++++++++++++++++++++++++++++++++++
 package-lock.json             |  2 +-
 2 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 __tests__/detailPanel.test.js

diff --git a/__tests__/detailPanel.test.js b/__tests__/detailPanel.test.js
new file mode 100644
index 00000000..32629abd
--- /dev/null
+++ b/__tests__/detailPanel.test.js
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import {
+  act,
+  screen,
+  render,
+  waitForElementToBeRemoved,
+  within,
+  waitFor,
+  fireEvent
+} from '@testing-library/react';
+import MaterialTable from '../src';
+
+const lookup = { 1: 'One', 2: 'Two' };
+
+const columns = [
+  { title: 'Enum', field: 'enum', lookup },
+  { title: 'Name', field: 'id' }
+];
+
+const data = [{ id: 1, enum: 1 }];
+
+describe('Detailpanel render', () => {
+  test('It displays and hides the detail with function', async () => {
+    render(
+      <MaterialTable
+        data={data}
+        columns={columns}
+        detailPanel={({ rowData }) => {
+          return <div>Detail Panel Test</div>;
+        }}
+      />
+    );
+    screen.getByRole('cell', {
+      name: /one/i
+    });
+
+    const panelIsHidden = screen.queryByText(/Detail Panel Test/i);
+
+    expect(panelIsHidden).toBeNull();
+
+    const toggleButton = screen.getByRole('button', {
+      name: /detail panel visibility toggle/i
+    });
+
+    fireEvent.click(toggleButton);
+
+    screen.findByText(/Detail Panel Test/i);
+
+    fireEvent.click(toggleButton);
+
+    expect(screen.queryByText(/Detail Panel Test/i)).toBeNull();
+  });
+
+  test('It displays the detail as is array', async () => {
+    render(
+      <MaterialTable
+        data={data}
+        columns={columns}
+        detailPanel={[
+          {
+            tooltip: 'Show Name',
+            render: ({ rowData }) => {
+              return <div>Detail Panel Test</div>;
+            }
+          }
+        ]}
+      />
+    );
+    screen.getByRole('cell', {
+      name: /one/i
+    });
+    const toggleButton = screen.getByRole('button', {
+      name: /detail panel visibility toggle/i
+    });
+
+    fireEvent.click(toggleButton);
+
+    await waitFor(() => screen.findByText(/Detail Panel Test/i));
+
+    fireEvent.click(toggleButton);
+
+    await waitFor(() =>
+      expect(screen.queryByText(/Detail Panel Test/i)).toBeNull()
+    );
+  });
+});
diff --git a/package-lock.json b/package-lock.json
index 7737cb5f..51938aa8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@emotion/styled": "^11.10.4",
         "@hello-pangea/dnd": "^16.0.0",
         "@mui/icons-material": ">=5.10.6",
-        "@mui/material": ">=5.13.1",
+        "@mui/material": ">=5.11.12",
         "@mui/x-date-pickers": "^5.0.3",
         "classnames": "^2.3.2",
         "date-fns": "^2.29.3",