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

Nav's Pattern Library

import React from 'react'
import { render, screen } from '@testing-library/react'
import Avatar from './avatar'

describe('<Avatar />', () => {
  describe('render Avatar', () => {
    it('with image', () => {
      render(<Avatar src="fake-src" />)

      expect(screen.queryByTestId('avatar:image')).toBeInTheDocument()
    })

    it('with image and label', () => {
      const label = 'This is my name'
      render(<Avatar src="fake-src" label={label} />)

      expect(screen.queryByTestId('avatar:image')).toBeInTheDocument()
      expect(screen.queryByTestId('avatar:label')).toBeInTheDocument()
      expect(screen.getByText(label)).toBeInTheDocument()
    })
  })

  describe('render fallback', () => {
    it('with the default fallback icon', () => {
      render(<Avatar />)

      expect(screen.queryByTestId('avatar:image')).not.toBeInTheDocument()
      expect(screen.queryByTestId('avatar:abbr')).not.toBeInTheDocument()
      expect(screen.queryByTestId('avatar:label')).not.toBeInTheDocument()
      expect(screen.queryByTestId('avatar:icon people/profile')).toBeInTheDocument()
    })

    it('with a specific fallback icon', () => {
      render(<Avatar defaultIcon="buildings/bank" />)

      expect(screen.queryByTestId('avatar:image')).not.toBeInTheDocument()
      expect(screen.queryByTestId('avatar:abbr')).not.toBeInTheDocument()
      expect(screen.queryByTestId('avatar:label')).not.toBeInTheDocument()
      expect(screen.queryByTestId('avatar:icon buildings/bank')).toBeInTheDocument()
    })

    it('abbreviation avatar using multiple words', () => {
      const label = 'the Olive garden'
      render(<Avatar label={label} />)

      expect(screen.queryByTestId('avatar:label')).toBeInTheDocument()
      expect(screen.getByText(label)).toBeInTheDocument()

      const avatar = screen.queryByTestId('avatar:abbr')
      expect(avatar).toBeInTheDocument()
      expect(avatar).toHaveTextContent('TG')
    })

    it('abbreviation avatar using a single word', () => {
      const label = 'Walmart'
      render(<Avatar label={label} />)

      expect(screen.queryByTestId('avatar:label')).toBeInTheDocument()
      expect(screen.getByText(label)).toBeInTheDocument()

      const avatar = screen.queryByTestId('avatar:abbr')
      expect(avatar).toBeInTheDocument()
      expect(avatar).toHaveTextContent('WA')
    })
  })
})