@datev-research/mandat-shared-components/src/tabs/TabList.spec.ts

Shared Vue Components for the MANDAT B2B Showcase

import TabItem from "@/tabs/TabItem.vue";
import TabList from "@/tabs/TabList.vue";
import { mount } from "@vue/test-utils";
import { TabItemType } from "./TabItemType";

describe("TabList", () => {
  const mockModel: TabItemType[] = [
    { id: "tab1", label: "Tab 1" },
    { id: "tab2", label: "Tab 2" },
  ];

  it("renders all tab items", async () => {
    const wrapper = mount(TabList, {
      props: { model: mockModel },
    });

    expect(wrapper.findAllComponents(TabItem)).toHaveLength(mockModel.length);
  });

  it("emits itemChange event when a tab item is clicked", async () => {
    const wrapper = mount(TabList, {
      props: { model: mockModel },
    });

    const tabItem = wrapper.findAllComponents(TabItem)[0];
    await tabItem?.trigger("click");

    expect(wrapper.emitted("itemChange")).toHaveLength(1);
    const emitResult = wrapper.emitted("itemChange");
    if (emitResult) {
      expect(emitResult[0][0]).toBe(mockModel[0].id);
    }
  });

  it("sets active tab item when active prop is changed", async () => {
    const wrapper = mount(TabList, {
      props: { model: mockModel, active: mockModel[0].id },
    });

    expect(wrapper.vm.active).toBe(mockModel[0].id);

    await wrapper.setProps({ active: mockModel[1].id });
    expect(wrapper.vm.active).toBe(mockModel[1].id);
  });

  it("renders active tab item correctly", async () => {
    const wrapper = mount(TabList, {
      props: { model: mockModel, active: mockModel[0].id },
    });

    const tabItem = wrapper.findAllComponents(TabItem)[0];
    expect(tabItem?.props().active).toBe(true);

    const inactiveTabItem = wrapper.findAllComponents(TabItem)[1];
    expect(inactiveTabItem?.props().active).toBe(false);
  });
});