Add basic Vue logic to Vehicles/Locations/People

pages/locations/_id.spec.js

@@ -0,0 +1,56 @@
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Location from "./_id";
+
+let $route = {
+  path: "/locations",
+  params: {
+    id: "2baf70d1-42bb-4437-b551-e5fed5a87abe"
+  }
+};
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("Location page", () => {
+  let state, actions, store;
+
+  beforeEach(() => {
+    state = {
+      location: {}
+    };
+    actions = {
+      getLocation: jest.fn()
+    };
+    store = new Vuex.Store({ state, actions });
+  });
+
+  it("should render Location page instance", () => {
+    const wrapper = mount(Location, { localVue, store });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it("tests params validation", () => {
+    expect(Location.validate({ params: $route.params })).toBe(true);
+    expect(
+      Location.validate({
+        params: { id: "2baf70d1-42bb-4437-b551-e5fed5a87abe-1234" }
+      })
+    ).toBe(false);
+    expect(
+      Location.validate({
+        params: { id: "2baf7e0d1-42bb-4437-b551-e5fed5a87abe" }
+      })
+    ).toBe(false);
+  });
+
+  it("should dispatch getLocation action", async () => {
+    let wrapper = mount(Location, {
+      localVue,
+      store
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getLocation).toHaveBeenCalled();
+  });
+});

pages/locations/_id.vue

@@ -1,8 +1,31 @@
-<template> </template>
+<template>
+  <div>
+    {{ location }}
+  </div>
+</template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
-  name: "Location"
+  name: "Location",
+  head() {
+    return {
+      titleTemplate: `%s - ${this.location.name}`
+    };
+  },
+  validate({ params }) {
+    const uuid = new RegExp(
+      /^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
+    );
+    return uuid.test(params.id);
+  },
+  async asyncData({ params, store }) {
+    await store.dispatch("getLocation", params.id);
+  },
+  computed: {
+    ...mapState(["location"])
+  }
 };
 </script>
 

pages/people/_id.spec.js

@@ -0,0 +1,56 @@
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Person from "./_id";
+
+let $route = {
+  path: "/people",
+  params: {
+    id: "2baf70d1-42bb-4437-b551-e5fed5a87abe"
+  }
+};
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("Person page", () => {
+  let state, actions, store;
+
+  beforeEach(() => {
+    state = {
+      person: {}
+    };
+    actions = {
+      getPerson: jest.fn()
+    };
+    store = new Vuex.Store({ state, actions });
+  });
+
+  it("should render Person page instance", () => {
+    const wrapper = mount(Person, { localVue, store });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it("tests params validation", () => {
+    expect(Person.validate({ params: $route.params })).toBe(true);
+    expect(
+      Person.validate({
+        params: { id: "2baf70d1-42bb-4437-b551-e5fed5a87abe-1234" }
+      })
+    ).toBe(false);
+    expect(
+      Person.validate({
+        params: { id: "2baf7e0d1-42bb-4437-b551-e5fed5a87abe" }
+      })
+    ).toBe(false);
+  });
+
+  it("should dispatch getPerson action", async () => {
+    let wrapper = mount(Person, {
+      localVue,
+      store
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getPerson).toHaveBeenCalled();
+  });
+});

pages/people/_id.vue

@@ -1,8 +1,31 @@
-<template> </template>
+<template>
+  <div>
+    {{ person }}
+  </div>
+</template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
-  name: "Person"
+  name: "Person",
+  head() {
+    return {
+      titleTemplate: `%s - ${this.person.name}`
+    };
+  },
+  validate({ params }) {
+    const uuid = new RegExp(
+      /^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
+    );
+    return uuid.test(params.id);
+  },
+  async asyncData({ params, store }) {
+    await store.dispatch("getPerson", params.id);
+  },
+  computed: {
+    ...mapState(["person"])
+  }
 };
 </script>
 

pages/vehicles/_id.spec.js

@@ -0,0 +1,56 @@
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Vehicle from "./_id";
+
+let $route = {
+  path: "/vehicles",
+  params: {
+    id: "2baf70d1-42bb-4437-b551-e5fed5a87abe"
+  }
+};
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("Vehicle page", () => {
+  let state, actions, store;
+
+  beforeEach(() => {
+    state = {
+      vehicle: {}
+    };
+    actions = {
+      getVehicle: jest.fn()
+    };
+    store = new Vuex.Store({ state, actions });
+  });
+
+  it("should render Vehicle page instance", () => {
+    const wrapper = mount(Vehicle, { localVue, store });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it("tests params validation", () => {
+    expect(Vehicle.validate({ params: $route.params })).toBe(true);
+    expect(
+      Vehicle.validate({
+        params: { id: "2baf70d1-42bb-4437-b551-e5fed5a87abe-1234" }
+      })
+    ).toBe(false);
+    expect(
+      Vehicle.validate({
+        params: { id: "2baf7e0d1-42bb-4437-b551-e5fed5a87abe" }
+      })
+    ).toBe(false);
+  });
+
+  it("should dispatch getVehicle action", async () => {
+    let wrapper = mount(Vehicle, {
+      localVue,
+      store
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getVehicle).toHaveBeenCalled();
+  });
+});

pages/vehicles/_id.vue

@@ -1,8 +1,31 @@
-<template> </template>
+<template>
+  <div>
+    {{ vehicle }}
+  </div>
+</template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
-  name: "Vehicle"
+  name: "Vehicle",
+  head() {
+    return {
+      titleTemplate: `%s - ${this.vehicle.name}`
+    };
+  },
+  validate({ params }) {
+    const uuid = new RegExp(
+      /^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
+    );
+    return uuid.test(params.id);
+  },
+  async asyncData({ params, store }) {
+    await store.dispatch("getVehicle", params.id);
+  },
+  computed: {
+    ...mapState(["vehicle"])
+  }
 };
 </script>
 

store/index.js

@@ -1,6 +1,9 @@
 export const state = () => ({
   films: [],
-  film: {}
+  film: {},
+  location: {},
+  person: {},
+  vehicle: {}
 });
 
 export const mutations = {
@@ -9,6 +12,15 @@ export const mutations = {
   },
   setFilm: (state, film) => {
     state.film = film;
+  },
+  setLocation: (state, location) => {
+    state.location = location;
+  },
+  setPerson: (state, person) => {
+    state.person = person;
+  },
+  setVehicle: (state, vehicle) => {
+    state.vehicle = vehicle;
   }
 };
 
@@ -28,6 +40,30 @@ export const actions = {
     } catch (e) {
       throw Error("API Error occurred.");
     }
+  },
+  async getLocation({ commit }, id) {
+    try {
+      const location = await this.$axios.$get(`/api/locations/${id}`);
+      commit("setLocation", location);
+    } catch (e) {
+      throw Error("API Error occurred.");
+    }
+  },
+  async getPerson({ commit }, id) {
+    try {
+      const person = await this.$axios.$get(`/api/people/${id}`);
+      commit("setPerson", person);
+    } catch (e) {
+      throw Error("API Error occurred.");
+    }
+  },
+  async getVehicle({ commit }, id) {
+    try {
+      const vehicle = await this.$axios.$get(`/api/vehicles/${id}`);
+      commit("setVehicle", vehicle);
+    } catch (e) {
+      throw Error("API Error occurred.");
+    }
   }
 };