wat

__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);

__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 />);
 

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>;