added test cases for sidebars and workspace

client/src/workspace/Header/index.jsx

@@ -37,7 +37,7 @@ export const Header = ({
 
   return (
     <ThemeProvider theme={theme}>
-      <Container>
+      <Container data-testid="header">
       <BrandText flexGrow={1}>
           {t("labname")}
         </BrandText>

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(
+      <ThemeProvider theme={theme}>
+        <RightSidebar>Test Content</RightSidebar>
+      </ThemeProvider>
+    )
+
+    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(
+      <ThemeProvider theme={theme}>
+        <RightSidebar>Test Content</RightSidebar>
+      </ThemeProvider>
+    )
+
+    const container = screen.getByText('Test Content').closest('div')
+    expect(container).not.toHaveClass('expanded')
+  })
+
+  test('updates localStorage on toggle', () => {
+    render(
+      <ThemeProvider theme={theme}>
+        <RightSidebar>Test Content</RightSidebar>
+      </ThemeProvider>
+    )
+
+
+    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)
+  })
+})

client/src/workspace/RightSidebar/index.jsx

@@ -100,7 +100,7 @@ export const RightSidebar = ({ children, initiallyExpanded, height }) => {
 
   return (
     <ThemeProvider theme={theme}>
-      <Container className={expanded ? "expanded" : ""} style={containerStyle}>
+      <Container className={expanded ? "expanded" : ""} style={containerStyle} data-testid="right-sidebar">
         <Slider className={expanded ? "expanded" : ""}>
           <InnerSliderContent>{children}</InnerSliderContent>
         </Slider>

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': () => <div data-testid="custom-icon" />,
+}
+
+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(
+      <ThemeProvider theme={theme}>
+        <SidebarBox title="sample" subTitle="sub" icon={<ExpandIcon />} >
+          Test Content
+        </SidebarBox>
+      </ThemeProvider>
+    )
+
+    const content = screen.getByText('Test Content')
+    expect(content).toBeInTheDocument()
+  })
+
+  test('renders with initially collapsed state if localStorage is not set', () => {
+    render(
+      <ThemeProvider theme={theme}>
+        <SidebarBox title="sample" subTitle="sub" icon={<ExpandIcon />} >
+          Test Content
+        </SidebarBox>
+      </ThemeProvider>
+    )
+
+    const content = screen.queryByText('Test Content')
+    expect(content).not.toBeVisible()
+  })
+
+
+  test('updates localStorage on toggle', () => {
+    render(
+      <ThemeProvider theme={theme}>
+        <SidebarBox title="sample" subTitle="sub" icon={<ExpandIcon />} >
+          Test Content
+        </SidebarBox>
+      </ThemeProvider>
+    )
+
+    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(
+      <ThemeProvider theme={theme}>
+        <SidebarBox title="Sample Title" subTitle="sub" >
+          Test Content
+        </SidebarBox>
+      </ThemeProvider>
+    )
+
+    const customIcon = screen.getByTestId('custom-icon')
+    expect(customIcon).toBeInTheDocument()
+  })
+})

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(
+      <ThemeProvider theme={theme}>
+        <IconDictionaryContext.Provider value={mockIconDictionary}>
+          <Workplace {...props} />
+        </IconDictionaryContext.Provider>
+      </ThemeProvider>
+    )
+
+  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' })
+  })
+
+})

client/src/workspace/Workspace/index.jsx

@@ -49,7 +49,7 @@ export default ({
   return (
     <ThemeProvider theme={theme}>
       <IconDictionaryContext.Provider value={iconDictionary}>
-        <Container style={style}>
+        <Container style={style} data-testid="container">
           {!hideHeader && (
             <Header
               hideHeaderText={hideHeaderText}