From 121f3d1aa552a93b996ba34ba2ef4a086b77b1ef Mon Sep 17 00:00:00 2001
From: shafin-deriv <shafin@regentmarkets.com>
Date: Wed, 17 Apr 2024 14:36:29 +0800
Subject: [PATCH] test: test coverage for copy button and reponsive table

---
 src/components/CustomAccordion/index.tsx      |  7 ++-
 .../AppsTable/__tests__/apps-table.test.tsx   | 57 ++++++++++++++++---
 .../Table/__tests__/copy-text.cell.test.tsx   | 39 +++++++++++++
 3 files changed, 95 insertions(+), 8 deletions(-)
 create mode 100644 src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx

diff --git a/src/components/CustomAccordion/index.tsx b/src/components/CustomAccordion/index.tsx
index 4e134018e..6a5b2b548 100644
--- a/src/components/CustomAccordion/index.tsx
+++ b/src/components/CustomAccordion/index.tsx
@@ -23,7 +23,12 @@ const AccordionContent: React.FC = ({ children }) => (
 );
 
 const CustomAccordion: React.FC<TCustomAccordionProps> = ({ items }) => (
-  <Accordion.Root className='accordion_root' type='single' defaultValue='item-1' collapsible>
+  <Accordion.Root
+    data-testid='dt_accordion_root'
+    className='accordion_root'
+    type='single'
+    collapsible
+  >
     {items.map((item) => (
       <Accordion.Item className='accordion_root__item' key={item.header} value={item.header}>
         <AccordionTrigger>{item.header}</AccordionTrigger>
diff --git a/src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx b/src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx
index 54b9af511..1a8e4fa6e 100644
--- a/src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx
+++ b/src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx
@@ -1,15 +1,25 @@
 import { ApplicationObject } from '@deriv/api-types';
 import useAuthContext from '@site/src/hooks/useAuthContext';
-import { render, screen, cleanup, within } from '@site/src/test-utils';
+import { render, screen, within } from '@site/src/test-utils';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import AppsTable from '..';
+import useDeviceType from '@site/src/hooks/useDeviceType';
+import useAppManager from '@site/src/hooks/useAppManager';
 
 jest.mock('@site/src/hooks/useAuthContext');
 const mockUseAuthContext = useAuthContext as jest.MockedFunction<
   () => Partial<ReturnType<typeof useAuthContext>>
 >;
 
+jest.mock('@site/src/hooks/useDeviceType');
+const mockDeviceType = useDeviceType as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useDeviceType>>
+>;
+mockDeviceType.mockImplementation(() => ({
+  deviceType: 'desktop',
+}));
+
 mockUseAuthContext.mockImplementation(() => ({
   is_authorized: true,
   currentLoginAccount: {
@@ -19,6 +29,18 @@ mockUseAuthContext.mockImplementation(() => ({
   },
 }));
 
+jest.mock('@site/src/hooks/useAppManager');
+const mockUseAppManager = useAppManager as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useAppManager>>
+>;
+const mockUpdateCurrentTab = jest.fn();
+mockUseAppManager.mockImplementation(() => ({
+  getApps: jest.fn(),
+  apps: undefined,
+  tokens: undefined,
+  updateCurrentTab: mockUpdateCurrentTab,
+}));
+
 const fakeApplications: ApplicationObject[] = [
   {
     active: 1,
@@ -51,15 +73,12 @@ const fakeApplications: ApplicationObject[] = [
 ];
 
 describe('Apps Table', () => {
-  beforeEach(() => {
+  const renderAppTable = () => {
     render(<AppsTable apps={fakeApplications} />);
-  });
-
-  afterEach(() => {
-    cleanup();
-  });
+  };
 
   it('Should render all applications properly', () => {
+    renderAppTable();
     const rows = screen.getAllByRole('row');
     expect(rows.length).toBe(3);
   });
@@ -139,4 +158,28 @@ describe('Apps Table', () => {
     const updateDialogTitle = await screen.findByText('Update App');
     expect(updateDialogTitle).toBeInTheDocument();
   });
+
+  it('Should render responsive view properly', () => {
+    mockDeviceType.mockImplementation(() => ({
+      deviceType: 'mobile',
+    }));
+    renderAppTable();
+    const accordion = screen.getAllByTestId('dt_accordion_root');
+    expect(accordion.length).toBe(1);
+  });
+
+  it('Should update current tab on clicking Register new application button', async () => {
+    renderAppTable();
+    const registerButton = screen.getByText('Register new application');
+    await userEvent.click(registerButton);
+    expect(mockUpdateCurrentTab).toBeCalled();
+  });
+
+  it('Should open first accordion on item click', async () => {
+    renderAppTable();
+    const item = screen.getByText('first app');
+    await userEvent.click(item);
+    const content = screen.getByText('11111');
+    expect(content).toBeInTheDocument();
+  });
 });
diff --git a/src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx b/src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx
new file mode 100644
index 000000000..3473cdd56
--- /dev/null
+++ b/src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@site/src/test-utils';
+import CopyTextCell from '../copy-text.cell';
+import userEvent from '@testing-library/user-event';
+
+describe('CopyTextCell', () => {
+  beforeAll(() => {
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: jest.fn(),
+      },
+    });
+  });
+
+  it('Should render the copy button', () => {
+    render(
+      <CopyTextCell
+        cell={{
+          value: '1234',
+        }}
+      />,
+    );
+    const label = screen.getByText(/1234/i);
+    expect(label).toBeInTheDocument();
+  });
+
+  it('Should copy text in the clipboard', async () => {
+    render(
+      <CopyTextCell
+        cell={{
+          value: '1234',
+        }}
+      />,
+    );
+    const label = screen.getByText(/1234/i);
+    await userEvent.click(label);
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('1234');
+  });
+});