import React, { useEffect, useRef, useState } from 'react';
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
import { ImagesSortable } from './index';
import { CardImage } from './__mocks__/CardImage';

const imagesArray = [
   {
      id: '1',
      image: 'https://http2.mlstatic.com/D_NQ_NP_2X_903122-MLB44358527254_122020-F.webp',
   },
   {
      id: '2',
      image: 'https://http2.mlstatic.com/D_NQ_NP_2X_903122-MLB44358527254_122020-F.webp',
   },
   {
      id: '3',
      image: 'https://http2.mlstatic.com/D_NQ_NP_2X_884643-MLB44358533181_122020-F.webp',
   },
];

it('snapshot - default', () => {
   function Component(): any {
      return (
         <ImagesSortable images={imagesArray} onChange={() => {}} renderItem={(props) => <CardImage {...props} />} />
      );
   }

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

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