From e5dcda62be1d247e1397c471d62f93c839838859 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 13 Dec 2024 18:07:35 -0500
Subject: [PATCH] add test

---
 .../ProtocolSteps/DraggableSidebar.tsx        |  2 +-
 .../__tests__/DraggableSidebar.test.tsx       | 43 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index 13f0ecb16d7..b7a9b44dbc0 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -1,11 +1,11 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
 import {
+  Box,
   DIRECTION_COLUMN,
   DISPLAY_FLEX,
   Flex,
   JUSTIFY_SPACE_BETWEEN,
-  Box,
 } from '@opentrons/components'
 import { TimelineToolbox } from './Timeline/TimelineToolbox'
 
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
new file mode 100644
index 00000000000..4c232baea0d
--- /dev/null
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
@@ -0,0 +1,43 @@
+import { describe, it, vi, beforeEach } from 'vitest'
+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>,
+//   }
+// })
+
+const mockSetTargetWidth = vi.fn()
+
+const render = (props: ComponentProps<typeof DraggableSidebar>) => {
+  return renderWithProviders(<DraggableSidebar {...props} />, {
+    i18nInstance: i18n,
+  })
+}
+
+describe('DraggableSidebar', () => {
+  let props: ComponentProps<typeof DraggableSidebar>
+  beforeEach(() => {
+    props = {
+      setTargetWidth: mockSetTargetWidth,
+    }
+    vi.mocked(TimelineToolbox).mockReturnValue(<div>mock TimelineToolbox</div>)
+  })
+
+  it('renders mock TimelineToolbox', () => {
+    render(props)
+    screen.getByText('mock TimelineToolbox')
+  })
+})