From d7bcd93efcd4f1ae20678d0efa6777cfadc09a4e Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 10 Nov 2023 12:16:59 +0100
Subject: refactor(components): replace Overview with ProjectOverview component

* `cover` prop is now expecting a ReactElement (NextImage)
* `meta` prop is now limited to a specific set of meta items
* add a `name` prop to add an accessible name to the figure element
---
 .../project-overview/project-overview.test.tsx     | 127 +++++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 src/components/organisms/project-overview/project-overview.test.tsx

(limited to 'src/components/organisms/project-overview/project-overview.test.tsx')

diff --git a/src/components/organisms/project-overview/project-overview.test.tsx b/src/components/organisms/project-overview/project-overview.test.tsx
new file mode 100644
index 0000000..6234368
--- /dev/null
+++ b/src/components/organisms/project-overview/project-overview.test.tsx
@@ -0,0 +1,127 @@
+import { describe, expect, it } from '@jest/globals';
+import NextImage from 'next/image';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { type ProjectMeta, ProjectOverview } from './project-overview';
+
+describe('ProjectOverview', () => {
+  it('can render a meta for the creation date', () => {
+    const meta = {
+      creationDate: '2023-11-01',
+    } satisfies Partial<ProjectMeta>;
+
+    render(<ProjectOverview meta={meta} name="quo" />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Created on:');
+  });
+
+  it('can render a meta for the update date', () => {
+    const meta = {
+      lastUpdateDate: '2023-11-02',
+    } satisfies Partial<ProjectMeta>;
+
+    render(<ProjectOverview meta={meta} name="quo" />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Updated on:');
+  });
+
+  it('can render a meta for the license', () => {
+    const meta = {
+      license: 'MIT',
+    } satisfies Partial<ProjectMeta>;
+
+    render(<ProjectOverview meta={meta} name="quo" />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('License:');
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(meta.license);
+  });
+
+  it('can render a meta for the popularity', () => {
+    const meta = {
+      popularity: { count: 5 },
+    } satisfies Partial<ProjectMeta>;
+
+    render(<ProjectOverview meta={meta} name="quo" />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Popularity:');
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(
+      `${meta.popularity.count} stars`
+    );
+  });
+
+  it('can render a meta for the popularity with a link', () => {
+    const meta = {
+      popularity: { count: 3, url: '#popularity' },
+    } satisfies Partial<ProjectMeta>;
+
+    render(<ProjectOverview meta={meta} name="quo" />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Popularity:');
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(
+      `${meta.popularity.count} stars`
+    );
+    expect(rtlScreen.getByRole('link')).toHaveAttribute(
+      'href',
+      meta.popularity.url
+    );
+  });
+
+  it('can render a meta for the technologies', () => {
+    const meta = {
+      technologies: ['Javascript', 'React'],
+    } satisfies Partial<ProjectMeta>;
+
+    render(<ProjectOverview meta={meta} name="quo" />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Technologies:');
+    expect(rtlScreen.getAllByRole('definition')).toHaveLength(
+      meta.technologies.length
+    );
+  });
+
+  it('can render a meta for the repositories', () => {
+    const meta = {
+      repositories: [{ id: 'Github', label: 'Github', url: '#github' }],
+    } satisfies Partial<ProjectMeta>;
+
+    render(<ProjectOverview meta={meta} name="quo" />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Repositories:');
+    expect(rtlScreen.getAllByRole('definition')).toHaveLength(
+      meta.repositories.length
+    );
+    expect(
+      rtlScreen.getByRole('link', { name: meta.repositories[0].label })
+    ).toHaveAttribute('href', meta.repositories[0].url);
+  });
+
+  it('can render a cover', () => {
+    const altTxt = 'id qui nisi';
+
+    render(
+      <ProjectOverview
+        cover={
+          <NextImage
+            alt={altTxt}
+            height={480}
+            src="https://picsum.photos/640/480"
+            width={640}
+          />
+        }
+        meta={{}}
+        name="qui"
+      />
+    );
+
+    expect(rtlScreen.getByRole('img')).toHaveAccessibleName(altTxt);
+  });
+
+  it('does not render a meta if the key is undefined', () => {
+    const meta = {
+      creationDate: undefined,
+    } satisfies Partial<ProjectMeta>;
+
+    render(<ProjectOverview meta={meta} name="quo" />);
+
+    expect(rtlScreen.queryByRole('term')).not.toBeInTheDocument();
+  });
+});
-- 
cgit v1.2.3