#RI-1756 - add unit tests, refactor

Author: Roman.Sergeenko

redisinsight/ui/src/components/bottom-group-components/BottomGroupComponents.spec.tsx

@@ -0,0 +1,59 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+
+import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
+import { toggleCli, toggleCliHelper } from 'uiSrc/slices/cli/cli-settings'
+
+import BottomGroupComponents from './BottomGroupComponents'
+
+jest.mock('uiSrc/slices/cli/cli-settings', () => ({
+  ...jest.requireActual('uiSrc/slices/cli/cli-settings'),
+  cliSettingsSelector: jest.fn().mockReturnValue({
+    isShowCli: true,
+    isShowHelper: true
+  }),
+}))
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+describe('BottomGroupComponents', () => {
+  it('should render', () => {
+    expect(
+      render(<BottomGroupComponents />)
+    ).toBeTruthy()
+  })
+
+  it('should render Cli when isShowCli truthy', () => {
+    render(<BottomGroupComponents />)
+    expect(screen.getByTestId('cli')).toBeInTheDocument()
+  })
+
+  it('should render Command Helper when isShowHelper truthy', () => {
+    render(<BottomGroupComponents />)
+    expect(screen.getByTestId('command-helper')).toBeInTheDocument()
+  })
+
+  it('should not to close command helper after closing cli', () => {
+    render(<BottomGroupComponents />)
+    fireEvent.click(screen.getByTestId('collapse-cli'))
+    const expectedActions = [toggleCli()]
+    expect(store.getActions()).toEqual(expectedActions)
+
+    expect(screen.getByTestId('command-helper')).toBeInTheDocument()
+  })
+
+  it('should not to close cli after closing command-helper', () => {
+    render(<BottomGroupComponents />)
+    fireEvent.click(screen.getByTestId('close-command-helper'))
+
+    const expectedActions = [toggleCliHelper()]
+    expect(store.getActions()).toEqual(expectedActions)
+
+    expect(screen.getByTestId('cli')).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/components/bottom-group-components/BottomGroupComponents.tsx

@@ -9,10 +9,7 @@ import BottomGroupMinimized from './components/bottom-group-minimized/BottomGrou
 import styles from './styles.module.scss'
 
 const BottomGroupComponents = () => {
-  const { isShowCli } = useSelector(cliSettingsSelector)
-  const {
-    isShowHelper,
-  } = useSelector(cliSettingsSelector)
+  const { isShowCli, isShowHelper } = useSelector(cliSettingsSelector)
 
   return (
     <div className={styles.groupComponentsWrapper}>

redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.spec.tsx

@@ -1,24 +1,37 @@
 import React from 'react'
 import { cloneDeep } from 'lodash'
 
-import { toggleCli } from 'uiSrc/slices/cli/cli-settings'
-import { fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
+import { toggleCli, toggleCliHelper } from 'uiSrc/slices/cli/cli-settings'
+import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 import BottomGroupMinimized from './BottomGroupMinimized'
 
-describe('CliHeaderMinimized', () => {
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+describe('BottomGroupMinimized', () => {
   it('should render', () => {
     expect(
       render(<BottomGroupMinimized />)
     ).toBeTruthy()
   })
 
-  it('should "toggleCli" & "clearSearchingCommand" actions be called after click "expand-cli" button', () => {
-    const store = cloneDeep(mockedStore)
-
+  it('should "toggleCli" action be called after click "expand-cli" button', () => {
     render(<BottomGroupMinimized />)
     fireEvent.click(screen.getByTestId('expand-cli'))
 
     const expectedActions = [toggleCli()]
     expect(store.getActions()).toEqual(expectedActions)
   })
+
+  it('should "toggleCliHelper" action be called after click "expand-command-helper" button', () => {
+    render(<BottomGroupMinimized />)
+    fireEvent.click(screen.getByTestId('expand-command-helper'))
+
+    const expectedActions = [toggleCliHelper()]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
 })

redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx

@@ -57,7 +57,7 @@ const BottomGroupMinimized = () => {
           className={styles.componentBadgeItem}
           grow={false}
           onClick={handleExpandHelper}
-          data-testid="expand-helper"
+          data-testid="expand-command-helper"
         >
           <EuiBadge className={cx(styles.componentBadge, { [styles.active]: isShowHelper })}>
             <EuiIcon type="documents" size="m" />

redisinsight/ui/src/components/bottom-group-components/styles.module.scss

@@ -44,7 +44,7 @@
   border: none !important;
 
   &:hover {
-    background-color: #364DA8 !important;
+    background-color: var(--buttonIconPrimaryHover) !important;
   }
 
   &.active {

redisinsight/ui/src/components/cli/Cli/Cli.tsx

@@ -5,7 +5,7 @@ import CliBodyWrapper from 'uiSrc/components/cli/components/cli-body'
 import styles from './styles.module.scss'
 
 const CLI = () => (
-  <div className={styles.container}>
+  <div className={styles.container} data-testid="cli">
     <div className={styles.main}>
       <CliHeader />
       <CliBodyWrapper />

redisinsight/ui/src/components/cli/components/cli-header/CliHeader.spec.tsx

@@ -66,20 +66,6 @@ describe('CliHeader', () => {
     expect(store.getActions()).toEqual(expectedActions)
   })
 
-  // it('should "toggleCliHelper" action be called after click "collapse-cli-helper" button', async () => {
-  //   const mockUuid = 'test-uuid'
-  //   sessionStorageMock.getItem = jest.fn().mockReturnValue(mockUuid)
-  //
-  //   render(<CliHeader {...instance(mockedProps)} />)
-  //
-  //   await waitFor(() => {
-  //     fireEvent.click(screen.getByTestId('collapse-cli-helper'))
-  //   })
-  //
-  //   const expectedActions = [toggleCliHelper()]
-  //   expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
-  // })
-
   it('should "processCliClient" action be called after unmount with mocked sessionStorage item ', () => {
     const mockUuid = 'test-uuid'
     sessionStorageService.get = jest.fn().mockReturnValue(mockUuid)

redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { cloneDeep } from 'lodash'
+import {
+  cleanup,
+  fireEvent, mockedStore,
+  render,
+  screen,
+} from 'uiSrc/utils/test-utils'
+import { toggleCliHelper } from 'uiSrc/slices/cli/cli-settings'
+import CommandHelperHeader from './CommandHelperHeader'
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+describe('CommandHelperHeader', () => {
+  it('should render', () => {
+    expect(render(<CommandHelperHeader />)).toBeTruthy()
+  })
+
+  it('should "toggleCli" action be called after click "close-command-helper" button', () => {
+    render(<CommandHelperHeader />)
+    fireEvent.click(screen.getByTestId('close-command-helper'))
+
+    const expectedActions = [toggleCliHelper()]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+})

redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx

@@ -19,8 +19,8 @@ import styles from './CommandHelper/styles.module.scss'
 
 const CommandHelperWrapper = () => {
   const {
-    matchedCommand,
-    searchedCommand,
+    matchedCommand = '',
+    searchedCommand = '',
     isSearching,
     isEnteringCommand,
     searchingCommand,
@@ -90,7 +90,7 @@ const CommandHelperWrapper = () => {
   }
 
   return (
-    <div className={styles.commandHelperWrapper}>
+    <div className={styles.commandHelperWrapper} data-testid="command-helper">
       <CommandHelperHeader />
       <CommandHelper
         commandLine={lastMatchedCommand}