Skip to content

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

License

Notifications You must be signed in to change notification settings

RoyalIcing/auditioner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

da126a7 Â· Feb 2, 2024

History

62 Commits
Jun 28, 2022
Sep 28, 2020
Feb 2, 2024
Jun 28, 2022
Jun 28, 2022
Jun 28, 2022
Jun 28, 2022
Jun 28, 2022
Jun 28, 2022
Jan 30, 2024
Jan 30, 2024
Jan 30, 2024
Jun 28, 2022
Jan 30, 2024

Repository files navigation

auditioner

🎬

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


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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published