Test Hero component

components/Hero.vue

@@ -5,7 +5,6 @@
     <div
       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],
@@ -17,38 +16,27 @@
         }
       -->
 
-      <!-- <div
-        class="w-24 h-24 md:w-32 md:h-32 overflow-hidden relative rounded-full"
-      >
       <img
-          id="brand-member"
+        class="w-24 md:w-32 hero-avatar mx-auto mb-6"
-          class="bg-cover absolute"
+        src="~/assets/images/noe.png"
-          src="~/assets/images/noe.jpg"
+        :alt="avatar.alt"
-          alt="Noé Viricel"
       />
-      </div> -->
 
       <h1 class="font-mono text-2xl">
         {{ title }}
       </h1>
 
-      <!-- TODO: Pass array of links -->
+      <div class="hero-actions mt-4 hidden sm:flex justify-center">
-      <div class="mt-4 hidden sm:block">
+        <!-- TODO: Create a Button component -->
         <a
-          href="#projects"
+          :href="action.url"
-          target="_self"
+          :target="action.target"
-          rel="noopener noreferrer"
+          :rel="action.rel"
-          class="button--green"
+          class="button--green mx-2"
+          v-for="(action, index) in actions"
+          :key="index"
         >
-          Projects
+          {{ action.title }}
-        </a>
-        <a
-          href="#contact-me"
-          target="_self"
-          rel="noopener noreferrer"
-          class="button--grey"
-        >
-          Contact Me
         </a>
       </div>
     </div>
@@ -63,29 +51,39 @@ export default {
   props: {
     title: {
       type: String,
-      required: true
+      required: true,
+      validator: string => {
+        return string.length && string.length <= 15;
+      }
+    },
+    avatar: {
+      type: Object,
+      default: () => {
+        return {
+          src: "noe.png",
+          alt: "Noé Viricel"
+        };
+      }
+    },
+    actions: {
+      type: [Array, Object],
+      validator: function(o) {
+        if (o.length <= 5) {
+          if (o.length) {
+            for (let index = 0; index < o.length; index++) {
+              return (
+                o[index].hasOwnProperty("title") &&
+                o[index].hasOwnProperty("url") &&
+                o[index].hasOwnProperty("target") &&
+                o[index].hasOwnProperty("rel")
+              );
+            }
+          }
+        }
+
+        return false;
+      }
     }
-    // links: {
-    //   type: [Array, Object],
-    //   default: () => {
-    //     return {
-    //       title: "",
-    //       url: "",
-    //       target: "",
-    //       rel: ""
-    //     };
-    //   },
-    //   validator: () => {
-    //     const skeleton = [
-    //       {
-    //         title: "",
-    //         url: "",
-    //         target: "",
-    //         rel: ""
-    //       }
-    //     ];
-    //   }
-    // }
   }
 };
 </script>
@@ -94,7 +92,4 @@ export default {
 .hero {
   height: 460px;
 }
-
-/* #brand-member {
-} */
 </style>

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Header />
-    <Hero title="wazo-lab.io" />
+    <Hero title="wazo-lab.io" :actions="heroActions" />
     <Grid :dataSource="projects" />
     <Contact />
   </div>
@@ -13,7 +13,21 @@ import projects from "@/content/projects.json";
 export default {
   data() {
     return {
-      projects: projects
+      projects: projects,
+      heroActions: [
+        {
+          title: "Projects",
+          url: "#projects",
+          target: "_self",
+          rel: "noopen noreferrer"
+        },
+        {
+          title: "Contact",
+          url: "#contact",
+          target: "_self",
+          rel: "noopen noreferrer"
+        }
+      ]
     };
   }
 };

test/Header.spec.js

@@ -0,0 +1,13 @@
+import { mount } from "@vue/test-utils";
+import Header from "@/components/Header.vue";
+
+describe("Header", () => {
+  it("should display proper social networks", () => {
+    const wrapper = mount(Header);
+    const divs = wrapper.findAll("a");
+    expect(divs.at(0).attributes("href")).toBe("https://github.com/wazolab");
+    expect(divs.at(1).attributes("href")).toBe(
+      "https://www.linkedin.com/in/no%C3%A9-v-395bba109"
+    );
+  });
+});

test/Hero.spec.js

@@ -2,26 +2,84 @@ import { mount } from "@vue/test-utils";
 import Hero from "@/components/Hero.vue";
 
 describe("Hero", () => {
-  const factory = propsData => {
+  test("props validation.", () => {
-    return mount(Hero, {
+    expect(Hero.props).toMatchObject({
-      propsData: {
+      title: {
-        ...propsData
+        type: String,
+        required: true
+      },
+      avatar: {
+        type: Object
+      },
+      actions: {
+        type: [Array, Object]
       }
     });
-  };
 
-  it("throw an error when no title", () => {
+    // Title
-    expect(() => {
+    expect(Hero.props.title.validator("Hero")).toBe(true);
-      factory()
+    expect(Hero.props.title.validator("Herooooooooooooo")).toBe(false);
-        .find("h1")
+
-        .toThrow("Missing required prop: 'title'");
+    // Avatar
-    });
+    expect(Hero.props.avatar.type).toBe(Object);
+
+    // Actions
+    expect(Hero.props.actions.validator([{}])).toBe(false);
+    expect(Hero.props.actions.validator([{}, {}, {}, {}, {}, {}])).toBe(false);
+    expect(
+      Hero.props.actions.validator([
+        {
+          title: "Projects",
+          target: "_self",
+          rel: "noopen noreferrer",
+          type: "freelance"
+        }
+      ])
+    ).toBe(false);
+    expect(
+      Hero.props.actions.validator([
+        {
+          title: "Projects",
+          url: "#projects",
+          target: "_self",
+          rel: "noopen noreferrer"
+        }
+      ])
+    ).toBe(true);
   });
 
-  it("should have a title", () => {
+  test("props binding.", async () => {
-    const wrapper = factory({
+    const wrapper = mount(Hero, {
+      propsData: {
         title: "Hero"
+      }
     });
     expect(wrapper.find("h1").text()).toContain("Hero");
+
+    // Actions
+    let actions = wrapper.findAll(".hero-actions a");
+    expect(actions.length).toBe(0);
+
+    await wrapper.setProps({
+      actions: [
+        {
+          title: "Projects",
+          url: "#projects",
+          target: "_self",
+          rel: "noopen noreferrer"
+        },
+        {
+          title: "Contact",
+          url: "#contact",
+          target: "_self",
+          rel: "noopen noreferrer"
+        }
+      ]
+    });
+
+    actions = wrapper.findAll(".hero-actions a");
+
+    expect(actions.length).toBe(2);
+    expect(actions.at(1).text()).toBe("Contact");
   });
 });