@navinc/base-react-components/src/info-drawer.spec.js

Nav's Pattern Library

import React, { useState } from 'react'
import { render, fireEvent, screen, waitFor } from '../tests/with-app-context.js'
import InfoDrawer, { useInfoDrawer, InfoDrawerProvider } from './info-drawer.js'

const Test = ({ onClose, heightVariation = undefined, width = undefined }) => {
  const { setInfoDrawer } = useInfoDrawer({ onClose })
  const content = (
    <div>
      <button
        onClick={() => {
          setInfoDrawer({ isOpen: false })
        }}
      >
        Content Button
      </button>
    </div>
  )

  return (
    <>
      <button
        onClick={() => {
          setInfoDrawer({ title: 'test', isOpen: true, heightVariation, width, content })
        }}
      >
        Open Info Drawer
      </button>

      <button
        onClick={() => {
          setInfoDrawer({ title: 'test', isOpen: true, content })
        }}
      >
        Basic Drawer
      </button>
    </>
  )
}

const TestContentFn = ({ onClose }) => {
  const { setInfoDrawer } = useInfoDrawer({ onClose })
  const content = ({ setInfoDrawer: localSetInfoDrawer, isOpen }) => (
    <div>
      {isOpen ? 'Is Open' : 'Not Open'}
      <button
        onClick={() => {
          localSetInfoDrawer({ isOpen: false })
        }}
      >
        Content Button
      </button>
    </div>
  )

  return (
    <button
      onClick={() => {
        setInfoDrawer({ title: 'test', isOpen: true, content })
      }}
    >
      Open Info Drawer
    </button>
  )
}

const TestContentComponent = ({ onClose }) => {
  const { setInfoDrawer } = useInfoDrawer({ onClose })
  const ContentComponent = ({ setInfoDrawer: localSetInfoDrawer, isOpen, testValue }) => {
    const [value, setValue] = useState(0)
    return (
      <div>
        {isOpen ? 'Is Open' : 'Not Open'}
        <button
          onClick={() => {
            localSetInfoDrawer({ isOpen: false })
          }}
        >
          Content Button
        </button>
        <button
          onClick={() => {
            setValue((v) => v + 1)
          }}
        >
          Increment
        </button>
        <div data-testid="increment-value">{value}</div>
        <div>{testValue}</div>
      </div>
    )
  }

  return (
    <button
      onClick={() => {
        setInfoDrawer({
          title: 'test',
          isOpen: true,
          content: ContentComponent,
          contentProps: { testValue: 'test prop through contentProps' },
        })
      }}
    >
      Open Info Drawer
    </button>
  )
}

describe('InfoDrawer', () => {
  it('calls onClose callback when closed', (done) => {
    const onClose = jest.fn()

    render(
      <InfoDrawerProvider>
        <InfoDrawer />
        <Test onClose={onClose} />
      </InfoDrawerProvider>
    )
    screen
      .findByText(/Open Info Drawer/i)
      .then((button) => {
        fireEvent.click(button)
        return screen.findByTestId('info-drawer:close-button')
      })
      .then((icon) => {
        fireEvent.click(icon)
        waitFor(() => expect(onClose).toBeCalled()).then(() => done())
      })
  })

  it('sets closed styles', async () => {
    render(
      <InfoDrawerProvider>
        <InfoDrawer />
        <Test />
      </InfoDrawerProvider>
    )

    const drawer = screen.getByTestId('info-drawer:drawer')

    expect(drawer).toHaveStyle({ transform: 'translateX(485px)' })

    const button = await screen.findByText(/Open Info Drawer/i)
    fireEvent.click(button)

    await screen.findByTestId('info-drawer:close-button', { timeout: 500 })

    expect(drawer).toHaveStyle({ transform: 'translateX(0px)' })
  })

  it('sets open styles', async () => {
    render(
      <InfoDrawerProvider>
        <InfoDrawer />
        <Test />
      </InfoDrawerProvider>
    )

    const button = await screen.findByText(/Open Info Drawer/i)
    fireEvent.click(button)

    await screen.findByTestId('info-drawer:close-button', { timeout: 500 })

    expect(screen.getByTestId('info-drawer:drawer')).toHaveStyle({ transform: 'translateX(0px)' })
  })

  it('passes heightVariation through setInfoDrawer', async () => {
    render(
      <InfoDrawerProvider>
        <InfoDrawer />
        <Test heightVariation="full" />
      </InfoDrawerProvider>
    )

    const button = await screen.findByText(/Open Info Drawer/i)
    fireEvent.click(button)

    await screen.findByTestId('info-drawer:close-button', { timeout: 500 })

    expect(screen.getByTestId('info-drawer:drawer')).toHaveStyle({ height: '100dvh' })
  })

  it('if no heightVariation is set, default to dynamic', async () => {
    render(
      <InfoDrawerProvider>
        <InfoDrawer />
        <Test />
      </InfoDrawerProvider>
    )

    const button = await screen.findByText(/Open Info Drawer/i)
    fireEvent.click(button)

    await screen.findByTestId('info-drawer:close-button', { timeout: 500 })

    expect(screen.getByTestId('info-drawer:drawer')).toHaveStyle({ minHeight: '80px' })
  })

  it('resets height and width for basic drawer config', async () => {
    render(
      <InfoDrawerProvider>
        <InfoDrawer />
        <Test heightVariation="full" width="50vw" />
      </InfoDrawerProvider>
    )

    const button = await screen.findByText(/Open Info Drawer/i)
    fireEvent.click(button)

    const closeButton = await screen.findByTestId('info-drawer:close-button', { timeout: 500 })

    expect(screen.getByTestId('info-drawer:drawer')).toHaveStyle({ height: '100dvh' })

    fireEvent.click(closeButton)

    const basicDrawerButton = await screen.findByText(/Basic Drawer/i)
    fireEvent.click(basicDrawerButton)

    await screen.findByTestId('info-drawer:close-button', { timeout: 500 })

    expect(screen.getByTestId('info-drawer:drawer')).toHaveStyle({ height: 'auto' })
  })

  it('calls the close callback from actions within content', async () => {
    const onClose = jest.fn()

    render(
      <InfoDrawerProvider>
        <InfoDrawer />
        <Test onClose={onClose} />
      </InfoDrawerProvider>
    )

    const button = await screen.findByText(/Open Info Drawer/i)
    fireEvent.click(button)

    const contentButton = await screen.findByText('Content Button')
    fireEvent.click(contentButton)

    expect(onClose).toHaveBeenCalled()
  })

  it('calls the close callback from actions within content function', async () => {
    const onClose = jest.fn()

    render(
      <InfoDrawerProvider>
        <InfoDrawer />
        <TestContentFn onClose={onClose} />
      </InfoDrawerProvider>
    )

    const button = await screen.findByText(/Open Info Drawer/i)
    fireEvent.click(button)

    expect(screen.queryByText('Is Open')).toBeInTheDocument()

    const contentButton = await screen.findByText('Content Button')
    fireEvent.click(contentButton)

    expect(onClose).toHaveBeenCalled()
  })

  it('renders a content component correctly', async () => {
    const onClose = jest.fn()

    render(
      <InfoDrawerProvider>
        <InfoDrawer />
        <TestContentComponent onClose={onClose} />
      </InfoDrawerProvider>
    )

    const button = await screen.findByText(/Open Info Drawer/i)
    fireEvent.click(button)

    expect(screen.queryByText('Is Open')).toBeInTheDocument()
    expect(screen.queryByText('test prop through contentProps')).toBeInTheDocument()

    const incrementValue = screen.getByTestId('increment-value')

    expect(incrementValue).toHaveTextContent('0')

    const incrementButton = screen.getByText('Increment')
    fireEvent.click(incrementButton)

    expect(incrementValue).toHaveTextContent('1')

    const contentButton = await screen.findByText('Content Button')
    fireEvent.click(contentButton)

    expect(onClose).toHaveBeenCalled()
  })
})