@swrve/core/src/tabs/__tests__/Tabs.spec.js

Core set of Swrve UI Components

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

describe('<Tabs/>', () => {
  let MountedWrapper

  beforeEach(() => {
    MountedWrapper = render(
      <Tabs className="bg-cloudWhite">
        <Tabs.List>
          <Tab className="tab-1">some text</Tab>
          <Tab className="tab-2">some more text</Tab>
        </Tabs.List>
        <Tabs.Views className="p-6">
          <div className="view-1">
            <h3>One</h3>
            View 1
          </div>
          <div className="view-2">
            <h3>Two</h3>
            View 2
          </div>
        </Tabs.Views>
      </Tabs>
    )
  })

  it('should render', () => {
    const { getByText } = MountedWrapper
    expect(getByText('some text')).toBeTruthy()
  })

  it('should render with first tab active by default', () => {
    const { container } = MountedWrapper
    container.querySelector('button.tab-1').classList.contains('sw-tab-active')
  })

  it('should activate tab when clicked', () => {
    const { container } = MountedWrapper
    fireEvent.click(container.querySelector('button.tab-2'))
    container.querySelector('button.tab-2').classList.contains('sw-tab-active')
  })

  it('should only render the view when the associated tab is active', () => {
    const { queryByText, container } = MountedWrapper

    expect(queryByText('View 1')).toBeTruthy()
    expect(queryByText('View 2')).toBeFalsy()

    fireEvent.click(container.querySelector('button.tab-2'))

    // View 2 is rendered after tab is clicked
    expect(queryByText('View 1')).toBeFalsy()
    expect(queryByText('View 2')).toBeTruthy()
  })
})