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

Nav's Pattern Library

import '@testing-library/jest-dom/extend-expect'
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', (done) => {
    const { getByTestId } = render(
      <InfoDrawerProvider>
        <InfoDrawer />
        <Test />
      </InfoDrawerProvider>
    )
    expect(getByTestId('info-drawer:drawer')).toHaveStyleRule('transform', 'translateX( 485px )')

    screen
      .findByText(/Open Info Drawer/i)
      .then((button) => {
        fireEvent.click(button)
        return screen.findByTestId('info-drawer:close-button', { timeout: 500 })
      })
      .then(() => {
        expect(getByTestId('info-drawer:drawer')).toHaveStyleRule('transform', 'translateX( 0px )')
        done()
      })
  })

  it('sets open styles', (done) => {
    const { getByTestId } = render(
      <InfoDrawerProvider>
        <InfoDrawer />
        <Test />
      </InfoDrawerProvider>
    )
    screen
      .findByText(/Open Info Drawer/i)
      .then((button) => {
        fireEvent.click(button)
        return screen.findByTestId('info-drawer:close-button', { timeout: 500 })
      })
      .then(() => {
        expect(getByTestId('info-drawer:drawer')).toHaveStyleRule('transform', 'translateX( 0px )')
        done()
      })
  })
})