Add test spec for components/ui/tab.vue

components/ui/__tests__/tab.spec.js

@@ -0,0 +1,75 @@
+import tab from "../tab"
+import { mount } from "@vue/test-utils"
+
+const factory = (props, data) =>
+  mount(tab, {
+    propsData: props,
+    data: data ? () => data : undefined,
+    slots: {
+      default: '<div id="testdiv"></div>',
+    },
+  })
+
+describe("tab", () => {
+  test("mounts properly when needed props are passed in", () => {
+    const wrapper = factory({
+      label: "TestLabel",
+      icon: "TestIcon",
+      id: "testid",
+      selected: true,
+    })
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("mounts properly when selected prop is not passed", () => {
+    const wrapper = factory({
+      label: "TestLabel",
+      icon: "TestIcon",
+      id: "testid",
+    })
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("if 'selected' prop is not passed, it is set to false by default", () => {
+    const wrapper = factory({
+      label: "TestLabel",
+      icon: "TestIcon",
+      id: "testid",
+    })
+
+    expect(wrapper.props("selected")).toEqual(false)
+  })
+
+  test("if set active, the slot is shown", () => {
+    const wrapper = factory(
+      {
+        label: "TestLabel",
+        icon: "TestIcon",
+        id: "testid",
+        selected: true,
+      },
+      {
+        isActive: true,
+      }
+    )
+
+    expect(wrapper.find("#testdiv").element.parentElement).toBeVisible()
+  })
+
+  test("if not set active, the slot is not rendered", () => {
+    const wrapper = factory(
+      {
+        label: "TestLabel",
+        icon: "TestIcon",
+        id: "testid",
+      },
+      {
+        isActive: false,
+      }
+    )
+
+    expect(wrapper.find("#testdiv").element.parentElement).not.toBeVisible()
+  })
+})