fix: toFill doesn't empty contents when given an empty string

[MatthiasEngh]

Summary

this fixes #372 which is an issue when trying to override an input value with toFill https://github.com/smooth-code/jest-puppeteer/blob/5a4eb5b8a9e6cf4bddebc49f1794381190ae4e51/packages/expect-puppeteer/src/matchers/toFill.js#L3 with an empty string ''.

You would expect this behavior for multiple reasons; the method is called toFill which indicates the input is filled with any content (including empty content) you provide; the behavior is exactly that when used with non-empty strings.

The reason this happens is that toFill uses elementHandle.type(text[, options]) https://github.com/smooth-code/jest-puppeteer/blob/5a4eb5b8a9e6cf4bddebc49f1794381190ae4e51/packages/expect-puppeteer/src/matchers/toFill.js#L11 (source) which will type any characters passed via a string. An empty string is treated as no characters typed, so toFill simply highlights the input content and subsequently does nothing.

This proposes fixing this by pressing Backspace after selecting the content and typing, which will consistently empty and fill the input.

Test plan

I added a test which failed, to prove that this was a real issue. To reproduce check out 4d961d3, run the suite and you should see that it fails, then check out 23526f3 and it succeeds

[peterekepeter]

looks good! looks like a good fix!

interesting to see seeing how toFill was implemented, so it actually simulates typing values out letter by letter,

having '' not work was probably an oversight

its obvious now why it doesn't work with checkboxes

[pahan35]

There is a buggy behavior.

When the element is empty here https://github.com/smooth-code/jest-puppeteer/pull/381/files#diff-ecbbcc0c36f2e95e501f461cf109d06068298111783a992a9889246514f862a2R11, it removes a symbol from the previous field.

test('fill payment form', async () => {
  await page.goto(PAYMENT_URL)
  await expect(page).toFillForm('#payment-form', {
    'exp-date': '04 / 42',
    'cvc': '424',
  })
})

Here I filled exp-date field.
It's a state of UI before triple-click.

After a triple-click we still have a correct value of exp-date

After backspace, we have mutated exp-date field.

After typing, there is a correct value for cvc, but broken for exp-date

Here is a repo with a reproducible example. I also will prepare a separate issue.

[UziTech]

@pahan35 that should be fixed in v5.0.3 🎉

[pahan35]

Confirmed. The issue is fixed. Thanks!