├── .gitignore
├── README.md
├── babel.config.js
├── jest.config.js
├── package.json
├── specs
    ├── alert.spec.js
    ├── exercise-1.spec.js
    ├── exercise-2.spec.js
    ├── fruits.spec.js
    ├── github.spec.js
    ├── salad.spec.js
    ├── stubs.spec.js
    ├── temp.spec.js
    └── test.spec.js
└── src
    ├── alert-message.vue
    ├── components
        └── list-item.vue
    ├── exercise-1.vue
    ├── exercise-2.vue
    ├── fruit-basket.vue
    ├── github-card.vue
    ├── list.vue
    ├── salad-bowl.vue
    ├── store
        └── salad-store.js
    ├── temprature.vue
    └── test.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .vscode/settings.json
3 | yarn.lock
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Testing Vue.js Components
 2 | 
 3 | [![](https://vueschool.s3.amazonaws.com/9318e19655ce267304ebf5df7eca7154/testing-vuejs-components.png)](https://vueschool.io/courses/learn-how-to-test-vuejs-components)
 4 | 
 5 | This repository contains the the starting point of the [Testing Vue.js Components](https://vueschool.io/courses/learn-how-to-test-vuejs-components) course.
 6 | 
 7 | Learn how to test your Vue.js components like a pro with Jest and the official unit testing library for Vue.js - Vue Test Utils
 8 | 
 9 | In this course, you’ll learn everything you need to know to write proper unit tests for your Vue components.
10 | 
11 | Not sure how to mount and render your component to perform assertions. Not sure what you should and shouldn't test? Or how to test a specific thing? This course is for you!
12 | 
13 | **By the end of this testing course you will know**
14 | - Which tools are required for an efficient testing workflow
15 | - How to mount and render your Vue components
16 | - How to programmatically interact with your components through Vue Test Utils
17 | - How to test computed properties and watchers
18 | - How to test Vue.js lifecycle methods
19 | - How to traverse the DOM and test …
20 | - How to stub child components
21 | - How to test that a Vuex Store is injected properly
22 | 
23 | You need a basic understanding of testing in JavaScript and Jest. We recommend watching [JavaScript Testing Fundamentals](https://vueschool.io/courses/javascript-testing-fundamentals) and [Test with Jest](https://vueschool.io/courses/test-with-jest) if you're not already familiar with the topics.
24 | 
25 | [Click here to watch the testing course](https://vueschool.io/courses/learn-how-to-test-vuejs-components).


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     [
 4 |       '@babel/preset-env',
 5 |       {
 6 |         targets: {
 7 |           node: 'current',
 8 |         },
 9 |       },
10 |     ],
11 |   ],
12 | };
13 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   verbose: true,
 3 |   roots: ["<rootDir>/src/", "<rootDir>/specs/"],
 4 |   moduleFileExtensions: ['js', 'vue'],
 5 |   moduleNameMapper: {
 6 |     '^@/(.*)$': '<rootDir>/src/$1',
 7 |   },
 8 |   transform: {
 9 |     "^.+\\.js$": "babel-jest",
10 |   },
11 |   snapshotSerializers: [
12 |     "<rootDir>/node_modules/jest-serializer-vue"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-school-test-utils-base",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "repository": "https://github.com/codebryo/vue-school-test-utils-base.git",
 6 |   "author": "Roman Kuba <roman.kuba@gmail.com>",
 7 |   "license": "MIT",
 8 |   "dependencies": {
 9 |     "@babel/core": "^7.3.4",
10 |     "@babel/preset-env": "^7.3.4",
11 |     "babel-core": "^7.0.0-bridge.0",
12 |     "babel-jest": "^24.5.0",
13 |     "jest": "^24.5.0",
14 |     "jest-serializer-vue": "^2.0.2",
15 |     "vue": "^2.6.9",
16 |     "vuex": "^3.1.1"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/specs/alert.spec.js:
--------------------------------------------------------------------------------
1 | import AlertMessage from '@/alert-message'
2 | import { mount } from '@vue/test-utils'
3 | 


--------------------------------------------------------------------------------
/specs/exercise-1.spec.js:
--------------------------------------------------------------------------------
1 | import UserList from '@/exercise-1';
2 | import { mount } from '@vue/test-utils';
3 | 


--------------------------------------------------------------------------------
/specs/exercise-2.spec.js:
--------------------------------------------------------------------------------
1 | import ExerciseForm from '@/exercise-2';
2 | import { mount } from '@vue/test-utils';
3 | 


--------------------------------------------------------------------------------
/specs/fruits.spec.js:
--------------------------------------------------------------------------------
1 | import  FruitBasket from '@/fruit-basket'
2 | import { mount } from '@vue/test-utils'
3 | 


--------------------------------------------------------------------------------
/specs/github.spec.js:
--------------------------------------------------------------------------------
1 | import GithubCard from '@/github-card'
2 | import { mount } from '@vue/test-utils'
3 | 
4 | describe('methods', () => {
5 | 
6 | })
7 | 


--------------------------------------------------------------------------------
/specs/salad.spec.js:
--------------------------------------------------------------------------------
1 | import Vuex from 'vuex'
2 | import Vue from 'vue'
3 | import { mount } from '@vue/test-utils'
4 | 
5 | import SaladBowlComponent from '@/salad-bowl'
6 | import saladStore from '@/store/salad-store'
7 | 


--------------------------------------------------------------------------------
/specs/stubs.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vueschool/testing-vue-components/62594cb4d611dcbfd3de177d0b9726d68302e1ad/specs/stubs.spec.js


--------------------------------------------------------------------------------
/specs/temp.spec.js:
--------------------------------------------------------------------------------
1 | import Temprature from '@/temprature'
2 | import { mount } from '@vue/test-utils'
3 | 


--------------------------------------------------------------------------------
/specs/test.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vueschool/testing-vue-components/62594cb4d611dcbfd3de177d0b9726d68302e1ad/specs/test.spec.js


--------------------------------------------------------------------------------
/src/alert-message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="alert">
 3 |     <p>I'm a alert message!</p>
 4 |     <p>Time left {{ timeLeft }}</p>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   data() {
11 |     return {
12 |       interval: undefined,
13 |       counter: 0,
14 |       timer: 5
15 |     };
16 |   },
17 | 
18 |   computed: {
19 |     timeLeft() {
20 |       return this.timer - this.counter;
21 |     }
22 |   },
23 | 
24 |   mounted() {
25 |     this.interval = setInterval(() => {
26 |       this.counter++;
27 |       if (this.counter == this.timer) this.$destroy();
28 |     }, 1000);
29 |   },
30 | 
31 |   beforeDestroy() {
32 |     clearInterval(this.interval);
33 |     console.log("Alert removed!");
34 |   },
35 | 
36 |   destroyed() {
37 |     this.$el.remove();
38 |   }
39 | };
40 | </script>
41 | 
42 | 


--------------------------------------------------------------------------------
/src/components/list-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li><strong>{{ movie }}</strong></li>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     props: {
 8 |       movie: String
 9 |     }
10 |   }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/exercise-1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <input type="text" v-model="filter" />
 4 |     <ul>
 5 |       <li v-for="user in filteredUsers" :key="user">{{ user }}</li>
 6 |     </ul>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   props: {
13 |     users: {
14 |       type: Array,
15 |       default: () => []
16 |     }
17 |   },
18 |   data() {
19 |     return {
20 |       filter: ''
21 |     };
22 |   },
23 |   computed: {
24 |     filteredUsers() {
25 |       console.log(this.users);
26 |       if (this.filter.trim().length === 0) return this.users;
27 |       return this.users.filter(user => {
28 |         return user.toLowerCase().includes(this.filter.toLowerCase());
29 |       });
30 |     }
31 |   }
32 | };
33 | </script>
34 | 


--------------------------------------------------------------------------------
/src/exercise-2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <form @submit.prevent="addTask">
 4 |       <input type="text" v-model="newTask" placeholder="Add a task" />
 5 |       <button type="submit">Add</button>
 6 |     </form>
 7 |     <h2>Tasks</h2>
 8 |     <ul>
 9 |       <li v-for="(task, index) in tasks" :key="task">
10 |         {{ task }}
11 |         <button @click="remove(index)">Done</button>
12 |       </li>
13 |     </ul>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   data() {
20 |     return {
21 |       tasks: [],
22 |       newTask: ''
23 |     };
24 |   },
25 |   methods: {
26 |     addTask() {
27 |       if (this.newTask.trim().length === 0) return;
28 |       this.tasks.push(this.newTask);
29 |       this.newTask = '';
30 |     },
31 |     remove(index) {
32 |       this.tasks.splice(index, 1);
33 |     }
34 |   }
35 | };
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/fruit-basket.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Fruit Basket</h1>
 4 |     <input type="text" v-model="fruit">
 5 |     <button @click="addToBasket">Add Fruit</button>
 6 |     <ul class="fruits">
 7 |       <li v-for="fruit in basket" :key="fruit">
 8 |         {{ fruit }}
 9 |       </li>
10 |     </ul>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 |   export default {
16 |     data() {
17 |       return {
18 |         basket: [],
19 |         fruit: ''
20 |       }
21 |     },
22 | 
23 |     methods: {
24 |       addToBasket() {
25 |         if (this.fruit.trim().length <= 0) return
26 |         this.basket.push(this.fruit)
27 |         this.fruit = ''
28 |       }
29 |     }
30 |   }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/github-card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <form @submit.prevent="fetchData">
 4 |       <input type="text" v-model="username">
 5 |       <button type="submit">Load Details...</button>
 6 |     </form>
 7 | 
 8 |     <template v-if="data">
 9 |       <div class="card">
10 |         <img :src="data.avatar_url" :alt="data.name">
11 |         <h2>{{ data.name }}</h2>
12 |         <h4>{{ data.bio }} -- {{ data.location }}</h4>
13 |       </div>
14 |     </template>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   data() {
21 |     return {
22 |       username: "",
23 |       data: undefined,
24 |       url: ''
25 |     };
26 |   },
27 | 
28 |   methods: {
29 |     composeUrl(username) {
30 |       return `https://api.github.com/users/${username}`
31 |     },
32 | 
33 |     async fetchData() {
34 |       this.url = this.composeUrl(this.username)
35 |       const response = await fetch(this.url);
36 |       this.data = await response.json();
37 |     }
38 |   }
39 | };
40 | </script>
41 | 


--------------------------------------------------------------------------------
/src/list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <ListItem
 5 |         :key="index"
 6 |         v-for="(movie, index) in marvelMovies"
 7 |         :movie="movie"
 8 |       />
 9 |     </ul>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   import ListItem from './components/list-item'
15 | 
16 |   export default {
17 | 
18 |     components: {
19 |       ListItem
20 |     },
21 | 
22 |     data() {
23 |       return {
24 |         marvelMovies: [
25 |           'Iron Man',
26 |           'Avengers',
27 |           'Infitinity War',
28 |         ]
29 |       }
30 |     }
31 | 
32 |   }
33 | </script>
34 | 
35 | <style scoped>
36 | 
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/salad-bowl.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     {{ salad }}
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { mapActions } from 'vuex'
 9 | 
10 | export default {
11 |   data() {
12 |     return {
13 |       ...this.$store.state
14 |     }
15 |   },
16 | 
17 |   methods: {
18 |     ...mapActions(['addIngredient'])
19 |   },
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/store/salad-store.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   state() {
 3 |     return {
 4 |       salad: []
 5 |     }
 6 |   },
 7 | 
 8 |   mutations: {
 9 |     addIngredient(state, ingredient) {
10 |       state.salad.push(ingredient)
11 |     }
12 |   },
13 | 
14 |   actions: {
15 |     addIngredient({ commit }, ingredient) {
16 |       commit('addIngredient', ingredient)
17 |     }
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/temprature.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <span>{{ celsius }} deg. Celsius</span>
 4 |     <span>{{ fahrenheit }} deg. Fahrenheit</span>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: ['temp'],
11 | 
12 |   data() {
13 |     return {
14 |       type: 'celsius',
15 |       degrees: 0
16 |     }
17 |   },
18 | 
19 |   computed: {
20 |     celsius() {
21 |       if (this.type == 'celsius')
22 |         return this.degrees
23 |       else
24 |         return parseInt((this.degrees - 32) * 0.556)
25 |     },
26 | 
27 |     fahrenheit() {
28 |       if (this.type == 'fahrenheit')
29 |         return this.degrees
30 |       else
31 |         return (this.degrees * 1.8) + 32
32 |     }
33 |   },
34 | 
35 |   watch: {
36 |     temp: {
37 |       immediate: true,
38 |       handler: function(val)  {
39 |         if (!val) return
40 |         this.degrees = parseInt(val)
41 |         this.type = String(val).endsWith('f') ? 'fahrenheit' : 'celsius'
42 |       }
43 |     }
44 |   }
45 | }
46 | </script>
47 | 
48 | 


--------------------------------------------------------------------------------
/src/test.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Hello {{ value }}</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     props: {
10 |       value: {
11 |         type: String,
12 |         default: 'Test'
13 |       }
14 |     }
15 |   }
16 | </script>
17 | 


--------------------------------------------------------------------------------