feat(vue-router): introduce router

Author: sonicoder86

package-lock.json

@@ -15,6 +15,7 @@
     "todomvc-app-css": "^2.3.0",
     "uuid": "^3.3.3",
     "vue": "^2.6.10",
+    "vue-router": "^3.1.3",
     "vuex": "^3.1.2"
   },
   "devDependencies": {

package.json

@@ -1,25 +1,18 @@
 <template>
   <div id="app">
-    <section class="todoapp">
-      <Header />
-      <List />
-      <Footer />
-    </section>
+    <router-view />
     <CopyRight />
   </div>
 </template>
 
 <script>
   import { mapActions, mapState } from 'vuex';
-  import Header from './Header.vue';
-  import List from './List.vue';
-  import Footer from './Footer.vue';
   import CopyRight from './CopyRight.vue';
   import { TodoLocal } from '../services/TodoLocal';
 
   export default {
     name: 'app',
-    components: { Header, List, Footer, CopyRight },
+    components: { CopyRight },
     computed: {
       ...mapState(['todos'])
     },
@@ -29,8 +22,10 @@
     mounted() {
       this.onLoad(TodoLocal.loadTodos());
     },
-    beforeUpdate() {
-      TodoLocal.storeTodos(this.todos);
+    watch: {
+      todos() {
+        TodoLocal.storeTodos(this.todos);
+      },
     }
   }
 </script>

src/components/App.vue

@@ -3,13 +3,9 @@
     <span class="todo-count"><strong>{{ itemsLeft }}</strong><span> {{ itemText }} left</span></span>
     <ul class="filters">
       <li v-for="filterKey in Object.keys(filterTitles)" :key="filterKey">
-        <a
-          href="#"
-          :class="{ selected: filterKey === filter }"
-          @click="onFilterSelect(filterKey)"
-        >
+        <router-link :class="{ selected: filterKey === filter }" :to="`/${filterKey}`" >
           {{ filterTitles[filterKey] }}
-        </a>
+        </router-link>
       </li>
     </ul>
     <button v-if="!!completedCount" class="clear-completed" @click="onClearCompleted">Clear completed</button>
@@ -23,7 +19,7 @@
   export default {
     name: 'Footer',
     methods: {
-      ...mapActions(['onClearCompleted', 'onFilterSelect'])
+      ...mapActions(['onClearCompleted']),
     },
     computed: {
       ...mapState(['todos', 'filter']),

src/components/Footer.vue

@@ -0,0 +1,20 @@
+import { expect } from 'chai';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import Header from './Header.vue';
+import { storeFactory } from '../store/factory';
+
+describe('Header', function() {
+  it('should add new element to store', function() {
+    const localVue = createLocalVue();
+    localVue.use(Vuex);
+    const store = storeFactory();
+
+    const wrapper = shallowMount(Header, { localVue, store });
+
+    wrapper.vm.name = 'New';
+    wrapper.find('input').trigger('keyup.enter');
+
+    expect(store.state.todos).to.eql([]);
+  });
+});

src/components/Header.spec.js

@@ -4,21 +4,20 @@
     <label htmlFor="toggle-all" @click="onCompleteAll"></label>
 
     <ul class="todo-list">
-      <Item v-for="todo in todos" :key="todo.id" :todo="todo" @remove="onRemove" @update="onUpdate" />
+      <Item v-for="todo in visibleTodos" :key="todo.id" :todo="todo" @remove="onRemove" @update="onUpdate" />
     </ul>
   </section>
 </template>
 
 <script>
-  import { mapState, mapActions, mapGetters } from 'vuex';
+  import { mapActions, mapGetters } from 'vuex';
   import Item from './Item.vue';
 
   export default {
     name: 'List',
     components: { Item },
     computed: {
-      ...mapState(['todos']),
-      ...mapGetters(['areAllCompleted'])
+      ...mapGetters(['areAllCompleted', 'visibleTodos'])
     },
     methods: {
       ...mapActions(['onRemove', 'onUpdate', 'onCompleteAll'])

src/components/List.vue

@@ -0,0 +1,31 @@
+<template>
+  <section class="todoapp">
+    <Header />
+    <List />
+    <Footer />
+  </section>
+</template>
+
+<script>
+  import { mapActions } from 'vuex';
+  import Header from './Header.vue';
+  import List from './List.vue';
+  import Footer from './Footer.vue';
+  import { FILTERS } from '../constants/Filters';
+
+  export default {
+    name: 'todos',
+    components: { Header, List, Footer },
+    methods: {
+      ...mapActions(['onFilterSelect']),
+    },
+    mounted() {
+      this.onFilterSelect(this.$route.params.filter || FILTERS.all);
+    },
+    watch: {
+      $route() {
+        this.onFilterSelect(this.$route.params.filter || FILTERS.all);
+      }
+    }
+  }
+</script>

src/components/Todos.vue

@@ -1,13 +1,17 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import VueRouter from 'vue-router';
 import App from './components/App.vue';
 import 'todomvc-app-css/index.css';
 import { storeFactory } from './store/factory';
+import { routerFactory } from './routes';
 
 Vue.config.productionTip = false;
 Vue.use(Vuex);
+Vue.use(VueRouter);
 
 new Vue({
   store: storeFactory(),
+  router: routerFactory(),
   render: h => h(App)
 }).$mount('#app');

src/main.js

@@ -0,0 +1,9 @@
+import VueRouter from 'vue-router';
+import Todos from './components/Todos.vue';
+
+const routes = [
+  { path: '/', component: Todos },
+  { path: '/:filter', component: Todos },
+];
+
+export const routerFactory = () => new VueRouter({ routes });

src/routes.js

@@ -5,8 +5,8 @@ import { storeFactory } from './factory';
 
 describe('storeFactory', function() {
   it('should create a new instance of vuex store', function() {
-    const vue = createLocalVue();
-    vue.use(Vuex);
+    const localVue = createLocalVue();
+    localVue.use(Vuex);
     const store = storeFactory();
 
     expect(store.state.todos).to.eql([]);