@navinc/base-react-components/src/animate-height.spec.js

Nav's Pattern Library

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

import { AnimateHeight } from './animate-height.js'

const disconnect = jest.fn()
const observe = jest.fn()
global.ResizeObserver = class {
  disconnect = disconnect
  observe = observe
}

describe('AnimateHeight', () => {
  it('animates the height of the container when the content changes', () => {
    render(<AnimateHeight>Content</AnimateHeight>)
    expect(screen.getByText(/content/i)).toBeInTheDocument()
  })
  it('listens for window resizes and DOM mutations', () => {
    jest.spyOn(global, 'addEventListener')
    render(<AnimateHeight>Content</AnimateHeight>)

    expect(observe).toHaveBeenCalled()
    expect(global.addEventListener).toHaveBeenCalled()
  })
  it('cleans up after itself', () => {
    jest.spyOn(global, 'removeEventListener')
    render(
      <>
        <AnimateHeight>Content</AnimateHeight>
        <Link href="/somewhere-else-to-cause-animate-height-to-unmount">Go</Link>
      </>
    )

    fireEvent.click(screen.getByText(/go/i))
    expect(disconnect).toHaveBeenCalled()
    expect(global.removeEventListener).toHaveBeenCalled()
  })
})