import { Status } from '../common';
import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';

import Summary from './Summary';

mockMatchMedia();

describe('Summary', () => {
  describe('action', () => {
    const onClickStub = jest.fn();
    const props = {
      icon: <strong>icon</strong>,
      title: 'Hello world',
      action: {
        text: 'text',
        href: 'href',
        target: '_blank',
        onClick: onClickStub,
      },
    };

    it('sets target on the link', () => {
      render(<Summary {...props} />);

      const element = screen.getByText('text');
      expect(element).toHaveAttribute('target', props.action.target);
    });

    it('runs the onClick callback provided', () => {
      render(<Summary {...props} />);

      fireEvent.click(screen.getByRole('link'));

      expect(onClickStub).toHaveBeenCalledTimes(1);
    });
  });

  describe('statuses for both Themes', () => {
    const props = {
      icon: <strong>icon</strong>,
      title: 'Hello world',
    };

    it('personal theme: renders no badge by default', () => {
      const { container } = render(<Summary {...props} />);
      expect(container.querySelector('.status-circle')).not.toBeInTheDocument();
      expect(container.querySelector('.pending')).not.toBeInTheDocument();
      expect(container.querySelector('.positive')).not.toBeInTheDocument();
    });

    it('personal theme: renders an aria-label and no badge for a not done status', () => {
      const { container } = render(<Summary {...props} status={Status.NOT_DONE} />);

      expect(screen.getByLabelText('Item to do')).toBeInTheDocument();
      expect(container.querySelector('.status-circle')).not.toBeInTheDocument();
      expect(container.querySelector('.pending')).not.toBeInTheDocument();
      expect(container.querySelector('.positive')).not.toBeInTheDocument();
    });

    it('personal theme: renders badge and aria-label for a pending status', () => {
      const { container } = render(<Summary {...props} status={Status.PENDING} />);

      expect(screen.getByLabelText('Item pending')).toBeInTheDocument();
      expect(container.querySelector('.status-circle')).toBeInTheDocument();
      expect(container.querySelector('.pending')).toBeInTheDocument();
    });

    it('personal theme: renders badge and aria-label for a done status', () => {
      const { container } = render(<Summary {...props} status={Status.DONE} />);

      expect(screen.getByLabelText('Item done')).toBeInTheDocument();
      expect(container.querySelector('.status-circle')).toBeInTheDocument();
      expect(container.querySelector('.positive')).toBeInTheDocument();
    });
  });
});