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/atoms/figure/figure.test.tsx | 32 +++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/atoms/figure/figure.test.tsx

(limited to 'src/components/atoms/figure/figure.test.tsx')

diff --git a/src/components/atoms/figure/figure.test.tsx b/src/components/atoms/figure/figure.test.tsx
new file mode 100644
index 0000000..90a07c7
--- /dev/null
+++ b/src/components/atoms/figure/figure.test.tsx
@@ -0,0 +1,32 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Figure } from './figure';
+
+describe('Figure', () => {
+  it('renders the figure contents', () => {
+    const body = 'tempora et quis';
+
+    render(<Figure>{body}</Figure>);
+
+    expect(rtlScreen.getByRole('figure')).toHaveTextContent(body);
+  });
+
+  it('can render its contents with a caption', () => {
+    const body = 'tempora et quis';
+    const caption = 'velit dolores magnam';
+
+    render(<Figure caption={caption}>{body}</Figure>);
+
+    expect(rtlScreen.getByRole('figure', { name: caption })).toHaveTextContent(
+      body
+    );
+  });
+
+  it('can style the figure with borders', () => {
+    const body = 'tempora et quis';
+
+    render(<Figure hasBorders>{body}</Figure>);
+
+    expect(rtlScreen.getByRole('figure')).toHaveClass('wrapper--has-borders');
+  });
+});
-- 
cgit v1.2.3