@swrve/core/src/chip/__tests__/component.spec.js

Core set of Swrve UI Components

import React from 'react'
import Chip from '../Chip'
import { render, fireEvent } from '@testing-library/react'

describe('<Chip/>', () => {
  it('should render a single Chip', () => {
    const { getByText } = render(<Chip>ChipContent</Chip>)
    expect(getByText(/ChipContent/i)).toBeTruthy()
  })

  it('should render a single Chip with the primary color', () => {
    const { container } = render(<Chip theme="primary">ChipContent</Chip>)
    expect(container.querySelector('.sw-chip').classList.contains('bg-primary-100')).toBeTruthy()
  })

  it('should render a single Chip with the warning color', () => {
    const { container } = render(<Chip theme="warning">ChipContent</Chip>)
    expect(container.querySelector('.sw-chip').classList.contains('bg-warning-100')).toBeTruthy()
  })

  it('should render a single Chip with the error color', () => {
    const { container } = render(<Chip theme="radicalRed">ChipContent</Chip>)
    expect(container.querySelector('.sw-chip').classList.contains('bg-radicalRed-100')).toBeTruthy()
  })

  it('should render a single Chip with a delete icon', () => {
    const { container } = render(
      <Chip onDelete={() => {}} theme="primary">
        ChipContent
      </Chip>
    )
    expect(container.querySelector('.sw-chip-button')).toBeTruthy()
  })

  it('should trigger the callback function on icon click', () => {
    const mockCallback = jest.fn()
    const { container } = render(<Chip onDelete={mockCallback}>ChipContent</Chip>)
    fireEvent.click(container.querySelector('.sw-chip-button'))
    expect(mockCallback).toHaveBeenCalled()
  })

  it('should not have the delete button', () => {
    const { container } = render(<Chip>ChipContent</Chip>)
    expect(container.querySelector('.sw-chip-button')).toBeFalsy()
  })
})