#RI-2083 add unit test

Author: Artyom Podymov

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cloneDeep } from 'lodash'
 import { instance, mock } from 'ts-mockito'
-import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import { cleanup, mockedEAFormatSelector, mockedStore, render } from 'uiSrc/utils/test-utils'
 import { MOCK_ENABLEMENT_AREA_ITEMS } from 'uiSrc/constants'
 import { EnablementAreaComponent } from 'uiSrc/slices/interfaces'
 
@@ -26,6 +26,9 @@ jest.mock('uiSrc/slices/workbench/wb-enablement-area', () => {
     }),
   }
 })
+jest.mock('./utils/formatter/FormatSelector', () => {
+  return mockedEAFormatSelector
+})
 
 describe('EnablementArea', () => {
   it('should render', () => {

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx

@@ -21,7 +21,7 @@ import styles from './styles.module.scss'
 export interface Props {
   items: Record<string, IEnablementAreaItem>;
   loading: boolean;
-  openScript: (script: string, path: string) => void;
+  openScript: (script: string, path?: string, name?: string) => void;
   openInternalPage: (page: IInternalPage) => void;
 }
 
@@ -77,7 +77,7 @@ const EnablementArea = ({ items, openScript, loading }: Props) => {
       case EnablementAreaComponent.CodeButton:
         return args?.path
           ? <div style={{ marginTop: '16px' }}><LazyCodeButton label={label} {...args} /></div>
-          : <div style={{ marginTop: '16px' }}><CodeButton onClick={() => openScript(args?.content || '', '')} label={label} {...args} /></div>
+          : <div style={{ marginTop: '16px' }}><CodeButton onClick={() => openScript(args?.content || '')} label={label} {...args} /></div>
       case EnablementAreaComponent.InternalLink:
         return (
           <InternalLink testId={id || label} label={label} {...args}>

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Code/Code.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { fireEvent, render } from 'uiSrc/utils/test-utils'
+import { EnablementAreaProvider, defaultValue } from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
+import { MONACO_MANUAL } from 'uiSrc/constants'
+
+import Code, { Props } from './Code'
+
+const mockedProps = mock<Props>()
+
+describe('Code', () => {
+  it('should render', () => {
+    const label = 'Manual'
+    const component = render(<Code {...instance(mockedProps)} label={label}>{MONACO_MANUAL}</Code>)
+    const { container } = component
+
+    expect(component).toBeTruthy()
+    expect(container).toHaveTextContent(label)
+  })
+  it('should call onClick function if path provided', () => {
+    const setScript = jest.fn()
+    const label = 'Manual'
+
+    const { queryByTestId } = render(
+      <EnablementAreaProvider value={{ ...defaultValue, setScript }}>
+        <Code {...instance(mockedProps)} label={label}>{MONACO_MANUAL}</Code>
+      </EnablementAreaProvider>
+    )
+
+    const link = queryByTestId(`preselect-${label}`)
+    fireEvent.click(link as Element)
+    expect(setScript).toBeCalledWith(MONACO_MANUAL)
+  })
+})

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Code/Code.tsx

@@ -1,5 +1,9 @@
 import React, { useContext } from 'react'
+import { startCase } from 'lodash'
+import { useLocation } from 'react-router-dom'
+
 import EnablementAreaContext from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
+import { getFileInfo } from 'uiSrc/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo'
 
 import CodeButton from '../CodeButton'
 
@@ -9,10 +13,17 @@ export interface Props {
 }
 
 const Code = ({ children, ...rest }: Props) => {
+  const { search } = useLocation()
   const { setScript } = useContext(EnablementAreaContext)
 
   const loadContent = () => {
-    setScript(children)
+    const pagePath = new URLSearchParams(search).get('guide')
+    if (pagePath) {
+      const pageInfo = getFileInfo(pagePath)
+      setScript(children, `${pageInfo.location}/${pageInfo.name}`, startCase(rest.label))
+    } else {
+      setScript(children)
+    }
   }
 
   return (

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.spec.tsx

@@ -1,11 +1,14 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { fireEvent, render } from 'uiSrc/utils/test-utils'
-
+import { fireEvent, mockedEAFormatSelector, render } from 'uiSrc/utils/test-utils'
 import InternalPage, { Props } from './InternalPage'
 
 const mockedProps = mock<Props>()
 
+jest.mock('../../utils/formatter/FormatSelector', () => {
+  return mockedEAFormatSelector
+})
+
 describe('InternalPage', () => {
   it('should render', () => {
     expect(render(<InternalPage {...instance(mockedProps)} />)).toBeTruthy()

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/LazyCodeButton/LazyCodeButton.tsx

@@ -1,7 +1,10 @@
 import React, { useContext, useState } from 'react'
+import { startCase } from 'lodash'
+
 import { getApiErrorMessage, isStatusSuccessful } from 'uiSrc/utils'
 import { resourcesService } from 'uiSrc/services'
 import EnablementAreaContext from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
+import { getFileInfo } from 'uiSrc/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo'
 
 import CodeButton from '../CodeButton'
 
@@ -22,7 +25,8 @@ const LazyCodeButton = ({ path = '', ...rest }: Props) => {
         const { data, status } = await resourcesService.get<string>(path)
         if (isStatusSuccessful(status)) {
           setLoading(false)
-          setScript(data)
+          const pageInfo = getFileInfo(path)
+          setScript(data, pageInfo.location, startCase(pageInfo.name))
         }
       } catch (error) {
         setLoading(false)

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/formatter/FormatSelector.ts

@@ -2,21 +2,21 @@ import { IFormatter } from './formatter.interfaces'
 import MarkdownToJsxString from './MarkdownToJsxString'
 import HtmlToJsxString from './HtmlToJsxString'
 
-enum FilesFormat {
+export enum FileExtension {
   Html = 'html',
   Markdown = 'md'
 }
 
 class FormatSelector {
   private static formatters = {
-    [FilesFormat.Html]: HtmlToJsxString,
-    [FilesFormat.Markdown]: MarkdownToJsxString,
+    [FileExtension.Html]: new HtmlToJsxString(),
+    [FileExtension.Markdown]: new MarkdownToJsxString(),
   }
 
-  static selectFor(fileFormat: string): IFormatter {
-    const FormatterFactory = FormatSelector.formatters[fileFormat as FilesFormat]
+  static selectFor(extension: string): IFormatter {
+    const FormatterFactory = FormatSelector.formatters[extension as FileExtension]
     if (FormatterFactory) {
-      return new FormatterFactory()
+      return FormatterFactory
     }
     throw new Error('Unsupported format')
   }

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaWrapper.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cloneDeep } from 'lodash'
 import { instance, mock } from 'ts-mockito'
-import { cleanup, clearStoreActions, mockedStore, render } from 'uiSrc/utils/test-utils'
+import { cleanup, clearStoreActions, mockedEAFormatSelector, mockedStore, render } from 'uiSrc/utils/test-utils'
 import { getWBEnablementArea } from 'uiSrc/slices/workbench/wb-enablement-area'
 import EnablementAreaWrapper, { Props } from './EnablementAreaWrapper'
 
@@ -25,6 +25,10 @@ jest.mock('uiSrc/slices/workbench/wb-enablement-area', () => {
   }
 })
 
+jest.mock('./EnablementArea/utils/formatter/FormatSelector', () => {
+  return mockedEAFormatSelector
+})
+
 describe('EnablementAreaWrapper', () => {
   it('should render and call getWBEnablementArea action', () => {
     const expectedActions = [getWBEnablementArea()]

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaWrapper.tsx

@@ -25,18 +25,18 @@ const EnablementAreaWrapper = React.memo(({ scriptEl, setScript }: Props) => {
     dispatch(fetchEnablementArea())
   }, [])
 
-  const sendEventButtonClickedTelemetry = (path: string = '') => {
+  const sendEventButtonClickedTelemetry = (data: Record<string, any>) => {
     sendEventTelemetry({
       event: TelemetryEvent.WORKBENCH_ENABLEMENT_AREA_COMMAND_CLICKED,
       eventData: {
-        path,
         databaseId: instanceId,
+        ...data,
       }
     })
   }
 
-  const openScript = (script: string, path: string) => {
-    sendEventButtonClickedTelemetry(path)
+  const openScript = (script: string, path?: string, name?: string) => {
+    sendEventButtonClickedTelemetry({ path, name })
     setScript(script)
 
     setTimeout(() => {

redisinsight/ui/src/pages/workbench/contexts/enablementAreaContext.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 interface IContext {
-  setScript: (script: string) => void;
+  setScript: (script: string, path?: string, name?: string) => void;
   openPage: (page: IInternalPage) => void;
 }
 export interface IInternalPage {