refactor(client): Score Screen component

client/src/components/ScoreScreen.vue

@@ -2,12 +2,13 @@
   <div id="score_screen">
     <h2>Score: {{ score }}/{{ count }}</h2>
     <h3>{{ text() }}</h3>
-    <button class="replay-btn" @click="reset">Recommencer</button>
+    <button class="replay-btn" @click="resetGame">Recommencer</button>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import router from '../router';
 
 interface IMessage {
   min: number;
@@ -29,7 +30,6 @@ export default Vue.extend({
   props: {
     score: Number,
     count: Number,
-    reset: Function,
   },
   methods: {
     text(): string {
@@ -37,6 +37,10 @@ export default Vue.extend({
 
       return text[0] !== undefined ? text[0].msg : '';
     },
+    resetGame(): void {
+      this.$store.dispatch('questions/resetState');
+      router.push({ name: 'home' });
+    },
   },
   created(): void {
     this.messages.sort((a, b) => b.min - a.min);

client/src/views/ScoreScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <ScoreScreen :score="score" :count="questions.length" :reset="resetGame" />
+  <ScoreScreen :score="score" :count="questions.length" />
 </template>
 
 <script lang="ts">
@@ -11,21 +11,11 @@ import router from '../router';
 
 export default Vue.extend({
   name: 'home',
-  methods: {
-    resetGame(): void {
-      this.$store.dispatch('questions/resetState');
-      router.push({ name: 'home' });
-    },
-  },
   components: {
     ScoreScreen,
   },
   computed: {
-    ...mapState('questions', [
+    ...mapState('questions', ['questions', 'index', 'score']),
-      'questions',
-      'index',
-      'score',
-      ]),
   },
   created(): void {
     if (this.index === 0) {

client/tests/unit/components/ScoreScreen.spec.ts

@@ -1,6 +1,7 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import ScoreScreen from '../../../src/components/ScoreScreen.vue';
+import router from '@/router';
 
 const localVue = createLocalVue();
 
@@ -19,18 +20,19 @@ const $store = new Vuex.Store({
   },
 });
 
-const resetMock = jest.fn();
+let wrapper: any;
-
-const wrapper = shallowMount(ScoreScreen, {
-  mocks: { $store },
-  propsData: {
-    score: 2,
-    count: 5,
-    reset: resetMock,
-  },
-});
 
 describe('Component - ScoreScreen', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(ScoreScreen, {
+      mocks: { $store },
+      propsData: {
+        score: 2,
+        count: 5,
+      },
+    });
+  });
+
   it('should display message based on score', () => {
     expect(wrapper.find('h3').text()).toBe(
       'Bon bah c\'est pas tip top tout ça.',
@@ -38,8 +40,15 @@ describe('Component - ScoreScreen', () => {
   });
 
   it('should call reset state function', () => {
+    const dispatchMock = spyOn($store, 'dispatch');
+    const routerMock = spyOn(router, 'push');
+
     wrapper.find('button.replay-btn').trigger('click');
 
-    expect(resetMock).toBeCalledTimes(1);
+    expect(dispatchMock).toBeCalledTimes(1);
+    expect(dispatchMock).toBeCalledWith('questions/resetState');
+
+    expect(routerMock).toBeCalledTimes(1);
+    expect(routerMock).toBeCalledWith({ name: 'home' });
   });
 });