@swrve/core/src/checkbox/__tests__/checkbox.spec.js

Core set of Swrve UI Components

import React from 'react'
import CheckboxListItem from '../checkbox-list-item'
import { render } from '@testing-library/react'

describe('<Checkbox/>', () => {
  it('should render with checked', () => {
    const { container } = render(<CheckboxListItem checked label="Checked" />)
    expect(container).toMatchSnapshot()
  })

  it('should render unchecked', () => {
    const { container } = render(<CheckboxListItem checked={false} label="UnChecked" />)
    expect(container).toMatchSnapshot()
  })

  it('should render with labels left aligned', () => {
    const { container } = render(<CheckboxListItem checked labelPosition="left" label="Checked" />)
    expect(container).toMatchSnapshot()
  })

  it('should render with default background', () => {
    const { container } = render(<CheckboxListItem label="Checked" checked />)

    expect(container.querySelector('label')).toHaveClass('bg-secondary-10')
  })

  it('should render with no background', () => {
    const { container } = render(<CheckboxListItem label="Checked" checked noBackground />)

    expect(container.querySelector('label')).not.toHaveClass('bg-secondary-10')
  })

  it('should render without icon', () => {
    const { container } = render(<CheckboxListItem label="Checked" checked />)

    expect(container.querySelectorAll('svg')).toHaveLength(1)
  })

  it('should render with icon', () => {
    const { container } = render(<CheckboxListItem label="Checked" checked icon="apple" />)

    expect(container.querySelectorAll('svg')).toHaveLength(2)
  })
})