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.

1 files changed, 77 insertions, 0 deletions

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);
+  });
+});