Merge branch 'feat_add-resizeable-sidebar' of https://github.com/Open…

…trons/opentrons into feat_add-resizeable-sidebar

protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx

@@ -77,8 +77,6 @@ export function DraggableSidebar({
 const SidebarContainer = styled(Box)`
   display: ${DISPLAY_FLEX};
   flex-direction: ${DIRECTION_COLUMN};
-  /* background-color: #f4f4f4; */
-  background-color: #ff0000;
   border-right: 1px solid #ccc;
   position: relative;
   overflow: hidden;

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx

@@ -41,6 +41,7 @@ describe('TimelineToolbox', () => {
     vi.mocked(PresavedStep).mockReturnValue(<div>mock PresavedStep</div>)
     vi.mocked(AddStepButton).mockReturnValue(<div>mock AddStepButton</div>)
   })
+
   it('renders 2 terminal item steps, a draggable step and presaved step with toolbox title', () => {
     render(props)
     screen.getByText('Timeline')

protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx

@@ -3,21 +3,16 @@ import { screen } from '@testing-library/react'
 
 import { i18n } from '../../../../assets/localization'
 import { renderWithProviders } from '../../../../__testing-utils__'
-import { TimelineToolbox } from '../Timeline'
 import { DraggableSidebar } from '../DraggableSidebar'
 
 import type { ComponentProps } from 'react'
 
-vi.mock('../Timeline')
 vi.mock('../../../../step-forms/selectors')
 vi.mock('../../../../ui/steps/selectors')
-// vi.mock('../Timeline', async importOriginal => {
-//   const actual = await importOriginal<typeof TimelineToolbox>()
-//   return {
-//     ...actual,
-//     TimelineToolbox: () => <div>mock TimelineToolbox</div>,
-//   }
-// })
+vi.mock('../../../../feature-flags/selectors')
+vi.mock('../Timeline/DraggableSteps')
+vi.mock('../Timeline/PresavedStep')
+vi.mock('../Timeline/AddStepButton')
 
 const mockSetTargetWidth = vi.fn()
 
@@ -33,11 +28,14 @@ describe('DraggableSidebar', () => {
     props = {
       setTargetWidth: mockSetTargetWidth,
     }
-    vi.mocked(TimelineToolbox).mockReturnValue(<div>mock TimelineToolbox</div>)
   })
 
-  it('renders mock TimelineToolbox', () => {
+  it('renders initial timeline toolbox', () => {
     render(props)
-    screen.getByText('mock TimelineToolbox')
+    screen.getByText('Timeline')
+    screen.getByText('Starting deck')
+    screen.getByText('Ending deck')
   })
+
+  // ToDo (kk: 2024/12/12): Add more tests
 })