Test Hero component

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 => {
-    return mount(Hero, {
-      propsData: {
-        ...propsData
+  test("props validation.", () => {
+    expect(Hero.props).toMatchObject({
+      title: {
+        type: String,
+        required: true
+      },
+      avatar: {
+        type: Object
+      },
+      actions: {
+        type: [Array, Object]
       }
     });
-  };
 
-  it("throw an error when no title", () => {
-    expect(() => {
-      factory()
-        .find("h1")
-        .toThrow("Missing required prop: 'title'");
-    });
+    // Title
+    expect(Hero.props.title.validator("Hero")).toBe(true);
+    expect(Hero.props.title.validator("Herooooooooooooo")).toBe(false);
+
+    // 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", () => {
-    const wrapper = factory({
-      title: "Hero"
+  test("props binding.", async () => {
+    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");
   });
 });