From d5ade2359539648845a5854ed353b29367961d74 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 20 Nov 2023 11:02:20 +0100
Subject: refactor(components): extract MetaItem from MetaList

* replace `items` prop on MetaList with `children` prop: it was too
restrictive and the global options was not really useful. It is better
too give control to the consumers.
---
 .../molecules/meta-list/meta-list.test.tsx         | 63 +++++++++-------------
 1 file changed, 26 insertions(+), 37 deletions(-)

(limited to 'src/components/molecules/meta-list/meta-list.test.tsx')

diff --git a/src/components/molecules/meta-list/meta-list.test.tsx b/src/components/molecules/meta-list/meta-list.test.tsx
index cc4d2fa..e4e2860 100644
--- a/src/components/molecules/meta-list/meta-list.test.tsx
+++ b/src/components/molecules/meta-list/meta-list.test.tsx
@@ -1,31 +1,44 @@
 import { describe, expect, it } from '@jest/globals';
 import { render, screen as rtlScreen } from '@testing-library/react';
-import { type MetaItemData, MetaList } from './meta-list';
+import { MetaItem } from './meta-item';
+import { MetaList } from './meta-list';
 
 describe('MetaList', () => {
   it('renders a list of meta items', () => {
-    const items: MetaItemData[] = [
+    const items = [
       { id: 'item1', label: 'Item 1', value: 'Value 1' },
       { id: 'item2', label: 'Item 2', value: 'Value 2' },
       { id: 'item3', label: 'Item 3', value: 'Value 3' },
       { id: 'item4', label: 'Item 4', value: 'Value 4' },
     ];
 
-    render(<MetaList items={items} />);
+    render(
+      <MetaList>
+        {items.map(({ id, ...item }) => (
+          <MetaItem key={id} {...item} />
+        ))}
+      </MetaList>
+    );
 
     expect(rtlScreen.getAllByRole('term')).toHaveLength(items.length);
     expect(rtlScreen.getAllByRole('definition')).toHaveLength(items.length);
   });
 
   it('can render a centered list of meta items', () => {
-    const items: MetaItemData[] = [
+    const items = [
       { id: 'item1', label: 'Item 1', value: 'Value 1' },
       { id: 'item2', label: 'Item 2', value: 'Value 2' },
       { id: 'item3', label: 'Item 3', value: 'Value 3' },
       { id: 'item4', label: 'Item 4', value: 'Value 4' },
     ];
 
-    render(<MetaList isCentered items={items} />);
+    render(
+      <MetaList isCentered>
+        {items.map(({ id, ...item }) => (
+          <MetaItem key={id} {...item} />
+        ))}
+      </MetaList>
+    );
 
     const terms = rtlScreen.getAllByRole('term');
 
@@ -33,47 +46,23 @@ describe('MetaList', () => {
   });
 
   it('can render an inlined list of meta items', () => {
-    const items: MetaItemData[] = [
+    const items = [
       { id: 'item1', label: 'Item 1', value: 'Value 1' },
       { id: 'item2', label: 'Item 2', value: 'Value 2' },
       { id: 'item3', label: 'Item 3', value: 'Value 3' },
       { id: 'item4', label: 'Item 4', value: 'Value 4' },
     ];
 
-    render(<MetaList isInline items={items} />);
+    render(
+      <MetaList isInline>
+        {items.map(({ id, ...item }) => (
+          <MetaItem key={id} {...item} />
+        ))}
+      </MetaList>
+    );
 
     const terms = rtlScreen.getAllByRole('term');
 
     expect(terms[0].parentElement?.parentElement).toHaveClass('list--inlined');
   });
-
-  it('can render a list of meta items with bordered values', () => {
-    const items: MetaItemData[] = [
-      { id: 'item1', label: 'Item 1', value: 'Value 1' },
-      { id: 'item2', label: 'Item 2', value: 'Value 2' },
-      { id: 'item3', label: 'Item 3', value: 'Value 3' },
-      { id: 'item4', label: 'Item 4', value: 'Value 4' },
-    ];
-
-    render(<MetaList hasBorderedValues items={items} />);
-
-    const terms = rtlScreen.getAllByRole('term');
-
-    expect(terms[0].parentElement).toHaveClass('item--bordered-values');
-  });
-
-  it('can render a list of meta items with inlined values', () => {
-    const items: MetaItemData[] = [
-      { id: 'item1', label: 'Item 1', value: 'Value 1' },
-      { id: 'item2', label: 'Item 2', value: 'Value 2' },
-      { id: 'item3', label: 'Item 3', value: 'Value 3' },
-      { id: 'item4', label: 'Item 4', value: 'Value 4' },
-    ];
-
-    render(<MetaList hasInlinedValues items={items} />);
-
-    const terms = rtlScreen.getAllByRole('term');
-
-    expect(terms[0].parentElement).toHaveClass('item--inlined-values');
-  });
 });
-- 
cgit v1.2.3

