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

Nav's Pattern Library

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

const Test = ({ onClose }) => {
  const { setInfoDrawer } = useInfoDrawer({ onClose })
  return (
    <button
      onClick={() => {
        setInfoDrawer({ title: 'test', isOpen: true })
      }}
    >
      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)' })
  })
})