How to trigger decrement callback for Spinbutton in tests?

[Cristian Cuna (crismic)]

Hey,

I'm trying to test the decrement callback of a SpinButton, but it seems it's not called when I fire the click event on the decrement button. Am I missing something?

test(`SpinButton decrement callback should be called when clicking the decrement button`, () => {
  const handleDecrement = jest.fn();
  const handleIncrement = jest.fn();
  const handleChange = jest.fn();

  render(
    <SpinButton
      onChange={handleChange}
      value="20"
      onIncrement={handleIncrement}
      onDecrement={handleDecrement}
      incrementButtonAriaLabel="Increase value by 1"
      decrementButtonAriaLabel="Decrease value by 1"
    />
  );

  const decrementButton = screen.getByRole("button", {
    name: /decrease value by 1/i
  });

  fireEvent.click(decrementButton);

  expect(handleDecrement).toBeCalled();
});

I've also put together a codesandbox if it proves useful: https://codesandbox.io/s/trigger-splinbutton-decrement-g918h?file=/src/Sample.test.tsx.

Versions used:

  "dependencies": {
    "@fluentui/react": "7.128.1",
    "@testing-library/react": "11.2.5",
    "react": "16.13.0",
    "react-dom": "16.13.0",
    "react-scripts": "3.4.1"
  },
  "devDependencies": {
    "@types/react": "16.13.0",
    "@types/react-dom": "16.13.0",
    "typescript": "4.1.3"
  },

[Valentyna (ValentinaKozlova)]

Hey @mccuna, have you checked test files of SpinButton, they should have increment/decrement: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.test.tsx