From f261976467163537487048d29c4eb31667fdd118 Mon Sep 17 00:00:00 2001 From: CynthiaKamau Date: Wed, 6 Nov 2024 14:39:35 +0300 Subject: [PATCH] (tests) O3-4098 Add tests for downloading a schema --- .../dashboard/dashboard.component.test.tsx | 98 ++++++++++++++++++- .../dashboard/dashboard.component.tsx | 54 +++++++--- 2 files changed, 136 insertions(+), 16 deletions(-) diff --git a/src/components/dashboard/dashboard.component.test.tsx b/src/components/dashboard/dashboard.component.test.tsx index 3f97840..3fa328c 100644 --- a/src/components/dashboard/dashboard.component.test.tsx +++ b/src/components/dashboard/dashboard.component.test.tsx @@ -1,18 +1,74 @@ import React from 'react'; import { render, screen, waitFor } from '@testing-library/react'; import '@testing-library/jest-dom'; -import { ContentPackagesList } from './dashboard.component'; -import { getAllPackagesFromLocalStorage } from '../../utils'; +import { ActionButtons, ContentPackagesList } from './dashboard.component'; +import { deletePackageFromLocalStorage, getAllPackagesFromLocalStorage } from '../../utils'; import { mockContentPackages } from '../../../__mocks__/content-packages.mock'; import userEvent from '@testing-library/user-event'; jest.mock('../../utils', () => ({ getAllPackagesFromLocalStorage: jest.fn(), + deletePackageFromLocalStorage: jest.fn(), })); const mockSetClinicalViews = jest.fn(); describe('DashboardComponent', () => { + // Mock setup + const setupMocks = () => { + const mocks = { + setClinicalViews: jest.fn(), + consoleSpy: jest.spyOn(console, 'error').mockImplementation(() => {}), + localStorageGetItem: jest.fn(), + mockUrl: 'blob:mock-url', + mockAnchor: document.createElement('a'), + mockClick: jest.fn(), + originalCreateObjectURL: URL.createObjectURL, + originalRevokeObjectURL: URL.revokeObjectURL, + originalCreateElement: document.createElement.bind(document), + }; + + // Setup localStorage mock + Object.defineProperty(window, 'localStorage', { + value: { + getItem: mocks.localStorageGetItem, + setItem: jest.fn(), + removeItem: jest.fn(), + clear: jest.fn(), + }, + writable: true, + }); + + // Setup URL mocks + URL.createObjectURL = jest.fn(() => mocks.mockUrl); + URL.revokeObjectURL = jest.fn(); + + // Setup anchor element mock + Object.defineProperties(mocks.mockAnchor, { + click: { value: mocks.mockClick, writable: true }, + href: { value: '', writable: true }, + download: { value: '', writable: true }, + }); + + // Setup document.createElement mock + document.createElement = jest.fn((tag) => { + if (tag === 'a') { + return mocks.mockAnchor; + } + return mocks.originalCreateElement(tag); + }); + + return mocks; + }; + + // Cleanup function + const cleanupMocks = (mocks: ReturnType) => { + URL.createObjectURL = mocks.originalCreateObjectURL; + URL.revokeObjectURL = mocks.originalRevokeObjectURL; + document.createElement = mocks.originalCreateElement; + mocks.consoleSpy.mockRestore(); + }; + beforeEach(() => { (getAllPackagesFromLocalStorage as jest.Mock).mockReturnValue(mockContentPackages); }); @@ -73,4 +129,42 @@ describe('DashboardComponent', () => { await userEvent.type(searchInput, 'Clinical View 1'); expect(searchInput).toHaveValue('Clinical View 1'); }); + + it('handles downloading the schema', async () => { + const mocks = setupMocks(); + + mocks.localStorageGetItem.mockImplementation(() => mockContentPackages[0]); + + render( + key} + clinicalViews={mockContentPackages} + setClinicalViews={mocks.setClinicalViews} + />, + ); + + const downloadButton = await screen.findByRole('button', { + name: /downloadSchema/i, + }); + + await userEvent.click(downloadButton); + + expect(mocks.localStorageGetItem).toHaveBeenCalled(); + expect(URL.createObjectURL).toHaveBeenCalledWith(expect.any(Blob)); + expect(mocks.mockClick).toHaveBeenCalled(); + + mocks.localStorageGetItem.mockReset(); + mocks.mockClick.mockReset(); + mocks.consoleSpy.mockReset(); + + mocks.localStorageGetItem.mockReturnValue(null); + + await userEvent.click(downloadButton); + const blobCall = (URL.createObjectURL as jest.Mock).mock.calls[0][0]; + expect(blobCall).toBeInstanceOf(Blob); + expect(blobCall.type).toBe('application/json;charset=utf-8'); + + expect(mocks.mockAnchor.href).toBe('blob:mock-url'); + cleanupMocks(mocks); + }); }); diff --git a/src/components/dashboard/dashboard.component.tsx b/src/components/dashboard/dashboard.component.tsx index e230683..cd42a0f 100644 --- a/src/components/dashboard/dashboard.component.tsx +++ b/src/components/dashboard/dashboard.component.tsx @@ -35,7 +35,14 @@ interface ActionButtonsProps { onDownload: (key: string) => void; } -function ActionButtons({ responsiveSize, clinicalViewKey, t, onDelete, onDownload, onEdit }: ActionButtonsProps) { +export function ActionButtons({ + responsiveSize, + clinicalViewKey, + t, + onDelete, + onDownload, + onEdit, +}: ActionButtonsProps) { const defaultEnterDelayInMs = 300; const launchDeleteClinicalViewsPackageModal = () => { @@ -145,16 +152,34 @@ export function ContentPackagesList({ t, clinicalViews, setClinicalViews }: Cont const { paginated, goTo, results, currentPage } = usePagination(filteredViews, pageSize); const handleDownload = (key) => { - const schema = localStorage.getItem(`packageJSON_${key}`); - if (schema) { - const blob = new Blob([schema], { type: 'application/json' }); - const url = URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = `${key}.json`; - a.click(); - } else { - console.error('No schema found to download.'); + let url; + let anchor; + try { + const schema = localStorage.getItem(key); + if (!schema) { + console.error('No schema found to download.'); + return; + } + + const blob = new Blob([schema], { + type: 'application/json;charset=utf-8', + }); + url = URL.createObjectURL(blob); + + anchor = document.createElement('a'); + anchor.href = url; + anchor.download = `${key}.json`; + document.body.appendChild(anchor); + anchor.click(); + } catch (error) { + console.error('Error downloading schema:', error); + } finally { + if (url) { + URL.revokeObjectURL(url); + } + if (anchor && anchor.parentNode) { + anchor.parentNode.removeChild(anchor); + } } }; @@ -196,7 +221,8 @@ export function ContentPackagesList({ t, clinicalViews, setClinicalViews }: Cont const tableRows = results.map((contentPackage) => { const clinicalViewName = getNavGroupTitle(contentPackage); const dashboardTitles = getDashboardTitles(contentPackage); - const key = Object.keys(contentPackage)[0]; + + const key = Object.keys(contentPackage)[1]; return { id: contentPackage.key, @@ -272,8 +298,8 @@ export function ContentPackagesList({ t, clinicalViews, setClinicalViews }: Cont - {rows.map((row) => ( - + {rows.map((row, key) => ( + {row.cells.map((cell) => ( {cell.value} ))}