refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 59 insertions, 0 deletions

diff --git a/src/components/organisms/widgets/image-widget.test.tsx b/src/components/organisms/widgets/image-widget.test.tsx
new file mode 100644
index 0000000..c6b1a3a
--- /dev/null
+++ b/src/components/organisms/widgets/image-widget.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen } from '@test-utils';
+import ImageWidget from './image-widget';
+
+const description = 'Ut vitae sit';
+
+const img = {
+  alt: 'Et perferendis quaerat',
+  height: 480,
+  src: 'http://placeimg.com/640/480/nature',
+  width: 640,
+};
+
+const title = 'Fugiat cumque et';
+const titleLevel = 2;
+
+const url = '/another-page';
+
+describe('ImageWidget', () => {
+  it('renders an image', () => {
+    render(
+      <ImageWidget
+        expanded={true}
+        image={img}
+        title={title}
+        level={titleLevel}
+      />
+    );
+    expect(screen.getByRole('img', { name: img.alt })).toBeInTheDocument();
+  });
+
+  it('renders a link', () => {
+    render(
+      <ImageWidget
+        expanded={true}
+        image={img}
+        title={title}
+        level={titleLevel}
+        url={url}
+      />
+    );
+    expect(screen.getByRole('link', { name: img.alt })).toHaveAttribute(
+      'href',
+      url
+    );
+  });
+
+  it('renders a description', () => {
+    render(
+      <ImageWidget
+        expanded={true}
+        image={img}
+        description={description}
+        title={title}
+        level={titleLevel}
+      />
+    );
+    expect(screen.getByText(description)).toBeInTheDocument();
+  });
+});