Skip to content

Commit 59a4f84

Browse files
sumn2usumn2u
committed
added test cases for setup process
1 parent b6bb4d9 commit 59a4f84

File tree

4 files changed

+347
-0
lines changed

4 files changed

+347
-0
lines changed

‎client/src/ConfigurationTask/ConfigurationTask.test.js

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from 'react';
2+
import { render, screen, fireEvent } from '@testing-library/react';
3+
import ConfigurationTask from './index';
4+
import '@testing-library/jest-dom';
5+
6+
7+
// Mock the useTranslation hook with actual translations
8+
jest.mock('react-i18next', () => ({
9+
useTranslation: () => ({
10+
t: key => ({
11+
"setup.tabs.taskinfo.task_info": "Task Information",
12+
"setup.tabs.taskinfo.task_choice": "Choice of Task",
13+
"setup.tabs.taskinfo.task_choice_classification": "Image Classification",
14+
"setup.tabs.taskinfo.task_choice_segmentation": "Image Segmentation",
15+
}[key]),
16+
}),
17+
}));
18+
19+
jest.mock('material-survey/components/Survey', () => ({
20+
// Mock implementation for Survey
21+
__esModule: true,
22+
default: jest.fn(({ form, onQuestionChange }) => (
23+
<div data-testid="mocked-survey">
24+
{form.questions.map((q) => (
25+
<div key={q.name} data-testid={`question-${q.name}`}>
26+
{q.title}
27+
{q.type === 'text' && <input data-testid={`answer-${q.name}`} />}
28+
{q.type === 'radiogroup' && (
29+
<div>
30+
{q.choices.map((choice) => (
31+
<label key={choice.value}>
32+
<input
33+
type="radio"
34+
value={choice.value}
35+
name={q.name}
36+
data-testid={`radio-${q.name}-${choice.value}`}
37+
/>
38+
{choice.text}
39+
</label>
40+
))}
41+
</div>
42+
)}
43+
</div>
44+
))}
45+
<button data-testid="complete-button">Complete</button>
46+
</div>
47+
)),
48+
}));
49+
50+
describe('ConfigurationTask', () => {
51+
test('renders form with questions and calls onChange on answer change', () => {
52+
const mockConfig = {};
53+
const mockOnChange = jest.fn();
54+
55+
const mockForm = {
56+
questions: [
57+
{ name: 'taskDescription', title: 'Task Description', type: 'text' },
58+
{
59+
name: 'taskChoice',
60+
title: 'Task Choice',
61+
type: 'radiogroup',
62+
choices: [
63+
{ value: 'image_classification', text: 'Image Classification' },
64+
{ value: 'image_segmentation', text: 'Image Segmentation' },
65+
],
66+
},
67+
],
68+
};
69+
70+
render(<ConfigurationTask config={mockConfig} onChange={mockOnChange} form={mockForm} />);
71+
72+
// Assert question titles are rendered
73+
expect(screen.getByText('Task Information')).toBeInTheDocument();
74+
expect(screen.getByText('Choice of Task')).toBeInTheDocument();
75+
76+
// Assert radio buttons are rendered
77+
const imageClassificationRadio = screen.getByTestId(`radio-taskChoice-image_classification`);
78+
const imageSegmentationRadio = screen.getByTestId(`radio-taskChoice-image_segmentation`);
79+
expect(imageClassificationRadio).toBeInTheDocument();
80+
expect(imageSegmentationRadio).toBeInTheDocument();
81+
82+
// Simulate changing radio button and verify onChange is called
83+
fireEvent.click(imageSegmentationRadio, { target: { value: 'image_segmentation' } });
84+
expect(imageSegmentationRadio).toHaveAttribute('value', 'image_segmentation');
85+
86+
// Simulate completing the form
87+
fireEvent.click(screen.getByTestId('complete-button'));
88+
// Add assertions to verify completion behavior based on YourComponent logic
89+
});
90+
});

‎client/src/ConfigureImageClassification/ConfigureImageClassification.test.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from 'react';
2+
import { render, screen, fireEvent } from '@testing-library/react';
3+
import ConfigureImageClassification from './index';
4+
import '@testing-library/jest-dom';
5+
6+
// Mock the useTranslation hook with actual translations
7+
jest.mock('react-i18next', () => ({
8+
useTranslation: () => ({
9+
t: key => ({
10+
"configuration.multiple_regions": "Multiple Regions",
11+
"configuration.multiple_region_labels": "Multiple Region Labels",
12+
"configuration.region_types_allowed": "Region Types Allowed",
13+
"configuration.region_types_allowed.description": "Select the types of regions allowed",
14+
"configuration.labels": "Labels",
15+
"configuration.labels.description": "Provide labels for the regions",
16+
"configuration.labels.option.id": "ID",
17+
"configuration.labels.option.description": "Description",
18+
"configuration.regions": "Regions",
19+
"configuration.regions.description": "Select a region type",
20+
}[key]),
21+
}),
22+
}));
23+
24+
// Mock the Survey component from material-survey
25+
jest.mock('material-survey/components/Survey', () => ({
26+
__esModule: true,
27+
default: jest.fn(({ form, onQuestionChange }) => (
28+
<div data-testid="mocked-survey">
29+
{form.questions.map((q) => (
30+
<div key={q.name} data-testid={`question-${q.name}`}>
31+
{q.title}
32+
{q.type === 'boolean' && <input type="checkbox" data-testid={`checkbox-${q.name}`} />}
33+
{q.type === 'checkbox' && (
34+
<div>
35+
{q.choices.map((choice) => (
36+
<label key={choice}>
37+
<input
38+
type="checkbox"
39+
value={choice}
40+
name={q.name}
41+
data-testid={`checkbox-${q.name}-${choice}`}
42+
/>
43+
{choice}
44+
</label>
45+
))}
46+
</div>
47+
)}
48+
{q.type === 'matrixdynamic' && (
49+
<div data-testid={`matrixdynamic-${q.name}`}>
50+
{q.columns.map((col) => (
51+
<div key={col.name}>{col.title}</div>
52+
))}
53+
<input data-testid={`matrixdynamic-input-${q.name}`} />
54+
</div>
55+
)}
56+
{q.type === 'dropdown' && (
57+
<select data-testid={`dropdown-${q.name}`}>
58+
{q.choices.map((choice) => (
59+
<option key={choice} value={choice}>
60+
{choice}
61+
</option>
62+
))}
63+
</select>
64+
)}
65+
</div>
66+
))}
67+
<button data-testid="complete-button">Complete</button>
68+
</div>
69+
)),
70+
}));
71+
72+
describe('ConfigureImageClassification', () => {
73+
test('renders form with questions and calls onChange on answer change', () => {
74+
const mockConfig = {};
75+
const mockOnChange = jest.fn();
76+
77+
render(<ConfigureImageClassification config={mockConfig} onChange={mockOnChange} />);
78+
79+
// Assert question titles are rendered
80+
expect(screen.getByText('Multiple Regions')).toBeInTheDocument();
81+
expect(screen.getByText('Multiple Region Labels')).toBeInTheDocument();
82+
expect(screen.getByText('Region Types Allowed')).toBeInTheDocument();
83+
expect(screen.getByText('Labels')).toBeInTheDocument();
84+
expect(screen.getByText('Regions')).toBeInTheDocument();
85+
86+
// Assert checkboxes are rendered
87+
const multipleRegionsCheckbox = screen.getByTestId('checkbox-multipleRegions');
88+
const multipleRegionLabelsCheckbox = screen.getByTestId('checkbox-multipleRegionLabels');
89+
expect(multipleRegionsCheckbox).toBeInTheDocument();
90+
expect(multipleRegionLabelsCheckbox).toBeInTheDocument();
91+
92+
// Simulate changing checkbox and verify onChange is called
93+
fireEvent.change(multipleRegionsCheckbox, { target: { checked: true } });
94+
expect(multipleRegionsCheckbox).toBeChecked();
95+
fireEvent.change(multipleRegionLabelsCheckbox, { target: { checked: true } });
96+
expect(multipleRegionLabelsCheckbox).toBeChecked();
97+
98+
// Simulate completing the form
99+
fireEvent.click(screen.getByTestId('complete-button'));
100+
// Add assertions to verify completion behavior based on YourComponent logic
101+
});
102+
});

‎client/src/ConfigureImageSegmentation/ConfigureImageSegmentation.test.js

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from 'react';
2+
import { render, screen, fireEvent } from '@testing-library/react';
3+
import ConfigureImageSegmentation from './index';
4+
import '@testing-library/jest-dom';
5+
6+
// Mock the useTranslation hook with actual translations
7+
jest.mock('react-i18next', () => ({
8+
useTranslation: () => ({
9+
t: key => ({
10+
"configuration.region_types_allowed": "Region Types Allowed",
11+
"configuration.region_types_allowed.description": "Select the types of regions allowed",
12+
"configuration.multiple_regions": "Multiple Regions",
13+
"configuration.multiple_region_labels": "Multiple Region Labels",
14+
"configuration.labels": "Labels",
15+
"configuration.labels.description": "Provide labels for the regions",
16+
"configuration.labels.option.id": "ID",
17+
"configuration.labels.option.description": "Description",
18+
}[key]),
19+
}),
20+
}));
21+
22+
// Mock the Survey component from material-survey
23+
jest.mock('material-survey/components/Survey', () => ({
24+
__esModule: true,
25+
default: jest.fn(({ form, onQuestionChange }) => (
26+
<div data-testid="mocked-survey">
27+
{form.questions.map((q) => (
28+
<div key={q.name} data-testid={`question-${q.name}`}>
29+
{q.title}
30+
{q.type === 'boolean' && <input type="checkbox" data-testid={`checkbox-${q.name}`} />}
31+
{q.type === 'multiple-dropdown' && (
32+
<select multiple data-testid={`multiple-dropdown-${q.name}`}>
33+
{q.choices.map((choice) => (
34+
<option key={choice} value={choice}>
35+
{choice}
36+
</option>
37+
))}
38+
</select>
39+
)}
40+
{q.type === 'matrixdynamic' && (
41+
<div data-testid={`matrixdynamic-${q.name}`}>
42+
{q.columns.map((col) => (
43+
<div key={col.name}>{col.title}</div>
44+
))}
45+
<input data-testid={`matrixdynamic-input-${q.name}`} />
46+
</div>
47+
)}
48+
</div>
49+
))}
50+
<button data-testid="complete-button">Complete</button>
51+
</div>
52+
)),
53+
}));
54+
55+
describe('ConfigureImageSegmentation', () => {
56+
test('renders form with questions and calls onChange on answer change', () => {
57+
const mockConfig = {};
58+
const mockOnChange = jest.fn();
59+
60+
render(<ConfigureImageSegmentation config={mockConfig} onChange={mockOnChange} />);
61+
62+
// Assert question titles are rendered
63+
expect(screen.getByText('Region Types Allowed')).toBeInTheDocument();
64+
expect(screen.getByText('Multiple Regions')).toBeInTheDocument();
65+
expect(screen.getByText('Multiple Region Labels')).toBeInTheDocument();
66+
expect(screen.getByText('Labels')).toBeInTheDocument();
67+
68+
// Assert checkboxes are rendered
69+
const multipleRegionsCheckbox = screen.getByTestId('checkbox-multipleRegions');
70+
const multipleRegionLabelsCheckbox = screen.getByTestId('checkbox-multipleRegionLabels');
71+
expect(multipleRegionsCheckbox).toBeInTheDocument();
72+
expect(multipleRegionLabelsCheckbox).toBeInTheDocument();
73+
74+
// Simulate changing checkbox and verify onChange is called
75+
fireEvent.change(multipleRegionsCheckbox, { target: { checked: true } });
76+
expect(multipleRegionsCheckbox).toBeChecked();
77+
fireEvent.change(multipleRegionLabelsCheckbox, { target: { checked: true } });
78+
expect(multipleRegionLabelsCheckbox).toBeChecked();
79+
80+
// Simulate changing multiple-dropdown and verify onChange is called
81+
const regionTypesAllowedDropdown = screen.getByTestId('multiple-dropdown-regionTypesAllowed');
82+
fireEvent.mouseDown(regionTypesAllowedDropdown);
83+
const boundingBoxOption = screen.getByText('bounding-box');
84+
const polygonOption = screen.getByText('polygon');
85+
fireEvent.click(boundingBoxOption);
86+
fireEvent.click(polygonOption);
87+
88+
// Simulate completing the form
89+
fireEvent.click(screen.getByTestId('complete-button'));
90+
// Add assertions to verify completion behavior based on YourComponent logic
91+
});
92+
});

‎client/src/SetupPage/SetupPage.test.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import { render, screen, fireEvent } from '@testing-library/react';
3+
import '@testing-library/jest-dom';
4+
import { SetupPage } from './index';
5+
import { useSettings } from '../SettingsProvider';
6+
7+
// Mock useTranslation hook
8+
jest.mock('react-i18next', () => ({
9+
useTranslation: () => ({
10+
t: (key) => key,
11+
}),
12+
}));
13+
14+
// Mock useSettings hook
15+
jest.mock('../SettingsProvider', () => ({
16+
useSettings: jest.fn(),
17+
}));
18+
19+
// Mock dependent components
20+
jest.mock('../ConfigureImageClassification', () => jest.fn(() => <div data-testid="ConfigureImageClassification" />));
21+
jest.mock('../ConfigureImageSegmentation', () => jest.fn(() => <div data-testid="ConfigureImageSegmentation" />));
22+
jest.mock('../ConfigurationTask', () => jest.fn(({ onChange }) => (
23+
<input
24+
data-testid="ConfigurationTask"
25+
onChange={(e) => onChange({ target: { value: e.target.value } })}
26+
/>
27+
)));
28+
jest.mock('../ImageUpload', () => jest.fn(() => <div data-testid="ImageUpload" />));
29+
30+
describe('SetupPage', () => {
31+
const mockSettings = {
32+
taskDescription: '',
33+
configuration: { labels: [] },
34+
images: [],
35+
taskChoice: 'image_classification',
36+
};
37+
const mockSetConfiguration = jest.fn();
38+
const mockSetShowLabel = jest.fn();
39+
40+
beforeEach(() => {
41+
useSettings.mockReturnValue({
42+
changeSetting: jest.fn(),
43+
});
44+
45+
render(
46+
<SetupPage
47+
settings={mockSettings}
48+
setConfiguration={mockSetConfiguration}
49+
setShowLabel={mockSetShowLabel}
50+
/>
51+
);
52+
});
53+
54+
test('renders tabs and default content', () => {
55+
// Check tabs
56+
expect(screen.getByText('setup.tabs.taskinfo')).toBeInTheDocument();
57+
expect(screen.getByText('setup.tabs.configure')).toBeInTheDocument();
58+
expect(screen.getByText('setup.tabs.image')).toBeInTheDocument();
59+
60+
// Check default content (datatype tab)
61+
expect(screen.getByTestId('ConfigurationTask')).toBeInTheDocument();
62+
});
63+
});

0 commit comments

Comments
 (0)