{"id":17327266,"url":"https://github.com/hand-dot/velo-test-kit","last_synced_at":"2025-03-27T05:13:39.649Z","repository":{"id":222768264,"uuid":"758328422","full_name":"hand-dot/velo-test-kit","owner":"hand-dot","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-26T08:47:52.000Z","size":8785,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T10:14:40.290Z","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/hand-dot.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-02-16T04:32:54.000Z","updated_at":"2024-02-16T04:33:02.000Z","dependencies_parsed_at":"2024-02-26T08:49:01.508Z","dependency_job_id":null,"html_url":"https://github.com/hand-dot/velo-test-kit","commit_stats":null,"previous_names":["hand-dot/velo-test-kit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hand-dot%2Fvelo-test-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hand-dot%2Fvelo-test-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hand-dot%2Fvelo-test-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hand-dot%2Fvelo-test-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hand-dot","download_url":"https://codeload.github.com/hand-dot/velo-test-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245785825,"owners_count":20671634,"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-10-15T14:19:16.564Z","updated_at":"2025-03-27T05:13:39.618Z","avatar_url":"https://github.com/hand-dot.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e [!WARNING]  \r\n\u003e This project is currently under development and should be considered a concept at this stage.  \r\n\u003e We welcome your feedback and suggestions.\r\n\r\n# velo-test-kit\r\n\r\n[velo-test-kit](https://github.com/hand-dot/velo-test-kit) enables unit testing for code that utilizes Wix's Velo platform.  \r\nIt offers a seamless development experience by mocking Velo modules, and using Vite and TypeScript for an efficient development workflow.  \r\n\r\nThis toolkit allows for easy customization of default mock behaviors and supports data-dependent tests, such as those involving CMS data.\r\n\r\n## Getting Started\r\n\r\n### Setup\r\n\r\n1. Clone your Wix site repository to your local machine by following the guide on [Velo: Setting Up Git Integration \u0026 Wix CLI](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/setting-up-git-integration-wix-cli).\r\n\r\n2. In the cloned repository, execute the following command:\r\n   ```\r\n   npm install vitest typescript github:hand-dot/velo-test-kit --save-dev\r\n   ```\r\n\r\n3. Add `typeRoots` and `checkJs: true` to the `compilerOptions` in your repository's `jsconfig.json` as shown below:\r\n\r\n    ```json\r\n    {\r\n      \"compilerOptions\": {\r\n        \"typeRoots\": [\r\n          \".wix/types/wix-code-types/dist/types\"\r\n        ],\r\n        \"checkJs\": true\r\n      },\r\n      \"references\": [...]\r\n    }\r\n    ```\r\n\r\n4. Add `vitest.config.ts` to the root of your repository and specify `'velo-test-kit'` in `setupFiles` as follows:\r\n\r\n    ```ts\r\n    import { defineConfig } from 'vitest/config';\r\n    export default defineConfig({\r\n        test: {\r\n            setupFiles: ['velo-test-kit']\r\n        },\r\n    });\r\n    ```\r\n\r\n5. [Optional] For tests utilizing `wix-data`, set up a test CMS environment. For example, if testing with the following collection:\r\n\r\n    ![Example Collection](https://github.com/hand-dot/velo-test-kit/assets/24843808/761effaf-b1f6-4856-82a9-40969ca4e85e)\r\n\r\n    Add the collection's configuration in the `velo-test-kit/CMS` directory. For a `messages` collection, create `messages.ts` and define the columns and initial data:\r\n\r\n    ```tsx\r\n    const schema = {\r\n        _id: String,\r\n        message: String,\r\n        sender: String,\r\n        receiver: String,\r\n        viewed: Boolean,\r\n    };\r\n\r\n    const data = [\r\n        { _id: '1', message: 'Test1', sender: 'xxx', receiver: 'yyy', viewed: false },\r\n        { _id: '2', message: 'Test2', sender: 'xxx', receiver: 'yyy', viewed: true },\r\n        { _id: '3', message: 'Test3', sender: 'xxx', receiver: 'yyy', viewed: false },\r\n        { _id: '4', message: 'Test4', sender: 'xxx', receiver: 'yyy', viewed: true },\r\n    ]\r\n\r\n    export default {\r\n        schema,\r\n        data\r\n    }\r\n    ```\r\n\r\n6. Write your tests and execute them using `npx vitest`. enjoy🤟\r\n\r\nIf you want to reference a pre-setup project, please check out the following repo:  \r\nhttps://github.com/hand-dot/my-site-velo-test-kit\r\n\r\n\r\n### Tips\r\n\r\n#### How to mock wix-fetch\r\n\r\nFirst, install [msw](https://mswjs.io/).\r\n    \r\n```bash\r\nnpm install msw\r\n```\r\n\r\nThen Please set a function to `global.server.use` in your test file.\r\n\r\n```\r\nimport { http, HttpResponse } from \"msw\";\r\nimport { describe, expect, test } from \"vitest\";\r\nimport { fetch } from \"wix-fetch\";\r\n\r\ndescribe(\"wix-fetch\", () =\u003e {\r\n    test(\"should work\", async () =\u003e {\r\n        global.server.use(\r\n            http.get(\"https://test.com/api/hello\", () =\u003e HttpResponse.json({ key1: 'value1', key2: 'value2' }))\r\n        );\r\n\r\n        const res = await fetch(\"https://test.com/api/hello\")\r\n            .then((httpResponse) =\u003e httpResponse.ok ? httpResponse.json() : Promise.reject('Fetch did not succeed'))\r\n            .then(json =\u003e json.key1)\r\n            .catch(err =\u003e console.log(err));\r\n\r\n        expect(res).toBe('value1');\r\n    });\r\n});\r\n```\r\n\r\n\r\n### Development\r\n\r\n- To develop within `velo-test-kit`, clone [this repo](https://github.com/hand-dot/velo-test-kit) and run `npm install`. You can run `npm run dev` within `velo-test-kit` and `npm run test` in the `sample-project` directory to test and develop simultaneously.\r\n\r\n- If you wish to develop with changes reflected in a separate project:\r\n    - Run `npm link` in `velo-test-kit`, then install `velo-test-kit` in your development project using `npm install github:hand-dot/velo-test-kit --save-dev` followed by `npm link velo-test-kit`.\r\n    - Execute `npm run dev` in `velo-test-kit` and `npm run test` in your development project to develop with live changes detection.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhand-dot%2Fvelo-test-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhand-dot%2Fvelo-test-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhand-dot%2Fvelo-test-kit/lists"}