Merge pull request #105 from wetix/ryan-test

fix: appbar submenu, added new test cases

components/app-bar/src/AppBar.svelte

@@ -19,11 +19,15 @@
   let subMenus: SubNavItem[] = [];
   let subnavStyle = "";
   $: selectedIndex = leadingItems.findIndex((v) => v.key === selectedKey);
+
+  //for selecting submenu
   $: {
     const menus = (leadingItems[selectedIndex] || {}).subItems || [];
-    if (menus.length > 0) selectedSubmenuKey = menus[0].key as string;
+    if (menus.length > 0 && selectedSubmenuKey === "")
+      selectedSubmenuKey = menus[0].key as string;
     subMenus = menus;
   }
+
   $: if (subnav) {
     const el = subnav.querySelector(`[data-key="${selectedSubmenuKey}"]`);
     if (el) {

components/docker/__test__/Docker.spec.ts

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/svelte";
+import { render, fireEvent } from "@testing-library/svelte";
 import Docker from "../src/Docker.svelte";
 import SlotTest from "../../../test/slot/SlotTest.svelte";
 
@@ -45,22 +45,14 @@ describe("Docker", () => {
     expect(docker.classList).not.toContain("resp-docker--close");
   });
 
-  it("should close", () => {
-    // const { container, rerender } = render(Docker, { props });
-    // const docker = container.querySelector("aside") as HTMLElement;
-    // //test if open
-    // expect(docker.classList).not.toContain("resp-docker--close");
-    // rerender({
-    //   id: "docker-id",
-    //   title: "docker title",
-    //   class: "docker-custom",
-    //   open: false,
-    //   caption: "test caption",
-    //   maskClosable: true,
-    //   placement: "left",
-    //   style: "color: white;"
-    // });
-    // //test if closed
-    // expect(docker.classList).toContain("resp-docker--close");
-  });
+  it("should close", async () => {
+    const { container } = render(Docker, { props });
+    let docker = container.querySelector("aside") as HTMLElement;
+    //test if open
+    expect(docker.classList).not.toContain("resp-docker--close");
+    //click
+    await fireEvent.click(container.querySelector(".resp-docker__overlay") as Element);
+    //test if closed
+    expect(docker.classList).toContain("resp-docker--close");
+  })
 });

components/dropdown/__test__/Dropdown.spec.ts

@@ -0,0 +1,102 @@
+import {render, fireEvent} from "@testing-library/svelte";
+import Dropdown from "../src/Dropdown.svelte";
+import SlotTest from "../../../test/slot/SlotTest.svelte";
+
+describe("Dropdown", () => {
+  //dropdown items
+  const items = [
+    {
+      label: "label 1",
+      disabled: false,
+      divider: false
+    },
+    {
+      label: "label 2",
+      disabled: false,
+      divider: false
+    },
+    {
+      label: "label 3",
+      disabled: false,
+      divider: false
+    }
+  ];
+
+  //click dropdown
+  const propsClick = {
+    id: "id",
+    class: "dropdown-click-custom",
+    disabled: false,
+    items: items,
+    value: ["1", "2", "3"],
+    dropdownTriggerMode: "click"
+  };
+
+  //hover dropdown
+  const propsHover = {
+    id: "id",
+    class: "dropdown-click-custom",
+    disabled: false,
+    items: items,
+    value: ["1", "2", "3"],
+    dropdownTriggerMode: "hover"
+  };
+
+  //context dropdown
+  const propsContext = {
+    id: "id",
+    class: "dropdown-click-custom",
+    disabled: false,
+    items: items,
+    value: ["1", "2", "3"],
+    dropdownTriggerMode: "contextmenu"
+  };
+
+  describe("click dropdown", () => {
+    it("should render with click", () => {
+      const result = render(Dropdown, {propsClick});
+      expect(() => result).not.toThrow();
+    });
+
+    it("slot test", () => {
+      const result = render(SlotTest, {props: {component: Dropdown, props: propsClick}});
+      expect(() => result).not.toThrow();
+    });
+
+    // it("should have correct props", () => {
+    //   const {container} = render(Dropdown, {propsClick});
+    //   const dropdown = container.querySelector(".responsive-ui-dropdown") as HTMLElement;
+    // });
+
+    // it("should perform correct action", () => {
+
+    // });
+
+  });
+
+  describe("hover dropdown", () => {
+    it("should render with hover", () => {
+      const result = render(Dropdown, {propsHover});
+      expect(() => result).not.toThrow();
+    });
+
+    it("slot test", () => {
+      const result = render(SlotTest, {props: {component: Dropdown, props: propsHover}});
+      expect(() => result).not.toThrow();
+    });
+
+  });
+
+  describe("hover context", () => {
+    it("should render with context", () => {
+      const result = render(Dropdown, {propsContext});
+      expect(() => result).not.toThrow();
+    });
+
+    it("slot test", () => {
+      const result = render(SlotTest, {props: {component: Dropdown, props: propsContext}});
+      expect(() => result).not.toThrow();
+    });
+
+  });
+})

components/ellipsis/__test__/Ellipsis.spec.ts

@@ -0,0 +1,32 @@
+import {render, fireEvent} from '@testing-library/svelte';
+import Ellipsis from '../src/Ellipsis.svelte';
+import SlotTest from '../../../test/slot/SlotTest.svelte';
+
+describe("Ellipsis", () => {
+  const props = {
+    id: "id",
+    title: "title",
+    class: "ellipsis-custom",
+    style: "width: 100%;"
+  };
+
+  it("should render", () => {
+    const result = render(Ellipsis, {props});
+    expect(() => result).not.toThrow();
+  });
+
+  it("should render slots", () => {
+    const result = render(SlotTest, {props: {component: Ellipsis, props}});
+    expect(() => result).not.toThrow();
+  });
+
+  it("click event", async () => {
+    const {component, container} = render(Ellipsis, {props});
+
+    const fn = jest.fn();
+    component.$on('click', fn);
+    await fireEvent.click(container.querySelector("#id") as HTMLElement);
+
+    expect(fn).toHaveBeenCalled();
+  });
+});

components/fab/__test__/FloatingActionButton.spec.ts

@@ -0,0 +1,41 @@
+import { render, fireEvent } from "@testing-library/svelte";
+import FloatingActionButton from "../src/FloatingActionButton.svelte";
+
+describe("FAB", () => {
+  const props = {
+    id: "id",
+    title: "test title",
+    class: "bottom-bar-custom",
+    label: "test label",
+    style: "background-color: white;"
+  };
+
+  it("render test", () => {
+    const result = render(FloatingActionButton, { props });
+    expect(() => result).not.toThrow();
+  });
+
+  it("props test", () => {
+    const {container} = render(FloatingActionButton, { props });
+    const fab = container.querySelector("." + props.class) as HTMLElement;
+
+    expect(fab.id).toEqual(props.id); //test id
+    expect(fab.title).toEqual(props.title); //test title
+    expect(fab.getAttribute("label")).toEqual(props.label); //test label
+    expect(fab.getAttribute("style")).toEqual(props.style); //test style
+  });
+
+  it("test click event", async () => {
+    const {container, component} = render(FloatingActionButton, { props });
+    const fab = container.querySelector("." + props.class) as HTMLElement;
+
+    const mock = jest.fn(); //test function
+    component.$on('click', mock); //set function onclick
+
+    //click
+    await fireEvent.click(fab);
+
+    //expect function
+    expect(mock).toHaveBeenCalled();
+  });
+});

components/hscroll/__test__/HScroll.spec.ts

@@ -0,0 +1,61 @@
+import {render, fireEvent} from '@testing-library/svelte';
+import HScroll from "../src/HScroll.svelte";
+import SlotTest from "../../../test/slot/SlotTest.svelte";
+
+describe("Horizontal Scroll", () => {
+  //click event
+  const props = {
+    id: "id",
+    title: "hscroll title",
+    class: "hscroll-custom",
+    scrollable: false,
+    style: "background-color: white;"
+  };
+
+  it("render test", () => {
+    const result = render(HScroll, { props });
+    expect(() => result).not.toThrow();
+  });
+
+  it("slot test", () => {
+    const result = render(SlotTest, { props: { component: HScroll, props } });
+    expect(() => result).not.toThrow();
+  });
+
+  it("should have correct props", () => {
+    const {container} = render(HScroll, { props });
+    const hScroll = container.querySelector("." + props.class) as HTMLElement;
+
+    expect(hScroll.id).toEqual(props.id); //id test
+    expect(hScroll.title).toEqual(props.title); //title test
+    expect(hScroll.getAttribute("style")).toEqual(props.style); //style test
+  });
+
+  it("click test", async () => {
+    const {container} = render(HScroll, { props });
+    const hScroll = container.querySelector(".resp-scroll") as HTMLElement;
+
+    //buttons
+    const prev = hScroll.querySelector(".resp-scroll__prev-icon > .resp-scroll__icon") as HTMLElement;
+    const next = hScroll.querySelector(".resp-scroll__next-icon > .resp-scroll__icon") as HTMLElement;
+
+    //mock fns
+    const mockPrev = jest.fn(() => {
+      console.log("prev");
+    });
+    const mockNext = jest.fn(() => {
+      console.log("next");
+    });
+
+    //set onclick
+    prev.onclick = mockPrev;
+    next.onclick = mockNext;
+
+    //click prev & expect
+    await fireEvent.click(prev);
+    expect(mockPrev).toHaveBeenCalled();
+    //click next & expect
+    await fireEvent.click(next);
+    expect(mockNext).toHaveBeenCalled();
+  });
+});