From 891441a76173c708c6604fa203b175aefa222333 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 9 Oct 2023 16:31:00 +0200
Subject: refactor(components): rewrite Branding component

The component should only be responsible of the layout for the logo,
the name and the optional baseline. Also, the homepage url could
be different from `/` so the consumer should give the right url.
---
 .../molecules/branding/branding.test.tsx           | 77 ++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 src/components/molecules/branding/branding.test.tsx

(limited to 'src/components/molecules/branding/branding.test.tsx')

diff --git a/src/components/molecules/branding/branding.test.tsx b/src/components/molecules/branding/branding.test.tsx
new file mode 100644
index 0000000..7f41098
--- /dev/null
+++ b/src/components/molecules/branding/branding.test.tsx
@@ -0,0 +1,77 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import NextImage from 'next/image';
+import { Branding } from './branding';
+
+describe('Branding', () => {
+  it('renders the brand logo and name', () => {
+    const altText = 'dolorem aut ullam';
+    const name = 'ducimus quo enim';
+
+    render(
+      <Branding
+        logo={
+          <NextImage
+            alt={altText}
+            height={100}
+            src="https://picsum.photos/100"
+            width={100}
+          />
+        }
+        name={<div>{name}</div>}
+      />
+    );
+
+    expect(rtlScreen.getByRole('img', { name: altText })).toBeInTheDocument();
+    expect(rtlScreen.getByText(name)).toBeInTheDocument();
+  });
+
+  it('can render the brand logo, name and baseline', () => {
+    const altText = 'dolorem aut ullam';
+    const name = 'ducimus quo enim';
+    const baseline = 'ab consequatur est';
+
+    render(
+      <Branding
+        baseline={<div>{baseline}</div>}
+        logo={
+          <NextImage
+            alt={altText}
+            height={100}
+            src="https://picsum.photos/100"
+            width={100}
+          />
+        }
+        name={<div>{name}</div>}
+      />
+    );
+
+    expect(rtlScreen.getByRole('img', { name: altText })).toBeInTheDocument();
+    expect(rtlScreen.getByText(name)).toBeInTheDocument();
+    expect(rtlScreen.getByText(baseline)).toBeInTheDocument();
+  });
+
+  it('can render the brand name wrapped in a link', () => {
+    const altText = 'dolorem aut ullam';
+    const name = 'ducimus quo enim';
+    const url = '/velit';
+
+    render(
+      <Branding
+        logo={
+          <NextImage
+            alt={altText}
+            height={100}
+            src="https://picsum.photos/100"
+            width={100}
+          />
+        }
+        name={<div>{name}</div>}
+        url={url}
+      />
+    );
+
+    expect(rtlScreen.getByRole('img', { name: altText })).toBeInTheDocument();
+    expect(rtlScreen.getByRole('link', { name })).toHaveAttribute('href', url);
+  });
+});
-- 
cgit v1.2.3