⚛️ react-declarative-e2e

Playwright end-to-end testbed for react-declarative

Purpose

This will help you to tweak react-declarative with your own UI Kit. Check this article for guide

Contribute

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

Usage

1. Build the project

npm run build

2. Run tests

npm run test:ui

or

npm run test

Test Cases

Fields:

1. TypographyField
2. TextField
3. RadioField
4. CheckboxField
5. ComboField
6. ItemsField
7. TreeField
8. YesNoField
9. SwitchField
10. ProgressField
11. SliderField
12. ChooseField
13. CompleteField
14. DateField
15. TimeField

Layouts:

1. FragmentLayout
2. GroupLayout
3. PaperLayout
4. OutlineLayout
5. ExpansionLayout

Actions:

1. ButtonField
2. IconField

Forms

1. Form1
2. Form2

Test coverage for business logic

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

Code Sample

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();
});