fix: outlined input error border width

[enagorny]

Summary

According to https://material.io/components/text-fields#interactive-demo (outlined, error)
Outlined TextInput should have bold border only when it is focused. And error state should change only color and not the boldness.

Test plan

[callstack-bot]

Hey @enagorny, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[lukewalczak]

Hello @enagorny, could you please add snapshot testing that change?

[enagorny]

I've added snapshot test for outlined text input with error. Also added it to TextInputExample.
But I can't find a way how to properly set text input focused using react-native-testing-library.

[brunohkbx]

@lukewalczak @enagorny what do you guys think about adding a testID in the Outline and then instead of a snapshot we can use testing-library to assert whether it has the right borderWidth?

Something like:

it('has the right borderWidth when the prop error is true', () => {
  const { getByTestID } = render(
    <TextInput
      mode="outlined"
      label="Outline Input with error"
      placeholder="Type Something"
      value={'Some test value'}
      error
    />
  );

  const outline = getByTestID('outline');

  expect(outline.props.style).toMatchObject({ borderWidth: 1 })
});

[lukewalczak]

@brunohkbx, sounds good! @enagorny could you please adjust it to the suggestion above?

[enagorny]

@lukewalczak I'll try it.
Just thinking that adding testId might be out of scope of this PR. As it should be implemented for both text inputs and be documented.

[enagorny]

Ah I see it is suggested to add testId to outline only. Not the TextInput itself.

[enagorny]

and still I can't test focused state 😞

[lukewalczak]

Hey @enagorny, you can test focused state by:

1. adding testID into TextInputOutlined eg text-input-outlined
2. adding test scenario with fireEvent usage:

it('correctly applies focused state Outline TextInput', () => {
  const { getByTestId } = render(
    <TextInput
      mode="outlined"
      label="Outline Input with error"
      placeholder="Type Something"
      value={'Some test value'}
      error
    />
  );

  const outline = getByTestId('text-input-outline');
  fireEvent(getByTestId('text-input-outlined'), 'focus');
  expect(outline.props.style).toEqual(
    expect.arrayContaining([expect.objectContaining({ borderWidth: 2 })])
  );
});

[enagorny]

@lukewalczak @brunohkbx I've added testId to the outline so now it's possible to access outline props to check the style.
It's not possible to use toMatchObject here as style is array of styles of objects.
And because this project uses outdated React Native Testing Library version I can't setup jest-native to use toHaveStyle from it.
I end up writing this chunky matcher

[lukewalczak]

Thanks @enagorny for fixing the bug and adjusting all comments!