From dcc180ad55dc5761caaf603808b494d5cc3004ef Mon Sep 17 00:00:00 2001
From: Kelly Joseph Price <kellyjosephprice@gmail.com>
Date: Tue, 21 May 2024 15:24:05 -0700
Subject: [PATCH] wat

---
 __tests__/Glossary.test.tsx            | 10 +++++-----
 __tests__/components/Glossary.test.tsx |  2 +-
 components/Glossary/index.tsx          |  8 +++++++-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/__tests__/Glossary.test.tsx b/__tests__/Glossary.test.tsx
index bf383c101..a2cb249de 100644
--- a/__tests__/Glossary.test.tsx
+++ b/__tests__/Glossary.test.tsx
@@ -6,7 +6,7 @@ import { Glossary } from '../components/Glossary';
 test('should output a glossary item if the term exists', () => {
   const term = 'acme';
   const definition = 'This is a definition';
-  const { container } = render(<Glossary term={term} terms={[{ term, definition }]} />);
+  const { container } = render(<Glossary terms={[{ term, definition }]}>acme</Glossary>);
 
   const trigger = container.querySelector('.Glossary-trigger');
   expect(trigger).toHaveTextContent(term);
@@ -17,10 +17,10 @@ test('should output a glossary item if the term exists', () => {
   expect(tooltipContent).toHaveTextContent(`${term} - ${definition}`);
 });
 
-test.skip('should be case insensitive', () => {
+test('should be case insensitive', () => {
   const term = 'aCme';
   const definition = 'This is a definition';
-  const { container } = render(<Glossary term="acme" terms={[{ term, definition }]} />);
+  const { container } = render(<Glossary terms={[{ term, definition }]}>acme</Glossary>);
 
   const trigger = container.querySelector('.Glossary-trigger');
   expect(trigger).toHaveTextContent('acme');
@@ -31,9 +31,9 @@ test.skip('should be case insensitive', () => {
   expect(tooltipContent).toHaveTextContent(`${term} - ${definition}`);
 });
 
-test.skip('should output the term if the definition does not exist', () => {
+test('should output the term if the definition does not exist', () => {
   const term = 'something';
-  const { container } = render(<Glossary term={term} terms={[]} />);
+  const { container } = render(<Glossary terms={[]}>{term}</Glossary>);
 
   expect(container.querySelector('.Glossary-trigger')).not.toBeInTheDocument();
   expect(container.querySelector('span')).toHaveTextContent(term);
diff --git a/__tests__/components/Glossary.test.tsx b/__tests__/components/Glossary.test.tsx
index 08c95dac4..1ecac9bc9 100644
--- a/__tests__/components/Glossary.test.tsx
+++ b/__tests__/components/Glossary.test.tsx
@@ -5,7 +5,7 @@ import { run, compile } from '../../index';
 
 describe('Glossary', () => {
   it('renders a glossary item', async () => {
-    const md = `<Glossary term="parliament" />`;
+    const md = `<Glossary>parliament</Glossary>`;
     const Content = await run(compile(md));
     render(<Content />);
 
diff --git a/components/Glossary/index.tsx b/components/Glossary/index.tsx
index ce32904ef..1f6adda89 100644
--- a/components/Glossary/index.tsx
+++ b/components/Glossary/index.tsx
@@ -3,7 +3,13 @@ import Tooltip from '@tippyjs/react';
 import GlossaryContext from '../../contexts/GlossaryTerms';
 import type { GlossaryTerm } from '../../contexts/GlossaryTerms';
 
-const Glossary = ({ term, terms }: { term: string; terms: GlossaryTerm[] }) => {
+interface Props extends React.PropsWithChildren {
+  term?: string;
+  terms: GlossaryTerm[];
+}
+
+const Glossary = ({ children, term: termProp, terms }: Props) => {
+  const term = (Array.isArray(children) ? children[0] : children) || termProp;
   const foundTerm = terms.find(i => term.toLowerCase() === i?.term?.toLowerCase());
 
   if (!foundTerm) return <span>{term}</span>;