import React, { PropsWithChildren } from 'react'
import renderer from 'react-test-renderer'

// react-slick "Cannot read property 'querySelectorAll' of null"
// 具体原因不明，详情可尝试去掉这段 mock 即可
// eslint-disable-next-line react/display-name
jest.mock('react-slick', () => ({ children }: PropsWithChildren<{}>) => <div>{children}</div>)

// eslint-disable-next-line import/first
import Carousel from '.'

describe('Carousel', () => {
  test('basic.', () => {
    const tree = renderer.create(
      <>
        <Carousel>
          <div className="default-area">default carousel</div>
          <div className="default-area">is suitable for light content</div>
          <div className="default-area">with no arrows</div>
        </Carousel>
        <Carousel type="primary">
          <div className="primary-area">primary carousel</div>
          <div className="primary-area">is suitable for dark content</div>
          <div className="primary-area">with no arrows</div>
        </Carousel>
        <Carousel type="secondary" autoplay>
          <div className="secondary-area">secondary carousel</div>
          <div className="secondary-area">is suitable for multiple scenes</div>
          <div className="secondary-area">with arrows</div>
        </Carousel>
      </>
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })
  test('small size', () => {
    const tree = renderer.create(
      <>
        <Carousel size="small">
          <div className="default-area">default carousel</div>
          <div className="default-area">is suitable for light content</div>
          <div className="default-area">with no arrows</div>
        </Carousel>
        <Carousel type="primary" size="small">
          <div className="primary-area">primary carousel</div>
          <div className="primary-area">is suitable for dark content</div>
          <div className="primary-area">with no arrows</div>
        </Carousel>
        <Carousel type="secondary" autoplay size="small">
          <div className="secondary-area">secondary carousel</div>
          <div className="secondary-area">is suitable for multiple scenes</div>
          <div className="secondary-area">with arrows</div>
        </Carousel>
      </>
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })
})