test: test coverage for copy button and reponsive table

Author: shafin-deriv

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>

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();
+  });
 });

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');
+  });
+});