From b499b103337dc25c8dce41eedf3aa871132d9a3f Mon Sep 17 00:00:00 2001
From: amlannandy <amlannandy5@gmail.com>
Date: Sat, 7 Dec 2024 10:40:14 +0530
Subject: [PATCH] feat: add unit test

---
 .../ListOfDashboard/DashboardsList.tsx        | 116 +++++++++---------
 .../__tests__/DashboardListPage.test.tsx      |  25 +++-
 2 files changed, 83 insertions(+), 58 deletions(-)

diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index 14718a562bc2..254a12b1958f 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -521,63 +521,65 @@ function DashboardsList(): JSX.Element {
 							</div>
 
 							{action && (
-								<Popover
-									trigger="click"
-									content={
-										<div className="dashboard-action-content">
-											<section className="section-1">
-												<Button
-													type="text"
-													className="action-btn"
-													icon={<Expand size={12} />}
-													onClick={onClickHandler}
-												>
-													View
-												</Button>
-												<Button
-													type="text"
-													className="action-btn"
-													icon={<Link2 size={12} />}
-													onClick={(e): void => {
-														e.stopPropagation();
-														e.preventDefault();
-														setCopy(`${window.location.origin}${getLink()}`);
-													}}
-												>
-													Copy Link
-												</Button>
-												<Button
-													type="text"
-													className="action-btn"
-													icon={<FileJson size={12} />}
-													onClick={handleJsonExport}
-												>
-													Export JSON
-												</Button>
-											</section>
-											<section className="section-2">
-												<DeleteButton
-													name={dashboard.name}
-													id={dashboard.id}
-													isLocked={dashboard.isLocked}
-													createdBy={dashboard.createdBy}
-												/>
-											</section>
-										</div>
-									}
-									placement="bottomRight"
-									arrow={false}
-									rootClassName="dashboard-actions"
-								>
-									<EllipsisVertical
-										className="dashboard-action-icon"
-										size={14}
-										onClick={(e): void => {
-											e.stopPropagation();
-											e.preventDefault();
-										}}
-									/>
-								</Popover>
+								<div data-testid="dashboard-action-popover">
+									<Popover
+										trigger="click"
+										content={
+											<div className="dashboard-action-content">
+												<section className="section-1">
+													<Button
+														type="text"
+														className="action-btn"
+														icon={<Expand size={12} />}
+														onClick={onClickHandler}
+													>
+														View
+													</Button>
+													<Button
+														type="text"
+														className="action-btn"
+														icon={<Link2 size={12} />}
+														onClick={(e): void => {
+															e.stopPropagation();
+															e.preventDefault();
+															setCopy(`${window.location.origin}${getLink()}`);
+														}}
+													>
+														Copy Link
+													</Button>
+													<Button
+														type="text"
+														className="action-btn"
+														icon={<FileJson size={12} />}
+														onClick={handleJsonExport}
+													>
+														Export JSON
+													</Button>
+												</section>
+												<section className="section-2">
+													<DeleteButton
+														name={dashboard.name}
+														id={dashboard.id}
+														isLocked={dashboard.isLocked}
+														createdBy={dashboard.createdBy}
+													/>
+												</section>
+											</div>
+										}
+										placement="bottomRight"
+										arrow={false}
+										rootClassName="dashboard-actions"
+									>
+										<EllipsisVertical
+											className="dashboard-action-icon"
+											size={14}
+											onClick={(e): void => {
+												e.stopPropagation();
+												e.preventDefault();
+											}}
+										/>
+									</Popover>
+								</div>
 							)}
 						</div>
 						<div className="dashboard-details">
diff --git a/frontend/src/pages/DashboardsListPage/__tests__/DashboardListPage.test.tsx b/frontend/src/pages/DashboardsListPage/__tests__/DashboardListPage.test.tsx
index 98bd40ef6259..bcb166eeb021 100644
--- a/frontend/src/pages/DashboardsListPage/__tests__/DashboardListPage.test.tsx
+++ b/frontend/src/pages/DashboardsListPage/__tests__/DashboardListPage.test.tsx
@@ -1,7 +1,10 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import ROUTES from 'constants/routes';
 import DashboardsList from 'container/ListOfDashboard';
-import { dashboardEmptyState } from 'mocks-server/__mockdata__/dashboards';
+import {
+	dashboardEmptyState,
+	dashboardSuccessResponse,
+} from 'mocks-server/__mockdata__/dashboards';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
@@ -204,4 +207,24 @@ describe('dashboard list page', () => {
 			),
 		);
 	});
+
+	it('ensure that the popover actions on each list item renders list of options', async () => {
+		const { getByText, getAllByTestId } = render(
+			<MemoryRouter initialEntries={['/dashbords']}>
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
+			</MemoryRouter>,
+		);
+
+		await waitFor(() => {
+			const popovers = getAllByTestId('dashboard-action-popover');
+			expect(popovers).toHaveLength(dashboardSuccessResponse.data.length);
+			fireEvent.click([...popovers[0].children][0]);
+		});
+
+		expect(getByText('View')).toBeInTheDocument();
+		expect(getByText('Copy Link')).toBeInTheDocument();
+		expect(getByText('Export JSON')).toBeInTheDocument();
+	});
 });