Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

userEvent.type is not working on ion-input #1058

Open
pct-fahmed opened this issue Sep 16, 2022 · 2 comments
Open

userEvent.type is not working on ion-input #1058

pct-fahmed opened this issue Sep 16, 2022 · 2 comments

Comments

@pct-fahmed
Copy link

pct-fahmed commented Sep 16, 2022 •
edited

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?"
@pct-fahmed pct-fahmed added bug Something isn't working needs assessment This needs to be looked at by a team member labels Sep 16, 2022
@ph-fritsche
Copy link
Member

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

@ph-fritsche ph-fritsche removed bug Something isn't working needs assessment This needs to be looked at by a team member labels Nov 14, 2022
@VadimZP
Copy link

VadimZP commented Dec 15, 2023

Any updates on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@VadimZP @ph-fritsche @pct-fahmed