@swrve/core/src/radio-button/__tests__/component.spec.js

Core set of Swrve UI Components

import React from 'react'
import { render } from '@testing-library/react'

import RadioListItem from '../radio-list-item'
import RadioGroup from '../radio-group'

const noop = () => {}

describe('<RadioButton/>', () => {
  const value = 'some value'

  it('should render with checked', () => {
    const { container } = render(
      <RadioListItem onChange={noop} value={value} checked>
        Checked
      </RadioListItem>
    )
    expect(container).toMatchSnapshot()
  })

  it('should render unchecked', () => {
    const { container } = render(
      <RadioListItem onChange={noop} value={value} checked={false}>
        UnChecked
      </RadioListItem>
    )
    expect(container).toMatchSnapshot()
  })

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

describe('<RadioGroup/>', () => {
  const data = [
    {
      disabled: false,
      label: 'One',
      value: '1'
    }
  ]
  const name = 'numbers'
  const className = 'flex'

  it('should render with correct data shape', () => {
    const { container } = render(
      <RadioGroup options={data} name={name} onChange={noop} className={className} />
    )
    expect(container).toMatchSnapshot()
  })

  it('should render with correct data shape', () => {
    const { container } = render(
      <RadioGroup options={data} name={name} onChange={noop} className={className} />
    )
    expect(container).toMatchSnapshot()
  })

  it('should render buttons without backgrounds', () => {
    const { container } = render(
      <RadioGroup
        options={data}
        name={name}
        onChange={noop}
        className={className}
        backgroundOnHover={false}
      />
    )
    expect(container).toMatchSnapshot()
  })

  it('should render buttons of group with border', () => {
    const { container } = render(
      <RadioGroup
        options={data}
        name={name}
        onChange={noop}
        className={className}
        buttonClass="border"
      />
    )
    expect(container).toMatchSnapshot()
  })

  it('should render with labels left aligned', () => {
    const { container } = render(
      <RadioGroup options={data} name={name} onChange={noop} labelPosition="left">
        Checked
      </RadioGroup>
    )
    expect(container).toMatchSnapshot()
  })
})