testing-library / user-event

🐕 Simulate user events
https://testing-library.com/user-event
MIT License
2.18k stars 245 forks source link

Angular karma `userEvent.clear + type` remove only first letter with unexpected result of type #645

Closed KrakenTyio closed 3 years ago

KrakenTyio commented 3 years ago

Hi, after upgrade to newest version of userEvent, this chunk of tests are raising error.

Form has some custom form componenets, thats why nui-input input, but in previous version 12 and less, its worked. Now its some unexpected situation.

In code are marked where and what raised.

I also try use type with delay and await but without success.

it('should handle user change', async () => {
        const component = await render(FormFieldComplexComponent, {
            imports: [FormModule],
            componentProperties: {
                showEmpty: true,
                field: {
                    field_id: 1,
                    type: 'COMPLEX',
                    settings: {
                        rows: 2,
                        columns: [
                            {
                                type: 'CHECKBOX',
                                label: 'Checkbox header',
                                options: [],
                            },
                            {
                                type: 'TEXT',
                                label: 'Text header',
                                options: [{ value: 'Test text' }],
                            },
                        ],
                    },
                },
                value: [[true, 'Test text'], []],
            },
        });

        const el = component.fixture.nativeElement as HTMLDivElement;
        const checkboxes = el.querySelectorAll('nui-checkbox');
        const inputs = el.querySelectorAll<HTMLInputElement>('nui-input input');

        userEvent.click(checkboxes[0]);
        userEvent.click(checkboxes[1]);
        userEvent.clear(inputs[0]);
        userEvent.type(inputs[0], 'Updated text');
        userEvent.type(inputs[1], 'Updated text 2');
        await waitFor(() => {
            // check inputs
            expect(inputs[0].value).toBe('Updated text');    <-- `Error: Expected 'txet detadpUest text' to be 'Updated text'.`
            expect(inputs[1].value).toBe('Updated text 2');
        });

        // check checkboxes
        expect(checkboxes[0].getAttribute('ng-reflect-model')).toBe('false');
        expect(checkboxes[1].getAttribute('ng-reflect-model')).toBe('true');
    });
ph-fritsche commented 3 years ago

@KrakenTyio Could you check if your problem is resolved in v13.1.9?

KrakenTyio commented 3 years ago

looks like its work on local chrome, also on headles docker chrome on angular karma, thx