import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import { CardImageUploadSortable } from './index';

it('snapshot - default', () => {
   const value = {
      id: 1,
      image: 'image',
   };
   function Component(): any {
      return <CardImageUploadSortable value={value} />;
   }

   const { container } = render(<Component />);

   expect(container.firstChild).toMatchSnapshot();
});

it('snapshot - with error', () => {
   const value = {
      id: 1,
      image: 'image',
      error: true,
   };
   function Component(): any {
      return <CardImageUploadSortable value={value} />;
   }

   const { container } = render(<Component />);

   expect(container.firstChild).toMatchSnapshot();
});

it('snapshot - with loading', () => {
   const value = {
      id: 1,
      image: 'image',
      loading: true,
   };
   function Component(): any {
      return <CardImageUploadSortable value={value} />;
   }

   const { container } = render(<Component />);

   expect(container.firstChild).toMatchSnapshot();
});

it('snapshot - onRemove', () => {
   const value = {};
   const onRemove = jest.fn();

   function Component(): any {
      return <CardImageUploadSortable value={value} onRemove={onRemove} />;
   }

   render(<Component />);

   fireEvent.click(screen.getByTestId('remove'));
   expect(onRemove).toHaveBeenCalledWith(value);
});

it('snapshot - onRotate left', () => {
   const value = {};
   const onRotate = jest.fn();

   function Component(): any {
      return <CardImageUploadSortable value={value} onRotate={onRotate} />;
   }

   render(<Component />);

   fireEvent.click(screen.getByTestId('rotate-left'));
   expect(onRotate).toHaveBeenCalledWith(-90, value);
});

it('snapshot - onRotate right', () => {
   const value = {};
   const onRotate = jest.fn();

   function Component(): any {
      return <CardImageUploadSortable value={value} onRotate={onRotate} />;
   }

   render(<Component />);

   fireEvent.click(screen.getByTestId('rotate-right'));
   expect(onRotate).toHaveBeenCalledWith(90, value);
});
