#RI-3784 - fix tests, add enum for monaco theme

Author: rsergeenko

redisinsight/ui/src/components/monaco-json/MonacoJson.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from 'uiSrc/utils/test-utils'
+
+import MonacoJson from './MonacoJson'
+
+describe('', () => {
+  it('should render', () => {
+    expect(render(<MonacoJson value="val" onChange={jest.fn()} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/monaco-json/MonacoJson.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'
 import MonacoEditor, { monaco } from 'react-monaco-editor'
 import cx from 'classnames'
-import { darkTheme, lightTheme } from 'uiSrc/constants/monaco/cypher'
+import { darkTheme, lightTheme, MonacoThemes } from 'uiSrc/constants/monaco/cypher'
 
 import { Nullable } from 'uiSrc/utils'
 import { IEditorMount } from 'uiSrc/pages/workbench/interfaces'
@@ -13,7 +13,7 @@ import styles from './styles.modules.scss'
 export interface Props {
   value: string
   onChange: (value: string) => void
-  disabled: boolean
+  disabled?: boolean
   wrapperClassName?: string
   'data-testid'?: string
 }
@@ -53,8 +53,8 @@ const MonacoJson = (props: Props) => {
   }
 
   if (monaco?.editor) {
-    monaco.editor.defineTheme('dark', darkTheme)
-    monaco.editor.defineTheme('light', lightTheme)
+    monaco.editor.defineTheme(MonacoThemes.Dark, darkTheme)
+    monaco.editor.defineTheme(MonacoThemes.Light, lightTheme)
   }
 
   const options: monacoEditor.editor.IStandaloneEditorConstructionOptions = {

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

@@ -36,7 +36,7 @@ import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
 import { IEditorMount, ISnippetController } from 'uiSrc/pages/workbench/interfaces'
 import { CommandExecutionUI } from 'uiSrc/slices/interfaces'
-import { darkTheme, lightTheme } from 'uiSrc/constants/monaco/cypher'
+import { darkTheme, lightTheme, MonacoThemes } from 'uiSrc/constants/monaco/cypher'
 import { RunQueryMode, ResultsMode } from 'uiSrc/slices/interfaces/workbench'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { stopProcessing, workbenchResultsSelector } from 'uiSrc/slices/workbench/wb-results'
@@ -466,8 +466,8 @@ const Query = (props: Props) => {
   }
 
   if (monaco?.editor) {
-    monaco.editor.defineTheme('dark', darkTheme)
-    monaco.editor.defineTheme('light', lightTheme)
+    monaco.editor.defineTheme(MonacoThemes.Dark, darkTheme)
+    monaco.editor.defineTheme(MonacoThemes.Light, lightTheme)
   }
 
   const isLoading = loading || processing

redisinsight/ui/src/constants/monaco/cypher/theme.ts

@@ -8,6 +8,11 @@ export const lightThemeRules = [
   { token: 'function', foreground: '795E26' }
 ]
 
+export enum MonacoThemes {
+  Dark = 'dark',
+  Light = 'light'
+}
+
 export const darkTheme: monaco.editor.IStandaloneThemeData = {
   base: 'vs-dark',
   inherit: true,

redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx

@@ -75,6 +75,7 @@ const AddKeyReJSON = (props: Props) => {
           value={ReJSONValue}
           onChange={setReJSONValue}
           disabled={loading}
+          data-testid="json-value"
         />
       </EuiFormRow>