@swrve/core/src/icon-button/__tests__/icon-button.spec.js

Core set of Swrve UI Components

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

describe('<IconButton/>', () => {
  it('should render content correctly', () => {
    const { container } = render(
      <IconButton size="small" iconName="icon-paper-plane" onClick={() => {}} />
    )
    expect(container.querySelector('button')).toBeTruthy()
  })

  it('should render a small icon-button', () => {
    const { container } = render(
      <IconButton iconName="push" size="small" label="I am a label!" onClick={() => {}} />
    )
    expect(container.querySelector('.small-icon-btn')).toBeTruthy()
  })

  it('should render a large icon-button', () => {
    const { container } = render(
      <IconButton iconName="push" size="large" label="I am a label!" onClick={() => {}} />
    )
    expect(container.querySelector('.large-icon-btn')).toBeTruthy()
  })

  it('should render a selected small icon-button', () => {
    const { container } = render(
      <IconButton
        iconName="icon-paper-plane"
        size="small"
        selected={true}
        label="I am a label!"
        onClick={() => {}}
      />
    )
    expect(container.querySelector('button').classList.contains('small-icon-btn')).toBeTruthy()
    expect(container.querySelector('button').classList.contains('selected-icon-btn')).toBeTruthy()
  })

  it('should render a selected large icon-button', () => {
    const { container } = render(
      <IconButton
        iconName="icon-paper-plane"
        size="large"
        selected={true}
        label="I am a label!"
        onClick={() => {}}
      />
    )
    expect(container.querySelector('button').classList.contains('large-icon-btn')).toBeTruthy()
    expect(container.querySelector('button').classList.contains('selected-icon-btn')).toBeTruthy()
  })

  it('should render the label', () => {
    const { getByText } = render(
      <IconButton
        size="small"
        iconName="icon-paper-plane"
        onClick={() => {}}
        className="mock-className"
        label="Mock Label"
      />
    )

    expect(getByText('Mock Label')).toBeTruthy()
  })

  it('should only render the icon when labelIsVisible is false', () => {
    const { queryByText, container } = render(
      <IconButton
        size="small"
        iconName="icon-paper-plane"
        onClick={() => {}}
        className="mock-className"
        labelIsVisible={false}
        label="Mock Label"
      />
    )
    expect(container.querySelector('button').classList.contains('small-icon-btn')).toBeTruthy()
    expect(queryByText('Mock Label')).toBeNull()
  })

  it('should not call onClick if IconButton is disabled when clicked', () => {
    const spy = jest.fn()
    const { container } = render(
      <IconButton
        iconName="icon-paper-plane"
        size="small"
        disabled={true}
        onClick={spy}
        label="I am a label!"
      />
    )

    fireEvent.click(container.querySelector('button'))
    expect(spy).not.toHaveBeenCalled()
  })
})