// @flow
import React from 'react';
import {
  mountWrappedComponent,
  renderSnapshot,
  itIsAccessible,
} from '../../../../utils/tests';
import type { LoadingIndicatorProps } from './loading-indicator.proptypes';
import { LoadingIndicator } from './index';

const DEFAULT_PROPS: LoadingIndicatorProps = {
  ready: false,
  variant: 'neutral',
  minWidth: '30px',
};

// TODO: Add test to check if LoadingIndicator is rendered when not ready

describe('LoadingIndicator', () => {
  describe('snapshot', () => {
    it('matches the previous snapshot', () => {
      const loadingIndicator = renderSnapshot(
        <LoadingIndicator {...DEFAULT_PROPS} />,
      );

      expect(loadingIndicator).toMatchSnapshot();
    });
  });

  it('does not render a loading indicator when ready', () => {
    const loadingIndicator = mountWrappedComponent(
      <LoadingIndicator {...DEFAULT_PROPS} ready />,
    );

    expect(loadingIndicator).not.toHaveStyleRule('background');
  });

  it('renders children when ready', () => {
    const child = <b>Child</b>;
    const loadingIndicator = mountWrappedComponent(
      <LoadingIndicator {...DEFAULT_PROPS} ready>
        {child}
      </LoadingIndicator>,
    );

    expect(loadingIndicator.contains(child)).toBe(true);
  });

  it('does not render children when not ready', () => {
    const child = <b>Child</b>;
    const loadingIndicator = mountWrappedComponent(
      <LoadingIndicator {...DEFAULT_PROPS} ready={false}>
        {child}
      </LoadingIndicator>,
    );

    expect(loadingIndicator.contains(child)).toBe(false);
  });

  itIsAccessible(
    <LoadingIndicator {...DEFAULT_PROPS}>
      <div>
        <p>Content</p>
      </div>
    </LoadingIndicator>,
  );
});
