#RI-4840 - [Regression] Profiler logs download failure

Author: egor-zalenski

redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.spec.tsx

@@ -1,13 +1,19 @@
 import { cloneDeep } from 'lodash'
 import React from 'react'
+import { saveAs } from 'file-saver'
 import { monitorSelector, resetProfiler, stopMonitor } from 'uiSrc/slices/cli/monitor'
-import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
+import { act, cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 import MonitorLog from './MonitorLog'
 
 let store: typeof mockedStore
 let URLMock: jest.SpyInstance<object>
 const mockURLrevokeObjectURL = 123123
 
+jest.mock('file-saver', () => ({
+  ...jest.requireActual('file-saver'),
+  saveAs: jest.fn(),
+}))
+
 jest.mock('uiSrc/slices/cli/monitor', () => ({
   ...jest.requireActual('uiSrc/slices/cli/monitor'),
   monitorSelector: jest.fn().mockReturnValue({
@@ -22,6 +28,7 @@ jest.mock('uiSrc/slices/cli/monitor', () => ({
   }),
 }))
 
+global.Blob = function (content, options) { return ({ content, options }) }
 global.fetch = jest.fn(() =>
   Promise.resolve({
     text: () => Promise.resolve('123'),
@@ -54,7 +61,8 @@ describe('MonitorLog', () => {
     expect(store.getActions()).toEqual(expectedActions)
   })
 
-  it.skip('should call download a file', () => {
+  it('should call download a file', async () => {
+    const saveAsMock = jest.fn()
     const monitorSelectorMock = jest.fn().mockReturnValue({
       isSaveToFile: true,
       logFileId: 'logFileId',
@@ -65,11 +73,20 @@ describe('MonitorLog', () => {
         duration: 123,
       }
     });
-    (monitorSelector as jest.Mock).mockImplementation(monitorSelectorMock)
+
+    (monitorSelector as jest.Mock).mockImplementation(monitorSelectorMock);
+    (saveAs as jest.Mock).mockImplementation(() => saveAsMock)
 
     render(<MonitorLog />)
-    fireEvent.click(screen.getByTestId('download-log-btn'))
 
-    expect(URLMock).toBeCalled()
+    await act(() => {
+      fireEvent.click(screen.getByTestId('download-log-btn'))
+    })
+
+    expect(saveAs).toBeCalledWith(
+      { content: ['123'], options: { type: 'text/plain;charset=utf-8' } },
+      'filename.txt',
+    )
+    saveAs.mockRestore()
   })
 })

redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx

@@ -3,6 +3,8 @@ import { format, formatDuration, intervalToDuration } from 'date-fns'
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import AutoSizer from 'react-virtualized-auto-sizer'
+import { saveAs } from 'file-saver'
+
 import { ApiEndpoints } from 'uiSrc/constants'
 import { monitorSelector, resetProfiler, stopMonitor } from 'uiSrc/slices/cli/monitor'
 import { cutDurationText, getBaseApiUrl } from 'uiSrc/utils'
@@ -54,18 +56,9 @@ const MonitorLog = () => {
     )
 
     const contentDisposition = response.headers.get('Content-Disposition') || ''
+    const file = new Blob([await response.text()], { type: 'text/plain;charset=utf-8' })
 
-    downloadFile(await response.text(), contentDisposition.split('"')?.[1])
-  }
-
-  const downloadFile = (content: string, fileName: string) => {
-    const link = document.createElement('a')
-    const file = new Blob([content], { type: 'text/plain' })
-    link.href = URL.createObjectURL(file)
-    link.download = fileName
-    link.click()
-
-    URL.revokeObjectURL(link.href)
+    saveAs(file, contentDisposition.split('"')?.[1])
   }
 
   return (