{"id":20472683,"url":"https://github.com/maxpou/vue-testing-library-sample","last_synced_at":"2025-04-13T11:23:30.705Z","repository":{"id":42363736,"uuid":"104067058","full_name":"maxpou/vue-testing-library-sample","owner":"maxpou","description":"🚀 A Vue.js project to test Jest and Testing-library. Data come from Star Wars API.","archived":false,"fork":false,"pushed_at":"2023-01-03T17:24:17.000Z","size":867,"stargazers_count":20,"open_issues_count":9,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T02:38:41.696Z","etag":null,"topics":["jest","testing-library","vuejs","vuex"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/maxpou.png","metadata":{"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":"2017-09-19T11:37:11.000Z","updated_at":"2023-09-11T15:51:21.000Z","dependencies_parsed_at":"2023-02-01T08:16:52.147Z","dependency_job_id":null,"html_url":"https://github.com/maxpou/vue-testing-library-sample","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/maxpou%2Fvue-testing-library-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxpou%2Fvue-testing-library-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxpou%2Fvue-testing-library-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxpou%2Fvue-testing-library-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxpou","download_url":"https://codeload.github.com/maxpou/vue-testing-library-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248704037,"owners_count":21148272,"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":["jest","testing-library","vuejs","vuex"],"created_at":"2024-11-15T14:21:18.279Z","updated_at":"2025-04-13T11:23:30.680Z","avatar_url":"https://github.com/maxpou.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-testing-library-sample\n\n![CI](https://github.com/maxpou/vue-testing-library-sample/workflows/CI/badge.svg) [![Standard - JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) [![Netlify Status](https://api.netlify.com/api/v1/badges/d7d58895-6e07-46ba-9b53-7e14acd6e252/deploy-status)](https://app.netlify.com/sites/vue-testing-library/deploys)\n\n\n\u003e A Vue.js project to test [Jest](https://facebook.github.io/jest/) and [Testing-library](https://github.com/testing-library). Data come from [Star Wars API](https://swapi.dev/).\n\n👉 DEMO: [vue-testing-library.netlify.app](https://vue-testing-library.netlify.app/#/)  \n👉 BLOG POST: [[maxpou.fr] Vue.js Testing Made it Easy (with Testing Library)](https://www.maxpou.fr/vue-js-testing-library)\n\n\n## What's inside\n\n* [Vue.js](https://vuejs.org/)\n* [vuex](https://vuex.vuejs.org/en/) (state management)\n* [vue-router](https://github.com/vuejs/vue-router) (router)\n* [Axios](https://github.com/mzabriskie/axios) (a library for XMLHttpRequests)\n\n... For testing:\n\n* [Facebook/Jest](https://facebook.github.io/jest/)\n* [Testing-library](https://testing-library.com/docs/vue-testing-library/intro)\n* [Jest-dom](https://github.com/testing-library/jest-dom) (Custom jest matchers to test the state of the DOM)\n* [eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library) (to write cleaner tests)\n\n## Installation\n\n1. Clone this project. `git clone https://github.com/maxpou/vue-vuex-jest`\n2. Install dependencies `npm install`\n3. Run the app with `npm start`\n\n\n![app screenshot](./app-screen.png)\n\nTo run the test suite, run `npm test`.  \nYou can also use the following options:\n\n```bash\n# Run tests + generate coverage\nnpm test -- --coverage\n\n# Run tests in watch node\nnpm test -- --watchAll\n\n# Run tests + update snapshots if needed. There're NO snapshot in this repo.\nnpm test -- -u\n```\n\n\nNote: this project is based on [vue-cli](https://cli.vuejs.org).\n\n\n## Coverage\n\n\n```\n\u003e npm test -- --coverage\n\nPASS  tests/unit/catalog.spec.js\nCatalog\n  ✓ should render (64ms)\n  ✓ should show products name, detail and price (43ms)\n  ✓ should be able to filter products (46ms)\n  ✓ should be able to load more data (62ms)\n  ✓ basket should be empty (142ms)\n  ✓ should add items to basket (152ms)\n  ✓ should load spaceship detail page (123ms)\n  ✓ should not load starships when I load a 2nd time the homepage (61ms)\n\n\n----------------------|----------|----------|----------|----------|-------------------|\nFile                  |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |\n----------------------|----------|----------|----------|----------|-------------------|\nAll files             |    97.75 |    77.78 |    94.44 |    97.59 |                   |\n src                  |      100 |      100 |      100 |      100 |                   |\n  App.vue             |      100 |      100 |      100 |      100 |                   |\n  router.js           |      100 |      100 |      100 |      100 |                   |\n src/components       |      100 |      100 |      100 |      100 |                   |\n  CatalogList.vue     |      100 |      100 |      100 |      100 |                   |\n  CatalogListItem.vue |      100 |      100 |      100 |      100 |                   |\n  Navbar.vue          |      100 |      100 |      100 |      100 |                   |\n  VPrice.vue          |      100 |      100 |      100 |      100 |                   |\n src/services         |    71.43 |    66.67 |       50 |    71.43 |                   |\n  dataFormatter.js    |      100 |      100 |      100 |      100 |                   |\n  swapi.api.js        |    33.33 |        0 |        0 |    33.33 |              6,10 |\n src/store            |      100 |      100 |      100 |      100 |                   |\n  index.js            |      100 |      100 |      100 |      100 |                   |\n  mutation-types.js   |      100 |      100 |      100 |      100 |                   |\n src/store/modules    |      100 |      100 |      100 |      100 |                   |\n  basket.js           |      100 |      100 |      100 |      100 |                   |\n  catalog.js          |      100 |      100 |      100 |      100 |                   |\n src/views            |      100 |       50 |      100 |      100 |                   |\n  Basket.vue          |      100 |      100 |      100 |      100 |                   |\n  Catalog.vue         |      100 |       50 |      100 |      100 |                51 |\n  StarshipDetail.vue  |      100 |      100 |      100 |      100 |                   |\n tests                |      100 |      100 |      100 |      100 |                   |\n  render.js           |      100 |      100 |      100 |      100 |                   |\n----------------------|----------|----------|----------|----------|-------------------|\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxpou%2Fvue-testing-library-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxpou%2Fvue-testing-library-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxpou%2Fvue-testing-library-sample/lists"}