added test cases for setup process

client/src/ConfigurationTask/ConfigurationTask.test.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ConfigurationTask from './index';
+import '@testing-library/jest-dom';
+
+
+// Mock the useTranslation hook with actual translations
+jest.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: key => ({
+            "setup.tabs.taskinfo.task_info": "Task Information",
+            "setup.tabs.taskinfo.task_choice": "Choice of Task",
+            "setup.tabs.taskinfo.task_choice_classification": "Image Classification",
+            "setup.tabs.taskinfo.task_choice_segmentation": "Image Segmentation",
+        }[key]),
+    }),
+}));
+
+  jest.mock('material-survey/components/Survey', () => ({
+    // Mock implementation for Survey
+    __esModule: true,
+    default: jest.fn(({ form, onQuestionChange }) => (
+      <div data-testid="mocked-survey">
+        {form.questions.map((q) => (
+          <div key={q.name} data-testid={`question-${q.name}`}>
+            {q.title}
+            {q.type === 'text' && <input data-testid={`answer-${q.name}`} />}
+            {q.type === 'radiogroup' && (
+              <div>
+                {q.choices.map((choice) => (
+                  <label key={choice.value}>
+                    <input
+                      type="radio"
+                      value={choice.value}
+                      name={q.name}
+                      data-testid={`radio-${q.name}-${choice.value}`}
+                    />
+                    {choice.text}
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+        <button data-testid="complete-button">Complete</button>
+      </div>
+    )),
+  }));
+
+  describe('ConfigurationTask', () => {
+    test('renders form with questions and calls onChange on answer change', () => {
+      const mockConfig = {};
+      const mockOnChange = jest.fn();
+
+      const mockForm = {
+        questions: [
+          { name: 'taskDescription', title: 'Task Description', type: 'text' },
+          {
+            name: 'taskChoice',
+            title: 'Task Choice',
+            type: 'radiogroup',
+            choices: [
+              { value: 'image_classification', text: 'Image Classification' },
+              { value: 'image_segmentation', text: 'Image Segmentation' },
+            ],
+          },
+        ],
+      };
+
+      render(<ConfigurationTask config={mockConfig} onChange={mockOnChange} form={mockForm} />);
+
+      // Assert question titles are rendered
+      expect(screen.getByText('Task Information')).toBeInTheDocument();
+      expect(screen.getByText('Choice of Task')).toBeInTheDocument();
+
+      // Assert radio buttons are rendered
+      const imageClassificationRadio = screen.getByTestId(`radio-taskChoice-image_classification`);
+      const imageSegmentationRadio = screen.getByTestId(`radio-taskChoice-image_segmentation`);
+      expect(imageClassificationRadio).toBeInTheDocument();
+      expect(imageSegmentationRadio).toBeInTheDocument();
+
+      // Simulate changing radio button and verify onChange is called
+      fireEvent.click(imageSegmentationRadio, { target: { value: 'image_segmentation' } });
+      expect(imageSegmentationRadio).toHaveAttribute('value', 'image_segmentation');
+
+      // Simulate completing the form
+      fireEvent.click(screen.getByTestId('complete-button'));
+      // Add assertions to verify completion behavior based on YourComponent logic
+    });
+  });

client/src/ConfigureImageClassification/ConfigureImageClassification.test.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ConfigureImageClassification from './index';
+import '@testing-library/jest-dom';
+
+// Mock the useTranslation hook with actual translations
+jest.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: key => ({
+            "configuration.multiple_regions": "Multiple Regions",
+            "configuration.multiple_region_labels": "Multiple Region Labels",
+            "configuration.region_types_allowed": "Region Types Allowed",
+            "configuration.region_types_allowed.description": "Select the types of regions allowed",
+            "configuration.labels": "Labels",
+            "configuration.labels.description": "Provide labels for the regions",
+            "configuration.labels.option.id": "ID",
+            "configuration.labels.option.description": "Description",
+            "configuration.regions": "Regions",
+            "configuration.regions.description": "Select a region type",
+        }[key]),
+    }),
+}));
+
+// Mock the Survey component from material-survey
+jest.mock('material-survey/components/Survey', () => ({
+    __esModule: true,
+    default: jest.fn(({ form, onQuestionChange }) => (
+        <div data-testid="mocked-survey">
+            {form.questions.map((q) => (
+                <div key={q.name} data-testid={`question-${q.name}`}>
+                    {q.title}
+                    {q.type === 'boolean' && <input type="checkbox" data-testid={`checkbox-${q.name}`} />}
+                    {q.type === 'checkbox' && (
+                        <div>
+                            {q.choices.map((choice) => (
+                                <label key={choice}>
+                                    <input
+                                        type="checkbox"
+                                        value={choice}
+                                        name={q.name}
+                                        data-testid={`checkbox-${q.name}-${choice}`}
+                                    />
+                                    {choice}
+                                </label>
+                            ))}
+                        </div>
+                    )}
+                    {q.type === 'matrixdynamic' && (
+                        <div data-testid={`matrixdynamic-${q.name}`}>
+                            {q.columns.map((col) => (
+                                <div key={col.name}>{col.title}</div>
+                            ))}
+                            <input data-testid={`matrixdynamic-input-${q.name}`} />
+                        </div>
+                    )}
+                    {q.type === 'dropdown' && (
+                        <select data-testid={`dropdown-${q.name}`}>
+                            {q.choices.map((choice) => (
+                                <option key={choice} value={choice}>
+                                    {choice}
+                                </option>
+                            ))}
+                        </select>
+                    )}
+                </div>
+            ))}
+            <button data-testid="complete-button">Complete</button>
+        </div>
+    )),
+}));
+
+describe('ConfigureImageClassification', () => {
+    test('renders form with questions and calls onChange on answer change', () => {
+        const mockConfig = {};
+        const mockOnChange = jest.fn();
+
+        render(<ConfigureImageClassification config={mockConfig} onChange={mockOnChange} />);
+
+        // Assert question titles are rendered
+        expect(screen.getByText('Multiple Regions')).toBeInTheDocument();
+        expect(screen.getByText('Multiple Region Labels')).toBeInTheDocument();
+        expect(screen.getByText('Region Types Allowed')).toBeInTheDocument();
+        expect(screen.getByText('Labels')).toBeInTheDocument();
+        expect(screen.getByText('Regions')).toBeInTheDocument();
+
+        // Assert checkboxes are rendered
+        const multipleRegionsCheckbox = screen.getByTestId('checkbox-multipleRegions');
+        const multipleRegionLabelsCheckbox = screen.getByTestId('checkbox-multipleRegionLabels');
+        expect(multipleRegionsCheckbox).toBeInTheDocument();
+        expect(multipleRegionLabelsCheckbox).toBeInTheDocument();
+
+        // Simulate changing checkbox and verify onChange is called
+        fireEvent.change(multipleRegionsCheckbox, { target: { checked: true } });
+        expect(multipleRegionsCheckbox).toBeChecked();
+        fireEvent.change(multipleRegionLabelsCheckbox, { target: { checked: true } });
+        expect(multipleRegionLabelsCheckbox).toBeChecked();
+
+        // Simulate completing the form
+        fireEvent.click(screen.getByTestId('complete-button'));
+        // Add assertions to verify completion behavior based on YourComponent logic
+    });
+});

client/src/ConfigureImageSegmentation/ConfigureImageSegmentation.test.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ConfigureImageSegmentation from './index';
+import '@testing-library/jest-dom';
+
+// Mock the useTranslation hook with actual translations
+jest.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: key => ({
+            "configuration.region_types_allowed": "Region Types Allowed",
+            "configuration.region_types_allowed.description": "Select the types of regions allowed",
+            "configuration.multiple_regions": "Multiple Regions",
+            "configuration.multiple_region_labels": "Multiple Region Labels",
+            "configuration.labels": "Labels",
+            "configuration.labels.description": "Provide labels for the regions",
+            "configuration.labels.option.id": "ID",
+            "configuration.labels.option.description": "Description",
+        }[key]),
+    }),
+}));
+
+// Mock the Survey component from material-survey
+jest.mock('material-survey/components/Survey', () => ({
+    __esModule: true,
+    default: jest.fn(({ form, onQuestionChange }) => (
+        <div data-testid="mocked-survey">
+            {form.questions.map((q) => (
+                <div key={q.name} data-testid={`question-${q.name}`}>
+                    {q.title}
+                    {q.type === 'boolean' && <input type="checkbox" data-testid={`checkbox-${q.name}`} />}
+                    {q.type === 'multiple-dropdown' && (
+                        <select multiple data-testid={`multiple-dropdown-${q.name}`}>
+                            {q.choices.map((choice) => (
+                                <option key={choice} value={choice}>
+                                    {choice}
+                                </option>
+                            ))}
+                        </select>
+                    )}
+                    {q.type === 'matrixdynamic' && (
+                        <div data-testid={`matrixdynamic-${q.name}`}>
+                            {q.columns.map((col) => (
+                                <div key={col.name}>{col.title}</div>
+                            ))}
+                            <input data-testid={`matrixdynamic-input-${q.name}`} />
+                        </div>
+                    )}
+                </div>
+            ))}
+            <button data-testid="complete-button">Complete</button>
+        </div>
+    )),
+}));
+
+describe('ConfigureImageSegmentation', () => {
+    test('renders form with questions and calls onChange on answer change', () => {
+        const mockConfig = {};
+        const mockOnChange = jest.fn();
+
+        render(<ConfigureImageSegmentation config={mockConfig} onChange={mockOnChange} />);
+
+        // Assert question titles are rendered
+        expect(screen.getByText('Region Types Allowed')).toBeInTheDocument();
+        expect(screen.getByText('Multiple Regions')).toBeInTheDocument();
+        expect(screen.getByText('Multiple Region Labels')).toBeInTheDocument();
+        expect(screen.getByText('Labels')).toBeInTheDocument();
+
+        // Assert checkboxes are rendered
+        const multipleRegionsCheckbox = screen.getByTestId('checkbox-multipleRegions');
+        const multipleRegionLabelsCheckbox = screen.getByTestId('checkbox-multipleRegionLabels');
+        expect(multipleRegionsCheckbox).toBeInTheDocument();
+        expect(multipleRegionLabelsCheckbox).toBeInTheDocument();
+
+        // Simulate changing checkbox and verify onChange is called
+        fireEvent.change(multipleRegionsCheckbox, { target: { checked: true } });
+        expect(multipleRegionsCheckbox).toBeChecked();
+        fireEvent.change(multipleRegionLabelsCheckbox, { target: { checked: true } });
+        expect(multipleRegionLabelsCheckbox).toBeChecked();
+
+        // Simulate changing multiple-dropdown and verify onChange is called
+        const regionTypesAllowedDropdown = screen.getByTestId('multiple-dropdown-regionTypesAllowed');
+        fireEvent.mouseDown(regionTypesAllowedDropdown);
+        const boundingBoxOption = screen.getByText('bounding-box');
+        const polygonOption = screen.getByText('polygon');
+        fireEvent.click(boundingBoxOption);
+        fireEvent.click(polygonOption);
+
+        // Simulate completing the form
+        fireEvent.click(screen.getByTestId('complete-button'));
+        // Add assertions to verify completion behavior based on YourComponent logic
+    });
+});

client/src/SetupPage/SetupPage.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SetupPage } from './index';
+import { useSettings } from '../SettingsProvider';
+
+// Mock useTranslation hook
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key) => key,
+  }),
+}));
+
+// Mock useSettings hook
+jest.mock('../SettingsProvider', () => ({
+  useSettings: jest.fn(),
+}));
+
+// Mock dependent components
+jest.mock('../ConfigureImageClassification', () => jest.fn(() => <div data-testid="ConfigureImageClassification" />));
+jest.mock('../ConfigureImageSegmentation', () => jest.fn(() => <div data-testid="ConfigureImageSegmentation" />));
+jest.mock('../ConfigurationTask', () => jest.fn(({ onChange }) => (
+  <input
+    data-testid="ConfigurationTask"
+    onChange={(e) => onChange({ target: { value: e.target.value } })}
+  />
+)));
+jest.mock('../ImageUpload', () => jest.fn(() => <div data-testid="ImageUpload" />));
+
+describe('SetupPage', () => {
+  const mockSettings = {
+    taskDescription: '',
+    configuration: { labels: [] },
+    images: [],
+    taskChoice: 'image_classification',
+  };
+  const mockSetConfiguration = jest.fn();
+  const mockSetShowLabel = jest.fn();
+
+  beforeEach(() => {
+    useSettings.mockReturnValue({
+      changeSetting: jest.fn(),
+    });
+
+    render(
+      <SetupPage
+        settings={mockSettings}
+        setConfiguration={mockSetConfiguration}
+        setShowLabel={mockSetShowLabel}
+      />
+    );
+  });
+
+  test('renders tabs and default content', () => {
+    // Check tabs
+    expect(screen.getByText('setup.tabs.taskinfo')).toBeInTheDocument();
+    expect(screen.getByText('setup.tabs.configure')).toBeInTheDocument();
+    expect(screen.getByText('setup.tabs.image')).toBeInTheDocument();
+
+    // Check default content (datatype tab)
+    expect(screen.getByTestId('ConfigurationTask')).toBeInTheDocument();
+  });
+});