// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import React from 'react'

import Expander, { ExpanderProps } from '../index'
import { render, screen } from '@testing-library/react'

describe('Expander template', () => {
  it('renders', () => {
    const props: ExpanderProps = {
      id: 'test-id',
    }
    const tree = render(
      <Expander {...props}>
        <div>Children 1</div>
        <div>Children 2</div>
      </Expander>
    )
    expect(
      tree.container.querySelector('[data-component="expander"]')
    ).toBeTruthy()
    expect(
      tree.container.querySelector('[data-state="collapsed"]')
    ).toBeTruthy()
    expect(
      tree.container.querySelector('.cp-expander--not-initialised')
    ).toBeTruthy()
    expect(screen.getByText('Expand')).toBeTruthy()
    expect(screen.getByText('Collapse')).toBeTruthy()
    expect(screen.getByText('Children 1')).toBeTruthy()
    expect(screen.getByText('Children 2')).toBeTruthy()
  })

  it('with different labels', () => {
    const props: ExpanderProps = {
      id: 'test-id',
      collapseLabel: 'Close',
      expandLabel: 'Open',
    }
    render(
      <Expander {...props}>
        <div>Children</div>
      </Expander>
    )

    expect(screen.getByText('Open')).toBeTruthy()
    expect(screen.getByText('Close')).toBeTruthy()
  })

  it('with different state', () => {
    const props: ExpanderProps = {
      id: 'test-id',
      state: 'expanded',
    }
    const tree = render(
      <Expander {...props}>
        <div>Children</div>
      </Expander>
    )
    expect(tree.container.querySelector('[data-state="expanded"]')).toBeTruthy()
  })

  it('add class for only mobile', () => {
    const props: ExpanderProps = {
      id: 'test-id',
      onlyMobile: true,
    }
    const tree = render(
      <Expander {...props}>
        <div>Children</div>
      </Expander>
    )
    expect(
      tree.container.querySelector('.cp-expander--mobile-only')
    ).toBeTruthy()
  })
})