add tests for StartingDeck component

protocol-designer/src/pages/ProtocolOverview/StartingDeck.tsx

@@ -44,11 +44,6 @@ export function StartingDeck({
 
   const [deckView, setDeckView] = useState<string>(leftString)
 
-  console.log('leftString', leftString)
-  console.log('rightString', rightString)
-  console.log('hover', hover)
-  console.log(isOffDeckHover)
-
   return (
     <>
       <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER}>

protocol-designer/src/pages/ProtocolOverview/__tests__/ProtocolOverview.test.tsx

@@ -14,8 +14,6 @@ import { getDismissedHints } from '../../../tutorial/selectors'
 import { MaterialsListModal } from '../../../organisms/MaterialsListModal'
 import { selectors as labwareIngredSelectors } from '../../../labware-ingred/selectors'
 import { ProtocolOverview } from '../index'
-import { DeckThumbnail } from '../DeckThumbnail'
-import { OffDeckThumbnail } from '../OffdeckThumbnail'
 import { ProtocolMetadata } from '../ProtocolMetadata'
 import { InstrumentsInfo } from '../InstrumentsInfo'
 import { LiquidDefinitions } from '../LiquidDefinitions'
@@ -24,8 +22,6 @@ import { StartingDeck } from '../StartingDeck'
 
 import type { NavigateFunction } from 'react-router-dom'
 
-vi.mock('../OffdeckThumbnail')
-vi.mock('../DeckThumbnail')
 vi.mock('../../../step-forms/selectors')
 vi.mock('../../../tutorial/selectors')
 vi.mock('../../../file-data/selectors')
@@ -82,10 +78,10 @@ describe('ProtocolOverview', () => {
     vi.mocked(MaterialsListModal).mockReturnValue(
       <div>mock MaterialsListModal</div>
     )
-    vi.mocked(DeckThumbnail).mockReturnValue(<div>mock DeckThumbnail</div>)
-    vi.mocked(OffDeckThumbnail).mockReturnValue(
-      <div>mock OffdeckThumbnail</div>
-    )
+    // vi.mocked(DeckThumbnail).mockReturnValue(<div>mock DeckThumbnail</div>)
+    // vi.mocked(OffDeckThumbnail).mockReturnValue(
+    //   <div>mock OffdeckThumbnail</div>
+    // )
     vi.mocked(LiquidDefinitions).mockReturnValue(
       <div>mock LiquidDefinitions</div>
     )
@@ -116,6 +112,7 @@ describe('ProtocolOverview', () => {
     //  steps
     screen.getByText('mock StepsInfo')
 
+    // starting deck
     screen.getByText('mock StartingDeck')
   })
 
@@ -125,18 +122,4 @@ describe('ProtocolOverview', () => {
     fireEvent.click(button)
     expect(mockNavigate).toHaveBeenCalledWith('/designer')
   })
-
-  // ToDo (kk: 2024/11/05) add starting deck test and add the followings
-  // it('should render the deck thumbnail and offdeck thumbnail', () => {
-  //   render()
-  //   screen.getByText('mock DeckThumbnail')
-  //   fireEvent.click(screen.getByText('Off-deck'))
-  //   screen.getByText('mock OffdeckThumbnail')
-  // })
-
-  // it('render mock materials list modal when clicking materials list', () => {
-  //   render()
-  //   fireEvent.click(screen.getByText('Materials list'))
-  //   screen.getByText('mock MaterialsListModal')
-  // })
 })

protocol-designer/src/pages/ProtocolOverview/__tests__/StartingDeck.test.tsx

@@ -0,0 +1,77 @@
+import { describe, it, beforeEach, vi, expect } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+
+import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+
+import { i18n } from '../../../assets/localization'
+import { renderWithProviders } from '../../../__testing-utils__'
+import { SlotDetailsContainer } from '../../../organisms'
+import { StartingDeck } from '../StartingDeck'
+
+import type { ComponentProps } from 'react'
+
+vi.mock('../DeckThumbnail')
+vi.mock('OffDeckThumbnail')
+vi.mock('../../../organisms')
+
+vi.mock('../DeckThumbnail', () => ({
+  DeckThumbnail: vi.fn(() => <div>mock DeckThumbnail</div>),
+}))
+vi.mock('../OffdeckThumbnail', () => ({
+  OffDeckThumbnail: vi.fn(() => <div>mock OffDeckThumbnail</div>),
+}))
+
+const mockSetShowMaterialsListModal = vi.fn()
+const mockSetHover = vi.fn()
+
+const render = (props: ComponentProps<typeof StartingDeck>) => {
+  return (
+    renderWithProviders(<StartingDeck {...props} />), { i18nInstance: i18n }
+  )
+}
+
+describe('StartingDeck', () => {
+  let props: ComponentProps<typeof StartingDeck>
+
+  beforeEach(() => {
+    props = {
+      setShowMaterialsListModal: mockSetShowMaterialsListModal,
+      leftString: 'On deck',
+      rightString: 'Off deck',
+      robotType: FLEX_ROBOT_TYPE,
+      hover: null,
+      setHover: mockSetHover,
+      isOffDeckHover: false,
+    }
+    vi.mocked(SlotDetailsContainer).mockReturnValue(
+      <div>mock SlotDetailsContainer</div>
+    )
+  })
+
+  it('should render deck view, text and toggle', () => {
+    render(props)
+    screen.getByText('Protocol Starting Deck')
+    screen.getByText('Materials list')
+    screen.getByRole('button', { name: 'On deck' })
+    screen.getByRole('button', { name: 'Off deck' })
+    screen.getByText('mock DeckThumbnail')
+  })
+
+  it('should render off deck when clicking toggle button', () => {
+    render(props)
+    screen.getByText('mock DeckThumbnail')
+    fireEvent.click(screen.getByRole('button', { name: 'Off deck' }))
+    screen.getByText('mock OffDeckThumbnail')
+  })
+
+  it('should call mock function when clicking material list', () => {
+    render(props)
+    fireEvent.click(screen.getByText('Materials list'))
+    expect(mockSetShowMaterialsListModal).toHaveBeenCalled()
+  })
+
+  it('should render mock SlotDetailsContainer when hovering', () => {
+    render({ ...props, hover: 'D2' })
+    screen.getByText('mock SlotDetailsContainer')
+  })
+})