royalicing / auditioner

Does your component have enough to get the role? Accessibility-first testing.

auditioner

🎬

Test that your components can play the accessibility roles we need.

---

• Roles
  • Tabs
  • Menus
  • Checkboxes
  • Scene

Roles

• button
• link
• checkbox
• radiogroup / radio
• tab
• menu
• summary

Tabs

Examples

import { screenTest, Tab } from 'auditioner';

describe('your tabs component', () => {
  beforeEach(() => render(<Tabs />));

  it('renders 3 tabs', () => {
    expect(screenTest(Tab.all)).toHaveLength(3);
  });

  it('has first tab', () => {
    expect(screenTest(Tab('First'))).toBeVisible();
  });

  it('selects first tab', () => {
    expect(screenTest(Tab('First').selected)).toBeVisible();
  });

  it('renders first tabpanel', () => {
    expect(screenTest(Tab.panel())).toHaveTextContent('First panel');
  });

  it('labels first tabpanel', () => {
    expect(screenTest(Tab.panel('First'))).toHaveTextContent('First panel');
  });

  it('renders tablist', () => {
    expect(screenTest(Tab.list())).toBeVisible();
  });

  describe('when clicking on second tab', () => {
    beforeEach(() => {
      user.click(screenTest(Tab('Second')));
    });

    it('selects second tab', () => {
      expect(screenTest(Tab('Second').selected)).toBeVisible();
    });

    it('renders second tabpanel', () => {
      expect(screenTest(Tab.panel())).toHaveTextContent('Second panel');
    });
  });
});

Menus

Examples

import { Button, Menu, screenTest } from 'auditioner';
import user from '@testing-library/user-event';

describe('your menu component', () => {
  beforeEach(() => {
    render(<YourMenu />);
  });

  describe('when action menu is clicked', () => {
    beforeEach(() => user.click(screenTest(Button('Actions'))));

    it('opens menu', () => {
      expect(screenTest(Menu('Actions'))).toBeVisible();
    });

    it('has Cut item', () => {
      expect(screenTest(Menu.item('Cut'))).toBeVisible();
    });

    it('renders 3 menu items: Cut, Copy, Paste', () => {
      const [first, second, third] = screenTest(Menu.item().all);
      expect(first).toHaveAccessibleName('Cut');
      expect(second).toHaveAccessibleName('Copy');
      expect(third).toHaveAccessibleName('Paste');
    });

    describe('when clicking on Cut item', () => {
      beforeEach(() => {
        user.click(screenTest(Menu.item('Cut')));
      });

      it('calls select with cut', () => {
        expect(dispatch).toHaveBeenCalledWith({ type: 'select', id: 'cut' });
      });
    });
  });
});

Checkboxes

Examples

import { Checkbox, screenTest } from 'auditioner';

describe('your form component', () => {
  beforeEach(() => {
    render(<YourForm />);
  });

  it('has First checkbox', () => {
    expect(screenTest(Checkbox('First'))).toBeVisible();
  });

  it('has 3 checkboxes', () => {
    expect(screenTest(Checkbox.all)).toHaveLength(3);
  });
});

Scene

(COMING SOON?)

import { scene } from 'auditioner';

expect(
  screenTest(
    scene(
      form('Sign up', [
        textbox('Email address'),
        textbox('Password'),
        button('Sign up'),
      ])
    )
  )
).toBe(true);

auditioner's Issues

Add `getDescription()` via `aria-description` or `aria-describedby`