add spec

Author: TomWoodward

src/components/Text.spec.tsx

@@ -1,5 +1,7 @@
-import { Paragraph, H2, H3 } from './Text';
+import { Paragraph, H2, H3, Heading } from './Text';
 import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
+import React from 'react';
 
 describe('Text', () => {
   it('matches body snapshot', () => {
@@ -24,3 +26,41 @@ describe('Text', () => {
   });
 
 });
+
+describe('Heading', () => {
+  it('defaults variant to match the semantic level', () => {
+    const tree = renderer.create(
+      <Heading level={2}>This is a heading</Heading>
+    ).toJSON();
+    expect(tree).toMatchObject({ type: 'h2', props: { className: 'text-h2' } });
+  });
+
+  it('renders the element for the given level', () => {
+    const tree = renderer.create(
+      <Heading level={4}>This is a heading</Heading>
+    ).toJSON();
+    expect((tree as unknown as { type: string }).type).toBe('h4');
+  });
+
+  it('decouples visual style from semantic level', () => {
+    // an <h2> element styled like an h3
+    const tree = renderer.create(
+      <Heading level={2} variant="h3">This is a heading</Heading>
+    ).toJSON();
+    expect(tree).toMatchObject({ type: 'h2', props: { className: 'text-h3' } });
+  });
+
+  it('merges a consumer className with the variant class', () => {
+    const tree = renderer.create(
+      <Heading level={2} className="custom">This is a heading</Heading>
+    ).toJSON();
+    expect((tree as unknown as { props: { className: string } }).props.className).toBe('text-h2 custom');
+  });
+
+  it('forwards a ref to the underlying element', () => {
+    const ref = React.createRef<HTMLHeadingElement>();
+    render(<Heading level={2} ref={ref}>This is a heading</Heading>);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('H2');
+  });
+});