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

Core set of Swrve UI Components

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

describe('<Button/>', () => {
  it('renders a primary button', () => {
    const { getByText } = render(
      <Button onClick={() => null} theme="primary">
        Button
      </Button>
    )
    expect(getByText(/Button/i).classList.contains('primary-btn')).toBeTruthy()
  })

  it('renders a primary-light button', () => {
    const { getByText } = render(
      <Button onClick={() => null} theme="primary-light">
        Button
      </Button>
    )
    expect(getByText(/Button/i).classList.contains('primary-light-btn')).toBeTruthy()
  })

  it('renders a primary-outline button', () => {
    const { getByText } = render(
      <Button onClick={() => null} theme="primary-outline">
        Button
      </Button>
    )
    expect(getByText(/Button/i).classList.contains('primary-outline-btn')).toBeTruthy()
  })

  it('renders a secondary button', () => {
    const { getByText } = render(
      <Button onClick={() => null} theme="secondary">
        Button
      </Button>
    )
    expect(getByText(/Button/i).classList.contains('secondary-btn')).toBeTruthy()
  })

  it('renders a secondary-light button', () => {
    const { getByText } = render(
      <Button onClick={() => null} theme="secondary-light">
        Button
      </Button>
    )
    expect(getByText(/Button/i).classList.contains('secondary-light-btn')).toBeTruthy()
  })

  it('renders a secondary-outline button', () => {
    const { getByText } = render(
      <Button onClick={() => null} theme="secondary-outline">
        Button
      </Button>
    )
    expect(getByText(/Button/i).classList.contains('secondary-outline-btn')).toBeTruthy()
  })

  it('renders a neutral button', () => {
    const { getByText } = render(
      <Button onClick={() => null} theme="neutral">
        Button
      </Button>
    )
    expect(getByText(/Button/i).classList.contains('neutral-btn')).toBeTruthy()
  })

  it('renders a neutral-outline button', () => {
    const { getByText } = render(
      <Button onClick={() => null} theme="neutral-outline">
        Button
      </Button>
    )
    expect(getByText(/Button/i).classList.contains('neutral-outline-btn')).toBeTruthy()
  })

  it('renders a destructive button', () => {
    const { getByText } = render(
      <Button onClick={() => null} theme="destructive">
        Button
      </Button>
    )
    expect(getByText(/Button/i).classList.contains('destructive-btn')).toBeTruthy()
  })

  it('renders a neutral-outline button in a selected state', () => {
    const { getByText } = render(
      <Button onClick={() => null} selected={true} theme="neutral-outline">
        Button
      </Button>
    )

    expect(getByText(/Button/i).classList.contains('selected-neutral-outline-btn')).toBeTruthy()
  })

  it('does not call a provided onClick function when the button is disabled', () => {
    const spy = jest.fn()

    const { getByText } = render(
      <Button onClick={spy} disabled={true}>
        Button
      </Button>
    )

    fireEvent.click(getByText(/Button/i))
    expect(spy).not.toHaveBeenCalled()
  })
})