@swrve/core/src/option-group/__tests__/option-group.spec.js

Core set of Swrve UI Components

import React from 'react'
import OptionGroup from '../option-group'
import IconButton from '../../icon-button/icon-button'
import { render } from '@testing-library/react'

describe('<OptionGroup/>', () => {
  it('should render', () => {
    const { queryAllByText } = render(
      <OptionGroup>
        <IconButton onClick={() => null} size="large" iconName="reports" label="I am a label" />
        <IconButton
          onClick={() => null}
          size="large"
          iconName="iam"
          label="I am a label"
          selected={true}
        />
        <IconButton onClick={() => null} size="large" iconName="push" label="I am a label" />
      </OptionGroup>
    )
    expect(queryAllByText('I am a label')).toHaveLength(3)
  })

  it('places the correct classes on children according to their positions', () => {
    const { container } = render(
      <OptionGroup>
        <IconButton
          onClick={() => null}
          size="large"
          iconName="reports"
          label="I am a label"
          id="first"
        />
        <IconButton
          onClick={() => null}
          size="large"
          iconName="iam"
          label="I am a label"
          id="second"
          selected={true}
        />
        <IconButton
          onClick={() => null}
          size="large"
          iconName="push"
          label="I am a label"
          id="third"
        />
      </OptionGroup>
    )

    expect(
      container.querySelector('#first').classList.contains('left-option-group-btn')
    ).toBeTruthy()
    expect(
      container.querySelector('#second').classList.contains('middle-option-group-btn')
    ).toBeTruthy()
    expect(
      container.querySelector('#third').classList.contains('right-option-group-btn')
    ).toBeTruthy()
  })
})