#RI-5156 - fix tests

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.spec.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { render } from 'uiSrc/utils/test-utils'
+import BadgeIcon, { Props } from './BadgeIcon'
+
+const mockedProps = mock<Props>()
+
+const icon = <div />
+
+describe('BadgeIcon', () => {
+  it('should render', () => {
+    expect(render(<BadgeIcon {...instance(mockedProps)} icon={icon} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx

@@ -2,13 +2,13 @@ import React from 'react'
 import { EuiToolTip, EuiFlexItem } from '@elastic/eui'
 import styles from '../styles.module.scss'
 
-interface Props {
+export interface Props {
   id: string
   icon: React.ReactElement
   name: string
 }
 const BadgeIcon = ({ id, icon, name }: Props) => (
-  <EuiFlexItem key={id} className={styles.badge} grow={false}>
+  <EuiFlexItem key={id} className={styles.badge} grow={false} data-testid={`recommendation-badge-${id}`}>
     <div data-testid={id} className={styles.badgeWrapper}>
       <EuiToolTip content={name} position="top" display="inlineBlock" anchorClassName="flex-row">
         {icon}

redisinsight/ui/src/components/recommendation/content-element/ContentElement.spec.tsx

@@ -0,0 +1,133 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import ContentElement, { Props } from './ContentElement'
+
+const mockedProps = mock<Props>()
+
+const mockTelemetryName = 'name'
+
+describe('ContentElement', () => {
+  it('should render', () => {
+    expect(render(<ContentElement {...instance(mockedProps)} />)).toBeTruthy()
+  })
+
+  it('should render paragraph', () => {
+    const mockContent = {
+      type: 'paragraph',
+      value: 'paragraph',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`paragraph-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render span', () => {
+    const mockContent = {
+      type: 'span',
+      value: 'span',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`span-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render code', () => {
+    const mockContent = {
+      type: 'code',
+      value: 'code',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`code-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render spacer', () => {
+    const mockContent = {
+      type: 'spacer',
+      value: 'l',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`spacer-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render link', () => {
+    const mockContent = {
+      type: 'link',
+      value: 'link',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`link-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render code link', () => {
+    const mockContent = {
+      type: 'code-link',
+      value: 'link',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`code-link-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render link-sso', () => {
+    const mockContent = {
+      type: 'link-sso',
+      value: 'link-sso',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`link-sso-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render internal-link', () => {
+    const mockContent = {
+      type: 'internal-link',
+      value: {
+        path: '/some-path',
+        name: 'name',
+      },
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`internal-link-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render list', () => {
+    const mockContent = {
+      type: 'list',
+      value: [[]],
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`list-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render unknown', () => {
+    const mockContent = {
+      type: 'unknown',
+      value: 'unknown',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.getByText('unknown')).toBeInTheDocument()
+  })
+
+  it('click on link should call onClick', () => {
+    const onClickMock = jest.fn()
+    const mockContent = {
+      type: 'link',
+      value: 'link',
+    }
+
+    const { queryByTestId } = render(
+      <ContentElement onLinkClick={onClickMock} content={mockContent} telemetryName={mockTelemetryName} idx={0} />
+    )
+
+    fireEvent.click(queryByTestId(`link-${mockTelemetryName}-0`) as HTMLElement)
+
+    expect(onClickMock).toBeCalled()
+  })
+})

redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx

@@ -14,7 +14,7 @@ import { utmMedium } from '../constants'
 
 import styles from '../styles.module.scss'
 
-interface Props {
+export interface Props {
   content: IRecommendationContent
   telemetryName: string
   params?: any
@@ -24,7 +24,7 @@ interface Props {
 }
 
 const ContentElement = (props: Props) => {
-  const { content, params, onLinkClick, telemetryName, insights, idx } = props
+  const { content = {}, params, onLinkClick, telemetryName, insights, idx } = props
   const { type, value, parameter } = content
 
   const replacedValue = replaceVariables(value, parameter, params)
@@ -142,8 +142,8 @@ const ContentElement = (props: Props) => {
           {isArray(value) && value.map((listElement: IRecommendationContent[], idx: number) => (
             <li
               className={cx(styles.listItem, { [styles.insights]: insights })}
-                    // eslint-disable-next-line react/no-array-index-key
-              key={`list-item-${listElement[0]}-${idx}`}
+              // eslint-disable-next-line react/no-array-index-key
+              key={`list-item-${idx}`}
             >
               <RecommendationBody
                 elements={listElement}

redisinsight/ui/src/components/recommendation/recommendation-badges-legend/RecommendationBadgesLegend.spec.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from 'uiSrc/utils/test-utils'
+import RecommendationBadgesLegend from './RecommendationBadgesLegend'
+
+describe('RecommendationBadgesLegend', () => {
+  it('should render', () => {
+    expect(render(<RecommendationBadgesLegend />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/recommendation/recommendation-badges/RecommendationBadges.spec.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { render, screen } from 'uiSrc/utils/test-utils'
+import RecommendationBadges, { Props } from './RecommendationBadges'
+
+const mockedProps = mock<Props>()
+
+describe('RecommendationBadges', () => {
+  it('should render', () => {
+    expect(render(<RecommendationBadges {...instance(mockedProps)} />)).toBeTruthy()
+  })
+
+  it('should render code changes badge', () => {
+    expect(render(<RecommendationBadges badges={['code_changes']} />)).toBeTruthy()
+
+    expect(screen.queryByTestId('recommendation-badge-code_changes')).toBeInTheDocument()
+    expect(screen.queryByTestId('recommendation-badge-upgrade')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('recommendation-badge-configuration_changes')).not.toBeInTheDocument()
+  })
+
+  it('should render upgrade and configuration changes badges', () => {
+    expect(render(<RecommendationBadges badges={['upgrade', 'configuration_changes']} />)).toBeTruthy()
+
+    expect(screen.queryByTestId('recommendation-badge-code_changes')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('recommendation-badge-upgrade')).toBeInTheDocument()
+    expect(screen.queryByTestId('recommendation-badge-configuration_changes')).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/components/recommendation/recommendation-badges/RecommendationBadges.tsx

@@ -5,7 +5,7 @@ import BadgeIcon from '../badge-icon'
 import { badgesContent } from '../constants'
 import styles from '../styles.module.scss'
 
-interface Props {
+export interface Props {
   badges?: string[]
 }
 

redisinsight/ui/src/components/recommendation/recommendation-body/RecommendationBody.spec.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { render, screen } from 'uiSrc/utils/test-utils'
+import { IRecommendationContent } from 'uiSrc/slices/interfaces/recommendations'
+import RecommendationBody, { Props } from './RecommendationBody'
+
+const mockedProps = mock<Props>()
+
+const mockContent: IRecommendationContent[] = [
+  {
+    type: 'unknown',
+    value: 'unknown',
+  },
+]
+
+const mockTelemetryName = 'name'
+
+describe('RecommendationBody', () => {
+  it('should render', () => {
+    expect(render(<RecommendationBody {...instance(mockedProps)} />)).toBeTruthy()
+  })
+
+  it('should render element', () => {
+    render(<RecommendationBody {...instance(mockedProps)} elements={mockContent} telemetryName={mockTelemetryName} />)
+
+    expect(screen.getByText('unknown')).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/components/recommendation/recommendation-body/RecommendationBody.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { IRecommendationContent } from 'uiSrc/slices/interfaces/recommendations'
 import ContentElement from '../content-element'
 
-interface Props {
+export interface Props {
   elements: IRecommendationContent[]
   telemetryName: string
   params?: any

redisinsight/ui/src/utils/tests/recommendation/helper.spec.ts

@@ -0,0 +1,80 @@
+import { MOCK_RECOMMENDATIONS } from 'uiSrc/constants/mocks/mock-recommendations'
+import { sortRecommendations, replaceVariables } from '../../recommendation'
+
+const sortRecommendationsTests = [
+  {
+    input: [],
+    expected: []
+  },
+  {
+    input: [
+      { name: 'luaScript' },
+      { name: 'bigSets' },
+      { name: 'searchIndexes' },
+    ],
+    expected: [
+      { name: 'searchIndexes' },
+      { name: 'bigSets' },
+      { name: 'luaScript' },
+    ]
+  },
+  {
+    input: [
+      { name: 'luaScript' },
+      { name: 'bigSets' },
+      { name: 'searchJSON' },
+    ],
+    expected: [
+      { name: 'searchJSON' },
+      { name: 'bigSets' },
+      { name: 'luaScript' },
+    ]
+  },
+  {
+    input: [
+      { name: 'luaScript' },
+      { name: 'bigSets' },
+      { name: 'searchIndexes' },
+      { name: 'searchJSON' },
+      { name: 'useSmallerKeys' },
+      { name: 'RTS' },
+    ],
+    expected: [
+      { name: 'searchJSON' },
+      { name: 'searchIndexes' },
+      { name: 'RTS' },
+      { name: 'bigSets' },
+      { name: 'luaScript' },
+      { name: 'useSmallerKeys' },
+    ]
+  },
+]
+
+const replaceVariablesTests = [
+  { input: ['value'], expected: 'value' },
+  // eslint-disable-next-line no-template-curly-in-string
+  { input: ['some ${0} text ${1}', ['foo', 'bar'], { foo: '7', bar: 'bar' }], expected: 'some 7 text bar' },
+  { input: ['value'], expected: 'value' },
+  { input: ['value'], expected: 'value' },
+]
+
+describe('sortRecommendations', () => {
+  test.each(sortRecommendationsTests)(
+    '%j',
+    ({ input, expected }) => {
+      const result = sortRecommendations(input, MOCK_RECOMMENDATIONS)
+      expect(result).toEqual(expected)
+    }
+  )
+})
+
+describe('replaceVariables', () => {
+  test.each(replaceVariablesTests)(
+    '%j',
+    ({ input, expected }) => {
+      // @ts-ignore
+      const result = replaceVariables(...input)
+      expect(result).toEqual(expected)
+    }
+  )
+})