feat: tests added to problem editor

Author: jesusbalderramawgu

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.tsx

@@ -3,6 +3,7 @@ import { render, screen, initializeMocks } from '@src/testUtils';
 import { selectors } from '@src/editors/data/redux';
 import AnswerOption from './AnswerOption';
 import * as hooks from './hooks';
+import * as reactQueryHooks from '../../../data/apiHooks';
 
 const { problem } = selectors;
 
@@ -101,4 +102,16 @@ describe('AnswerOption', () => {
     expect(screen.getByText(answerRange.title)).toBeInTheDocument();
     expect(screen.getByRole('textbox')).toBeInTheDocument();
   });
+
+  test('shows numeric error feedback when data.isValid is false', () => {
+    // Mock useValidateInputBlock to simulate invalid state
+    // @ts-ignore-next-line
+    jest.spyOn(reactQueryHooks, 'useValidateInputBlock').mockReturnValue({ data: { isValid: false } });
+    jest.spyOn(problem, 'problemType').mockReturnValue('numericalresponse');
+    const myProps = { ...props, answer: { ...answerWithOnlyFeedback, isAnswerRange: false } };
+    render(<AnswerOption {...myProps} />);
+    expect(
+      screen.getByText('Error: This input type only supports numeric answers. Did you mean to make a Text input or Math expression input problem?'),
+    ).toBeInTheDocument();
+  });
 });

src/editors/containers/ProblemEditor/data/apiHooks.test.tsx

@@ -0,0 +1,69 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import api from '@src/editors/data/services/cms/api';
+import { useValidateInputBlock } from './apiHooks';
+
+// Mock external dependencies
+jest.mock('@edx/frontend-platform');
+jest.mock('@src/editors/data/services/cms/api', () => ({
+  validateBlockNumericInput: jest.fn(),
+}));
+
+const mockedCamelCaseObject = jest.mocked(camelCaseObject);
+const mockedGetConfig = jest.mocked(getConfig);
+const mockedValidateBlockNumericInput = jest.mocked(api.validateBlockNumericInput);
+
+// Test wrapper component
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  const wrapper = ({ children }) => (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+  return wrapper;
+};
+
+describe('useValidateInputBlock', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockedGetConfig.mockReturnValue({
+      STUDIO_BASE_URL: 'http://studio.local.openedx.io:8001',
+    });
+  });
+
+  test('should return camelCase data on successful API call', async () => {
+    const mockResponse = {
+      data: { is_valid: true, result: 'success' },
+    } as any;
+    const mockCamelCaseResult = { isValid: true, result: 'success' };
+
+    mockedValidateBlockNumericInput.mockResolvedValue(Promise.resolve(mockResponse));
+    mockedCamelCaseObject.mockReturnValue(mockCamelCaseResult);
+
+    const { result } = renderHook(() => useValidateInputBlock(), {
+      wrapper: createWrapper(),
+    });
+
+    const testFormula = 'x + 1';
+    result.current.mutate(testFormula);
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(mockedValidateBlockNumericInput).toHaveBeenCalledWith({
+      studioEndpointUrl: 'http://studio.local.openedx.io:8001',
+      data: { formula: testFormula },
+    });
+    expect(mockedCamelCaseObject).toHaveBeenCalledWith(mockResponse.data);
+    expect(result.current.data).toEqual({ isValid: true, result: 'success' });
+  });
+});

src/editors/containers/ProblemEditor/data/apiHooks.ts

@@ -5,7 +5,7 @@ import api from '@src/editors/data/services/cms/api';
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
 
 export const useValidateInputBlock = () => useMutation({
-  mutationFn: async (title) => {
+  mutationFn: async (title : string) => {
     try {
       const res = await api.validateBlockNumericInput({ studioEndpointUrl: `${getApiBaseUrl()}`, data: { formula: title } });
       return camelCaseObject(res.data);