refactor(components, hooks): rewrite ToC and useHeadingsTree

* replace TableOfContents component with TocWidget to keep the name of
widget components coherent
* replace `wrapper` prop with `tree` prop (the component no longer uses
the hook, it is up to the consumer to provide the headings tree)
* let consumer handle the widget title
* add options to useHeadingsTree hook to retrieve only the wanted
headings (and do not assume that h1 is unwanted)
* expect an ref object instead of an element in useHeadingsTree hook
* rename most of the types involved

1 files changed, 44 insertions, 0 deletions

diff --git a/src/components/organisms/widgets/toc-widget/toc-widget.test.tsx b/src/components/organisms/widgets/toc-widget/toc-widget.test.tsx
new file mode 100644
index 0000000..e4e63ac
--- /dev/null
+++ b/src/components/organisms/widgets/toc-widget/toc-widget.test.tsx
@@ -0,0 +1,44 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Heading } from '../../../atoms';
+import { TocWidget } from './toc-widget';
+
+describe('TocWidget', () => {
+  it('renders the widget heading and a list of links', () => {
+    const heading = 'fugit iusto qui';
+    const headingLvl = 3;
+    const tree = [
+      { children: [], depth: 2, id: 'title1', label: 'Title 1' },
+      {
+        children: [
+          { children: [], depth: 3, id: 'subtitle1', label: 'Subtitle 1' },
+          { children: [], depth: 3, id: 'subtitle2', label: 'Subtitle 2' },
+        ],
+        depth: 2,
+        id: 'title2',
+        label: 'Title 2',
+      },
+      { children: [], depth: 2, id: 'title3', label: 'Title 3' },
+    ];
+
+    render(
+      <TocWidget
+        heading={<Heading level={headingLvl}>{heading}</Heading>}
+        tree={tree}
+      />
+    );
+
+    const totalLinks =
+      tree.length +
+      tree.reduce(
+        (accumulator, currentValue) =>
+          accumulator + currentValue.children.length,
+        0
+      );
+
+    expect(
+      rtlScreen.getByRole('heading', { level: headingLvl })
+    ).toHaveTextContent(heading);
+    expect(rtlScreen.getAllByRole('link')).toHaveLength(totalLinks);
+  });
+});