From 996fde690c5be48c40b94fcd5f9ca30aee09a331 Mon Sep 17 00:00:00 2001
From: koji <baxin1919@gmail.com>
Date: Fri, 13 Dec 2024 23:56:07 -0500
Subject: [PATCH] added a base test

---
 .../ProtocolSteps/DraggableSidebar.tsx        |  6 ++---
 .../__tests__/TimelineToolbox.test.tsx        |  1 +
 .../__tests__/DraggableSidebar.test.tsx       | 23 +++++++++----------
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index b7a9b44dbc0..f5f55c84228 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -74,11 +74,9 @@ export function DraggableSidebar({
   )
 }
 
-const SidebarContainer = styled(Box)<{ resizedWidth: number }>`
+const SidebarContainer = styled(Box) <{ resizedWidth: number }>`
   display: ${DISPLAY_FLEX};
   flex-direction: ${DIRECTION_COLUMN};
-  /* background-color: #f4f4f4; */
-  background-color: #ff0000;
   border-right: 1px solid #ccc;
   position: relative;
   width: ${props => props.resizedWidth}px;
@@ -90,7 +88,7 @@ const SidebarContent = styled(Flex)`
   flex: 1;
 `
 
-const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
+const SidebarResizer = styled(Flex) <{ dragging: boolean }>`
   width: 0.3125rem;
   cursor: ew-resize;
   background-color: #ddd;
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx
index 1b8fdad45aa..f6b11ce36a5 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx
+++ b/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')
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
index 4c232baea0d..62e7b04558d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
@@ -3,21 +3,17 @@ 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 +29,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
 })