Skip to content

Commit

Permalink
chore: migrate most viewer UI tests to userEvent
Browse files Browse the repository at this point in the history
  • Loading branch information
@Skaiir
Skaiir committed Oct 1, 2024
1 parent 037bdda commit 34e8b7a
Show file tree
Hide file tree
Showing 11 changed files with 177 additions and 172 deletions.
38 changes: 18 additions & 20 deletions packages/form-js-viewer/test/spec/Form.spec.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -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');
Expand All @@ -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');
Expand Down
18 changes: 9 additions & 9 deletions packages/form-js-viewer/test/spec/render/components/FormField.spec.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);

Expand All @@ -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;
Expand Down Expand Up @@ -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);

Expand All @@ -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;
Expand Down Expand Up @@ -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);

Expand All @@ -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;
Expand Down Expand Up @@ -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);

Expand All @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions packages/form-js-viewer/test/spec/render/components/form-fields/Checkbox.spec.js
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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();

Expand All @@ -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({
Expand Down
31 changes: 16 additions & 15 deletions packages/form-js-viewer/test/spec/render/components/form-fields/Checklist.spec.js
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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();

Expand All @@ -245,15 +246,15 @@ 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({
value: ['approver', 'manager'],
});
});

it('should handle toggle', function () {
it('should handle toggle', async function () {
// given
const onChangeSpy = spy();

Expand All @@ -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({
Expand All @@ -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();

Expand All @@ -289,15 +290,15 @@ 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({
value: ['dynamicValue1', 'dynamicValue2'],
});
});

it('should handle change simplified values', function () {
it('should handle change simplified values', async function () {
// given
const onChangeSpy = spy();

Expand All @@ -311,15 +312,15 @@ 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({
value: ['dynamicValue1', 'dynamicValue2'],
});
});

it('should handle change object values', function () {
it('should handle change object values', async function () {
// given
const onChangeSpy = spy();

Expand All @@ -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({
Expand All @@ -358,7 +359,7 @@ describe('Checklist', function () {
});
});

it('should handle toggle', function () {
it('should handle toggle', async function () {
// given
const onChangeSpy = spy();

Expand All @@ -372,15 +373,15 @@ 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({
value: [],
});
});

it('should handle toggle object values', function () {
it('should handle toggle object values', async function () {
// given
const onChangeSpy = spy();

Expand All @@ -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({
Expand Down
Loading

0 comments on commit 34e8b7a

Please sign in to comment.