button.interactions.stories.tsx

const MESSAGES = {
  notClicked: 'Click to Disable',
  clicked: 'Disabled'
};

const Template = (args) => {
  const [ disabled, setDisabled ] = useState(false);
  const clickHandler = useCallback(() => {
    setDisabled(true);
  }, [ setDisabled ]);
  const message = disabled ? MESSAGES.clicked : MESSAGES.notClicked;

  return (
    <Button color="secondary"
      aria-disabled={ String(disabled) }
      tabIndex={ 0 }
      disabled={ disabled }
      variant="outlined"
      role="button"
      onClick={ clickHandler }
      { ...args }>
      {message}
    </Button>
  );
};

export const InteractionTest = Template.bind({});

InteractionTest.play = async (payload) => {
  const { canvasElement } = payload;
  const canvas = within(canvasElement);

  // button to be present
  const buttonElement = await canvas.getByRole('button');

  expect(buttonElement).not.toBeNull();

  // attributes to be present
  // [class, tabindex, type, role, 'aria-disabled']
  await expect(canvasElement.children[0].attributes.length).toEqual(5);
  console.log('attributes', payload);

  // clicks work and update state of interaction test
  await expect(canvas.getByText(MESSAGES.notClicked)).toBeInTheDocument();
  buttonElement.click();
  await expect(canvas.getByText(MESSAGES.clicked)).toBeInTheDocument();
  // button should now be disabled, and the next click should do nothing
  buttonElement.click();
  // expect button to still be present
  await expect(canvas.getByText(MESSAGES.clicked)).toBeInTheDocument();
  // expect aria-disabled to be true now
  await expect(canvasElement.childNodes[0].ariaDisabled).toBe('true');
};

InteractionTest.storyName = 'Interaction Tests';

export default {
  title: 'Components/Atoms/Button',
  parameters: {
    status: {
      type: 'released'
    }
  }
};