CORE-2720: Replace five snapshot specs with targeted tests

src/components/Checkbox/Checkbox.spec.tsx

@@ -1,36 +1,65 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { Checkbox } from './Checkbox';
-import renderer from 'react-test-renderer';
+import { checkboxVariants } from './sharedCheckboxStyles';
 
 describe('Checkbox', () => {
-  it('matches snapshot', () => {
-    const tree = renderer.create(
-      <Checkbox>Click Me</Checkbox>
-    ).toJSON();
-    expect(tree).toMatchSnapshot();
+  const input = () => screen.getByRole('checkbox') as HTMLInputElement;
+  const label = () => input().closest('label') as HTMLElement;
+  const inputVar = (name: string) => input().style.getPropertyValue(name);
+  const labelVar = (name: string) => label().style.getPropertyValue(name);
+
+  it('is an enabled, unchecked checkbox named by its children', () => {
+    render(<Checkbox>Click Me</Checkbox>);
+
+    expect(screen.getByRole('checkbox', { name: 'Click Me' })).toBeTruthy();
+    expect(input().checked).toBe(false);
+    expect(input().disabled).toBe(false);
+    expect(label().classList.contains('checkbox-label')).toBe(true);
+    expect(input().classList.contains('checkbox-input')).toBe(true);
   });
 
-  it('handles options', () => {
-    const tree = renderer.create(
-      <Checkbox bold size={2} variant='light'>Click Me</Checkbox>
-    ).toJSON();
-    expect(tree).toMatchSnapshot();
+  it('is regular weight and 1.6rem by default', () => {
+    render(<Checkbox>Click Me</Checkbox>);
+
+    expect(labelVar('--checkbox-font-weight')).toBe('400');
+    expect(inputVar('--checkbox-size')).toBe('1.6rem');
+  });
+
+  it('binds weight and size from its props', () => {
+    render(<Checkbox bold size={2}>Click Me</Checkbox>);
+
+    expect(labelVar('--checkbox-font-weight')).toBe('700');
+    expect(inputVar('--checkbox-size')).toBe('2rem');
+  });
+
+  it.each(['primary', 'light', 'error'] as const)('takes its colours from the %s variant', (variant) => {
+    render(<Checkbox variant={variant}>Click Me</Checkbox>);
+
+    const expected = checkboxVariants[variant];
+    expect(labelVar('--checkbox-color')).toBe(expected.color);
+    expect(inputVar('--checkbox-bg')).toBe(expected.backgroundColor);
+    expect(inputVar('--checkbox-border-unchecked')).toBe(expected.unCheckedBorder);
+    expect(inputVar('--checkbox-border-checked')).toBe(expected.checkedBorder);
+    expect(inputVar('--checkbox-checkmark')).toBe(`url('${expected.backgroundImage}')`);
   });
 
-  it('allows setting props on label', () => {
-    const tree = renderer.create(
-      <Checkbox bold size={2} variant='light' labelProps={{ "aria-label": "custom label"}}>
-        Click Me
-      </Checkbox>
-    ).toJSON();
-    expect(tree).toMatchSnapshot();
+  it('is disabled, dimmed and draws no checkmark when disabled', () => {
+    render(<Checkbox disabled>Click Me</Checkbox>);
+
+    expect(input().disabled).toBe(true);
+    expect(label().classList.contains('checkbox-label--disabled')).toBe(true);
+    expect(input().classList.contains('checkbox-input--disabled')).toBe(true);
+    expect(inputVar('--checkbox-opacity')).toBe('0.4');
+    expect(inputVar('--checkbox-checkmark')).toBe('none');
   });
-  it('handles disabled state', () => {
-    const tree = renderer.create(
-      <Checkbox disabled>Click Me</Checkbox>
-    ).toJSON();
-    expect(tree).toMatchSnapshot();
+
+  it('passes labelProps to the label alongside its own classes', () => {
+    render(<Checkbox labelProps={{ 'aria-label': 'custom label', className: 'caller-label' }}>Click Me</Checkbox>);
+
+    expect(label().getAttribute('aria-label')).toBe('custom label');
+    expect(label().classList.contains('checkbox-label')).toBe(true);
+    expect(label().classList.contains('caller-label')).toBe(true);
   });
 
   describe('indeterminate', () => {

src/components/NavBar.spec.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { NavBar } from './NavBar';
+import * as Constants from '../constants';
 
 describe('NavBar', () => {
   let root: HTMLElement;
@@ -10,19 +11,44 @@ describe('NavBar', () => {
     document.body.append(root);
   });
 
-  it('matches snapshot', () => {
+  const wrapper = () => document.body.querySelector('[data-portal-slot="nav"]') as HTMLElement;
+  const bar = () => document.body.querySelector('.navbar-bar') as HTMLElement;
+  const barVar = (name: string) => bar().style.getPropertyValue(name);
+
+  it('renders its children in a bar inside a wrapper outside the root', () => {
     render(<NavBar>NavBar content</NavBar>, { container: root });
-    expect(document.body).toMatchSnapshot();
+
+    expect(wrapper().classList.contains('navbar-wrapper')).toBe(true);
+    expect(root.contains(wrapper())).toBe(false);
+    expect(wrapper().contains(bar())).toBe(true);
+    expect(bar().textContent).toBe('NavBar content');
+  });
+
+  it('uses the default heights and no max width', () => {
+    render(<NavBar>NavBar content</NavBar>, { container: root });
+
+    expect(barVar('--navbar-height-mobile')).toBe(`${Constants.navMobileHeight}rem`);
+    expect(barVar('--navbar-height-desktop')).toBe(`${Constants.navDesktopHeight}rem`);
+    expect(barVar('--navbar-max-width')).toBe('');
   });
 
   it('sets the maxWidth', () => {
     render(<NavBar maxWidth={128}>NavBar content</NavBar>, { container: root });
-    expect(document.body).toMatchSnapshot();
+
+    expect(barVar('--navbar-max-width')).toBe('128rem');
+  });
+
+  it('sets the heights from its props', () => {
+    render(<NavBar navMobileHeight={5} navDesktopHeight={7}>NavBar content</NavBar>, { container: root });
+
+    expect(barVar('--navbar-height-mobile')).toBe('5rem');
+    expect(barVar('--navbar-height-desktop')).toBe('7rem');
   });
 
   it('sets the ariaLabel', () => {
-    render(<NavBar ariaLabel='test' maxWidth={128}>NavBar content</NavBar>, { container: root });
-    expect(document.body).toMatchSnapshot();
+    render(<NavBar ariaLabel='test'>NavBar content</NavBar>, { container: root });
+
+    expect(screen.getByRole('navigation', { name: 'test' })).toBe(wrapper());
   });
 
   it('renders a navigation landmark by default', () => {
@@ -47,19 +73,32 @@ describe('NavBar', () => {
   });
 
   describe('with a logo', () => {
-    it('matches snapshot', () => {
+    it('shows no logo by default', () => {
+      render(<NavBar>NavBar content</NavBar>, { container: root });
+
+      expect(screen.queryByRole('img')).toBeNull();
+    });
+
+    it('shows the default logo, unlinked', () => {
       render(<NavBar logo={true}>NavBar content</NavBar>, { container: root });
-      expect(document.body).toMatchSnapshot();
+
+      const logo = screen.getByRole('img', { name: 'OpenStax Logo' });
+      expect(bar().contains(logo)).toBe(true);
+      expect(logo.closest('a')).toBeNull();
     });
 
     it('links the logo', () => {
       render(<NavBar logo={{alt: 'Logo', href:'/'}}>NavBar content</NavBar>, { container: root });
-      expect(document.body).toMatchSnapshot();
+
+      const link = screen.getByRole('img', { name: 'Logo' }).closest('a');
+      expect(link?.getAttribute('href')).toBe('/');
     });
 
     it('customizes the alt text', () => {
       render(<NavBar logo={{alt: 'Custom alt text'}}>NavBar content</NavBar>, { container: root });
-      expect(document.body).toMatchSnapshot();
+
+      const logo = screen.getByRole('img', { name: 'Custom alt text' });
+      expect(logo.closest('a')).toBeNull();
     });
   });
 });