userEvent.type is not working on ion-input

pct-fahmed commented 2 years ago

Reproduction example

https://codesandbox.io/s/vbcvs?file=/src/App.js

Prerequisites

I am using Ionic angular to create the UI. and my component name is "LoginFormPresentationComponent" with the following UI to test. If I use normal it works fine. But for , test does not pass.

<input data-testid="txt" class="login-username-input" />
<ion-input data-testid="ion-txt" class="login-username-input"></ion-input>

My test case is :

test('Testddd', async () => {
  const loginData: LoginFormData = {
    login: 'dev',
    password: 'dev',
    stayLoggedIn: false,
  };
  await render(LoginFormPresentationComponent, {
    componentProperties: {
      loginData: loginData,
      commitChanges: {
        emit: submitAction,
      } as any,
    },
    declarations: [LoginFormPresentationComponent],
    imports: [ReactiveFormsModule, IonicModule]
  });

  const ioninput = screen.getByTestId('ion-txt');
  expect(ioninput).toBeInTheDocument();
  ioninput.focus();
  await userEvent.type(ioninput, 'test');
  await waitFor(() => expect(ioninput).toHaveValue('test'));
});

Expected behavior

Test Suites: 1 passed, 1 total Tests: 2 skipped, 1 passed, 3 total Snapshots: 0 total Time: 2.329 s, estimated 3 s

Actual behavior

expect(element).toHaveValue(test)

Expected the element to have value:
  test
Received:
  undefined

Ignored nodes: comments, script, style

 <html>
      <head />
      <body>
        <div
          id="root0"
          ng-version="14.1.3"
        >
          <input
            class="login-username-input"
            data-testid="txt"
          />
          <ion-input
            class="login-username-input"
            data-testid="ion-txt"
          />
          <ion-button
            data-testid="btn-sub"
            ng-reflect-type="submit"
            type="submit"
          >
             Anmelden
          </ion-button>
        </div>
      </body>
    </html>

User-event version

14.1.1

Environment

Testing Library framework:

 "@testing-library/angular": "12.1.2",
   "@testing-library/jest-dom": "^5.16.5",
   "@testing-library/user-event": "^14.4.3",

JS framework:

    "@angular/cli": "~14.1.1",
    "@angular/compiler-cli": "~14.1.1",
    "@angular/language-service": "~14.1.1",
    "@ionic/angular": "6.2.5",

Test environment:

"jest": "27.5.1",
"jest-preset-angular": "~11.1.2",

DOM implementation:

└─┬ jest-preset-angular@11.1.2
  └─┬ jest-environment-jsdom@27.5.1
    └── jsdom@16.7.0

Additional context

My test works fine for normal component. But When its mater of Open shadow dom, (ion-input) it does not work. There is no environment setup for ionic angular, that's why I gave a demo "Production Test URL". My Question "is there any support for ionic angular component?"

ph-fritsche commented 1 year ago

There are multiple PRs pending for extending the support for Shadow DOM, but I'd prefer to resolve #1019 before merging them

VadimZP commented 10 months ago

Any updates on this?

testing-library / user-event