From 15522ec9146f6f1956620355c44dea2a6a75b67c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 9 Oct 2023 18:26:23 +0200
Subject: refactor(components): replace ResponsiveImage with Figure component

The styles applied to ResponsiveImage are related to the figure and
figcaption elements. Those elements could be use with other contents
than images. So I extracted them in a Figure component. The
ResponsiveImage component is no longer useful: the consumer should use
the Image component from `next` and wrap it in a link if needed.
---
 src/components/organisms/images/gallery.test.tsx | 30 ++++++++++++++----------
 1 file changed, 17 insertions(+), 13 deletions(-)

(limited to 'src/components/organisms/images/gallery.test.tsx')

diff --git a/src/components/organisms/images/gallery.test.tsx b/src/components/organisms/images/gallery.test.tsx
index ea39348..bffc3b2 100644
--- a/src/components/organisms/images/gallery.test.tsx
+++ b/src/components/organisms/images/gallery.test.tsx
@@ -1,6 +1,6 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { ResponsiveImage } from '../../molecules';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import NextImage from 'next/image';
 import { Gallery } from './gallery';
 
 const columns = 3;
@@ -8,7 +8,7 @@ const columns = 3;
 const image = {
   alt: 'Modi provident omnis',
   height: 480,
-  src: 'http://placeimg.com/640/480/fashion',
+  src: 'http://picsum.photos/640/480',
   width: 640,
 };
 
@@ -16,24 +16,28 @@ describe('Gallery', () => {
   it('renders the correct number of items', () => {
     render(
       <Gallery columns={columns}>
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
       </Gallery>
     );
-    expect(screen.getAllByRole('listitem')).toHaveLength(4);
+
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    expect(rtlScreen.getAllByRole('listitem')).toHaveLength(4);
   });
 
   it('renders the right number of columns', () => {
     render(
       <Gallery columns={columns}>
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
-        <ResponsiveImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
+        <NextImage {...image} />
       </Gallery>
     );
-    expect(screen.getByRole('list')).toHaveClass(`wrapper--${columns}-columns`);
+    expect(rtlScreen.getByRole('list')).toHaveClass(
+      `wrapper--${columns}-columns`
+    );
   });
 });
-- 
cgit v1.2.3

