{"id":20503451,"url":"https://github.com/react-native-windows/cavy-extension","last_synced_at":"2025-03-05T20:39:21.791Z","repository":{"id":48553333,"uuid":"190324495","full_name":"react-native-windows/cavy-extension","owner":"react-native-windows","description":"extend the functionality of cavy","archived":false,"fork":false,"pushed_at":"2021-07-20T18:32:01.000Z","size":556,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-23T21:01:38.684Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-native-windows.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}},"created_at":"2019-06-05T04:13:21.000Z","updated_at":"2019-06-09T03:17:44.000Z","dependencies_parsed_at":"2022-09-26T19:53:06.656Z","dependency_job_id":null,"html_url":"https://github.com/react-native-windows/cavy-extension","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-windows%2Fcavy-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-windows%2Fcavy-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-windows%2Fcavy-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-windows%2Fcavy-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-native-windows","download_url":"https://codeload.github.com/react-native-windows/cavy-extension/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241570909,"owners_count":19984002,"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-11-15T19:31:27.250Z","updated_at":"2025-03-05T20:39:21.771Z","avatar_url":"https://github.com/react-native-windows.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":" **cavy-extension**\r\n\r\n[![npm version](https://badge.fury.io/js/cavy-extension.svg)](https://badge.fury.io/js/cavy-extension)\r\n\r\n**[Cavy](https://github.com/pixielabs/cavy)** is a cross-platform integration test framework for React Native.\r\n\r\n**Cavy-extension** is a test page focused cavy extension, and it's ideally for component testing. `SimpleTestApp` setups a two page navigation(mainpage and subpage), and helps you maintains the navigation between them. You only need to focus on the test page area. (yellow part below)\r\n\r\n![relationship](https://user-images.githubusercontent.com/6290692/59148946-fabf9b80-89c3-11e9-9404-5e8422051891.png)\r\n\r\nIt's main functionality:\r\n+ It simplied the steps in component testing and enable user only need to be focused only on authoring test spec and test pages.\r\n+ User only need to provides a testpage, a key which associate swith the testpage. And toTestPage would help to navigate directly to the test page.\r\n+ Allow user to extend the functionality of TestScope and provides IntelliSense when authoring spec.\r\n\r\n\r\n\r\n**Usage**\r\nCheck out the [sample app](https://github.com/react-native-windows/cavy-extension/tree/master/sample-app) for a full example of how you may want to integrate cavy-extension into your native testing setup.\r\n\r\n***Pre steps***\r\n+ Installation\r\nTo get started using Cavy with native reporting, install using yarn:\r\n`yarn add cavy cavy-extension --dev`\r\nor npm:\r\n`npm i --save-dev cavy cavy-extension`\r\n+ create [TestPages](https://github.com/react-native-windows/cavy-extension/blob/master/sample-app/Demo/src/TestApp/TestPages.ts) and replace the app with SimpleTestApp, then hook up them together in a [testapp](https://github.com/react-native-windows/cavy-extension/blob/master/sample-app/Demo/src/TestApp/TestApp.tsx) \r\n```javascript\r\n      \u003cTester specs={[ExampleSpec]} store={testHookStore}\u003e\r\n        \u003cSimpleTestApp testPages={TestPages} /\u003e\r\n      \u003c/Tester\u003e\r\n```\r\n+ convert your project to typescript. It's optionally\r\n\r\n***Steps to authoring test case***\r\n1. Write a simple UI test page.\r\n```javascript\r\nexport const ExampleTestPage1 = () =\u003e {\r\n    const generateTestHook = useCavy();\r\n    const [text, setText] = useState('');\r\n\r\n    return \u003cTextInput placeholder=\"ExampleTestpage 1\"\r\n        onChangeText={(text) =\u003e setText(text)} value={text}\r\n        ref={generateTestHook('Example1.TextInput')} /\u003e;\r\n};\r\n\r\n```\r\n2. Aggregate the testpages with keys. For example: Example1\r\n```javascript\r\nexport const TestPages: Array\u003cITestPage\u003e = [\r\n    {\r\n        key: 'Example1',\r\n        title: 'TestExample by import {ExampleTestPage1}',\r\n        page: ExampleTestPage1\r\n    },\r\n    {\r\n        key: 'Example2',\r\n        title: 'TestExample by import ExampleTestPage',\r\n        page: ExaExampleTestPage2\r\n    },\r\n```\r\n\r\n3. Write the spec. **toTestPage('Example1')** helps to navigate to test page.\r\n```javascript\r\n      await spec2.toTestPage('Example1');\r\n```\r\n\r\n***Functionality of this extension***\r\n- Provides a simple testapp, test main page, back button on subpage. and **toTestPage** to help the navigation. \r\n\r\n  1. Test main page\r\n  \r\n  ![testcaselist](https://user-images.githubusercontent.com/6290692/59141800-3af13080-8968-11e9-9b27-dfd7b9e130ea.png)\r\n\r\n  2. Test sub page\r\n  \r\n  ![testcase](https://user-images.githubusercontent.com/6290692/59141799-3af13080-8968-11e9-87c8-216e260422f6.png)\r\n\r\n- Add your own functionality to spec and inject it to spec. like **Spec2**\r\n\r\n```javascript\r\nfunction ExampleSpec (spec: TestScope, spec2: SpecHelper) {\r\n  spec.describe('Example 1', function () {\r\n\r\n    spec.it('Test Example 1', async function () {\r\n      await spec2.toTestPage('Example1');\r\n...\r\n    });\r\n\r\n  });\r\n```\r\nOr\r\n```javascript\r\nexport default function (spec: TestScope) {\r\n  let spec2: SpecHelper = new SpecHelper(spec);\r\n\r\n  spec.describe('Sample Module', function () {\r\n\r\n    spec.it('SampleModule', async function () {\r\n      await spec2.toTestPage('SampleModule');\r\n     ...\r\n    });\r\n\r\n  });\r\n```\r\n\r\n- A typescript project\r\nIntelliSense for spec or spec2 in IDE.\r\n\r\n\r\n\r\n![intell](https://user-images.githubusercontent.com/6290692/59141901-d3d47b80-8969-11e9-9a3c-87e7c9760cfb.png)\r\n\r\n\r\n***Test Example***\r\n\r\n![mYtEST](https://user-images.githubusercontent.com/6290692/59141798-3af13080-8968-11e9-83f0-90a11b8a16da.gif)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-windows%2Fcavy-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-native-windows%2Fcavy-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-windows%2Fcavy-extension/lists"}