-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
347 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
}); | ||
}); |
102 changes: 102 additions & 0 deletions
102
client/src/ConfigureImageClassification/ConfigureImageClassification.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
}); | ||
}); |
92 changes: 92 additions & 0 deletions
92
client/src/ConfigureImageSegmentation/ConfigureImageSegmentation.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |