Add missing test suites for components with no coverage

packages/gamut/src/Animation/__tests__/Rotation.test.tsx

@@ -0,0 +1,25 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+
+import { Rotation } from '..';
+
+const renderView = setupRtl(Rotation, { children: 'content' });
+
+describe('Rotation', () => {
+  it('renders children', () => {
+    const { view } = renderView();
+
+    view.getByText('content');
+  });
+
+  it('applies aria-hidden when specified', () => {
+    const { view } = renderView({ 'aria-hidden': true });
+
+    expect(view.getByText('content')).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('does not apply aria-hidden by default', () => {
+    const { view } = renderView();
+
+    expect(view.getByText('content')).not.toHaveAttribute('aria-hidden');
+  });
+});

packages/gamut/src/AppWrapper/__tests__/AppWrapper.test.tsx

@@ -0,0 +1,19 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+
+import { AppWrapper } from '..';
+
+const renderView = setupRtl(AppWrapper, { children: 'content' });
+
+describe('AppWrapper', () => {
+  it('renders children', () => {
+    const { view } = renderView();
+
+    view.getByText('content');
+  });
+
+  it('renders as a div', () => {
+    const { view } = renderView();
+
+    expect(view.container.firstChild?.nodeName.toLowerCase()).toBe('div');
+  });
+});

packages/gamut/src/Box/__tests__/Box.test.tsx

@@ -0,0 +1,39 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+
+import { Box, FlexBox, GridBox } from '..';
+
+describe('Box', () => {
+  const renderView = setupRtl(Box, { children: 'box content' });
+
+  it('renders children', () => {
+    const { view } = renderView();
+
+    view.getByText('box content');
+  });
+
+  it('renders as a div by default', () => {
+    const { view } = renderView();
+
+    expect(view.getByText('box content').tagName.toLowerCase()).toBe('div');
+  });
+});
+
+describe('FlexBox', () => {
+  const renderView = setupRtl(FlexBox, { children: 'flex content' });
+
+  it('renders children', () => {
+    const { view } = renderView();
+
+    view.getByText('flex content');
+  });
+});
+
+describe('GridBox', () => {
+  const renderView = setupRtl(GridBox, { children: 'grid content' });
+
+  it('renders children', () => {
+    const { view } = renderView();
+
+    view.getByText('grid content');
+  });
+});

packages/gamut/src/Card/__tests__/Card.test.tsx

@@ -0,0 +1,43 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+
+import { Card } from '..';
+
+const renderView = setupRtl(Card, { children: 'card content' });
+
+describe('Card', () => {
+  it('renders children', () => {
+    const { view } = renderView();
+
+    view.getByText('card content');
+  });
+
+  it('renders with a non-default variant', () => {
+    const { view } = renderView({ variant: 'white' });
+
+    view.getByText('card content');
+  });
+
+  it('renders with isInteractive prop', () => {
+    const { view } = renderView({ isInteractive: true });
+
+    view.getByText('card content');
+  });
+
+  it('renders with outline shadow', () => {
+    const { view } = renderView({ shadow: 'outline' });
+
+    view.getByText('card content');
+  });
+
+  it('renders with patternLeft shadow', () => {
+    const { view } = renderView({ shadow: 'patternLeft' });
+
+    view.getByText('card content');
+  });
+
+  it('renders with patternRight shadow', () => {
+    const { view } = renderView({ shadow: 'patternRight' });
+
+    view.getByText('card content');
+  });
+});

packages/gamut/src/Layout/__tests__/Layout.test.tsx

@@ -0,0 +1,35 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import { within } from '@testing-library/react';
+
+import { Column, LayoutGrid } from '..';
+
+const renderLayoutGrid = setupRtl(LayoutGrid, { children: 'grid content' });
+const renderColumn = setupRtl(Column, { children: 'column content' });
+
+describe('LayoutGrid', () => {
+  it('renders children', () => {
+    const { view } = renderLayoutGrid();
+
+    view.getByText('grid content');
+  });
+});
+
+describe('Column', () => {
+  it('renders children', () => {
+    const { view } = renderColumn();
+
+    within(view.container).getByText('column content');
+  });
+
+  it('renders with a size prop', () => {
+    const { view } = renderColumn({ size: 6 });
+
+    within(view.container).getByText('column content');
+  });
+
+  it('renders with an offset prop', () => {
+    const { view } = renderColumn({ offset: 2 });
+
+    within(view.container).getByText('column content');
+  });
+});

packages/gamut/src/Loading/__tests__/Loading.test.tsx

@@ -0,0 +1,40 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+
+import { Shimmer } from '../Shimmer';
+import { Spinner } from '../Spinner';
+
+describe('Spinner', () => {
+  const renderView = setupRtl(Spinner, {});
+
+  it('renders with an accessible title', () => {
+    const { view } = renderView();
+
+    view.getByTitle('Spinner');
+  });
+
+  it('renders with a default size of 24', () => {
+    const { view } = renderView();
+
+    const svg = view.getByTitle('Spinner').closest('svg');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+  });
+
+  it('renders with a custom size', () => {
+    const { view } = renderView({ size: 48 });
+
+    const svg = view.getByTitle('Spinner').closest('svg');
+    expect(svg).toHaveAttribute('width', '48');
+    expect(svg).toHaveAttribute('height', '48');
+  });
+});
+
+describe('Shimmer', () => {
+  const renderView = setupRtl(Shimmer, {});
+
+  it('renders', () => {
+    const { view } = renderView();
+
+    expect(view.container.firstChild).toBeTruthy();
+  });
+});

packages/gamut/src/RadialProgress/__tests__/RadialProgress.test.tsx

@@ -0,0 +1,33 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+
+import { RadialProgress } from '..';
+
+const renderView = setupRtl(RadialProgress, { value: 50 });
+
+describe('RadialProgress', () => {
+  it('renders with an accessible progress label', () => {
+    const { view } = renderView();
+
+    view.getByText('50% progress');
+  });
+
+  it('uses the second value for the label when given an array', () => {
+    const { view } = renderView({ value: [25, 75] });
+
+    view.getByText('75% progress');
+  });
+
+  it('renders children', () => {
+    const { view } = renderView({ children: <span>50%</span> });
+
+    view.getByText('50%');
+  });
+
+  it('renders with a custom size', () => {
+    const { view } = renderView({ size: 100 });
+
+    const svg = view.container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '100');
+    expect(svg).toHaveAttribute('height', '100');
+  });
+});

packages/gamut/src/Typography/__tests__/Text.test.tsx

@@ -0,0 +1,43 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+
+import { Text } from '..';
+
+const renderView = setupRtl(Text, { children: 'text content' });
+
+describe('Text', () => {
+  it('renders children', () => {
+    const { view } = renderView();
+
+    view.getByText('text content');
+  });
+
+  it('renders as a span by default', () => {
+    const { view } = renderView();
+
+    expect(view.getByText('text content').tagName.toLowerCase()).toBe('span');
+  });
+
+  it('renders as a heading when as="h1"', () => {
+    const { view } = renderView({ as: 'h1' });
+
+    view.getByRole('heading', { level: 1, name: 'text content' });
+  });
+
+  it('renders as a paragraph when as="p"', () => {
+    const { view } = renderView({ as: 'p' });
+
+    expect(view.getByText('text content').tagName.toLowerCase()).toBe('p');
+  });
+
+  it('renders as a div when as="div"', () => {
+    const { view } = renderView({ as: 'div' });
+
+    expect(view.getByText('text content').tagName.toLowerCase()).toBe('div');
+  });
+
+  it('renders with a display variant', () => {
+    const { view } = renderView({ variant: 'title-lg' });
+
+    view.getByText('text content');
+  });
+});