testing-library / testing-library/user-event
userEvent.type is not working on ion-input
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 258
- PR merge metrics
- No merged PRs in 30d
Description
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?"
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and the supplied Angular test, comparing the native input with ion-input under the listed user-event, Ionic, Jest, and jsdom versions. Trace how the test queries and types into ion-input, then establish whether Ionic component support is expected and document a reproducible result or a narrowly scoped fix.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100