Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/react-declarative/react-declarative-e2e

Playwright end-to-end testbed for react-declarative
https://github.com/react-declarative/react-declarative-e2e

business-logic business-logic-framework e2e enterprise enzyme istanbul jest jest-tests mocha playwright playwright-javascript playwright-tests playwright-typescript react testing ui-testing

Last synced: about 9 hours ago
JSON representation

Playwright end-to-end testbed for react-declarative

Host: GitHub
URL: https://github.com/react-declarative/react-declarative-e2e
Owner: react-declarative
Created: 2024-05-30T12:03:10.000Z (4 months ago)
Default Branch: main
Last Pushed: 2024-06-22T13:05:54.000Z (3 months ago)
Last Synced: 2024-09-18T23:35:20.051Z (9 days ago)
Topics: business-logic, business-logic-framework, e2e, enterprise, enzyme, istanbul, jest, jest-tests, mocha, playwright, playwright-javascript, playwright-tests, playwright-typescript, react, testing, ui-testing
Language: TypeScript
Homepage: https://github.com/react-declarative/react-declarative
Size: 1.25 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        

# ⚛️ react-declarative-e2e

> Playwright end-to-end testbed for [react-declarative](https://github.com/react-declarative/react-declarative)

![Build Status Passing](https://raw.githubusercontent.com/dwyl/repo-badges/main/svg/build-passing.svg)

![Code Coverage 100%](https://raw.githubusercontent.com/dwyl/repo-badges/main/svg/coverage-100.svg)

![screenshot](./docs/screenshot.png)

## Purpose

This will help you to tweak `react-declarative` with your own UI Kit. Check this [article for guide](https://github.com/react-declarative/react-declarative/blob/master/docs/other/how-to-implement-uikit.md)

## Contribute

> [!IMPORTANT]

> Made especially for newbies as an advanced documentation for `react-declarative` to solve their problems. **⭐Star** and **💻Fork** It [on github](https://github.com/react-declarative/react-declarative) will be appreciated

## Usage

1. Build the project

```bash

npm run build

```

2. Run tests

```bash

npm run test:ui

```

or

```bash

npm run test

```

## Test Cases

**Fields:**

1. [TypographyField](./e2e/spec/Fields/Typography.spec.ts)

2. [TextField](./e2e/spec/Fields/TextField.spec.ts)

3. [RadioField](./e2e/spec/Fields/Radio.spec.ts)

4. [CheckboxField](./e2e/spec/Fields/Checkbox.spec.ts)

5. [ComboField](./e2e/spec/Fields/Combo.spec.ts)

6. [ItemsField](./e2e/spec/Fields/Items.spec.ts)

7. [TreeField](./e2e/spec/Fields/Tree.spec.ts)

8. [YesNoField](./e2e/spec/Fields/YesNo.spec.ts)

9. [SwitchField](./e2e/spec/Fields/Switch.spec.ts)

10. [ProgressField](./e2e/spec/Fields/Progress.spec.ts)

11. [SliderField](./e2e/spec/Fields/Slider.spec.ts)

12. [ChooseField](./e2e/spec/Fields/Choose.spec.ts)

13. [CompleteField](./e2e/spec/Fields/Complete.spec.ts)

14. [DateField](./e2e/spec/Fields/Date.spec.ts)

15. [TimeField](./e2e/spec/Fields/Time.spec.ts)

**Layouts:**

1. [FragmentLayout](./e2e/spec/Fields/Fragment.spec.ts)

2. [GroupLayout](./e2e/spec/Fields/Group.spec.ts)

3. [PaperLayout](./e2e/spec/Fields/Paper.spec.ts)

4. [OutlineLayout](./e2e/spec/Fields/Outline.spec.ts)

4. [ExpansionLayout](./e2e/spec/Fields/Expansion.spec.ts)

**Actions:**

1. [ButtonField](./e2e/spec/Fields/Button.spec.ts)

2. [IconField](./e2e/spec/Fields/Icon.spec.ts)

**Forms**

1. [Form1](./e2e/spec/Forms/Form1.spec.ts)

2. [Form2](./e2e/spec/Forms/Form2.spec.ts)

## 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](https://github.com/react-declarative/react-declarative/blob/master/docs/other/code-sideeffect.md). 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](https://en.wikipedia.org/wiki/Duck_test). 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](https://en.wikipedia.org/wiki/Xerox_Alto)

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](./e2e/spec/Forms/Form1.spec.ts), this is a real integrational test, not the mocked one which a-priory coverage the problem partially. **P.S.** The [Form2 example](./e2e/spec/Forms/Form2.spec.ts) coverage the mobile-first approach too

## Code Sample

```tsx

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

});

```