added some unit tests

redisinsight/ui/src/components/virtual-grid/tests/utils.spec.ts

@@ -0,0 +1,17 @@
+import { getColumnWidth } from '../utils'
+
+const getColumnWidthTests: any[] = [
+  [0, 500, [{ maxWidth: 70, minWidth: 50 }], 50],
+  [1, 500, [{ maxWidth: 70, minWidth: 50 }, { maxWidth: 170, minWidth: 20 }], 20],
+  [0, 500, [{ maxWidth: 470, minWidth: 450 }, { maxWidth: 170, minWidth: 20 }], 450],
+]
+
+const minColumnWidth = 10
+
+describe('getColumnWidth', () => {
+  it.each(getColumnWidthTests)('for input: %s (i), %s (width), %s (columns) should be output: %s',
+    (i, width, columns, expected) => {
+      const result = getColumnWidth(i, width, columns, minColumnWidth)
+      expect(result).toBe(expected)
+    })
+})

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.tsx

@@ -21,7 +21,7 @@ import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { IFetchKeyArgs } from 'uiSrc/constants/prop-types/keys'
 import { resetStringValue, stringDataSelector, stringSelector } from 'uiSrc/slices/browser/string'
 import { isFormatEditable, isFullStringLoaded } from 'uiSrc/utils'
-import { StringDetailsTable } from './string-details-table'
+import { StringDetailsValue } from './string-details-value'
 import { EditItemAction } from '../key-details-actions'
 
 export interface Props extends KeyDetailsHeaderProps {}
@@ -77,7 +77,7 @@ const StringDetails = (props: Props) => {
       <div className="key-details-body" key="key-details-body">
         {!loading && (
           <div className="flex-column" style={{ flex: '1', height: '100%' }}>
-            <StringDetailsTable
+            <StringDetailsValue
               isEditItem={editItem}
               setIsEdit={(isEdit: boolean) => {
                 setEditItem(isEdit)

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.spec.tsx → redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/StringDetailsValue.spec.tsx

@@ -16,7 +16,7 @@ import {
 } from 'uiSrc/utils/tests/decompressors'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { downloadFile } from 'uiSrc/utils/dom/downloadFile'
-import { StringDetailsTable, Props } from './StringDetailsTable'
+import { StringDetailsValue, Props } from './StringDetailsValue'
 
 const STRING_VALUE = 'string-value'
 const STRING_VALUE_SPACE = 'string value'
@@ -70,11 +70,11 @@ jest.mock('react-redux', () => ({
   useDispatch: () => jest.fn().mockReturnValue(() => jest.fn()),
 }))
 
-describe('StringDetailsTable', () => {
+describe('StringDetailsValue', () => {
   it('should render', () => {
     expect(
       render(
-        <StringDetailsTable
+        <StringDetailsValue
           {...instance(mockedProps)}
         />
       )
@@ -83,7 +83,7 @@ describe('StringDetailsTable', () => {
 
   it('should render textarea if edit mode', () => {
     render(
-      <StringDetailsTable
+      <StringDetailsValue
         {...instance(mockedProps)}
         isEditItem
         setIsEdit={jest.fn()}
@@ -95,7 +95,7 @@ describe('StringDetailsTable', () => {
 
   it('should update string value', () => {
     render(
-      <StringDetailsTable
+      <StringDetailsValue
         {...instance(mockedProps)}
         isEditItem
         setIsEdit={jest.fn()}
@@ -111,7 +111,7 @@ describe('StringDetailsTable', () => {
 
   it('should stay empty string after cancel', async () => {
     render(
-      <StringDetailsTable
+      <StringDetailsValue
         {...instance(mockedProps)}
         isEditItem
         setIsEdit={jest.fn()}
@@ -132,7 +132,7 @@ describe('StringDetailsTable', () => {
 
   it('should update value after apply', () => {
     render(
-      <StringDetailsTable
+      <StringDetailsValue
         {...instance(mockedProps)}
         isEditItem
         setIsEdit={jest.fn()}
@@ -155,7 +155,7 @@ describe('StringDetailsTable', () => {
     stringDataSelector.mockImplementation(stringDataSelectorMock)
 
     render(
-      <StringDetailsTable
+      <StringDetailsValue
         {...instance(mockedProps)}
       />
     )
@@ -173,7 +173,7 @@ describe('StringDetailsTable', () => {
     stringDataSelector.mockImplementation(stringDataSelectorMock)
 
     render(
-      <StringDetailsTable
+      <StringDetailsValue
         {...instance(mockedProps)}
         onRefresh={onRefresh}
       />
@@ -197,7 +197,7 @@ describe('StringDetailsTable', () => {
     stringDataSelector.mockImplementation(stringDataSelectorMock)
 
     render(
-      <StringDetailsTable
+      <StringDetailsValue
         {...instance(mockedProps)}
       />
     )
@@ -211,7 +211,7 @@ describe('StringDetailsTable', () => {
     stringDataSelector.mockImplementation(stringDataSelectorMock)
 
     render(
-      <StringDetailsTable
+      <StringDetailsValue
         {...instance(mockedProps)}
       />
     )
@@ -225,7 +225,7 @@ describe('StringDetailsTable', () => {
     stringDataSelector.mockImplementation(stringDataSelectorMock)
 
     render(
-      <StringDetailsTable
+      <StringDetailsValue
         {...instance(mockedProps)}
       />
     )
@@ -253,7 +253,7 @@ describe('StringDetailsTable', () => {
       }))
 
       render(
-        <StringDetailsTable
+        <StringDetailsValue
           {...instance(mockedProps)}
           isEditItem
           setIsEdit={jest.fn()}
@@ -275,7 +275,7 @@ describe('StringDetailsTable', () => {
       }))
 
       render(
-        <StringDetailsTable
+        <StringDetailsValue
           {...instance(mockedProps)}
           isEditItem
           setIsEdit={jest.fn()}

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx → redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/StringDetailsValue.tsx

@@ -61,7 +61,7 @@ export interface Props {
   onRefresh: (key: RedisResponseBuffer, type: KeyTypes | ModulesKeyTypes, args: IFetchKeyArgs) => void;
 }
 
-const StringDetailsTable = (props: Props) => {
+const StringDetailsValue = (props: Props) => {
   const { isEditItem, setIsEdit, onRefresh } = props
 
   const { compressor = null } = useSelector(connectedInstanceSelector)
@@ -291,4 +291,4 @@ const StringDetailsTable = (props: Props) => {
   )
 }
 
-export { StringDetailsTable }
+export { StringDetailsValue }

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/index.ts

@@ -0,0 +1 @@
+export { StringDetailsValue } from './StringDetailsValue'

redisinsight/ui/src/utils/monitorUtils.ts

@@ -1,4 +1,7 @@
 import { format } from 'date-fns'
+import { isFinite } from 'lodash'
 
-export const getFormatTime = (time: string = '') =>
-  format(new Date(+time * 1_000), 'HH:mm:ss.SSS')
+export const getFormatTime = (time: string) =>
+  (typeof time === 'string' && isFinite(+time)
+    ? format(new Date(+time * 1_000), 'HH:mm:ss.SSS')
+    : 'Invalid time')

redisinsight/ui/src/utils/tests/monitorUtils.spec.ts

@@ -1,16 +1,23 @@
 import { getFormatTime } from '../monitorUtils'
 
 const getOutputForFormatTime: any[] = [
-  ['1641450853.668074', '09:34:13.668'],
-  ['1641450854.612083', '09:34:14.612'],
-  ['1641450856.616102', '09:34:16.616'],
-  ['1641450858.616121', '09:34:18.616'],
+  [undefined, 'Invalid time'],
+  [null, 'Invalid time'],
+  [{}, 'Invalid time'],
+  ['oeuoeu', 'Invalid time'],
+  [1, 'Invalid time'],
+  [11641450853, 'Invalid time'],
+  ['1641450853.668074[0', 'Invalid time'],
+  ['1641450853.668074', ':34:13.668'],
+  ['1641450854.612083', ':34:14.612'],
+  ['1641450856.616102', ':34:16.616'],
+  ['1641450858.616121', ':34:18.616'],
 ]
 
-describe.skip('formatToText', () => {
+describe('formatToText', () => {
   it.each(getOutputForFormatTime)('for input: %s (reply), should be output: %s',
     (reply, expected) => {
       const result = getFormatTime(reply)
-      expect(result).toBe(expected)
+      expect(result).toContain(expected)
     })
 })