@navinc/base-react-components/src/copy-variant.spec.js

Nav's Pattern Library

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

import { CopyVariant as Copy, getStyle, sizes } from './copy-variant.js'

describe('Base Components: CopyVariant', () => {
  describe('render', () => {
    it('renders CopyVariant', () => {
      renderWithContext(<Copy>test text</Copy>)
      expect(screen.getByText('test text')).toBeInTheDocument()
      expect(screen.getByText('test text').tagName).toBe('P')
    })
    it('renders CopyVariant as span', () => {
      renderWithContext(<Copy component="span">test text</Copy>)
      expect(screen.getByText('test text')).toBeInTheDocument()
      expect(screen.getByText('test text').tagName).toBe('SPAN')
    })
    it('renders CopyVariant as H1', () => {
      renderWithContext(<Copy component="h1">test text</Copy>)
      expect(screen.getByText('test text')).toBeInTheDocument()
      expect(screen.getByText('test text').tagName).toBe('H1')
    })
  })
})

describe('getStyle', () => {
  Object.entries(sizes).forEach(([key, value]) => {
    Object.entries(value).forEach(([variant, cssProps]) => {
      Object.keys(cssProps).forEach((cssProp) => {
        it(`returns the style for the given size - ${key} ${variant} ${cssProp}`, () => {
          expect(getStyle(cssProp, key, variant)).toEqual(sizes[key][variant][cssProp])
        })
      })
    })
  })

  it('returns the default variant if variant is not available', () => {
    expect(getStyle('fontSize', 'headline', 'regular')).toEqual('16px')
    expect(getStyle('lineHeight', 'headline', 'regular')).toEqual('22px')
    expect(getStyle('fontWeight', 'headline', 'regular')).toEqual(600)
    expect(getStyle('letterSpacing', 'headline', 'regular')).toEqual('0')
  })

  it('returns the default style if no size is provided', () => {
    expect(getStyle('fontSize')).toEqual('14px')
    expect(getStyle('lineHeight')).toEqual('20px')
    expect(getStyle('fontWeight')).toEqual(400)
    expect(getStyle('letterSpacing')).toEqual('-0.25px')
  })
})