Setup routing for FruitDetails + fetch data on route transition + Fix fruit tests

tests/unit/fruits.spec.js

@@ -1,4 +1,4 @@
-import { mount } from "@vue/test-utils";
+import { mount, RouterLinkStub } from "@vue/test-utils";
 // import axios from "axios";
 import store from "@/store/index.js";
 import Fruits from "@/views/Fruits.vue";
@@ -10,9 +10,9 @@ import Fruits from "@/views/Fruits.vue";
 describe("Test Fruits page.", () => {
   it("dispatches getFruits on mounted", async () => {
     // axios.get.mockImplementationOnce(() => Promise.resolve({ data: { data: "value" } }));
-    const wrapper = mount(Fruits, { store });
+    const wrapper = mount(Fruits, { store, stubs: { RouterLink: RouterLinkStub } });
 
     await store.dispatch("getFruits");
-    expect(store.state.fruits.fruitCount).toBe(6);
+    expect(store.state.fruits.length).toBe(7);
   });
 });