import React from 'react';

import renderWithTheme from '../../../testUtils/renderWithTheme';

import Spinner from '..';

describe('rendering', () => {
  describe('spinner without content', () => {
    it('renders spinning element', () => {
      const { queryByTestId } = renderWithTheme(
        <Spinner loading data-test-id="my-spinner" />
      );
      expect(queryByTestId('my-spinner')).toBeVisible();
    });
  });

  describe('spinner with content', () => {
    describe('by default', () => {
      it('renders content but NOT the spinning element', () => {
        const { queryByTestId, queryByText } = renderWithTheme(
          <Spinner loading={false} data-test-id="my-spinner">
            Content
          </Spinner>
        );
        expect(queryByTestId('my-spinner')).not.toBeInTheDocument();
        expect(queryByText('Content')).toBeVisible();
      });
    });
    describe('when loading is ON', () => {
      it('renders spinning element & content', () => {
        const { queryByTestId, queryByText } = renderWithTheme(
          <Spinner loading data-test-id="my-spinner">
            Content
          </Spinner>
        );
        expect(queryByTestId('my-spinner')).toBeVisible();
        expect(queryByText('Content')).toBeVisible();
      });
    });

    describe('when loading is OFF', () => {
      it('renders content but NOT the spinning element', () => {
        const { queryByTestId, queryByText } = renderWithTheme(
          <Spinner loading={false} data-test-id="my-spinner">
            Content
          </Spinner>
        );
        expect(queryByTestId('my-spinner')).not.toBeInTheDocument();
        expect(queryByText('Content')).toBeVisible();
      });
    });

    describe('when loading is not specified', () => {
      it('renders content but NOT the spinning element', () => {
        const { queryByTestId, queryByText } = renderWithTheme(
          <Spinner data-test-id="my-spinner">Content</Spinner>
        );
        expect(queryByTestId('my-spinner')).not.toBeInTheDocument();
        expect(queryByText('Content')).toBeVisible();
      });
    });
  });

  describe('with size', () => {
    it.each`
      size
      ${'small'}
      ${'medium'}
      ${'large'}
    `('renders correctly with $size', ({ size }) => {
      const { container } = renderWithTheme(
        <Spinner size={size} loading>
          <div>Content</div>
        </Spinner>
      );
      expect(container.firstChild).toMatchSnapshot();
    });
  });
});