From 5daede5a8bf6a9b7f0682d698a93ed579ab01685 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 13 Dec 2024 22:33:33 -0500 Subject: [PATCH 1/3] fix check-js errors --- .../Timeline/{SubstepsToolbox.tsx => SubStepsToolbox.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/{SubstepsToolbox.tsx => SubStepsToolbox.tsx} (100%) diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubStepsToolbox.tsx similarity index 100% rename from protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx rename to protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubStepsToolbox.tsx From 996fde690c5be48c40b94fcd5f9ca30aee09a331 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 13 Dec 2024 23:56:07 -0500 Subject: [PATCH 2/3] 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(
mock PresavedStep
) vi.mocked(AddStepButton).mockReturnValue(
mock AddStepButton
) }) + 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() -// return { -// ...actual, -// TimelineToolbox: () =>
mock TimelineToolbox
, -// } -// }) +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(
mock TimelineToolbox
) }) - 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 }) From 7b99baf9a176aa7e1943592a603737329a34aee1 Mon Sep 17 00:00:00 2001 From: koji Date: Sat, 14 Dec 2024 00:23:39 -0500 Subject: [PATCH 3/3] fix format errors --- .../src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx | 4 ++-- .../ProtocolSteps/__tests__/DraggableSidebar.test.tsx | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx index f5f55c84228..03cee3a678a 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx @@ -74,7 +74,7 @@ export function DraggableSidebar({ ) } -const SidebarContainer = styled(Box) <{ resizedWidth: number }>` +const SidebarContainer = styled(Box)<{ resizedWidth: number }>` display: ${DISPLAY_FLEX}; flex-direction: ${DIRECTION_COLUMN}; border-right: 1px solid #ccc; @@ -88,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/__tests__/DraggableSidebar.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx index 62e7b04558d..4ea6b03d2ab 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx @@ -7,7 +7,6 @@ import { DraggableSidebar } from '../DraggableSidebar' import type { ComponentProps } from 'react' - vi.mock('../../../../step-forms/selectors') vi.mock('../../../../ui/steps/selectors') vi.mock('../../../../feature-flags/selectors')