@navinc/base-react-components/src/aside.spec.js

Nav's Pattern Library

import { renderWithContext } from './tests/with-app-context.js'
import { screen } from '@testing-library/react'
import { Aside } from './aside.js'
// import { theme } from './theme.js'

describe('<Aside />', () => {
  it('renders the text', () => {
    renderWithContext(<Aside>content</Aside>)
    expect(screen.getByText(/content/i)).toBeInTheDocument()
  })
  it('renders the title', () => {
    renderWithContext(<Aside title="a title">content</Aside>)
    expect(screen.getByText(/a title/i)).toBeInTheDocument()
  })

  // This ought to work according to the spec, but jsdom -- which jest is built on -- has not implemented the ability to get pseudo element styles
  // it('renders the given color bar', () => {
  //   const colorName = 'mermaidGreen100'
  //   render(<Aside color={colorName}>content</Aside>)
  //   const { backgroundColor } = window.getComputedStyle(screen.getByTestId('aside'), ':before')
  //   expect(backgroundColor).toEqual(theme[colorName])
  // })
})