Payment don't work with jest

[vhoyer]

So I have a React application and I wanted to test the formatting of my input, and I couldn't test it properly, because payment uses qt, and qt uses the which property of the KeyboardEvent which is deprecated (the recommendation being that we should use the key event instead). And apperently jest, who (to my knowledge) uses js-dom to render the components in the document, doesn't seem to be creating the which property in the KeyboardEvent.

I first thought about opening this issue on js-dom, but since this is a deprecated property I just figured they had moved on from using it and it won't come back to it. Then I thought about opening this issue on qt, but as the readme says this is a dependency used primarily by this library, and my problem being with this library, I decided to open it here instead.

Of course, that is only the case if this is really the problem, in my tests we receive every time from the which property on the KeyboardEvent a value of 0.

To make the test I'm using:

// I've ommitted dependencies that I don't think make a difference
{
  "dependencies": {
    "payment": "^2.4.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "@testing-library/dom": "^7.30.4",
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^13.1.8",
    "jest": "^26.6.3"
  }
}

the test is more or less:

import React, { useEffect, useRef } from 'react';
import Payment from 'payment';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('test', () => {
  function Fake() {
    const container = useRef(null);

    useEffect(() => {
      Payment.formatCardCVC(container.current.querySelector('input'));
    }, []);

    return (
      <div ref={container}>
        <input type="text" />
      </div>
    );
  }

  render(<Fake />);
  userEvent.type(screen.getByRole('textbox'), 'invalid!');

  expect(screen.getByRole('textbox')).toHaveValue('');
});

[melloware]

Feel free to submit a PR or suggest a fix!

[vhoyer]

Ok, upon further testing, I discovered that with the setup mentioned, the KeyboardEvent I'm getting is:

// Keyboard Event for "<Space>"
{
  which: 0,
  charCode: 0,
  keyCode: 32,
}

What I assume is happening is that js-dom is setting which and charCode to 0 instead of null (which is what the QJ library tests for).

My suggestion here would be for us to change the implementation of everything to use e.key instead of e.which. But if you don't like this approach due to work required to do it, maybe we could just change QJ to make the check backwards, like:

  QJ.normalizeEvent = function(e) {
    // ...
    e = {
      which: original.keyCode || original.charCode || original.which,
      // ...

instead of the current approach: original.which || original.charCode || original.keyCode. (btw, I do recognize that this is not the implementation but rather a oversimplification, if the point didn't go across, please just say and I will try to explain better)

[vhoyer]

What you think?

[melloware]

These aren't my libraries but I am able to merge and accept PR's. I don't have access to QJ only to Payment and Card. I like your idea though! @jessepollak

[melloware]

You should submit a PR over at QJ: https://github.com/jessepollak/qj