Playwright end-to-end testbed for react-declarative
This will help you to tweak react-declarative with your own UI Kit. Check this article for guide
Important
Made especially for newbies as an advanced documentation for react-declarative to solve their problems. ⭐Star and 💻Fork It on github will be appreciated
- Build the project
npm run build- Run tests
npm run test:uior
npm run testFields:
- TypographyField
- TextField
- RadioField
- CheckboxField
- ComboField
- ItemsField
- TreeField
- YesNoField
- SwitchField
- ProgressField
- SliderField
- ChooseField
- CompleteField
- DateField
- TimeField
Layouts:
Actions:
Forms
When you using classic jest + enzyme testbed for React SPA you are writing unit tests only. It is possible to mock the API but If you do it you will not coverage the API itself. It's Ok if you want to loot your time in Jira but pointless for busines cause the business earns on inobvious connections in data flow.
If this is a button then It is clickable. Any UI Kit is the sealed technology, you don't need to research the GUI like it was in the good old times of seventees Xerox
The important part is the reaction of app after data mutation when button just clicked. Business need to document their requirements in the code, so the only way to solve that problem is to keep the field validation and button visibility rules in the UI schema.
Check the Form1 example, this is a real integrational test, not the mocked one which a-priory coverage the problem partially. P.S. The Form2 example coverage the mobile-first approach too
import { expect, test } from "@playwright/test";
import { waitForReady } from "../helpers/wait-for-ready";
import { renderFields } from "../helpers/render-fields";
import TypedField from "../model/TypedField";
import FieldType from "../model/FieldType";
test.beforeEach(async ({ page }) => {
await waitForReady(page);
});
const fields: TypedField[] = [
{
type: FieldType.YesNo,
name: 'yesno',
testId: 'yesno-field',
dirty: true,
isReadonly: ({ readonly }) => readonly,
isDisabled: ({ disabled }) => disabled,
isInvalid: ({ invalid }) => invalid || null,
},
];
test("Will show intermediate state", async ({ page }) => {
const textField = await renderFields(page, fields, {
data: {
yesno: null,
},
});
const inputValue = await textField.getByRole('combobox').inputValue();
await expect(inputValue).toEqual("");
});
test("Will show true state", async ({ page }) => {
const textField = await renderFields(page, fields, {
data: {
yesno: true,
},
});
const inputValue = await textField.getByRole('combobox').inputValue();
await expect(inputValue).toEqual("Yes");
});
test("Will show false state", async ({ page }) => {
const textField = await renderFields(page, fields, {
data: {
yesno: false,
},
});
const inputValue = await textField.getByRole('combobox').inputValue();
await expect(inputValue).toEqual("No");
});
test("Will set true state", async ({ page }) => {
const textField = await renderFields(page, fields);
await textField.click();
await page.getByText("Yes", { exact: true }).first().click();
const inputValue = await textField.getByRole('combobox').inputValue();
await expect(inputValue).toEqual("Yes");
});
test("Will set false state", async ({ page }) => {
const textField = await renderFields(page, fields);
await textField.click();
await page.getByText("No", { exact: true }).first().click();
const inputValue = await textField.getByRole('combobox').inputValue();
await expect(inputValue).toEqual("No");
});
test("Will show invalid message", async ({ page }) => {
const componentGroup = await renderFields(page, fields, {
data: {
invalid: "Invalid",
}
});
await expect(componentGroup).toContainText('Invalid');
});
test("Will show disabled state", async ({ page }) => {
const componentGroup = await renderFields(page, fields, {
data: {
disabled: true,
}
});
const isDisabled = await componentGroup.getByLabel('Yesno').isDisabled();
await expect(isDisabled).toBeTruthy();
});
test("Will show readonly state", async ({ page }) => {
const componentGroup = await renderFields(page, fields, {
data: {
readonly: true,
},
});
const isEditable = await componentGroup.getByLabel('Yesno').isEditable();
await expect(isEditable).toBeFalsy();
});