RI-5934 Added specs

Author: kchepikava

redisinsight/ui/src/components/formated-date/FormatedDate.tsx

@@ -15,7 +15,7 @@ const FormatedDate = ({ date }: Props) => {
   const dateFormat = config?.dateFormat || DATETIME_FORMATTER_DEFAULT
   const timezone = config?.timezone || TimezoneOption.Local
 
-  if (!date) return <span />
+  if (!date) return null
 
   const formatedDate = formatTimestamp(date, dateFormat, timezone)
 

redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/DateTimeFormatter.tsx

@@ -36,7 +36,7 @@ const DateTimeFormatter = () => {
         Specifies the date and time format to be used in Redis Insight:
       </EuiText>
       <EuiSpacer size="m" />
-      <DatetimeForm setPreview={setPreview} />
+      <DatetimeForm onFormatChange={(newPreview) => setPreview(newPreview)} />
       <EuiSpacer size="m" />
       <EuiText className={styles.dateTimeSubtitle} color="subdued">Specifies the time zone to be used in Redis Insight:</EuiText>
       <EuiSpacer size="s" />

redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/components/datetime-form/DatetimeForm.spec.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { act, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { dateTimeOptions } from 'uiSrc/constants'
+import { Nullable } from 'uiSrc/utils'
+import DatetimeForm, { Props } from './DatetimeForm'
+
+const mockedProps = mock<Props>()
+
+jest.mock('uiSrc/slices/user/user-settings', () => ({
+  ...jest.requireActual('uiSrc/slices/user/user-settings'),
+  userSettingsConfigSelector: jest.fn().mockReturnValue({
+    dateFormat: null,
+    timezone: null
+  }),
+}))
+
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
+describe('DatetimeForm', () => {
+  it('should render', () => {
+    expect(render(<DatetimeForm {...instance(mockedProps)} />)).toBeTruthy()
+  })
+
+  it('should not show custom btn and input unless custom radio btn is clicked ', async () => {
+    const { container } = render(<DatetimeForm {...instance(mockedProps)} />)
+    expect(screen.getByText('Pre-selected formats')).toBeTruthy()
+    expect(container.querySelector('[data-test-subj="select-datetime"]')).toBeTruthy()
+    expect(screen.queryByTestId('datetime-custom-btn')).toBeFalsy()
+    await act(() => fireEvent.click(screen.getByText('Custom')))
+    expect(screen.queryByTestId('datetime-custom-btn')).toBeTruthy()
+  })
+
+  it('should display invalid format when wrong format is typed in a custom input', async () => {
+    const onFormatChange = jest.fn()
+    render(<DatetimeForm {...instance(mockedProps)} onFormatChange={onFormatChange} />)
+
+    await act(() => fireEvent.click(screen.getByText('Custom')))
+    const customInput: Nullable<HTMLElement> = screen.getByTestId('custom-datetime-input')
+
+    await act(() => fireEvent.change(customInput, { target: { value: 'fffffinvalid' } }))
+
+    expect(onFormatChange).toBeCalledWith('Invalid Format')
+  })
+
+  it('should call proper telemetry events', async () => {
+    const sendEventTelemetryMock = jest.fn()
+    sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+
+    render(<DatetimeForm {...instance(mockedProps)} />)
+
+    await act(() => fireEvent.click(screen.getByText('Custom')))
+    const customInput: Nullable<HTMLElement> = screen.getByTestId('custom-datetime-input')
+
+    await act(() => fireEvent.change(customInput, { target: { value: dateTimeOptions[1].value } }))
+    await act(() => fireEvent.click(screen.getByTestId('datetime-custom-btn')))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.SETTINGS_DATE_TIME_FORMAT_CHANGED,
+      eventData: {
+        currentFormat: dateTimeOptions[1].value
+      }
+    })
+  })
+})

redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/components/datetime-form/DatetimeForm.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, Dispatch, SetStateAction, useMemo, useState } from 'react'
+import React, { ChangeEvent, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useFormik } from 'formik'
 import {
@@ -25,11 +25,11 @@ interface InitialValuesType {
   selectedRadioOption: DatetimeRadioOption;
 }
 
-interface Props {
-  setPreview: Dispatch<SetStateAction<string>>;
+export interface Props {
+  onFormatChange: (newPreview: string) => void;
 }
 
-const DatetimeForm = ({ setPreview }: Props) => {
+const DatetimeForm = ({ onFormatChange }: Props) => {
   const [error, setError] = useState('')
   const [saveFormatSucceed, setSaveFormatSucceed] = useState(false)
   const config = useSelector(userSettingsConfigSelector)
@@ -86,11 +86,11 @@ const DatetimeForm = ({ setPreview }: Props) => {
     const { valid, error: errorMsg } = checkDateTimeFormat(format)
     if (!valid) {
       setError(errorMsg || 'This format is not supported')
-      setPreview('Invalid Format')
+      onFormatChange?.('Invalid Format')
     } else {
       setError('')
       const newPreview = formatTimestamp(new Date(), format, config?.timezone || TimezoneOption.Local)
-      setPreview(newPreview)
+      onFormatChange?.(newPreview)
     }
     return valid
   }

redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/components/timezone-form/TimezoneForm.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { render } from 'uiSrc/utils/test-utils'
+
+import TimezoneForm from './TimezoneForm'
+
+describe('TimezoneForm', () => {
+  it('should render', () => {
+    expect(render(<TimezoneForm />)).toBeTruthy()
+  })
+
+  it('should include timezone select', () => {
+    const { container } = render(<TimezoneForm />)
+    expect(container.querySelector('[data-test-subj="select-timezone"]')).toBeTruthy()
+  })
+})