fix tests

Author: pawelangelow

src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.spec.tsx

@@ -1,46 +1,65 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { fireEvent, render, screen } from 'testSrc/helpers'
-import { EditEntireItemAction, Props } from './EditEntireItemAction'
+import { screen, fireEvent } from 'testSrc/helpers'
 import { JSONErrors } from '../../constants'
 
-const mockedProps = mock<Props>()
-
+const mockedProps = mock<any>()
 const valueOfEntireItem = '"Sample string"'
 
+async function renderWithMockedMonaco(props: any) {
+  vi.resetModules()
+  vi.doMock('react-monaco-editor', () => ({
+    default: ({ value, onChange, 'data-testid': dataTestId }: any) => (
+      <textarea
+        data-testid={dataTestId}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+      />
+    ),
+  }))
+
+  const { EditEntireItemAction } = await import('./EditEntireItemAction')
+  const { render } = await import('testSrc/helpers')
+  return render(<EditEntireItemAction {...props} />)
+}
+
 describe('EditEntireItemAction', () => {
-  it('renders correctly with provided props', () => {
-    render(<EditEntireItemAction
-      {...instance(mockedProps)}
-      initialValue={valueOfEntireItem}
-    />)
+  it('renders correctly with provided props', async () => {
+    await renderWithMockedMonaco({
+      ...instance(mockedProps),
+      initialValue: valueOfEntireItem,
+    })
 
     expect(screen.getByTestId('json-value')).toBeInTheDocument()
     expect(screen.getByTestId('json-value')).toHaveValue(valueOfEntireItem)
   })
 
-  it('triggers handleUpdateValueFormSubmit when the form is submitted', () => {
+  it('triggers handleUpdateValueFormSubmit when the form is submitted', async () => {
     const handleUpdateValueFormSubmit = vi.fn()
-    render(<EditEntireItemAction
-      {...instance(mockedProps)}
-      initialValue={valueOfEntireItem}
-      onSubmit={handleUpdateValueFormSubmit}
-    />)
+
+    await renderWithMockedMonaco({
+      ...instance(mockedProps),
+      initialValue: valueOfEntireItem,
+      onSubmit: handleUpdateValueFormSubmit,
+    })
 
     fireEvent.submit(screen.getByTestId('json-entire-form'))
     expect(handleUpdateValueFormSubmit).toHaveBeenCalled()
   })
 
-  it('shouuld show error and do not submit', () => {
+  it('should show error and not submit', async () => {
     const handleUpdateValueFormSubmit = vi.fn()
-    render(<EditEntireItemAction
-      {...instance(mockedProps)}
-      initialValue="xxxx"
-      onSubmit={handleUpdateValueFormSubmit}
-    />)
+
+    await renderWithMockedMonaco({
+      ...instance(mockedProps),
+      initialValue: 'xxxx',
+      onSubmit: handleUpdateValueFormSubmit,
+    })
 
     fireEvent.submit(screen.getByTestId('json-entire-form'))
-    expect(screen.getByTestId('edit-json-error')).toHaveTextContent(JSONErrors.valueJSONFormat)
+    expect(screen.getByTestId('edit-json-error')).toHaveTextContent(
+      JSONErrors.valueJSONFormat,
+    )
     expect(handleUpdateValueFormSubmit).not.toHaveBeenCalled()
   })
 })

src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx

@@ -68,6 +68,7 @@ export const EditEntireItemAction = (props: Props) => {
                 wrapperClassName={styles.editorWrapper}
                 value={value}
                 onChange={setValue}
+                data-testid="json-value"
               />
             </div>
           </div>