Refactor Header module

components/Header/Header.spec.js

@@ -0,0 +1,18 @@
+import { mount, RouterLinkStub } from "@vue/test-utils";
+import Header from "./";
+
+describe("Header", () => {
+  it("should render Header instance", () => {
+    const wrapper = mount(Header, { stubs: ["router-link"] });
+    expect(wrapper.find("h1").text()).toBe("Ghibli");
+  });
+
+  it("should redirect to Home page when clicking on brand logo", () => {
+    const wrapper = mount(Header, {
+      stubs: {
+        RouterLink: RouterLinkStub
+      }
+    });
+    expect(wrapper.findComponent(RouterLinkStub).props().to).toBe("/");
+  });
+});

components/Header/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <header
+    id="header"
+    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 py-3 shadow-md"
+  >
+    <router-link to="/" class="flex w-auto h-full items-center">
+      <img
+        class="h-full mr-4"
+        src="https://avatars2.githubusercontent.com/u/1080062?s=200&v=4"
+        alt="PeopleDoc - Icon"
+      />
+      <h1 class="text-2xl font-light tracking-wide">Ghibli</h1>
+    </router-link>
+  </header>
+</template>
+
+<script>
+export default {
+  name: "Header"
+};
+</script>
+
+<style></style>