Making chips more accessible and testable

[nareshbhatia]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I have created a multi-select control using chips. You can see a live version here.

I am having a hard time testing it. Ideally each chip should behave like a button and the test should be able to target it using the button label (as recommended by the react-testing-library). However I can't do it with the generated markup. Here's a failed attempt at writing such a test. I can probably do this by adding a bunch of data-testid's, but that's really not recommended.

Examples 🌈

Here's how a chip is marked up in my control (original source):

let icon;
if (value.includes(optionId)) {
    icon = <CheckIcon />;
}

<Chip
    key={optionId}
    label={optionName}
    icon={icon}
    className={classes.chip}
    variant="outlined"
    size="small"
    clickable
    onClick={() => {
        handleClick(optionId);
    }}
/>

As you can see, the selected chips get a check mark icon whereas unselected chips don't. I am trying to test exactly that. Using react-testing-library, it should be as simple as this:

const mondayChip = getByLabelText('Monday');
const iconTitle = mondayChip.querySelector('svg > title');
expect(iconTitle && iconTitle.textContent === 'Check Icon').toBe(true);

Unfortunately, the generated markup does not make it as easy. Here's what is generated:

<div
  role="button"
  class="MuiChip-root jss4 MuiChip-outlined MuiChip-sizeSmall MuiChip-clickable"
  tabindex="0"
>
  <svg
    class="MuiSvgIcon-root MuiChip-icon MuiChip-iconSmall"
    focusable="false"
    viewBox="0 0 24 24"
    aria-hidden="true"
    role="presentation"
  >
    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
  </svg>
  <span class="MuiChip-label MuiChip-labelSmall">Monday</span>
</div>

As you can see, there is no easy way to select the chip by it's label. We probably need to use aria-labelledby in this case. Also the svg needs to be titled correctly to verify that we have a Check Icon and not something else. Here's the desired markup:

<div
  role="button"
  aria-labelledby="monday"
  class="MuiChip-root jss4 MuiChip-outlined MuiChip-sizeSmall MuiChip-clickable"
  tabindex="0"
>
  <svg
    class="MuiSvgIcon-root MuiChip-icon MuiChip-iconSmall"
    focusable="false"
    viewBox="0 0 24 24"
    aria-hidden="true"
    role="presentation"
  >
    <title>Check Icon</title>
    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
  </svg>
  <span id="monday" class="MuiChip-label MuiChip-labelSmall">Monday</span>
</div>

Is this something that can be achieved with no or minor modifications to the Chip component?

Motivation 🔦

I am trying to make sure that I can test my Material-UI components thoroughly using the guiding principles of the react-testing-library.