#RI-2470, #RI-2630, #RI-2634

redisinsight/ui/src/components/config/Config.spec.tsx

@@ -10,7 +10,6 @@ import {
 import { getServerInfo } from 'uiSrc/slices/app/info'
 import { processCliClient } from 'uiSrc/slices/cli/cli-settings'
 import { getRedisCommands } from 'uiSrc/slices/app/redis-commands'
-import { getContent as getCreateRedisButtons } from 'uiSrc/slices/content/create-redis-buttons'
 import Config from './Config'
 
 let store: typeof mockedStore
@@ -39,7 +38,6 @@ describe('Config', () => {
       getServerInfo(),
       processCliClient(),
       getRedisCommands(),
-      getCreateRedisButtons(),
       getUserConfigSettings()
     ]
     expect(store.getActions()).toEqual([...afterRenderActions])
@@ -69,7 +67,6 @@ describe('Config', () => {
       getServerInfo(),
       processCliClient(),
       getRedisCommands(),
-      getCreateRedisButtons(),
       getUserConfigSettings(),
       setSettingsPopupState(true),
     ]

redisinsight/ui/src/components/config/Config.tsx

@@ -19,7 +19,6 @@ import { checkIsAnalyticsGranted, getTelemetryService } from 'uiSrc/telemetry'
 import { setFavicon, isDifferentConsentsExists } from 'uiSrc/utils'
 import { fetchUnsupportedCliCommandsAction } from 'uiSrc/slices/cli/cli-settings'
 import { fetchRedisCommandsInfo } from 'uiSrc/slices/app/redis-commands'
-import { fetchContentAction as fetchCreateRedisButtonsAction } from 'uiSrc/slices/content/create-redis-buttons'
 import favicon from 'uiSrc/assets/favicon.ico'
 
 const SETTINGS_PAGE_PATH = '/settings'
@@ -37,7 +36,6 @@ const Config = () => {
     dispatch(fetchServerInfo())
     dispatch(fetchUnsupportedCliCommandsAction())
     dispatch(fetchRedisCommandsInfo())
-    dispatch(fetchCreateRedisButtonsAction())
 
     // fetch config settings, after that take spec
     if (pathname !== SETTINGS_PAGE_PATH) {

redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.spec.tsx

@@ -0,0 +1,28 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import ShortInstanceInfo, { Props } from './ShortInstanceInfo'
+
+const mockedProps = mock<Props>()
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+jest.mock('uiSrc/services', () => ({
+  ...jest.requireActual('uiSrc/services'),
+  sessionStorageService: {
+    set: jest.fn(),
+    get: jest.fn(),
+  },
+}))
+
+describe('ShortInstanceInfo', () => {
+  it('should render', () => {
+    expect(render(<ShortInstanceInfo info={{ ...instance(mockedProps) }} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx

@@ -11,7 +11,7 @@ import { ReactComponent as VersionIcon } from 'uiSrc/assets/img/icons/version.sv
 
 import styles from './styles.module.scss'
 
-interface IProps {
+export interface Props {
   info: {
     name: string
     host: string
@@ -22,7 +22,7 @@ interface IProps {
     user?: Nullable<string>
   }
 }
-const ShortInstanceInfo = ({ info }: IProps) => {
+const ShortInstanceInfo = ({ info }: Props) => {
   const { name, host, port, connectionType, version, user, dbIndex } = info
   return ((
     <div data-testid="db-info-tooltip">

redisinsight/ui/src/components/main-router/components/RedisStackRoutes.spec.tsx

@@ -0,0 +1,28 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import RedisStackRoutes, { Props } from './RedisStackRoutes'
+
+const mockedProps = mock<Props>()
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+jest.mock('uiSrc/services', () => ({
+  ...jest.requireActual('uiSrc/services'),
+  sessionStorageService: {
+    set: jest.fn(),
+    get: jest.fn(),
+  },
+}))
+
+describe('RedisStackRoutes', () => {
+  it('should render', () => {
+    expect(render(<RedisStackRoutes {...instance(mockedProps)} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/notifications/components/DefaultErrorContent.spec.tsx

@@ -0,0 +1,28 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import DefaultErrorContent, { Props } from './DefaultErrorContent'
+
+const mockedProps = mock<Props>()
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+jest.mock('uiSrc/services', () => ({
+  ...jest.requireActual('uiSrc/services'),
+  sessionStorageService: {
+    set: jest.fn(),
+    get: jest.fn(),
+  },
+}))
+
+describe('DefaultErrorContent', () => {
+  it('should render', () => {
+    expect(render(<DefaultErrorContent {...instance(mockedProps)} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/notifications/components/EncryptionErrorContent.spec.tsx

@@ -0,0 +1,25 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import EncryptionErrorContent from './EncryptionErrorContent'
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+jest.mock('uiSrc/services', () => ({
+  ...jest.requireActual('uiSrc/services'),
+  sessionStorageService: {
+    set: jest.fn(),
+    get: jest.fn(),
+  },
+}))
+
+describe('EncryptionErrorContent', () => {
+  it('should render', () => {
+    expect(render(<EncryptionErrorContent />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/query-card/QueryCardCliPlugin/QueryCardCliPlugin.spec.tsx

@@ -0,0 +1,28 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import QueryCardCliPlugin, { Props } from './QueryCardCliPlugin'
+
+const mockedProps = mock<Props>()
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+jest.mock('uiSrc/services', () => ({
+  ...jest.requireActual('uiSrc/services'),
+  sessionStorageService: {
+    set: jest.fn(),
+    get: jest.fn(),
+  },
+}))
+
+describe('QueryCardCliPlugin', () => {
+  it('should render', () => {
+    expect(render(<QueryCardCliPlugin {...instance(mockedProps)} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/query/DedicatedEditor/DedicatedEditor.spec.tsx

@@ -0,0 +1,28 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import DedicatedEditor, { Props } from './DedicatedEditor'
+
+const mockedProps = mock<Props>()
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+jest.mock('uiSrc/services', () => ({
+  ...jest.requireActual('uiSrc/services'),
+  sessionStorageService: {
+    set: jest.fn(),
+    get: jest.fn(),
+  },
+}))
+
+describe('DedicatedEditor', () => {
+  it('should render', () => {
+    expect(render(<DedicatedEditor {...instance(mockedProps)} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/query/DedicatedEditor/DedicatedEditor.tsx

@@ -195,7 +195,7 @@ const DedicatedEditor = (props: Props) => {
         <div className="draggable-area" />
         <div className={styles.input} data-testid="query-input-container">
           <MonacoEditor
-            language={selectedLang.id || MonacoLanguage.Cypher}
+            language={selectedLang?.id || MonacoLanguage.Cypher}
             value={value}
             onChange={setValue}
             options={options}
@@ -204,7 +204,7 @@ const DedicatedEditor = (props: Props) => {
           />
         </div>
         <div className={cx(styles.actions)}>
-          <span>{ selectedLang.name }</span>
+          <span>{ selectedLang?.name }</span>
           <div>
             <EuiButtonIcon
               iconSize="m"

redisinsight/ui/src/packages/redisearch/src/utils/tests/formatLongName.spec.ts

@@ -0,0 +1,30 @@
+import { formatLongName, formatNameShort } from 'uiSrc/utils'
+
+const formatLongNameTests: any[] = [
+  ['11111111111112', 7, 1, '...', '111...2'],
+  ['uaoe uaoeu aoeuaoeua', 7, 1, ' ... ', 'u ... a'],
+  ['u aoeu aoeuaoeuaoeuaoe eoua uoaeu aoeu', 10, 3, ';', 'u aoeu;oeu'],
+]
+
+describe('formatLongName', () => {
+  it.each(formatLongNameTests)('for input: %s (name), %s (maxNameLength), %s (endPartLength), %s (separator), should be output: %s',
+    (name, maxNameLength, endPartLength, separator, expected) => {
+      const result = formatLongName(name, maxNameLength, endPartLength, separator)
+      expect(result).toBe(expected)
+    })
+})
+
+const formatNameShortTests: any[] = [
+  ['11111111111112', '11111111111112'],
+  ['uaoe uaoeu aoeuaoeua', 'uaoe uaoeu aoeuaoeua'],
+  ['test test test test test test test test test test test test test test test test test test test ',
+    'test test test test test test test test test test ...test test test '],
+]
+
+describe('formatNameShort', () => {
+  it.each(formatNameShortTests)('for input: %s (name), should be output: %s',
+    (name, expected) => {
+      const result = formatNameShort(name)
+      expect(result).toBe(expected)
+    })
+})

redisinsight/ui/src/pages/browser/components/unsupported-type-details/styles.module.scss

@@ -22,6 +22,5 @@
 
 .link {
   text-decoration: underline;
-  color: currentColor;
-  color: var(--euiColorPrimary);
+  color: var(--euiColorFullShade);
 }

redisinsight/ui/src/pages/home/HomePage.spec.tsx

@@ -4,6 +4,7 @@ import { render } from 'uiSrc/utils/test-utils'
 import HomePage from './HomePage'
 
 jest.mock('uiSrc/slices/content/create-redis-buttons', () => ({
+  ...jest.requireActual('uiSrc/slices/content/create-redis-buttons'),
   contentSelector: () => jest.fn().mockReturnValue({ data: {}, loading: false }),
 }))
 

redisinsight/ui/src/pages/home/HomePage.tsx

@@ -16,6 +16,7 @@ import { fetchInstancesAction, instancesSelector } from 'uiSrc/slices/instances'
 import { localStorageService } from 'uiSrc/services'
 import { resetDataSentinel, sentinelSelector } from 'uiSrc/slices/sentinel'
 import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info'
+import { fetchContentAction as fetchCreateRedisButtonsAction } from 'uiSrc/slices/content/create-redis-buttons'
 import { sendEventTelemetry, sendPageViewTelemetry, TelemetryEvent, TelemetryPageView } from 'uiSrc/telemetry'
 import AddDatabaseContainer from './components/AddDatabases/AddDatabasesContainer'
 import DatabasesList from './components/DatabasesListComponent/DatabasesListWrapper'
@@ -58,6 +59,7 @@ const HomePage = () => {
     dispatch(fetchInstancesAction())
     dispatch(resetInstancesRedisCluster())
     dispatch(resetSubscriptionsRedisCloud())
+    dispatch(fetchCreateRedisButtonsAction())
   }, [])
 
   useEffect(() => {

redisinsight/ui/src/pages/home/components/HelpLinksMenu/HelpLinksMenu.tsx

@@ -5,12 +5,12 @@ import { IHelpGuide } from 'uiSrc/pages/home/constants/help-links'
 
 import styles from './styles.module.scss'
 
-interface IProps {
+export interface Props {
   onLinkClick?: (link: string) => void
   items: IHelpGuide[]
 }
 
-const HelpLinksMenu = ({ onLinkClick, items }: IProps) => {
+const HelpLinksMenu = ({ onLinkClick, items }: Props) => {
   const [isPopoverOpen, setPopover] = useState(false)
 
   const onButtonClick = () => {
@@ -28,7 +28,7 @@ const HelpLinksMenu = ({ onLinkClick, items }: IProps) => {
     }
   }
 
-  const menuItems = items.map(({ id, url, title, primary }) => (
+  const menuItems = items?.map(({ id, url, title, primary }) => (
     <EuiContextMenuItem className={styles.item} key={id}>
       <EuiLink
         external={false}

redisinsight/ui/src/pages/home/components/HelpLinksMenu/HelpLinskMenu.spec.tsx

@@ -0,0 +1,28 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import HelpLinksMenu, { Props } from './HelpLinksMenu'
+
+const mockedProps = mock<Props>()
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+jest.mock('uiSrc/services', () => ({
+  ...jest.requireActual('uiSrc/services'),
+  sessionStorageService: {
+    set: jest.fn(),
+    get: jest.fn(),
+  },
+}))
+
+describe('HelpLinksMenu', () => {
+  it('should render', () => {
+    expect(render(<HelpLinksMenu {...instance(mockedProps)} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/pages/redisStack/components/edit-connection/EditConnection.spec.tsx

@@ -0,0 +1,25 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import EditConnection from './EditConnection'
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+jest.mock('uiSrc/services', () => ({
+  ...jest.requireActual('uiSrc/services'),
+  sessionStorageService: {
+    set: jest.fn(),
+    get: jest.fn(),
+  },
+}))
+
+describe('EditConnection', () => {
+  it('should render', () => {
+    expect(render(<EditConnection />)).toBeTruthy()
+  })
+})