const [images, setImages] = useState(undefined);

  useEffect(() => {
    const fetchImages = async (type) => {
      const images = await fetch(
        `https://film-gallery-api.herokuapp.com/api/images?prefix=${type}`
      );
      setImages(images);
    };
    fetchImages(type);
  }, [type]);

  return (
    <Fragment>
      {!images && <Spinner />}
      {images && isTabletOrMobile && (
        <div className="gallery-mobile">
          {images.map((image, index) => (
            <img
              test-id={image.url}
              key={index}
              alt={`Carousel of type: ${type}`}
              src={image.url}
            />
          ))}
        </div>
      )}
      {images && isDesktopOrLaptop && (
        <Carousel offset={0} itemWidth={1000}>
          {images.map((image, index) => (
            <img
              test-id={image.url}
              key={index}
              alt={`Carousel of type: ${type}`}
              src={image.url}
            />
          ))}
        </Carousel>
      )}
    </Fragment>
  );

describe('Test images loading to the Gallery component', () => {
  it('Renders a loader', () => {
    const { getByText } = render(<Gallery />);
    getByText('Loading...');
  });

  it('Renders images', async () => {
    await waitFor(() => render(<Gallery type="35mm" />));
    await waitFor(() => screen.getByTestId(images[0].url));
  });
});

const images = [{ url: 'https://1.com' }];

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve(images),
  })
);

describe('Test images loading to the Gallery component', () => {
  it('Renders a loader', () => {
    const { getByText } = render(<Gallery />);
    getByText('Loading...');
  });

  it('Renders images', async () => {
    await render(<Gallery type="35mm" />);
    expect(await screen.findByTestId(images[0].url)).toBeInTheDocument();
  });
});