User-event: should type be constrained by maxLength?

[afontcu]

Is maxLength an attribute user-event should take into account?

If so, the following test should pass:

// __tests__/vue/type.js

test("maxlength", () => {
  const input = jest.fn();

  const maxlength = 10;

  const { getByTestId } = renderComponent('input',
    { input },
    { maxlength }
  );

  const text = "Hello, world!";
  userEvent.type(getByTestId("input"), text);

  expect(input).toHaveBeenCalledTimes(maxlength);
  expect(getByTestId("input")).toHaveProperty("value", text.slice(0, maxlength));
});

I'll be happy to implement it if you think it makes sense.

[calebeby]

At first I was wondering if this might be a JSDom issue 🤔

But now I don't think it is, because we are manually firing the event on the element.

@afontcu Which of the two assertions (or both) is/are failing?

[afontcu]

As far as I can tell, both are failing ("hello world!" is 13 characters long, so event is being fired 13 times).

[calebeby]

I think it might make sense to implement this. But how far do we go? How much input validation should we do? Is there a way we can reuse JSDOM's logic for this, since they already implemented HTML5 input validations?

[calebeby]

Also https://github.com/hyperform/hyperform might be something to consider

[weyert]

Yes, the type-helper method doesn't check the maxLength-attribute this time. Personally, I have more issues with the lack of diacritics support or special characters like {tab} or {shift} etc. I hope I need this requirement soon at work so I can work on it. Only it is a bit problematic because of all the different keyboard layouts available throughout the world.

[Gpx]

It looks like the browser doesn't fire the events if the max length is reached: link. Since user-event is the one responsible for firing events I think the check should happen on our side rather than with JSDOM.

What do you think?

[weyert]

Sounds good to me. I can work on something tomorrow at work

[weyert]

Woops, got sidetracked by a hackaton at work. I will pick this up on Monday :)

[carlos-cne]

Here still not working.

it('Should input have a 60 max length even try to add more', async () => {
    render(<CreateBanner />);

    const inputValue = screen.getByPlaceholderText(/Título do banner/);

    await userEvent.type(
      inputValue,
      'A text that has more than sixty characters to test input limit'
    );

    expect(inputValue.value).toHaveLength(60);
  });
});

If I'm doing wrong, please let me know the right way.

[gautamkrishnar]

Working fine for me. I am using the version 8.1.0 of the user-event library.
example:

const textInput = getByTestId('formTextInput');
    await userEvent.type(textInput, longText);
    await wait(() => {
        expect(textInput).toHaveValue(textInputAllowedText);
        expect(textInput.value).toHaveLength(textInputAllowedText.length);
    });

[kentcdodds]

This should be working properly now.