Truncate certificate name and add delete client cert UI tests

Author: GnaneshKunal

redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx

@@ -83,7 +83,7 @@ const TlsDetails = (props: Props) => {
       inputDisplay: cert.name,
       dropdownDisplay: (
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <div>{cert.name}</div>
+          <div>{truncateText(cert.name, 25)}</div>
           <PopoverDelete
             header={cert.name}
             text="will be deleted from RedisInsight."
@@ -114,7 +114,7 @@ const TlsDetails = (props: Props) => {
       inputDisplay: cert.name,
       dropdownDisplay: (
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <div>{cert.name}</div>
+          <div>{truncateText(cert.name, 25)}</div>
           <PopoverDelete
             header={cert.name}
             text="will be deleted from RedisInsight."

redisinsight/ui/src/slices/tests/instances/clientCerts.spec.ts

@@ -1,5 +1,7 @@
+import { AxiosError } from 'axios'
 import { cloneDeep } from 'lodash'
 import { apiService } from 'uiSrc/services'
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import { initialStateDefault, mockedStore } from 'uiSrc/utils/test-utils'
 import reducer, {
   initialState,
@@ -28,6 +30,26 @@ describe('clientCerts slice', () => {
     })
   })
 
+  describe('deleteClientCert', () => {
+    it('should properly set loading = true', () => {
+      // Arrange
+      const state = {
+        ...initialState,
+        loading: true,
+      }
+
+      // Act
+      const nextState = reducer(initialState, deleteClientCert())
+
+      const rootState = Object.assign(initialStateDefault, {
+        connections: {
+          clientCerts: nextState,
+        },
+      })
+      expect(clientCertsSelector(rootState)).toEqual(state)
+    })
+  }
+
   describe('loadClientCerts', () => {
     it('should properly set the state before the fetch data', () => {
       // Arrange
@@ -49,6 +71,27 @@ describe('clientCerts slice', () => {
     })
   })
 
+  describe('deleteClientCertSuccess', () => {
+    it('should properly set the state with fetched data', () => {
+      // Arrange
+      const state = {
+        ...initialState,
+        loading: false,
+      }
+
+      // Act
+      const nextState = reducer(initialState, deleteClientCertSuccess())
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        connections: {
+          clientCerts: nextState,
+        },
+      })
+      expect(clientCertsSelector(rootState)).toEqual(state)
+    })
+  }
+
   describe('loadClientCertsSuccess', () => {
     it('should properly set the state with fetched data', () => {
       // Arrange
@@ -97,6 +140,30 @@ describe('clientCerts slice', () => {
     })
   })
 
+  describe('deleteClientCertFailure', () => {
+    it('should properly set the error', () => {
+      // Arrange
+      const data = 'some error'
+      const state = {
+        ...initialState,
+        loading: false,
+        error: data,
+        data: [],
+      }
+
+      // Act
+      const nextState = reducer(initialState, deleteClientCertFailure(data))
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        connections: {
+          clientCerts: nextState,
+        },
+      })
+      expect(clientCertsSelector(rootState)).toEqual(state)
+    })
+  })
+
   describe('loadClientCertsFailure', () => {
     it('should properly set the error', () => {
       // Arrange
@@ -142,5 +209,68 @@ describe('clientCerts slice', () => {
       ]
       expect(store.getActions()).toEqual(expectedActions)
     })
+
+    it('call both fetchClientCerts and deleteClientCertSuccess when delete is successed', async () => {
+      // Arrange delete
+      const responsePayload = { status: 200 }
+      apiService.delete = jest.fn().mockResolvedValue(responsePayload)
+
+      // Arrange fetch
+      const data = [
+        { id: '70b95d32-c19d-4311-bb24-e684af12cf15', name: 'client cert' },
+      ]
+      const fetchResponsePayload = { data, status: 200 }
+      apiService.get = jest.fn().mockResolvedValue(fetchResponsePayload)
+
+      // mock function for onSuccessAction
+      const onSuccessAction = jest.fn()
+
+      const id = '70b95d32-c19d-4311-bb24-e684af12cf15'
+
+      const store = cloneDeep(mockedStore)
+
+      // Act
+      await store.dispatch<any>(deleteClientCert(id, onSuccessAction))
+
+      // Assert onSuccessAction
+      expect(onSuccessAction).toBeCalled()
+
+      // Assert
+      const expectedActions = [
+        deleteClientCert(),
+        deleteClientCertSuccess(),
+        loadClientCerts(),
+        loadClientCertsSuccess(fetchResponsePayload.data),
+      ]
+      expect(store.getActions()).toEqual(expectedActions)
+    })
+
+    it('call both fetchClientCerts and deleteClientCertFailure when delete is failed', async () => {
+      // Arrange delete
+      const error = 'some error'
+      const responsePayload = {
+        response: { data: { message: error }, status: 500 },
+      }
+      apiService.delete = jest.fn().mockRejectedValueOnce(responsePayload)
+
+      const onSuccessAction = jest.fn()
+      const id = '70b95d32-c19d-4311-bb24-e684af12cf15'
+
+      const store = cloneDeep(mockedStore)
+
+      // Act
+      await store.dispatch<any>(deleteClientCert(id, onSuccessAction))
+
+      // assert that onSuccessAction is not called
+      expect(onSuccessAction).not.toBeCalled()
+
+      // Assert
+      const expectedActions = [
+        deleteClientCert(),
+        addErrorNotification(responsePayload as AxiosError),
+        deleteClientCertFailure(responsePayload.response.data.message),
+      ]
+      expect(store.getActions()).toEqual(expectedActions)
+    })
   })
 })