@swrve/core/src/accordion/__tests__/Accordion.spec.js

Core set of Swrve UI Components

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

import Accordion from '../Accordion'

describe('<Accordion/>', () => {
  let mountedWrapper

  beforeEach(() => {
    mountedWrapper = render(
      <Accordion>
        <Accordion.Item title="First">First</Accordion.Item>
        <Accordion.Item title="Second">Second</Accordion.Item>
      </Accordion>
    )
  })

  it('should match snapshot', () => {
    const { queryAllByText } = mountedWrapper
    expect(queryAllByText(/First/i)).toHaveLength(2)
    expect(queryAllByText(/Second/i)).toHaveLength(2)
  })

  it('should handle defaultActiveKey prop', () => {
    let { container } = render(
      <Accordion defaultActiveKey={1}>
        <Accordion.Item title="First">First</Accordion.Item>
        <Accordion.Item title="Second">Second</Accordion.Item>
      </Accordion>
    )
    expect(
      container.querySelectorAll('.sw-accordion-toggle')[0].getAttribute('aria-expanded')
    ).toBe('false')
    expect(
      container.querySelectorAll('.sw-accordion-toggle')[1].getAttribute('aria-expanded')
    ).toBe('true')
  })

  it('should render accordion with no default open and have no active key', () => {
    let { container } = render(
      <Accordion>
        <Accordion.Item title="First">First</Accordion.Item>
        <Accordion.Item title="Second">Second</Accordion.Item>
      </Accordion>
    )
    expect(
      container.querySelectorAll('.sw-accordion-toggle')[0].getAttribute('aria-expanded')
    ).toBe('false')
    expect(
      container.querySelectorAll('.sw-accordion-toggle')[1].getAttribute('aria-expanded')
    ).toBe('false')
  })

  it('should be able change active key', () => {
    let { container } = mountedWrapper

    const button = container.querySelectorAll('.sw-accordion-toggle')[1]
    fireEvent.click(button)
    expect(
      container.querySelectorAll('.sw-accordion-toggle')[0].getAttribute('aria-expanded')
    ).toBe('false')
    expect(
      container.querySelectorAll('.sw-accordion-toggle')[1].getAttribute('aria-expanded')
    ).toBe('true')
  })

  it('should pass open and onToggle prop to children', () => {
    const Dummy = ({ open, onToggle }) => (
      <div data-open={open} onClick={onToggle}>
        Test
      </div>
    )
    const { getByText } = render(
      <Accordion>
        <Dummy />
      </Accordion>
    )
    const children = getByText(/Test/i)
    expect(children.getAttribute('data-open')).toBe('false')
    fireEvent.click(children)
    expect(children.getAttribute('data-open')).toBe('true')
  })
})