@navinc/base-react-components/src/card-insight.spec.js

Nav's Pattern Library

import { screen } from '@testing-library/react'
import { renderWithContext } from './tests/with-app-context.js'
import { CardInsight } from './card-insight.js'
import userEvent from '@testing-library/user-event'

describe('<CardInsight />', () => {
  it('renders Link if an actionHref and actionLabel is supplied', async () => {
    const user = userEvent.setup()

    const { getRouteProps } = renderWithContext(<CardInsight actionHref="/asdf" actionLabel="asdf" />)
    await user.click(screen.getByText(/asdf/i))
    expect(getRouteProps().location.pathname).toBe('/asdf')
  })
  it('renders Button if an action and actionLabel is supplied', async () => {
    const mockAction = jest.fn()
    const user = userEvent.setup()

    renderWithContext(<CardInsight action={mockAction} actionLabel="Click me" />)
    await user.click(screen.getByRole('button'))
    expect(mockAction).toBeCalled()
  })
  it('renders loading dots when action, actionLabel and isActionLoading are provided', () => {
    const mockAction = jest.fn()
    renderWithContext(<CardInsight action={mockAction} actionLabel="Click me" isActionLoading />)
    expect(screen.getByTestId('button-loading-dots'))
  })
  it('does not render action when actionLabel is not supplied', () => {
    const mockAction = jest.fn()

    renderWithContext(<CardInsight actionHref="/test" action={mockAction} />)
    expect(screen.queryByRole('button')).not.toBeInTheDocument()
    expect(screen.queryByRole('link')).not.toBeInTheDocument()
  })
  it('renders the copy if copy is given', () => {
    renderWithContext(<CardInsight copy="Beets" />)
    expect(screen.getByText(/beets/i)).toBeInTheDocument()
  })
  it('renders the title if a title is given', () => {
    renderWithContext(<CardInsight title="Bears" />)
    expect(screen.getByText(/bears/i)).toBeInTheDocument()
  })
})