WL-31 - Pass title as props on Hero component

components/Hero.vue

@@ -6,9 +6,33 @@
       class="rounded-3xl bg-white w-3/4 sm:w-1/2 max-w-lg mx-auto p-6 shadow-xl text-center"
     >
       <Logo />
+      <!-- TODO: [WL-30] Create fliping avatar
+        even: {
+          type: [Component, String],
+          required: true
+        },
+        odd: {
+          type: [Component, String],
+          default: null
+        }
+      -->
+
+      <!-- <div
+        class="w-24 h-24 md:w-32 md:h-32 overflow-hidden relative rounded-full"
+      >
+        <img
+          id="brand-member"
+          class="bg-cover absolute"
+          src="~/assets/images/noe.jpg"
+          alt="Noé Viricel"
+        />
+      </div> -->
+
       <h1 class="font-mono text-2xl">
-        wazo-lab.io
+        {{ title }}
       </h1>
+
+      <!-- TODO: Pass array of links -->
       <div class="mt-4 hidden sm:block">
         <a
           href="#projects"
@@ -32,11 +56,45 @@
 </template>
 
 <script>
-export default {};
+import Logo from "@/components/Logo";
+
+export default {
+  components: { Logo },
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+    // links: {
+    //   type: [Array, Object],
+    //   default: () => {
+    //     return {
+    //       title: "",
+    //       url: "",
+    //       target: "",
+    //       rel: ""
+    //     };
+    //   },
+    //   validator: () => {
+    //     const skeleton = [
+    //       {
+    //         title: "",
+    //         url: "",
+    //         target: "",
+    //         rel: ""
+    //       }
+    //     ];
+    //   }
+    // }
+  }
+};
 </script>
 
 <style>
 .hero {
   height: 460px;
 }
+
+/* #brand-member {
+} */
 </style>

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Header />
-    <Hero />
+    <Hero title="wazo-lab.io" />
     <Grid :dataSource="projects" />
     <Contact />
   </div>

test/Hero.spec.js

@@ -0,0 +1,27 @@
+import { mount } from "@vue/test-utils";
+import Hero from "@/components/Hero.vue";
+
+describe("Hero", () => {
+  const factory = propsData => {
+    return mount(Hero, {
+      propsData: {
+        ...propsData
+      }
+    });
+  };
+
+  it("throw an error when no title", () => {
+    expect(() => {
+      factory()
+        .find("h1")
+        .toThrow("Missing required prop: 'title'");
+    });
+  });
+
+  it("should have a title", () => {
+    const wrapper = factory({
+      title: "Hero"
+    });
+    expect(wrapper.find("h1").text()).toContain("Hero");
+  });
+});