test: editor test case is added (#2649)

frontend/src/components/Editor/Editor.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import React from 'react';
+
+import Editor from './index';
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn(),
+}));
+
+describe('Editor', () => {
+	it('renders correctly with default props', () => {
+		const { container } = render(<Editor value="" />);
+		expect(container).toMatchSnapshot();
+	});
+
+	it('renders correctly with custom props', () => {
+		const customProps = {
+			value: 'test',
+			language: 'javascript',
+			readOnly: true,
+			height: '50vh',
+			options: { minimap: { enabled: false } },
+		};
+		const { container } = render(
+			<Editor
+				value={customProps.value}
+				height={customProps.height}
+				language={customProps.language}
+				options={customProps.options}
+				readOnly={customProps.readOnly}
+			/>,
+		);
+		expect(container).toMatchSnapshot();
+	});
+
+	it('renders with dark mode theme', () => {
+		(useIsDarkMode as jest.Mock).mockImplementation(() => true);
+
+		const { container } = render(<Editor value="dark mode text" />);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('renders with light mode theme', () => {
+		(useIsDarkMode as jest.Mock).mockImplementation(() => false);
+
+		const { container } = render(<Editor value="light mode text" />);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('displays "Loading..." message initially', () => {
+		const { rerender } = render(<Editor value="initial text" />);
+
+		expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+		rerender(<Editor value="initial text" />);
+	});
+});

frontend/src/components/Editor/__snapshots__/Editor.test.tsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Editor renders correctly with custom props 1`] = `
+<div>
+  <section
+    style="display: flex; position: relative; text-align: initial; width: 100%; height: 50vh;"
+  >
+    <div
+      style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
+    >
+      Loading...
+    </div>
+    <div
+      style="width: 100%; display: none;"
+    />
+  </section>
+</div>
+`;
+
+exports[`Editor renders correctly with default props 1`] = `
+<div>
+  <section
+    style="display: flex; position: relative; text-align: initial; width: 100%; height: 40vh;"
+  >
+    <div
+      style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
+    >
+      Loading...
+    </div>
+    <div
+      style="width: 100%; display: none;"
+    />
+  </section>
+</div>
+`;
+
+exports[`Editor renders with dark mode theme 1`] = `
+<div>
+  <section
+    style="display: flex; position: relative; text-align: initial; width: 100%; height: 40vh;"
+  >
+    <div
+      style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
+    >
+      Loading...
+    </div>
+    <div
+      style="width: 100%; display: none;"
+    />
+  </section>
+</div>
+`;
+
+exports[`Editor renders with light mode theme 1`] = `
+<div>
+  <section
+    style="display: flex; position: relative; text-align: initial; width: 100%; height: 40vh;"
+  >
+    <div
+      style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
+    >
+      Loading...
+    </div>
+    <div
+      style="width: 100%; display: none;"
+    />
+  </section>
+</div>
+`;

frontend/src/components/Editor/index.tsx

@@ -13,6 +13,8 @@ function Editor({
 	const isDarkMode = useIsDarkMode();
 
 	const onChangeHandler = (newValue?: string): void => {
+		if (readOnly) return;
+
 		if (typeof newValue === 'string' && onChange) onChange(newValue);
 	};
 
@@ -29,6 +31,7 @@ function Editor({
 			options={editorOptions}
 			height={height}
 			onChange={onChangeHandler}
+			data-testid="monaco-editor"
 		/>
 	);
 }