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

Remove fireEvent from most viewer tests #1285

Merged
merged 1 commit into from
Oct 2, 2024
Merged

Remove fireEvent from most viewer tests #1285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 18 additions & 20 deletions packages/form-js-viewer/test/spec/Form.spec.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading