{"id":15174120,"url":"https://github.com/cucumber/todo-react-typescript-subsecond","last_synced_at":"2025-10-01T11:30:29.626Z","repository":{"id":52346666,"uuid":"247674649","full_name":"cucumber/todo-react-typescript-subsecond","owner":"cucumber","description":"Tiny Todo app in React and TypeScript demonstrating sub-second test feedback","archived":true,"fork":false,"pushed_at":"2022-12-15T22:29:48.000Z","size":1069,"stargazers_count":4,"open_issues_count":5,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-30T00:55:14.308Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cucumber.png","metadata":{"funding":{"open_collective":"cucumber"},"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-16T10:34:35.000Z","updated_at":"2022-12-22T19:23:09.000Z","dependencies_parsed_at":"2023-01-29T04:45:14.169Z","dependency_job_id":null,"html_url":"https://github.com/cucumber/todo-react-typescript-subsecond","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cucumber%2Ftodo-react-typescript-subsecond","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cucumber%2Ftodo-react-typescript-subsecond/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cucumber%2Ftodo-react-typescript-subsecond/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cucumber%2Ftodo-react-typescript-subsecond/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cucumber","download_url":"https://codeload.github.com/cucumber/todo-react-typescript-subsecond/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234818366,"owners_count":18891553,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-09-27T11:24:29.023Z","updated_at":"2025-10-01T11:30:24.261Z","avatar_url":"https://github.com/cucumber.png","language":"TypeScript","funding_links":["https://opencollective.com/cucumber"],"categories":[],"sub_categories":[],"readme":"# todo-react-typescript-subsecond\nTiny Todo app in React and TypeScript demonstrating sub-second test feedback\n\n## Start the app\n\n    npm start\n\n## Run tests\n\n    npm test\n\n### Run tests in a particular assembly\n\n    # Look for possible values in features/support/TodoWorld.ts\n    ASSEMBLY=... ./cucumber\n\n### Run Cucumber-Electron interactively\n\n    ASSEMBLY=react ./cucumber -i\n\nKeep each actor's DOM (omit cleaning up)\n\n    ASSEMBLY=react KEEP_DOM=1 ./cucumber -i\n\n### Run on CBT\n\nMake sure you've built the client-side JavaScript:\n\n    npm run build\n\nDefine your CBT credentials:\n\n    export CBT_USERNAME=...\n    export CBT_AUTHKEY=...\n\nRun with a specific browser:\n\n    ASSEMBLY=webdriver BROWSER=MicrosoftEdge CBT=1 CBT_VERSION=79 ./cucumber\n    ASSEMBLY=webdriver BROWSER=chrome CBT=1 CBT_VERSION=55 ./cucumber\n\n## Patterns\n\n### Test code\n\n* Step definitions only interact with an `actor`\n  * No information about UI or technology \"leaks\" through its API\n  * There are multiple implementations of `IActor`\n* `Then` steps are synchronous\n  * It's previous steps' responsibility to ensure the system is in a \"settled\" state\n  * The `ReactActor` and `WebDriverActor` implementation uses [@cucumber/microdata](https://github.com/cucumber/microdata) to query the DOM\n* Optimisations\n  * Run webpack before Webdriver (takes time to run webpack)\n  * Reuse \"heavy\" resources between scenarios\n    * The same WebDriver browser instance (takes time to launch a new browser)\n    * The same CBT tunnel (takes time to connect)\n\n### Production code\n\n* The React app is completely decoupled from the network (HTTP)\n  * React hooks for writing/reading data to/from the server - defined as custom types\n  * Different implementations of these hooks - HTTP and direct in-memory access\n  * The hook implementatins are injected into the React app during assembly\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcucumber%2Ftodo-react-typescript-subsecond","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcucumber%2Ftodo-react-typescript-subsecond","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcucumber%2Ftodo-react-typescript-subsecond/lists"}