From 668a6c996ae311af9dbf60ea3148744a75a7eb7c Mon Sep 17 00:00:00 2001 From: sumn2u Date: Fri, 14 Jun 2024 23:33:20 -0500 Subject: [PATCH] added test cases for point distance, region tags and settings provider --- .../src/PointDistances/PointDistances.test.js | 41 +++++++++ client/src/RegionTags/RegionTags.test.js | 85 +++++++++++++++++++ client/src/RegionTags/index.jsx | 2 + .../SettingsProvider/SettingsProvider.test.js | 71 ++++++++++++++++ client/src/SettingsProvider/index.jsx | 3 +- 5 files changed, 201 insertions(+), 1 deletion(-) create mode 100644 client/src/PointDistances/PointDistances.test.js create mode 100644 client/src/RegionTags/RegionTags.test.js create mode 100644 client/src/SettingsProvider/SettingsProvider.test.js diff --git a/client/src/PointDistances/PointDistances.test.js b/client/src/PointDistances/PointDistances.test.js new file mode 100644 index 0000000..d179cce --- /dev/null +++ b/client/src/PointDistances/PointDistances.test.js @@ -0,0 +1,41 @@ +import React from 'react' +import { render } from '@testing-library/react' +import '@testing-library/jest-dom' +import PointDistances from './index' + +const mockProjectRegionBox = jest.fn(region => ({ + ...region, + w: 10, + h: 10, +})) + +describe('PointDistances component', () => { + it('renders correctly and displays distances', () => { + const regions = [ + { id: 1, type: 'point', x: 0.1, y: 0.2 }, + { id: 2, type: 'point', x: 0.4, y: 0.6 }, + ] + const pointDistancePrecision = 2 + const realSize = { w: 100, h: 100, unitName: 'cm' } + + const { container, getByText } = render( + + ) + + // Check if path element is rendered + expect(container.querySelector('path')).toBeInTheDocument() + + // Check if text element is rendered with correct distance + const expectedDistance = Math.sqrt( + Math.pow(regions[0].x * realSize.w - regions[1].x * realSize.w, 2) + + Math.pow(regions[0].y * realSize.h - regions[1].y * realSize.h, 2) + ).toFixed(pointDistancePrecision) + realSize.unitName + + expect(getByText(expectedDistance)).toBeInTheDocument() + }) +}) diff --git a/client/src/RegionTags/RegionTags.test.js b/client/src/RegionTags/RegionTags.test.js new file mode 100644 index 0000000..41fc961 --- /dev/null +++ b/client/src/RegionTags/RegionTags.test.js @@ -0,0 +1,85 @@ +import React from 'react' +import { render } from '@testing-library/react' +import '@testing-library/jest-dom' +import RegionTags from './index' + +const mockProjectRegionBox = jest.fn(region => ({ + x: region.x * 100, + y: region.y * 100, + w: region.w * 100, + h: region.h * 100, +})) + +const mouseEvents = { + onMouseDown: jest.fn(), + onMouseUp: jest.fn(), + onMouseMove: jest.fn(), +} + +const regionClsList = ['Class1', 'Class2'] +const regionTagList = ['Tag1', 'Tag2'] +const onBeginRegionEdit = jest.fn() +const onChangeRegion = jest.fn() +const onCloseRegionEdit = jest.fn() +const onDeleteRegion = jest.fn() +const onRegionClassAdded = jest.fn() +const enabledRegionProps = ['tags'] +const imageSrc = 'test-image.jpg' +const layoutParams = { current: { iw: 800, ih: 600 } } + + +// Mock the useTranslation hook +jest.mock('react-i18next', () => ({ + useTranslation: () => ({ + t: key => ({ + "configuration.image_upload.description": "Upload images", + "error.server_connection": "Server connection error", + }[key]), + }), + })); + +describe('RegionTags component', () => { + it('renders correctly for different region conditions', () => { + const regions = [ + { id: 1, type: 'box', x: 0.1, y: 0.2, w: 0.3, h: 0.4, highlighted: true, visible: true, editingLabels: false }, + { id: 2, type: 'polygon', x: 0.2, y: 0.3, w: 0.3, h: 0.4, highlighted: true, visible: true, locked: true }, + { id: 3, type: 'line', x: 0.3, y: 0.4, w: 0.3, h: 0.4, highlighted: true, visible: false }, + { id: 4, type: 'keypoints', x: 0.4, y: 0.5, w: 0.3, h: 0.4, highlighted: true, visible: true, minimized: true }, + ] + + const { container } = render( + + ) + + // Check if the region elements are rendered + expect(container.querySelectorAll('div').length).toBeGreaterThan(0) + + // Check if the locked region renders LockIcon + expect(container.querySelector('svg')).toBeInTheDocument() + + // Check if the minimized region is not rendered + expect(container.querySelectorAll(`[data-testid="region-4"]`).length).toBe(0) + + // Check if the hidden region is not rendered + expect(container.querySelectorAll(`[data-testid="region-3"]`).length).toBe(0) + + // // Check if visible and non-minimized regions are rendered + expect(container.querySelectorAll(`[data-testid="region-1"]`).length).toBe(1) + expect(container.querySelectorAll(`[data-testid="region-2"]`).length).toBe(1) + }) +}) diff --git a/client/src/RegionTags/index.jsx b/client/src/RegionTags/index.jsx index 5f54713..3aae19c 100644 --- a/client/src/RegionTags/index.jsx +++ b/client/src/RegionTags/index.jsx @@ -51,6 +51,7 @@ export const RegionTags = ({ return (
{ + localStorageMock = {}; + + // Mock localStorage.getItem + jest.spyOn(window.localStorage.__proto__, 'getItem').mockImplementation((key) => { + return localStorageMock[key]; + }); + + // Mock localStorage.setItem + jest.spyOn(window.localStorage.__proto__, 'setItem').mockImplementation((key, value) => { + localStorageMock[key] = value.toString(); + }); + + // Mock localStorage.clear + jest.spyOn(window.localStorage.__proto__, 'clear').mockImplementation(() => { + localStorageMock = {}; + }); +}); + +afterEach(() => { + jest.restoreAllMocks(); +}); + +test('should provide default settings', () => { + const { getByTestId } = render( + + + + ); + + expect(getByTestId('showCrosshairs').textContent).toBe('false'); + expect(getByTestId('showHighlightBox').textContent).toBe('true'); +}); + +test('should change setting and update state', () => { + const { getByText, getByTestId } = render( + + + + ); + + // Simulate changing setting + fireEvent.click(getByText('Toggle Crosshairs')); + + // Assert state change in component + expect(getByTestId('showCrosshairs').textContent).toBe('true'); +}); + +// Test component to be rendered inside SettingsProvider for interacting with settings +const TestComponent = () => { + const settings = React.useContext(SettingsContext); + + console.log(settings, 'masimis'); // Check what 'settings' actually contains + + return ( +
+ {settings && settings.showCrosshairs.toString()} + {settings && settings.showHighlightBox.toString()} + +
+ ); +}; diff --git a/client/src/SettingsProvider/index.jsx b/client/src/SettingsProvider/index.jsx index fa6ccf9..f701ea8 100644 --- a/client/src/SettingsProvider/index.jsx +++ b/client/src/SettingsProvider/index.jsx @@ -41,7 +41,8 @@ const pullSettingsFromLocalStorage = () => { export const useSettings = () => useContext(SettingsContext) export const SettingsProvider = ({children}) => { - const [state, changeState] = useState(() => pullSettingsFromLocalStorage()) + const localStorageSettings = pullSettingsFromLocalStorage(); + const [state, changeState] = useState({ ...defaultSettings, ...localStorageSettings }); const changeSetting = (setting, value) => { changeState({...state, [setting]: value}) window.localStorage.setItem(`settings_${setting}`, JSON.stringify(value))