{"id":15170493,"url":"https://github.com/react-declarative/react-declarative-e2e","last_synced_at":"2026-01-21T09:32:59.819Z","repository":{"id":242113348,"uuid":"808109958","full_name":"react-declarative/react-declarative-e2e","owner":"react-declarative","description":"Playwright end-to-end testbed for react-declarative","archived":false,"fork":false,"pushed_at":"2024-06-22T13:05:54.000Z","size":1306,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-14T07:17:48.042Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://github.com/react-declarative/react-declarative","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-declarative.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-30T12:03:10.000Z","updated_at":"2024-06-22T13:05:58.000Z","dependencies_parsed_at":"2024-06-14T17:18:23.389Z","dependency_job_id":"766e4d7d-4c36-4526-b561-7bd103080c88","html_url":"https://github.com/react-declarative/react-declarative-e2e","commit_stats":null,"previous_names":["react-declarative/react-declarative-e2e"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/react-declarative/react-declarative-e2e","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-declarative%2Freact-declarative-e2e","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-declarative%2Freact-declarative-e2e/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-declarative%2Freact-declarative-e2e/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-declarative%2Freact-declarative-e2e/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-declarative","download_url":"https://codeload.github.com/react-declarative/react-declarative-e2e/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-declarative%2Freact-declarative-e2e/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28631150,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T04:47:28.174Z","status":"ssl_error","status_checked_at":"2026-01-21T04:47:22.943Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["business-logic","business-logic-framework","e2e","enterprise","enzyme","istanbul","jest","jest-tests","mocha","playwright","playwright-javascript","playwright-tests","playwright-typescript","react","testing","ui-testing"],"created_at":"2024-09-27T08:03:22.225Z","updated_at":"2026-01-21T09:32:59.798Z","avatar_url":"https://github.com/react-declarative.png","language":"TypeScript","readme":"\u003cimg src=\"./docs/playwright-logo.svg\" height=\"75px\" align=\"right\"\u003e\n\n# ⚛️ react-declarative-e2e\n\n\u003e Playwright end-to-end testbed for [react-declarative](https://github.com/react-declarative/react-declarative)\n\n![Build Status Passing](https://raw.githubusercontent.com/dwyl/repo-badges/main/svg/build-passing.svg)\n![Code Coverage 100%](https://raw.githubusercontent.com/dwyl/repo-badges/main/svg/coverage-100.svg)\n\n![screenshot](./docs/screenshot.png)\n\n## Purpose\n\nThis 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)\n\n## Contribute\n\n\u003e [!IMPORTANT]\n\u003e 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\n\n## Usage\n\n1. Build the project\n\n```bash\nnpm run build\n```\n\n2. Run tests\n\n```bash\nnpm run test:ui\n```\n\nor\n\n```bash\nnpm run test\n```\n\n\n## Test Cases\n\n**Fields:**\n\n1. [TypographyField](./e2e/spec/Fields/Typography.spec.ts)\n2. [TextField](./e2e/spec/Fields/TextField.spec.ts)\n3. [RadioField](./e2e/spec/Fields/Radio.spec.ts)\n4. [CheckboxField](./e2e/spec/Fields/Checkbox.spec.ts)\n5. [ComboField](./e2e/spec/Fields/Combo.spec.ts)\n6. [ItemsField](./e2e/spec/Fields/Items.spec.ts)\n7. [TreeField](./e2e/spec/Fields/Tree.spec.ts)\n8. [YesNoField](./e2e/spec/Fields/YesNo.spec.ts)\n9. [SwitchField](./e2e/spec/Fields/Switch.spec.ts)\n10. [ProgressField](./e2e/spec/Fields/Progress.spec.ts)\n11. [SliderField](./e2e/spec/Fields/Slider.spec.ts)\n12. [ChooseField](./e2e/spec/Fields/Choose.spec.ts)\n13. [CompleteField](./e2e/spec/Fields/Complete.spec.ts)\n14. [DateField](./e2e/spec/Fields/Date.spec.ts)\n15. [TimeField](./e2e/spec/Fields/Time.spec.ts)\n\n**Layouts:**\n\n1. [FragmentLayout](./e2e/spec/Fields/Fragment.spec.ts)\n2. [GroupLayout](./e2e/spec/Fields/Group.spec.ts)\n3. [PaperLayout](./e2e/spec/Fields/Paper.spec.ts)\n4. [OutlineLayout](./e2e/spec/Fields/Outline.spec.ts)\n4. [ExpansionLayout](./e2e/spec/Fields/Expansion.spec.ts)\n\n**Actions:**\n\n1. [ButtonField](./e2e/spec/Fields/Button.spec.ts)\n2. [IconField](./e2e/spec/Fields/Icon.spec.ts)\n\n**Forms**\n\n1. [Form1](./e2e/spec/Forms/Form1.spec.ts)\n2. [Form2](./e2e/spec/Forms/Form2.spec.ts)\n\n## Test coverage for business logic\n\nWhen 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. \n\n[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)\n\nThe 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.\n\nCheck [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\n\n## Code Sample\n\n```tsx\nimport { expect, test } from \"@playwright/test\";\n\nimport { waitForReady } from \"../helpers/wait-for-ready\";\nimport { renderFields } from \"../helpers/render-fields\";\n\nimport TypedField from \"../model/TypedField\";\nimport FieldType from \"../model/FieldType\";\n\ntest.beforeEach(async ({ page }) =\u003e {\n    await waitForReady(page);\n});\n\nconst fields: TypedField[] = [\n    {\n        type: FieldType.YesNo,\n        name: 'yesno',\n        testId: 'yesno-field',\n        dirty: true,\n        isReadonly: ({ readonly }) =\u003e readonly,\n        isDisabled: ({ disabled }) =\u003e disabled,\n        isInvalid: ({ invalid }) =\u003e invalid || null,\n    },\n];\n\ntest(\"Will show intermediate state\", async ({ page }) =\u003e {\n    const textField = await renderFields(page, fields, {\n        data: {\n            yesno: null,\n        },\n    });\n    const inputValue = await textField.getByRole('combobox').inputValue();\n    await expect(inputValue).toEqual(\"\");\n});\n\ntest(\"Will show true state\", async ({ page }) =\u003e {\n    const textField = await renderFields(page, fields, {\n        data: {\n            yesno: true,\n        },\n    });\n    const inputValue = await textField.getByRole('combobox').inputValue();\n    await expect(inputValue).toEqual(\"Yes\");\n});\n\ntest(\"Will show false state\", async ({ page }) =\u003e {\n    const textField = await renderFields(page, fields, {\n        data: {\n            yesno: false,\n        },\n    });\n    const inputValue = await textField.getByRole('combobox').inputValue();\n    await expect(inputValue).toEqual(\"No\");\n});\n\ntest(\"Will set true state\", async ({ page }) =\u003e {\n    const textField = await renderFields(page, fields);\n    await textField.click();\n    await page.getByText(\"Yes\", { exact: true }).first().click();\n    const inputValue = await textField.getByRole('combobox').inputValue();\n    await expect(inputValue).toEqual(\"Yes\");\n});\n\ntest(\"Will set false state\", async ({ page }) =\u003e {\n    const textField = await renderFields(page, fields);\n    await textField.click();\n    await page.getByText(\"No\", { exact: true }).first().click();\n    const inputValue = await textField.getByRole('combobox').inputValue();\n    await expect(inputValue).toEqual(\"No\");\n});\n\ntest(\"Will show invalid message\", async ({ page }) =\u003e {\n    const componentGroup = await renderFields(page, fields, {\n        data: {\n            invalid: \"Invalid\",\n        }\n    });\n    await expect(componentGroup).toContainText('Invalid');\n});\n\ntest(\"Will show disabled state\", async ({ page }) =\u003e {\n    const componentGroup = await renderFields(page, fields, {\n        data: {\n            disabled: true,\n        }\n    });\n    const isDisabled = await componentGroup.getByLabel('Yesno').isDisabled();\n    await expect(isDisabled).toBeTruthy();\n});\n\ntest(\"Will show readonly state\", async ({ page }) =\u003e {\n    const componentGroup = await renderFields(page, fields, {\n        data: {\n            readonly: true,\n        },\n    });\n    const isEditable = await componentGroup.getByLabel('Yesno').isEditable();\n    await expect(isEditable).toBeFalsy();\n});\n\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-declarative%2Freact-declarative-e2e","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-declarative%2Freact-declarative-e2e","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-declarative%2Freact-declarative-e2e/lists"}