From 5a5f85ff82f2e01175e7b2e22dbb4a96204b3659 Mon Sep 17 00:00:00 2001 From: sumn2u Date: Fri, 14 Jun 2024 07:20:56 -0500 Subject: [PATCH] added test cases for sidebars and workspace --- client/src/workspace/Header/index.jsx | 2 +- .../RightSidebar/RightSidebar.test.js | 58 +++++++++++++ client/src/workspace/RightSidebar/index.jsx | 2 +- .../workspace/SidebarBox/SidebarBox.test.js | 85 +++++++++++++++++++ .../src/workspace/Workspace/Workspace.test.js | 78 +++++++++++++++++ client/src/workspace/Workspace/index.jsx | 2 +- 6 files changed, 224 insertions(+), 3 deletions(-) create mode 100644 client/src/workspace/RightSidebar/RightSidebar.test.js create mode 100644 client/src/workspace/SidebarBox/SidebarBox.test.js create mode 100644 client/src/workspace/Workspace/Workspace.test.js diff --git a/client/src/workspace/Header/index.jsx b/client/src/workspace/Header/index.jsx index 4b62558..2a4a101 100644 --- a/client/src/workspace/Header/index.jsx +++ b/client/src/workspace/Header/index.jsx @@ -37,7 +37,7 @@ export const Header = ({ return ( - + {t("labname")} diff --git a/client/src/workspace/RightSidebar/RightSidebar.test.js b/client/src/workspace/RightSidebar/RightSidebar.test.js new file mode 100644 index 0000000..e9d1487 --- /dev/null +++ b/client/src/workspace/RightSidebar/RightSidebar.test.js @@ -0,0 +1,58 @@ +import React from 'react' +import { render, screen, fireEvent } from '@testing-library/react' +import '@testing-library/jest-dom' +import RightSidebar from './index' +import { createTheme, ThemeProvider } from '@mui/material/styles' + +const theme = createTheme() + +describe('RightSidebar', () => { + beforeEach(() => { + // Reset localStorage + window.localStorage.clear() + }) + + test('renders with initially expanded state from localStorage', () => { + window.localStorage.__REACT_WORKSPACE_LAYOUT_EXPANDED = JSON.stringify(true) + + render( + + Test Content + + ) + + const container = screen.getByText('Test Content').closest('div') + expect(container.parentElement).toHaveClass('expanded') + }) + + test('renders with initially collapsed state if localStorage is not set and window width is less than 1000', () => { + window.innerWidth = 800 + render( + + Test Content + + ) + + const container = screen.getByText('Test Content').closest('div') + expect(container).not.toHaveClass('expanded') + }) + + test('updates localStorage on toggle', () => { + render( + + Test Content + + ) + + + const expander = screen.getByRole('button') + + // Click to expand + fireEvent.click(expander) + expect(JSON.parse(window.localStorage.__REACT_WORKSPACE_LAYOUT_EXPANDED)).toBe(true) + + // Click to collapse + fireEvent.click(expander) + expect(JSON.parse(window.localStorage.__REACT_WORKSPACE_LAYOUT_EXPANDED)).toBe(false) + }) +}) diff --git a/client/src/workspace/RightSidebar/index.jsx b/client/src/workspace/RightSidebar/index.jsx index 9703890..0fb745c 100644 --- a/client/src/workspace/RightSidebar/index.jsx +++ b/client/src/workspace/RightSidebar/index.jsx @@ -100,7 +100,7 @@ export const RightSidebar = ({ children, initiallyExpanded, height }) => { return ( - + {children} diff --git a/client/src/workspace/SidebarBox/SidebarBox.test.js b/client/src/workspace/SidebarBox/SidebarBox.test.js new file mode 100644 index 0000000..355e09a --- /dev/null +++ b/client/src/workspace/SidebarBox/SidebarBox.test.js @@ -0,0 +1,85 @@ +import React from 'react' +import { render, screen, fireEvent } from '@testing-library/react' +import '@testing-library/jest-dom' +import SidebarBox from './index' +import { createTheme, ThemeProvider } from '@mui/material/styles' +import ExpandIcon from '@mui/icons-material/ExpandMore' + +const theme = createTheme() + +const mockIconDictionary = { + 'sample title': () =>
, +} + +jest.mock('../icon-dictionary.js', () => ({ + useIconDictionary: () => mockIconDictionary, +})) + +describe('SidebarBox', () => { + beforeEach(() => { + // Reset localStorage + window.localStorage.clear() + }) + + test('renders with initially expanded state from localStorage', () => { + window.localStorage.__REACT_WORKSPACE_SIDEBAR_EXPANDED_sample = JSON.stringify(true) + + render( + + } > + Test Content + + + ) + + const content = screen.getByText('Test Content') + expect(content).toBeInTheDocument() + }) + + test('renders with initially collapsed state if localStorage is not set', () => { + render( + + } > + Test Content + + + ) + + const content = screen.queryByText('Test Content') + expect(content).not.toBeVisible() + }) + + + test('updates localStorage on toggle', () => { + render( + + } > + Test Content + + + ) + + const toggleButton = screen.getByRole('button') + + // Click to expand + fireEvent.click(toggleButton) + expect(JSON.parse(window.localStorage.__REACT_WORKSPACE_SIDEBAR_EXPANDED_sample)).toBe(true) + + // Click to collapse + fireEvent.click(toggleButton) + expect(JSON.parse(window.localStorage.__REACT_WORKSPACE_SIDEBAR_EXPANDED_sample)).toBe(false) + }) + + test('renders custom icon from icon dictionary', () => { + render( + + + Test Content + + + ) + + const customIcon = screen.getByTestId('custom-icon') + expect(customIcon).toBeInTheDocument() + }) +}) diff --git a/client/src/workspace/Workspace/Workspace.test.js b/client/src/workspace/Workspace/Workspace.test.js new file mode 100644 index 0000000..9e5f164 --- /dev/null +++ b/client/src/workspace/Workspace/Workspace.test.js @@ -0,0 +1,78 @@ +import React from 'react' +import { render, screen, fireEvent } from '@testing-library/react' +import '@testing-library/jest-dom' +import Workplace from './index' // Replace with the actual file name +import { createTheme, ThemeProvider } from '@mui/material/styles' +import { IconDictionaryContext } from '../icon-dictionary.js' + +const theme = createTheme() + +jest.mock('react-use', () => ({ + useMeasure: () => [jest.fn(), { height: 500 }], +})) + +jest.mock('../../../config.js', () => ({ + DEMO_SITE_URL: "https://annotate-docs.dwaste.live/", + VITE_SERVER_URL: "http://localhost:5000", + })); + +// Mock the useTranslation hook with actual translations +jest.mock('react-i18next', () => ({ + useTranslation: () => ({ + t: key => ({ + "labname": "labname", + "btn.download": "Download", + "download.configuration": "Download Configuration", + "download.image_mask": "Download Masked Image", + }[key]), + }), +})); + + +describe('Workplace', () => { + const mockIconDictionary = {} + const renderComponent = (props = {}) => + render( + + + + + + ) + + test('renders without crashing', () => { + renderComponent() + expect(screen.getByTestId('container')).toBeInTheDocument() + }) + + test('renders header when hideHeader is false', () => { + renderComponent({ hideHeader: false, headerItems: [{name: "Docs", label: "Docs"},] }) + expect(screen.getByTestId('header')).toBeInTheDocument() + }) + + test('does not render header when hideHeader is true', () => { + renderComponent({ hideHeader: true }) + expect(screen.queryByTestId('header')).not.toBeInTheDocument() + }) + + test('does not render icon sidebar when iconSidebarItems are empty', () => { + renderComponent({ iconSidebarItems: [] }) + expect(screen.queryByTestId('icon-sidebar')).not.toBeInTheDocument() + }) + + test('renders right sidebar when rightSidebarItems are provided', () => { + renderComponent({ rightSidebarItems: ['item1', 'item2'] }) + expect(screen.getByTestId('right-sidebar')).toBeInTheDocument() + }) + + test('does not render right sidebar when rightSidebarItems are empty', () => { + renderComponent({ rightSidebarItems: [] }) + expect(screen.queryByTestId('right-sidebar')).not.toBeInTheDocument() + }) + + test('passes correct height to RightSidebar', () => { + renderComponent({ rightSidebarItems: ['item1'], rightSidebarExpanded: true }) + expect(screen.getByTestId('right-sidebar')).toHaveStyle({ height: '500px' }) + }) + +}) diff --git a/client/src/workspace/Workspace/index.jsx b/client/src/workspace/Workspace/index.jsx index 06f7c72..7d864b1 100644 --- a/client/src/workspace/Workspace/index.jsx +++ b/client/src/workspace/Workspace/index.jsx @@ -49,7 +49,7 @@ export default ({ return ( - + {!hideHeader && (