@navinc/base-react-components/src/toast-hook.spec.js

Nav's Pattern Library

import React from 'react'
import { render, fireEvent, screen } from '../tests/with-app-context.js'

import { useToast, Toast, ToastProvider } from './toast-hook.js'

const TestToast = () => {
  const { showMessage } = useToast()

  return (
    <div>
      <button
        data-testid="global-message-button"
        onClick={() =>
          showMessage({
            type: 'neutralAction',
            title: 'Title',
            copy: 'Some demo copy',
            isDismissible: true,
          })
        }
      >
        button
      </button>
      <Toast />
    </div>
  )
}

describe('Toast', () => {
  beforeEach(() => {
    global.URL.createObjectURL = jest.fn(() => ({ toString: () => '12345-abcde' }))
    global.URL.revokeObjectURL = jest.fn()
  })
  it('creates message when showMessage is called', () => {
    render(
      <ToastProvider>
        <TestToast />
      </ToastProvider>
    )
    fireEvent.click(screen.getByTestId('global-message-button'))
    expect(screen.queryByText('Title')).toBeTruthy()
  })
  it('clears message when dismiss button is clicked', (done) => {
    render(
      <ToastProvider>
        <TestToast />
      </ToastProvider>
    )
    fireEvent.click(screen.getByTestId('global-message-button'))
    const title = screen.getByText('Title')
    screen
      .findByTestId('banner-dismiss')
      .then((icon) => fireEvent.click(icon))
      .then(() => expect(title).not.toBeInTheDocument())
      .then(() => done())
  })
})