From 34e8b7adf430a2ddbcd1c457aa0ed282461b0521 Mon Sep 17 00:00:00 2001 From: Skaiir Date: Tue, 1 Oct 2024 13:06:29 +0200 Subject: [PATCH] chore: migrate most viewer UI tests to userEvent --- .../form-js-viewer/test/spec/Form.spec.js | 38 +++--- .../spec/render/components/FormField.spec.js | 18 +-- .../components/form-fields/Checkbox.spec.js | 8 +- .../components/form-fields/Checklist.spec.js | 31 ++--- .../components/form-fields/Number.spec.js | 109 ++++++++++-------- .../components/form-fields/Radio.spec.js | 20 ++-- .../components/form-fields/Select.spec.js | 44 +++---- .../components/form-fields/Table.spec.js | 15 +-- .../components/form-fields/Taglist.spec.js | 26 ++--- .../components/form-fields/Textarea.spec.js | 24 ++-- .../components/form-fields/Textfield.spec.js | 16 +-- 11 files changed, 177 insertions(+), 172 deletions(-) diff --git a/packages/form-js-viewer/test/spec/Form.spec.js b/packages/form-js-viewer/test/spec/Form.spec.js index 5417cd7da..d3a908c7e 100644 --- a/packages/form-js-viewer/test/spec/Form.spec.js +++ b/packages/form-js-viewer/test/spec/Form.spec.js @@ -1,4 +1,4 @@ -import { act, fireEvent, screen, waitFor } from '@testing-library/preact/pure'; +import { act, screen, waitFor } from '@testing-library/preact/pure'; import userEvent from '@testing-library/user-event'; import { createForm, Form, schemaVersion } from '../../src'; @@ -535,7 +535,7 @@ describe('Form', function () { const collapseButton = container.querySelector('.fjs-repeat-render-collapse'); expect(collapseButton).to.exist; - fireEvent.click(collapseButton); + await userEvent.click(collapseButton); // then expect(form.submit().data.list).to.have.length(10); @@ -626,7 +626,7 @@ describe('Form', function () { // when const submitButton = container.querySelector('.fjs-button'); - fireEvent.click(submitButton); + await userEvent.click(submitButton); const validateCount = requiredSchema.components.filter((c) => (c.validate || {}).required).length; @@ -1421,7 +1421,7 @@ describe('Form', function () { // when const input = await screen.getByLabelText('Creditor*'); - fireEvent.input(input, { target: { value: '' } }); + await userEvent.clear(input); // then expect(screen.getByText('Field is required.')).to.exist; @@ -1459,7 +1459,7 @@ describe('Form', function () { // when const input = await screen.getByLabelText('Invoice Number'); - fireEvent.input(input, { target: { value: 'foo' } }); + await userEvent.type(input, 'foo'); // then expect(screen.getByText('Field must match pattern ^C-[0-9]+$.')).to.exist; @@ -1656,17 +1656,17 @@ describe('Form', function () { // when const inputB = screen.getByLabelText('b'); - fireEvent.change(inputB, { target: { checked: true } }); + await userEvent.click(inputB); const inputC = screen.getByLabelText('c'); - fireEvent.change(inputC, { target: { checked: true } }); + await userEvent.click(inputC); // then expect(getText(container)).to.not.exist; // but when const inputA = screen.getByLabelText('a'); - fireEvent.change(inputA, { target: { checked: true } }); + await userEvent.click(inputA); // then expect(getText(container)).to.exist; @@ -1688,18 +1688,15 @@ describe('Form', function () { expect(getText(container)).to.exist; // when - const inputB = screen.getByLabelText('b'); - fireEvent.change(inputB, { target: { checked: true } }); - - const inputC = screen.getByLabelText('c'); - fireEvent.change(inputC, { target: { checked: true } }); + const inputC = screen.getByLabelText('b'); + await userEvent.click(inputC); // then expect(getText(container)).to.not.exist; // but when const inputA = screen.getByLabelText('a'); - fireEvent.change(inputA, { target: { checked: true } }); + await userEvent.click(inputA); // then // text is still not visible because of initial data @@ -1718,17 +1715,17 @@ describe('Form', function () { // when const inputB = screen.getByLabelText('b'); - fireEvent.input(inputB, { target: { value: 'foo' } }); + await userEvent.type(inputB, 'foo'); const inputC = screen.getByLabelText('c'); - fireEvent.input(inputC, { target: { value: 'bar' } }); + await userEvent.type(inputC, 'bar'); // then expect(getImage(container).alt).to.eql('foobar'); // but when const inputA = screen.getByLabelText('a'); - fireEvent.change(inputA, { target: { checked: true } }); + await userEvent.click(inputA); // then expect(getImage(container).alt).to.eql('foo'); @@ -1751,17 +1748,18 @@ describe('Form', function () { // when const inputB = screen.getByLabelText('b'); - fireEvent.input(inputB, { target: { value: 'foo' } }); + await userEvent.type(inputB, 'foo'); const inputC = screen.getByLabelText('c'); - fireEvent.input(inputC, { target: { value: 'bar' } }); + await userEvent.clear(inputC); + await userEvent.type(inputC, 'bar'); // then expect(getImage(container).alt).to.eql('foobar'); // but when const inputA = screen.getByLabelText('a'); - fireEvent.change(inputA, { target: { checked: true } }); + await userEvent.click(inputA); // then expect(getImage(container).alt).to.eql('fooexternal'); diff --git a/packages/form-js-viewer/test/spec/render/components/FormField.spec.js b/packages/form-js-viewer/test/spec/render/components/FormField.spec.js index 608e3ab7a..6bfab269d 100644 --- a/packages/form-js-viewer/test/spec/render/components/FormField.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/FormField.spec.js @@ -1,4 +1,4 @@ -import { fireEvent, render } from '@testing-library/preact/pure'; +import { render } from '@testing-library/preact/pure'; import userEvent from '@testing-library/user-event'; import { classes } from 'min-dom'; @@ -122,7 +122,7 @@ describe('FormField', function () { }); }); - it('should not handle change', function () { + it('should not handle change', async function () { // given const componentSpy = sinon.spy(Textfield); @@ -140,7 +140,7 @@ describe('FormField', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: 'Jane Doe Company' } }); + await userEvent.type(input, 'Jane Doe Company'); // then expect(onChangeSpy).not.to.have.been.called; @@ -168,7 +168,7 @@ describe('FormField', function () { }); }); - it('should not handle change', function () { + it('should not handle change', async function () { // given const componentSpy = sinon.spy(Textfield); @@ -186,7 +186,7 @@ describe('FormField', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: 'Jane Doe Company' } }); + await userEvent.type(input, 'Jane Doe Company'); // then expect(onChangeSpy).not.to.have.been.called; @@ -240,7 +240,7 @@ describe('FormField', function () { }); }); - it('should not handle change', function () { + it('should not handle change', async function () { // given const componentSpy = sinon.spy(Textfield); @@ -259,7 +259,7 @@ describe('FormField', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: 'Jane Doe Company' } }); + await userEvent.type(input, 'Jane Doe Company'); // then expect(onChangeSpy).not.to.have.been.called; @@ -381,7 +381,7 @@ describe('FormField', function () { }); }); - it('should not handle change', function () { + it('should not handle change', async function () { // given const componentSpy = sinon.spy(Textfield); @@ -400,7 +400,7 @@ describe('FormField', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: 'Jane Doe Company' } }); + await userEvent.type(input, 'Jane Doe Company'); // then expect(onChangeSpy).not.to.have.been.called; diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Checkbox.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Checkbox.spec.js index b15c11281..734a62478 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/Checkbox.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Checkbox.spec.js @@ -1,4 +1,5 @@ -import { fireEvent, render } from '@testing-library/preact/pure'; +import { render } from '@testing-library/preact/pure'; +import userEvent from '@testing-library/user-event'; import { Checkbox } from '../../../../../src/render/components/form-fields/Checkbox'; @@ -129,7 +130,7 @@ describe('Checkbox', function () { expect(description.textContent).to.equal('foo'); }); - it('should handle change', function () { + it('should handle change', async function () { // given const onChangeSpy = spy(); @@ -140,8 +141,7 @@ describe('Checkbox', function () { // when const input = container.querySelector('input[type="checkbox"]'); - - fireEvent.change(input, { target: { checked: false } }); + await userEvent.click(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Checklist.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Checklist.spec.js index c53dea889..f6a9019f0 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/Checklist.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Checklist.spec.js @@ -1,4 +1,5 @@ -import { fireEvent, render } from '@testing-library/preact/pure'; +import { render } from '@testing-library/preact/pure'; +import userEvent from '@testing-library/user-event'; import { Checklist } from '../../../../../src/render/components/form-fields/Checklist'; @@ -233,7 +234,7 @@ describe('Checklist', function () { }); describe('handle change (static)', function () { - it('should handle change', function () { + it('should handle change', async function () { // given const onChangeSpy = spy(); @@ -245,7 +246,7 @@ describe('Checklist', function () { // when const input = container.querySelectorAll('input[type="checkbox"]')[1]; - fireEvent.click(input); + await userEvent.click(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -253,7 +254,7 @@ describe('Checklist', function () { }); }); - it('should handle toggle', function () { + it('should handle toggle', async function () { // given const onChangeSpy = spy(); @@ -265,7 +266,7 @@ describe('Checklist', function () { // when const input = container.querySelectorAll('input[type="checkbox"]')[0]; - fireEvent.click(input, { target: { checked: false } }); + await userEvent.click(input, { target: { checked: false } }); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -275,7 +276,7 @@ describe('Checklist', function () { }); describe('handle change (dynamic)', function () { - it('should handle change', function () { + it('should handle change', async function () { // given const onChangeSpy = spy(); @@ -289,7 +290,7 @@ describe('Checklist', function () { // when const input = container.querySelectorAll('input[type="checkbox"]')[1]; - fireEvent.click(input); + await userEvent.click(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -297,7 +298,7 @@ describe('Checklist', function () { }); }); - it('should handle change simplified values', function () { + it('should handle change simplified values', async function () { // given const onChangeSpy = spy(); @@ -311,7 +312,7 @@ describe('Checklist', function () { // when const input = container.querySelectorAll('input[type="checkbox"]')[1]; - fireEvent.click(input); + await userEvent.click(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -319,7 +320,7 @@ describe('Checklist', function () { }); }); - it('should handle change object values', function () { + it('should handle change object values', async function () { // given const onChangeSpy = spy(); @@ -339,7 +340,7 @@ describe('Checklist', function () { // when const input = container.querySelectorAll('input[type="checkbox"]')[1]; - fireEvent.click(input); + await userEvent.click(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -358,7 +359,7 @@ describe('Checklist', function () { }); }); - it('should handle toggle', function () { + it('should handle toggle', async function () { // given const onChangeSpy = spy(); @@ -372,7 +373,7 @@ describe('Checklist', function () { // when const input = container.querySelectorAll('input[type="checkbox"]')[0]; - fireEvent.click(input, { target: { checked: false } }); + await userEvent.click(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -380,7 +381,7 @@ describe('Checklist', function () { }); }); - it('should handle toggle object values', function () { + it('should handle toggle object values', async function () { // given const onChangeSpy = spy(); @@ -400,7 +401,7 @@ describe('Checklist', function () { // when const input = container.querySelectorAll('input[type="checkbox"]')[2]; - fireEvent.click(input, { target: { checked: false } }); + await userEvent.click(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Number.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Number.spec.js index 58bba5716..34f0659ea 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/Number.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Number.spec.js @@ -1,4 +1,5 @@ -import { fireEvent, createEvent, render } from '@testing-library/preact/pure'; +import { render, createEvent, fireEvent } from '@testing-library/preact/pure'; +import userEvent from '@testing-library/user-event'; import { Numberfield } from '../../../../../src/render/components/form-fields/Number'; @@ -146,7 +147,7 @@ describe('Number', function () { expect(input.value).to.equal(''); }); - it('should render default value on value removed', function () { + it('should render default value on value removed', async function () { // given const props = { disabled: false, @@ -163,7 +164,7 @@ describe('Number', function () { const input = container.querySelector('input[type="text"]'); // when - fireEvent.change(input, { target: { value: null } }); + await userEvent.clear(input); // then expect(input).to.exist; @@ -213,7 +214,7 @@ describe('Number', function () { }); describe('change handling', function () { - it('should change number', function () { + it('should change number', async function () { // given const onChangeSpy = spy(); @@ -225,7 +226,8 @@ describe('Number', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: '124' } }); + await userEvent.clear(input); + await userEvent.type(input, '124'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -233,7 +235,7 @@ describe('Number', function () { }); }); - it('should not serialize standalone minus', function () { + it('should not serialize standalone minus', async function () { // given const onChangeSpy = spy(); @@ -245,13 +247,13 @@ describe('Number', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: '-' } }); + await userEvent.type(input, '-'); // then expect(onChangeSpy).to.not.have.been.called; }); - it('should clear', function () { + it('should clear', async function () { // given const onChangeSpy = spy(); @@ -263,7 +265,7 @@ describe('Number', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: '' } }); + await userEvent.clear(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -274,7 +276,7 @@ describe('Number', function () { describe('interaction', function () { describe('increment button', function () { - it('should increment', function () { + it('should increment', async function () { // given const onChangeSpy = spy(); @@ -285,7 +287,7 @@ describe('Number', function () { // when const incrementButton = container.querySelector('.fjs-number-arrow-up'); - fireEvent.click(incrementButton); + await userEvent.click(incrementButton); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -293,7 +295,7 @@ describe('Number', function () { }); }); - it('should increment according to `decimalDigits`', function () { + it('should increment according to `decimalDigits`', async function () { // given const onChangeSpy = spy(); @@ -305,7 +307,7 @@ describe('Number', function () { // when const incrementButton = container.querySelector('.fjs-number-arrow-up'); - fireEvent.click(incrementButton); + await userEvent.click(incrementButton); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -313,7 +315,7 @@ describe('Number', function () { }); }); - it('should increment according to `step`', function () { + it('should increment according to `step`', async function () { // given const onChangeSpy = spy(); @@ -325,7 +327,7 @@ describe('Number', function () { // when const incrementButton = container.querySelector('.fjs-number-arrow-up'); - fireEvent.click(incrementButton); + await userEvent.click(incrementButton); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -333,7 +335,7 @@ describe('Number', function () { }); }); - it('should increment to exact step when not aligned', function () { + it('should increment to exact step when not aligned', async function () { // given const onChangeSpy = spy(); @@ -345,7 +347,7 @@ describe('Number', function () { // when const incrementButton = container.querySelector('.fjs-number-arrow-up'); - fireEvent.click(incrementButton); + await userEvent.click(incrementButton); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -353,7 +355,7 @@ describe('Number', function () { }); }); - it('should increment properly when negative', function () { + it('should increment properly when negative', async function () { // given const onChangeSpy = spy(); @@ -365,7 +367,7 @@ describe('Number', function () { // when const incrementButton = container.querySelector('.fjs-number-arrow-up'); - fireEvent.click(incrementButton); + await userEvent.click(incrementButton); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -375,7 +377,7 @@ describe('Number', function () { }); describe('decrement button', function () { - it('should decrement', function () { + it('should decrement', async function () { // given const onChangeSpy = spy(); @@ -386,7 +388,7 @@ describe('Number', function () { // when const incrementButton = container.querySelector('.fjs-number-arrow-down'); - fireEvent.click(incrementButton); + await userEvent.click(incrementButton); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -394,7 +396,7 @@ describe('Number', function () { }); }); - it('should decrement according to `decimalDigits`', function () { + it('should decrement according to `decimalDigits`', async function () { // given const onChangeSpy = spy(); @@ -406,7 +408,7 @@ describe('Number', function () { // when const incrementButton = container.querySelector('.fjs-number-arrow-down'); - fireEvent.click(incrementButton); + await userEvent.click(incrementButton); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -414,7 +416,7 @@ describe('Number', function () { }); }); - it('should decrement according to `step`', function () { + it('should decrement according to `step`', async function () { // given const onChangeSpy = spy(); @@ -426,7 +428,7 @@ describe('Number', function () { // when const incrementButton = container.querySelector('.fjs-number-arrow-down'); - fireEvent.click(incrementButton); + await userEvent.click(incrementButton); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -434,7 +436,7 @@ describe('Number', function () { }); }); - it('should decrement to exact step when not aligned', function () { + it('should decrement to exact step when not aligned', async function () { // given const onChangeSpy = spy(); @@ -446,7 +448,7 @@ describe('Number', function () { // when const incrementButton = container.querySelector('.fjs-number-arrow-down'); - fireEvent.click(incrementButton); + await userEvent.click(incrementButton); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -454,7 +456,7 @@ describe('Number', function () { }); }); - it('should decrement properly when negative', function () { + it('should decrement properly when negative', async function () { // given const onChangeSpy = spy(); @@ -466,7 +468,7 @@ describe('Number', function () { // when const incrementButton = container.querySelector('.fjs-number-arrow-down'); - fireEvent.click(incrementButton); + await userEvent.click(incrementButton); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -477,7 +479,7 @@ describe('Number', function () { }); describe('formatting', function () { - it('should handle string inputs as numbers by default', function () { + it('should serialize inputs as numbers by default', async function () { // given const onChangeSpy = spy(); @@ -489,7 +491,8 @@ describe('Number', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: '124' } }); + await userEvent.clear(input); + await userEvent.type(input, '124'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -497,7 +500,7 @@ describe('Number', function () { }); }); - it('should handle number inputs as strings if configured', function () { + it('should serialize inputs as strings if configured', async function () { // given const onChangeSpy = spy(); @@ -510,7 +513,8 @@ describe('Number', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: 124 } }); + await userEvent.clear(input); + await userEvent.type(input, '124'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -518,7 +522,7 @@ describe('Number', function () { }); }); - it('should handle string inputs as strings if configured', function () { + it('should handle string inputs as strings if configured', async function () { // given const onChangeSpy = spy(); @@ -531,7 +535,8 @@ describe('Number', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: '125' } }); + await userEvent.clear(input); + await userEvent.type(input, '125'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -539,7 +544,7 @@ describe('Number', function () { }); }); - it('should handle high precision string numbers without trimming', function () { + it('should handle high precision string numbers without trimming', async function () { // given const onChangeSpy = spy(); @@ -555,7 +560,8 @@ describe('Number', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: highPrecisionStringNumber } }); + await userEvent.clear(input); + await userEvent.type(input, highPrecisionStringNumber); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -587,7 +593,7 @@ describe('Number', function () { }); describe('user input', function () { - it('should prevent key presses generating non-number characters', function () { + it('should prevent key presses generating non-number characters', async function () { // given const { container } = createNumberField({ value: 123, @@ -605,7 +611,7 @@ describe('Number', function () { const minusKeyPress = createEvent.keyPress(input, { key: 'a', code: 'KeyA' }); // when - fireEvent.focus(input); + await userEvent.click(input); fireEvent(input, periodKeyPress); fireEvent(input, commaKeyPress); fireEvent(input, letterKeyPress); @@ -620,7 +626,7 @@ describe('Number', function () { expect(minusKeyPress.defaultPrevented).to.be.true; }); - it('should prevent second comma or period', function () { + it('should prevent second comma or period', async function () { // given const { container } = createNumberField({ value: 123.5, @@ -635,7 +641,7 @@ describe('Number', function () { const commaKeyPress = createEvent.keyPress(input, { key: '.', code: 'Comma' }); // when - fireEvent.focus(input); + await userEvent.click(input); fireEvent(input, periodKeyPress); fireEvent(input, commaKeyPress); @@ -644,7 +650,7 @@ describe('Number', function () { expect(commaKeyPress.defaultPrevented).to.be.true; }); - it('should allow a minus at the start', function () { + it('should allow a minus at the start', async function () { // given const { container } = createNumberField({ value: null, @@ -658,14 +664,14 @@ describe('Number', function () { const minusKeyPress = createEvent.keyPress(input, { key: '-', code: 'Minus' }); // when - fireEvent.focus(input); + await userEvent.click(input); fireEvent(input, minusKeyPress); // then expect(minusKeyPress.defaultPrevented).to.be.false; }); - it('should clear NaN state on backspace', function () { + it('should clear NaN state on backspace', async function () { // given const onChangeSpy = spy(); @@ -680,7 +686,7 @@ describe('Number', function () { expect(input).to.exist; expect(input.value).to.equal('NaN'); - fireEvent.keyDown(input, { key: 'Backspace', code: 'Backspace' }); + await userEvent.type(input, '{backspace}'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -688,7 +694,7 @@ describe('Number', function () { }); }); - it('should clear NaN state on delete', function () { + it('should clear NaN state on delete', async function () { // given const onChangeSpy = spy(); @@ -703,7 +709,8 @@ describe('Number', function () { expect(input).to.exist; expect(input.value).to.equal('NaN'); - fireEvent.keyDown(input, { key: 'Delete', code: 'Delete' }); + await userEvent.click(input); + await userEvent.keyboard('{delete}'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -711,7 +718,7 @@ describe('Number', function () { }); }); - it('should increment on arrow up', function () { + it('should increment on arrow up', async function () { // given const onChangeSpy = spy(); @@ -726,7 +733,7 @@ describe('Number', function () { expect(input).to.exist; expect(input.value).to.equal('0'); - fireEvent.keyDown(input, { key: 'ArrowUp', code: 'ArrowUp' }); + await userEvent.type(input, '{arrowup}'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -734,7 +741,7 @@ describe('Number', function () { }); }); - it('should decrement on arrow down', function () { + it('should decrement on arrow down', async function () { // given const onChangeSpy = spy(); @@ -749,7 +756,7 @@ describe('Number', function () { expect(input).to.exist; expect(input.value).to.equal('0'); - fireEvent.keyDown(input, { key: 'ArrowDown', code: 'ArrowDown' }); + await userEvent.type(input, '{arrowdown}'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Radio.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Radio.spec.js index 913791c0d..2f1834f47 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/Radio.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Radio.spec.js @@ -1,4 +1,5 @@ -import { fireEvent, render } from '@testing-library/preact/pure'; +import { render } from '@testing-library/preact/pure'; +import userEvent from '@testing-library/user-event'; import { Radio } from '../../../../../src/render/components/form-fields/Radio'; @@ -181,7 +182,7 @@ describe('Radio', function () { }); describe('handle change (dynamic)', function () { - it('should handle change', function () { + it('should handle change', async function () { // given const onChangeSpy = spy(); @@ -195,7 +196,7 @@ describe('Radio', function () { // when const input = container.querySelectorAll('input[type="radio"]')[1]; - fireEvent.click(input); + await userEvent.click(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -203,7 +204,7 @@ describe('Radio', function () { }); }); - it('should handle toggle', function () { + it('should handle toggle', async function () { // given const onChangeSpy = spy(); @@ -216,8 +217,7 @@ describe('Radio', function () { // when const input = container.querySelectorAll('input[type="radio"]')[0]; - - fireEvent.click(input, { target: { checked: false } }); + await userEvent.click(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -227,7 +227,7 @@ describe('Radio', function () { }); describe('handle change (static)', function () { - it('should handle change', function () { + it('should handle change', async function () { // given const onChangeSpy = spy(); @@ -239,7 +239,7 @@ describe('Radio', function () { // when const input = container.querySelectorAll('input[type="radio"]')[1]; - fireEvent.click(input); + await userEvent.click(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -247,7 +247,7 @@ describe('Radio', function () { }); }); - it('should handle toggle', function () { + it('should handle toggle', async function () { // given const onChangeSpy = spy(); @@ -259,7 +259,7 @@ describe('Radio', function () { // when const input = container.querySelectorAll('input[type="radio"]')[0]; - fireEvent.click(input, { target: { checked: false } }); + await userEvent.click(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({ diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Select.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Select.spec.js index f873a7375..c9f85f2f9 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/Select.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Select.spec.js @@ -1,4 +1,4 @@ -import { fireEvent, render, screen } from '@testing-library/preact/pure'; +import { render, screen } from '@testing-library/preact/pure'; import userEvent from '@testing-library/user-event'; import { Select } from '../../../../../src/render/components/form-fields/Select'; @@ -235,7 +235,7 @@ describe('Select', function () { expect(dropdownList).to.not.exist; }); - it('should focus input on mouse down', function () { + it('should focus input on click', async function () { // given const focusSpy = spy(); @@ -246,13 +246,13 @@ describe('Select', function () { const select = container.querySelector('.fjs-input-group'); // when - fireEvent.mouseDown(select); + await userEvent.click(select); // then expect(focusSpy).to.have.been.called; }); - it('should blur input on second mouse down', function () { + it('should blur input on second click', async function () { // given const blurSpy = spy(); @@ -263,8 +263,8 @@ describe('Select', function () { const select = container.querySelector('.fjs-input-group'); // when - fireEvent.mouseDown(select); - fireEvent.mouseDown(select); + await userEvent.click(select); + await userEvent.click(select); // then expect(blurSpy).to.have.been.called; @@ -293,7 +293,7 @@ describe('Select', function () { }); }); - it('should clear', function () { + it('should clear', async function () { // given const onChangeSpy = spy(); @@ -304,7 +304,7 @@ describe('Select', function () { // when const cross = container.querySelector('.fjs-select-cross'); - fireEvent.mouseDown(cross); + await userEvent.click(cross); // then const dropdown = container.querySelector('.fjs-dropdownlist'); @@ -340,7 +340,7 @@ describe('Select', function () { }); }); - it('should clear', function () { + it('should clear', async function () { // given const onChangeSpy = spy(); @@ -353,7 +353,7 @@ describe('Select', function () { // when const cross = container.querySelector('.fjs-select-cross'); - fireEvent.mouseDown(cross); + await userEvent.click(cross); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -556,7 +556,7 @@ describe('Select', function () { expect(getSelectValues(result.container)).to.eql(['Value 1', 'Value 2', 'Value 3', 'Value 4']); }); - it('should clear', function () { + it('should clear', async function () { // given const onChangeSpy = spy(); @@ -577,7 +577,7 @@ describe('Select', function () { // when const cross = container.querySelector('.fjs-select-cross'); - fireEvent.mouseDown(cross); + await userEvent.click(cross); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -818,7 +818,7 @@ describe('Select', function () { }); }); - it('should not set value through filter only', function () { + it('should not set value through filter only', async function () { // given const onChangeSpy = spy(); @@ -831,15 +831,15 @@ describe('Select', function () { const filterInput = container.querySelector('input[type="text"]'); // when - fireEvent.focus(filterInput); - fireEvent.input(filterInput, { target: { value: 'English' } }); - fireEvent.blur(filterInput); + await userEvent.click(filterInput); + await userEvent.type(filterInput, 'English'); + await userEvent.tab(); // then expect(onChangeSpy).to.not.have.been.called; }); - it('should clear', function () { + it('should clear', async function () { // given const onChangeSpy = spy(); @@ -853,7 +853,7 @@ describe('Select', function () { const cross = container.querySelector('.fjs-select-cross'); // when - fireEvent.mouseDown(cross); + await userEvent.click(cross); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -863,7 +863,7 @@ describe('Select', function () { expect(filterInput.value).to.equal(''); }); - it('should not submit form on enter', function () { + it('should not submit form on enter', async function () { // given const onSubmitSpy = spy(); @@ -878,8 +878,8 @@ describe('Select', function () { // when const input = container.querySelector('.fjs-input'); - fireEvent.focus(input); - fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' }); + await userEvent.click(input); + await userEvent.keyboard('{enter}'); // then @@ -1063,7 +1063,7 @@ describe('Select', function () { const filterInput = screen.getByLabelText('Language'); // when - fireEvent.focus(filterInput); + await userEvent.click(filterInput); // then await expectNoViolations(container); diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Table.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Table.spec.js index 75f2ae538..e262b2399 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/Table.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Table.spec.js @@ -1,4 +1,5 @@ -import { fireEvent, render } from '@testing-library/preact/pure'; +import { render } from '@testing-library/preact/pure'; +import userEvent from '@testing-library/user-event'; import { Table } from '../../../../../src/render/components/form-fields/Table'; @@ -201,7 +202,7 @@ describe('Table', function () { expect(secondRow.querySelectorAll('.fjs-table-td')[2].textContent).to.eql(''); }); - it('should have pagination', function () { + it('should have pagination', async function () { // when const DATA = [ { @@ -254,7 +255,7 @@ describe('Table', function () { expect(firstRow.querySelectorAll('.fjs-table-td')[1].textContent).to.eql('foo'); expect(firstRow.querySelectorAll('.fjs-table-td')[2].textContent).to.eql('2020-01-01'); - fireEvent.click(container.querySelector('.fjs-table-nav-button[aria-label="Next page"]')); + await userEvent.click(container.querySelector('.fjs-table-nav-button[aria-label="Next page"]')); expect(container.querySelector('.fjs-table-nav-label').textContent).to.eql('2 of 2'); @@ -276,7 +277,7 @@ describe('Table', function () { expect(secondRow.querySelectorAll('.fjs-table-td')[2].textContent).to.eql('2020-01-02'); }); - it('should sort rows', function () { + it('should sort rows', async function () { // when const DATA = [ { @@ -320,7 +321,7 @@ describe('Table', function () { const headers = container.querySelectorAll('.fjs-table-th'); expect(headers).to.have.length(3); - fireEvent.click(headers[0]); + await userEvent.click(headers[0]); expect(container.querySelector('.fjs-table-sort-icon-asc')).to.exist; @@ -333,7 +334,7 @@ describe('Table', function () { expect(secondRow.querySelectorAll('.fjs-table-td')).to.have.length(3); expect(secondRow.querySelectorAll('.fjs-table-td')[0].textContent).to.eql('1'); - fireEvent.click(headers[0]); + await userEvent.click(headers[0]); expect(container.querySelector('.fjs-table-sort-icon-asc')).not.to.exist; expect(container.querySelector('.fjs-table-sort-icon-desc')).to.exist; @@ -347,7 +348,7 @@ describe('Table', function () { expect(thirdRow.querySelectorAll('.fjs-table-td')).to.have.length(3); expect(thirdRow.querySelectorAll('.fjs-table-td')[0].textContent).to.eql('2'); - fireEvent.click(headers[0]); + await userEvent.click(headers[0]); expect(container.querySelector('.fjs-table-sort-icon-asc')).not.to.exist; expect(container.querySelector('.fjs-table-sort-icon-desc')).not.to.exist; diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Taglist.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Taglist.spec.js index 9f55b46ea..7dce1cf84 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/Taglist.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Taglist.spec.js @@ -1,4 +1,4 @@ -import { fireEvent, render, screen } from '@testing-library/preact/pure'; +import { render, screen, fireEvent } from '@testing-library/preact/pure'; import userEvent from '@testing-library/user-event'; import { Taglist } from '../../../../../src/render/components/form-fields/Taglist'; @@ -317,7 +317,7 @@ describe('Taglist', function () { }); }); - it('should work via backspace keyboard', function () { + it('should work via backspace keyboard', async function () { // given const onChangeSpy = spy(); @@ -328,7 +328,7 @@ describe('Taglist', function () { // when const filterInput = container.querySelector('.fjs-taglist-input'); - fireEvent.keyDown(filterInput, { key: 'Backspace', code: 'Backspace' }); + await userEvent.type(filterInput, '{backspace}'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -336,7 +336,7 @@ describe('Taglist', function () { }); }); - it('should work with dynamic data', function () { + it('should work with dynamic data', async function () { // given const onChangeSpy = spy(); @@ -349,7 +349,7 @@ describe('Taglist', function () { // when const filterInput = container.querySelector('.fjs-taglist-input'); - fireEvent.keyDown(filterInput, { key: 'Backspace', code: 'Backspace' }); + await userEvent.type(filterInput, '{backspace}'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -357,7 +357,7 @@ describe('Taglist', function () { }); }); - it('restore focus if last tag got removed', function () { + it('restore focus if last tag got removed', async function () { // given const onChangeSpy = spy(); @@ -368,8 +368,7 @@ describe('Taglist', function () { // when const removeButton = container.querySelectorAll('.fjs-taglist-tag-remove')[2]; - - fireEvent.click(removeButton); + await userEvent.click(removeButton); // then expect(document.activeElement).to.equal(container.querySelector('.fjs-taglist-input')); @@ -578,14 +577,11 @@ describe('Taglist', function () { expect(focusedItem.innerText).to.equal('Tag4'); await userEvent.keyboard('{arrowdown}{arrowdown}'); - // fireEvent.keyDown(filterInput, { key: 'ArrowDown', code: 'ArrowDown' }); - // fireEvent.keyDown(filterInput, { key: 'ArrowDown', code: 'ArrowDown' }); focusedItem = dropdownList.querySelector('.fjs-dropdownlist-item.focused'); expect(focusedItem.innerText).to.equal('Tag6'); await userEvent.keyboard('{arrowup}'); - // fireEvent.keyDown(filterInput, { key: 'ArrowUp', code: 'ArrowUp' }); focusedItem = dropdownList.querySelector('.fjs-dropdownlist-item.focused'); expect(focusedItem.innerText).to.equal('Tag5'); @@ -764,7 +760,7 @@ describe('Taglist', function () { }); const input = screen.getByLabelText('Taglist'); - fireEvent.focus(input); + await userEvent.click(input); // then // @Note: we ignore the dropdownlist is not focussable, @@ -779,7 +775,7 @@ describe('Taglist', function () { }); }); - it('should not submit form on enter', function () { + it('should not submit form on enter', async function () { // given const onSubmitSpy = spy(); @@ -792,8 +788,8 @@ describe('Taglist', function () { // when const filterInput = container.querySelector('.fjs-taglist-input'); - fireEvent.focus(filterInput); - fireEvent.keyDown(filterInput, { key: 'Enter', code: 'Enter' }); + await userEvent.click(filterInput); + await userEvent.type(filterInput, '{enter}'); // then diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Textarea.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Textarea.spec.js index 48b01e979..b0336afda 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/Textarea.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Textarea.spec.js @@ -1,4 +1,5 @@ -import { fireEvent, render } from '@testing-library/preact/pure'; +import { render } from '@testing-library/preact/pure'; +import userEvent from '@testing-library/user-event'; import { Textarea } from '../../../../../src/render/components/form-fields/Textarea'; @@ -89,8 +90,7 @@ describe('Textarea', function () { }); const textarea = container.querySelector('textarea'); - - fireEvent.change(textarea, { target: { value: null } }); + userEvent.clear(textarea); // then expect(textarea).to.exist; @@ -140,7 +140,7 @@ describe('Textarea', function () { }); describe('change handling', function () { - it('should change text', function () { + it('should change text', async function () { // given const onChangeSpy = spy(); @@ -151,8 +151,8 @@ describe('Textarea', function () { // when const textarea = container.querySelector('textarea'); - - fireEvent.input(textarea, { target: { value: 'A different text area value' } }); + await userEvent.clear(textarea); + await userEvent.type(textarea, 'A different text area value'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -160,7 +160,7 @@ describe('Textarea', function () { }); }); - it('should autosize', function () { + it('should autosize', async function () { // given const { container } = createTextarea({ value: '', @@ -173,17 +173,17 @@ describe('Textarea', function () { // then expect(textarea.style.height === '75px'); - fireEvent.input(textarea, { target: { value: '\n'.repeat(5) } }); + await userEvent.type(textarea, '\n'.repeat(5)); expect(textarea.style.height === '142px'); - fireEvent.input(textarea, { target: { value: '\n'.repeat(20) } }); + await userEvent.type(textarea, '\n'.repeat(20)); expect(textarea.style.height === '350px'); - fireEvent.input(textarea, { target: { value: '\n'.repeat(200) } }); + await userEvent.type(textarea, '\n'.repeat(200)); expect(textarea.style.height === '350px'); }); - it('should clear', function () { + it('should clear', async function () { // given const onChangeSpy = spy(); @@ -195,7 +195,7 @@ describe('Textarea', function () { // when const textarea = container.querySelector('textarea'); - fireEvent.input(textarea, { target: { value: '' } }); + await userEvent.clear(textarea); // then expect(onChangeSpy).to.have.been.calledWithMatch({ diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Textfield.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Textfield.spec.js index 857d15769..d8ed8ff96 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/Textfield.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Textfield.spec.js @@ -1,4 +1,5 @@ -import { fireEvent, render } from '@testing-library/preact/pure'; +import { render } from '@testing-library/preact/pure'; +import userEvent from '@testing-library/user-event'; import { Textfield } from '../../../../../src/render/components/form-fields/Textfield'; @@ -145,7 +146,7 @@ describe('Textfield', function () { expect(input.value).to.equal(''); }); - it('should render default value on value removed', function () { + it('should render default value on value removed', async function () { // given const props = { disabled: false, @@ -162,7 +163,7 @@ describe('Textfield', function () { const input = container.querySelector('input[type="text"]'); // when - fireEvent.change(input, { target: { value: null } }); + await userEvent.clear(input); // then expect(input).to.exist; @@ -212,7 +213,7 @@ describe('Textfield', function () { }); describe('change handling', function () { - it('should change text', function () { + it('should change text', async function () { // given const onChangeSpy = spy(); @@ -224,7 +225,8 @@ describe('Textfield', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: 'Jane Doe Company' } }); + await userEvent.clear(input); + await userEvent.type(input, 'Jane Doe Company'); // then expect(onChangeSpy).to.have.been.calledWithMatch({ @@ -232,7 +234,7 @@ describe('Textfield', function () { }); }); - it('should clear', function () { + it('should clear', async function () { // given const onChangeSpy = spy(); @@ -244,7 +246,7 @@ describe('Textfield', function () { // when const input = container.querySelector('input[type="text"]'); - fireEvent.input(input, { target: { value: '' } }); + await userEvent.clear(input); // then expect(onChangeSpy).to.have.been.calledWithMatch({