Add param validation + Test for Film page

pages/films/_id.spec.js

@@ -0,0 +1,66 @@
+import { mount } from "@vue/test-utils";
+import axios from "axios";
+import Film from "./_id";
+import mockFilms from "@/test/fake-films.json";
+
+let $route = {
+  path: "/films",
+  params: {
+    id: "2baf70d1-42bb-4437-b551-e5fed5a87abe"
+  }
+};
+
+const mockFilm = mockFilms.filter(o => o.id === $route.params.id);
+
+jest.mock("axios", () => ({
+  $get: jest.fn(() => mockFilm)
+}));
+
+describe("Film page", () => {
+  it("should render Film page instance", () => {
+    const wrapper = mount(Film);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it("tests params validation", () => {
+    expect(Film.validate({ params: $route.params })).toBe(true);
+    expect(
+      Film.validate({
+        params: { id: "2baf70d1-42bb-4437-b551-e5fed5a87abe-1234" }
+      })
+    ).toBe(false);
+    expect(
+      Film.validate({
+        params: { id: "2baf7e0d1-42bb-4437-b551-e5fed5a87abe" }
+      })
+    ).toBe(false);
+  });
+
+  it("should get film from Ghibli API", async () => {
+    let wrapper = mount(Film, {
+      mocks: {
+        $route,
+        $axios: axios
+      }
+    });
+
+    expect(
+      (
+        await wrapper.vm.$options.asyncData({
+          $axios: axios,
+          params: $route.params
+        })
+      ).film
+    ).toEqual(mockFilm);
+
+    // // Init page with mocked asyncData
+    // wrapper = shallowMount(Film, {
+    //   mocks: {
+    //     films: (await wrapper.vm.$options.asyncData(wrapper.vm)).films,
+    //     $axios: axios
+    //   }
+    // });
+
+    // expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
+  });
+});

pages/films/_id.vue

@@ -11,7 +11,10 @@ export default {
     titleTemplate: "%s - Film"
   },
   validate({ params }) {
-    return /([\w]{8}-[\w]{4}-[\w]{4}-[\w]{4}-[\w]{12})/.test(params.id);
+    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({ $axios, params }) {
     const film = await $axios.$get(`/api/films/${params.id}`);