refactor(components): rewrite ImageWidget component

* remove `imageClassName` prop
* replace `image` prop with `img` and expect an image instead of an
object
* remove `alignment prop`
* remove useless CSS

1 files changed, 81 insertions, 0 deletions

diff --git a/src/components/organisms/widgets/image-widget/image-widget.test.tsx b/src/components/organisms/widgets/image-widget/image-widget.test.tsx
new file mode 100644
index 0000000..ecf8d77
--- /dev/null
+++ b/src/components/organisms/widgets/image-widget/image-widget.test.tsx
@@ -0,0 +1,81 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import NextImage from 'next/image';
+import { Heading } from '../../../atoms';
+import { ImageWidget } from './image-widget';
+
+describe('ImageWidget', () => {
+  it('render the widget heading and an image', () => {
+    const heading = 'quam tempore ea';
+    const headingLvl = 3;
+    const altTxt = 'enim';
+
+    render(
+      <ImageWidget
+        heading={<Heading level={headingLvl}>{heading}</Heading>}
+        img={
+          <NextImage
+            alt={altTxt}
+            height={480}
+            src="https://picsum.photos/640/480"
+            width={640}
+          />
+        }
+      />
+    );
+
+    expect(
+      rtlScreen.getByRole('heading', { level: headingLvl })
+    ).toHaveTextContent(heading);
+    expect(rtlScreen.getByRole('img')).toHaveAccessibleName(altTxt);
+  });
+
+  it('can render an image wrapped in a link', () => {
+    const heading = 'quam tempore ea';
+    const headingLvl = 3;
+    const altTxt = 'enim';
+    const url = 'https://example.test';
+
+    render(
+      <ImageWidget
+        heading={<Heading level={headingLvl}>{heading}</Heading>}
+        img={
+          <NextImage
+            alt={altTxt}
+            height={480}
+            src="https://picsum.photos/640/480"
+            width={640}
+          />
+        }
+        url={url}
+      />
+    );
+
+    expect(rtlScreen.getByRole('link')).toHaveAttribute('href', url);
+    expect(rtlScreen.getByRole('img')).toHaveAccessibleName(altTxt);
+  });
+
+  it('can render an image with a description', () => {
+    const heading = 'quam tempore ea';
+    const headingLvl = 3;
+    const altTxt = 'enim';
+    const desc = 'itaque laudantium ut';
+
+    render(
+      <ImageWidget
+        description={desc}
+        heading={<Heading level={headingLvl}>{heading}</Heading>}
+        img={
+          <NextImage
+            alt={altTxt}
+            height={480}
+            src="https://picsum.photos/640/480"
+            width={640}
+          />
+        }
+      />
+    );
+
+    expect(rtlScreen.getByRole('figure')).toHaveAccessibleName(desc);
+  });
+});