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

Nav's Pattern Library

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

import { Copy, getSize, getFromSize, getVariableSize, getFromVariableSize, sizeVariants, defaultSize } from './copy.js'

const sizes = Object.keys(sizeVariants)

describe('Base Components: Copy', () => {
  describe('render', () => {
    it('renders Copy', () => {
      render(<Copy>test text</Copy>)

      expect(screen.getByText('test text')).toBeInTheDocument()
      expect(screen.getByText('test text').tagName).toBe('P')
    })
  })
})

describe('utils', () => {
  describe('getSize', () => {
    it('returns the style object for the given size', () => {
      const size = 'xs'
      expect(getSize({ size })).toEqual(sizeVariants[size])
    })
    it('returns the style object for default size if no size is provided', () => {
      const size = undefined
      expect(getSize({ size })).toEqual(sizeVariants[defaultSize])
    })
    it('returns the style object for default size if an invalid size is provided', () => {
      const size = 'foo'
      expect(getSize({ size })).toEqual(sizeVariants[defaultSize])
    })
  })
  describe('getFromSize', () => {
    it('returns the given property from the style object for the given size', () => {
      Object.entries(sizeVariants).forEach(([size, styleObj]) => {
        Object.keys(styleObj).forEach((prop) => {
          expect(getFromSize(prop)({ size })).toEqual(sizeVariants[size][prop])
        })
      })
    })
    it('returns the given property from the style object for the default size if no size is given', () => {
      const size = undefined
      Object.entries(sizeVariants).forEach(([_, styleObj]) => {
        Object.keys(styleObj).forEach((prop) => {
          expect(getFromSize(prop)({ size })).toEqual(sizeVariants[defaultSize][prop])
        })
      })
    })
    it('returns the given property from the style object for the default size if an invalid size is given', () => {
      const size = 'foo'
      Object.entries(sizeVariants).forEach(([_, styleObj]) => {
        Object.keys(styleObj).forEach((prop) => {
          expect(getFromSize(prop)({ size })).toEqual(sizeVariants[defaultSize][prop])
        })
      })
    })
  })

  describe('getVariableSize', () => {
    it('returns the given style object for one size larger than the given size', () => {
      Object.entries(sizeVariants).forEach(([size, styleObj], i) => {
        const expectedIndex = Math.min(sizes.indexOf(size) + 1, sizes.length - 1)
        const expectedSize = sizes[expectedIndex]
        const expectedSizeObj = sizeVariants[expectedSize]

        expect(
          getVariableSize({
            size,
            shouldScaleFont: true,
          })
        ).toEqual(expectedSizeObj)
      })
    })
    it('returns the given style object for one size larger than the default size if no size is given', () => {
      const size = undefined
      const expectedIndex = Math.min(sizes.indexOf(defaultSize) + 1, sizes.length - 1)
      const expectedSize = sizes[expectedIndex]
      const expectedSizeObj = sizeVariants[expectedSize]
      Object.entries(sizeVariants).forEach(([_, styleObj], i) => {
        expect(
          getVariableSize({
            size,
            shouldScaleFont: true,
          })
        ).toEqual(expectedSizeObj)
      })
    })
    it('returns the given style object for the default size if an invalid size is given', () => {
      const size = 'foo'
      const expectedIndex = Math.min(sizes.indexOf(defaultSize) + 1, sizes.length - 1)
      const expectedSize = sizes[expectedIndex]
      const expectedSizeObj = sizeVariants[expectedSize]
      Object.entries(sizeVariants).forEach(([_, styleObj], i) => {
        expect(
          getVariableSize({
            size,
            shouldScaleFont: true,
          })
        ).toEqual(expectedSizeObj)
      })
    })
  })

  describe('getFromVariableSize', () => {
    it('returns the given property from the style object for one size larger than the given size', () => {
      Object.entries(sizeVariants).forEach(([size, styleObj], i) => {
        const expectedIndex = Math.min(sizes.indexOf(size) + 1, sizes.length - 1)
        const expectedSize = sizes[expectedIndex]
        const expectedSizeObj = sizeVariants[expectedSize]

        Object.keys(styleObj).forEach((prop) => {
          expect(
            getFromVariableSize(prop)({
              size,
              shouldScaleFont: true,
            })
          ).toEqual(expectedSizeObj[prop])
        })
      })
    })
    it('returns the given property from the style object for one size larger than the default size if no size is given', () => {
      const size = undefined
      const expectedIndex = Math.min(sizes.indexOf(defaultSize) + 1, sizes.length - 1)
      const expectedSize = sizes[expectedIndex]
      const expectedSizeObj = sizeVariants[expectedSize]
      Object.entries(sizeVariants).forEach(([_, styleObj], i) => {
        Object.keys(styleObj).forEach((prop) => {
          expect(
            getFromVariableSize(prop)({
              size,
              shouldScaleFont: true,
            })
          ).toEqual(expectedSizeObj[prop])
        })
      })
    })
    it('returns the given property from the style object for the default size if an invalid size is given', () => {
      const size = 'foo'
      const expectedIndex = Math.min(sizes.indexOf(defaultSize) + 1, sizes.length - 1)
      const expectedSize = sizes[expectedIndex]
      const expectedSizeObj = sizeVariants[expectedSize]
      Object.entries(sizeVariants).forEach(([_, styleObj], i) => {
        Object.keys(styleObj).forEach((prop) => {
          expect(
            getFromVariableSize(prop)({
              size,
              shouldScaleFont: true,
            })
          ).toEqual(expectedSizeObj[prop])
        })
      })
    })
  })
})