[TestModernization]: Add test modernization to TextField

[ghost]

WHY are these changes introduced?

I am updating existing tests for TextField components to use the new modern framework.

WHAT is this pull request doing?

Part of test modernization (https://docs.google.com/spreadsheets/d/1GBuEZbOpVYJLNISK7gL69DU8rCxocn5L5GYaKtPXPbU/edit#gid=1498187033), updating tests using {mountWithAppProvider} from 'test-utilities/legacy' to {mountWithApp} from 'test-utilities'.

[github-actions]

size-limit report

Path	Size
cjs	163.46 KB (0%)
esm	96.19 KB (0%)
esnext	143.09 KB (0%)
css	34.52 KB (0%)

[kyledurand]

Looks good but I'm suspicious about the find('div', {role: 'button'{) bit. If you have context on how that role is getting passed to a div please let me know

[kyledurand]

I find this a bit jarring. Why would a div have a role of button on it? Looking at the TextField component it looks like the role doesn't get passed to the div with the onClick handler?

[rdott]

I was not 100% of the mechanics of it getting passed down. This solution was from converting

element.find('[role="button"]').first().simulate('click');

from the legacy suite and then debugging to find the specific element that the above (and similar) are targeting.

The debug output for these (console.log(element.find('[role="button"]').first().debug());) returns the div element with this role:

<div role="button" ...

Looking at it closer, it looks like this is rendered by the Spinner component, which accepts a handleNumberChange callback, which itself accepts a number (1 for increment, -1 for decrement) and then calls the onChange which is being tested.

I believe the role is to indicate the div is being used a button.

One option would be to refactor these test selectors to directly call onChange on the <Spinner> rendered in the TestField, as reaching down into the sub-component feels like behaviour that is/should be tested within the Spinner itself.

e.g.

element.find(Spinner)!.trigger('onChange', 1);

This proposed change would most likely require additional changes in Spinner.test.tsx tests, which currently tests the callback props are called, but does not test if they are called with any of the hardcoded values defined on the Spinner div buttons(1 or -1).

[kyledurand]

Gotcha, thanks for looking into that @rdott ❤️ that makes sense. I just did a test with my screenreader and all is well. !