@shopbite-de/storefront 1.2.8 → 1.4.0

package/test/nuxt/useInterval.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { useInterval } from "../../app/composables/useInterval";
+import { mount } from "@vue/test-utils";
+import { defineComponent } from "vue";
+
+describe("useInterval", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it("should start interval on mount and call callback", async () => {
+    const callback = vi.fn();
+    const TestComponent = defineComponent({
+      setup() {
+        useInterval(callback, 1000);
+        return {};
+      },
+      template: "<div></div>",
+    });
+
+    const wrapper = mount(TestComponent);
+
+    expect(callback).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    wrapper.unmount();
+  });
+
+  it("should clear interval on unmount", () => {
+    const callback = vi.fn();
+    const TestComponent = defineComponent({
+      setup() {
+        useInterval(callback, 1000);
+        return {};
+      },
+      template: "<div></div>",
+    });
+
+    const wrapper = mount(TestComponent);
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    wrapper.unmount();
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1); // Should not have increased
+  });
+});

package/test/nuxt/useProductConfigurator.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useProductConfigurator } from "../../app/composables/useProductConfigurator";
+
+
+const {
+  mockInvoke,
+  mockConfigurator,
+  mockProduct,
+} = vi.hoisted(() => ({
+  mockInvoke: vi.fn(),
+  mockConfigurator: { value: [] },
+  mockProduct: { value: { id: "p1", optionIds: [], options: [] } },
+}));
+
+// Use vi.mock for explicit imports
+vi.mock("@shopware/composables", () => ({
+  useShopwareContext: () => ({
+    apiClient: {
+      invoke: mockInvoke,
+    },
+  }),
+  useProductConfigurator: () => ({
+    handleChange: vi.fn(),
+  }),
+  useProduct: () => ({
+    configurator: mockConfigurator,
+    product: mockProduct,
+  }),
+}));
+
+describe("useProductConfigurator", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfigurator.value = [];
+    mockProduct.value = {
+      id: "p1",
+      optionIds: [],
+      options: []
+    } as any;
+  });
+
+  it("should initialize with selected options from product", () => {
+    mockConfigurator.value = [
+      {
+        id: "g1",
+        name: "Size",
+        options: [{ id: "o1", name: "Small" }]
+      }
+    ] as any;
+    mockProduct.value = {
+      id: "p1-v1",
+      parentId: "p1",
+      optionIds: ["o1"],
+      options: [{ id: "o1" }]
+    } as any;
+
+    const { isLoadingOptions } = useProductConfigurator();
+    expect(isLoadingOptions.value).toBe(true);
+  });
+
+  it("should find variant for selected options", async () => {
+    mockProduct.value = { parentId: "parent-1" } as any;
+    mockInvoke.mockResolvedValue({
+      data: {
+        elements: [{ id: "variant-1" }]
+      }
+    });
+
+    const { findVariantForSelectedOptions } = useProductConfigurator();
+    const result = await findVariantForSelectedOptions({ "Size": "o1" });
+
+    expect(mockInvoke).toHaveBeenCalledWith("readProduct post /product", expect.any(Object));
+    expect(result).toEqual({ id: "variant-1" });
+  });
+
+  it("should return undefined on error in findVariantForSelectedOptions", async () => {
+    mockInvoke.mockRejectedValue(new Error("API Error"));
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { findVariantForSelectedOptions } = useProductConfigurator();
+    const result = await findVariantForSelectedOptions({ "Size": "o1" });
+
+    expect(result).toBeUndefined();
+    expect(consoleSpy).toHaveBeenCalled();
+    consoleSpy.mockRestore();
+  });
+});

package/{app/composables → test/nuxt}/useProductEvents.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { useProductEvents } from "./useProductEvents";
+import { useProductEvents } from "../../app/composables/useProductEvents";
 import { nextTick } from "vue";
 
 /**

package/test/nuxt/useProductVariants.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect } from "vitest";
+import { useProductVariants } from "../../app/composables/useProductVariants";
+import { ref } from "vue";
+
+describe("useProductVariants", () => {
+  it("should return empty object when no settings provided", () => {
+    const settings = ref([]);
+    const { variants } = useProductVariants(settings as any);
+    expect(variants.value).toEqual({});
+  });
+
+  it("should group options by group id", () => {
+    const settings = ref([
+      {
+        option: {
+          id: "opt-1",
+          name: "Small",
+          group: {
+            id: "group-size",
+            name: "Size",
+            translated: { name: "Größe" }
+          },
+          translated: { name: "Klein" }
+        }
+      },
+      {
+        option: {
+          id: "opt-2",
+          name: "Large",
+          group: {
+            id: "group-size",
+            name: "Size",
+            translated: { name: "Größe" }
+          },
+          translated: { name: "Groß" }
+        }
+      },
+      {
+        option: {
+          id: "opt-3",
+          name: "Red",
+          group: {
+            id: "group-color",
+            name: "Color",
+            translated: { name: "Farbe" }
+          },
+          translated: { name: "Rot" }
+        }
+      }
+    ]);
+
+    const { variants } = useProductVariants(settings as any);
+    
+    expect(variants.value["group-size"]).toBeDefined();
+    expect(variants.value["group-size"].name).toBe("Größe");
+    expect(variants.value["group-size"].options).toHaveLength(2);
+    expect(variants.value["group-size"].options[0]).toEqual({
+      label: "Klein",
+      value: "opt-1",
+      productId: "opt-1"
+    });
+
+    expect(variants.value["group-color"]).toBeDefined();
+    expect(variants.value["group-color"].name).toBe("Farbe");
+    expect(variants.value["group-color"].options).toHaveLength(1);
+  });
+
+  it("should avoid duplicate options", () => {
+    const settings = ref([
+      {
+        option: {
+          id: "opt-1",
+          name: "Small",
+          group: { id: "group-size", name: "Size" }
+        }
+      },
+      {
+        option: {
+          id: "opt-1",
+          name: "Small",
+          group: { id: "group-size", name: "Size" }
+        }
+      }
+    ]);
+
+    const { variants } = useProductVariants(settings as any);
+    expect(variants.value["group-size"].options).toHaveLength(1);
+  });
+});

package/test/nuxt/useProductVariantsZwei.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from "vitest";
+import { useProductVariantsZwei } from "../../app/composables/useProductVariantsZwei";
+import { ref } from "vue";
+
+describe("useProductVariantsZwei", () => {
+  it("should return empty object when no settings provided", () => {
+    const settings = ref([]);
+    const { variants } = useProductVariantsZwei(settings);
+    expect(variants.value).toEqual({});
+  });
+
+  it("should group options by group", () => {
+    const settings = ref([
+      {
+        id: "group-size",
+        name: "Size",
+        translated: { name: "Größe" },
+        options: [
+          { id: "opt-1", name: "Small", translated: { name: "Klein" } },
+          { id: "opt-2", name: "Large", translated: { name: "Groß" } }
+        ]
+      }
+    ]);
+
+    const { variants } = useProductVariantsZwei(settings);
+    
+    expect(variants.value["group-size"]).toBeDefined();
+    expect(variants.value["group-size"]?.name).toBe("Größe");
+    expect(variants.value["group-size"]?.options).toHaveLength(2);
+    expect(variants.value["group-size"]?.options[0]?.label).toBe("Klein");
+  });
+
+  it("should avoid duplicate options", () => {
+    const settings = ref([
+      {
+        id: "group-size",
+        name: "Size",
+        options: [
+          { id: "opt-1", name: "Small" },
+          { id: "opt-1", name: "Small" }
+        ]
+      }
+    ]);
+
+    const { variants } = useProductVariantsZwei(settings);
+    expect(variants.value["group-size"]?.options).toHaveLength(1);
+  });
+});

package/test/nuxt/useScrollAnimation.test.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useScrollAnimation } from "../../app/composables/useScrollAnimation";
+import { mount } from "@vue/test-utils";
+import { defineComponent, nextTick } from "vue";
+
+describe("useScrollAnimation", () => {
+  let observeMock: any;
+  let unobserveMock: any;
+  let disconnectMock: any;
+  let intersectionCallback: any;
+
+  beforeEach(() => {
+    observeMock = vi.fn();
+    unobserveMock = vi.fn();
+    disconnectMock = vi.fn();
+
+    // Mock IntersectionObserver
+    global.IntersectionObserver = vi.fn().mockImplementation(function (callback) {
+      intersectionCallback = callback;
+      this.observe = observeMock;
+      this.unobserve = unobserveMock;
+      this.disconnect = disconnectMock;
+    }) as any;
+  });
+
+  it("should initialize with isVisible false", () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { isVisible, elementRef } = useScrollAnimation();
+        return { isVisible, elementRef };
+      },
+      template: '<div ref="elementRef"></div>',
+    });
+
+    const wrapper = mount(TestComponent);
+    expect(wrapper.vm.isVisible).toBe(false);
+  });
+
+  it("should start observing on mount", async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { isVisible, elementRef } = useScrollAnimation();
+        return { isVisible, elementRef };
+      },
+      template: '<div ref="elementRef"></div>',
+    });
+
+    mount(TestComponent);
+    await nextTick();
+
+    expect(global.IntersectionObserver).toHaveBeenCalled();
+    expect(observeMock).toHaveBeenCalled();
+  });
+
+  it("should set isVisible to true when intersecting and stop observing", async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { isVisible, elementRef } = useScrollAnimation();
+        return { isVisible, elementRef };
+      },
+      template: '<div ref="elementRef"></div>',
+    });
+
+    const wrapper = mount(TestComponent);
+    await nextTick();
+
+    // Simulate intersection
+    const mockEntry = { isIntersecting: true, target: wrapper.element };
+    intersectionCallback([mockEntry]);
+
+    await nextTick();
+    expect(wrapper.vm.isVisible).toBe(true);
+    expect(unobserveMock).toHaveBeenCalledWith(wrapper.element);
+  });
+
+  it("should not set isVisible to true when not intersecting", async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { isVisible, elementRef } = useScrollAnimation();
+        return { isVisible, elementRef };
+      },
+      template: '<div ref="elementRef"></div>',
+    });
+
+    const wrapper = mount(TestComponent);
+    await nextTick();
+
+    // Simulate non-intersection
+    const mockEntry = { isIntersecting: false, target: wrapper.element };
+    intersectionCallback([mockEntry]);
+
+    await nextTick();
+    expect(wrapper.vm.isVisible).toBe(false);
+    expect(unobserveMock).not.toHaveBeenCalled();
+  });
+});

package/test/nuxt/useShopBiteConfig.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { useShopBiteConfig } from "~/composables/useShopBiteConfig";
+
+const {
+  mockInvoke,
+  mockDeliveryTime,
+  mockIsCheckoutEnabled,
+} = vi.hoisted(() => ({
+  mockInvoke: vi.fn(),
+  mockDeliveryTime: { value: 0 },
+  mockIsCheckoutEnabled: { value: false },
+}));
+
+mockNuxtImport("useShopwareContext", () => () => ({
+  apiClient: {
+    invoke: mockInvoke,
+  },
+}));
+
+mockNuxtImport("useContext", () => (key: string) => {
+  if (key === "deliveryTime") return mockDeliveryTime;
+  if (key === "isCheckoutActive") return mockIsCheckoutEnabled;
+  return { value: null };
+});
+
+describe("useShopBiteConfig", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockDeliveryTime.value = 0;
+    mockIsCheckoutEnabled.value = false;
+  });
+
+  it("should initialize with values from context", () => {
+    mockDeliveryTime.value = 30;
+    mockIsCheckoutEnabled.value = true;
+    const { deliveryTime, isCheckoutEnabled } = useShopBiteConfig();
+    expect(deliveryTime.value).toBe(30);
+    expect(isCheckoutEnabled.value).toBe(true);
+  });
+
+  it("should refresh values from API", async () => {
+    mockInvoke.mockResolvedValue({
+      data: {
+        deliveryTime: 45,
+        isCheckoutEnabled: true
+      }
+    });
+
+    const { refresh, deliveryTime, isCheckoutEnabled } = useShopBiteConfig();
+    await refresh();
+
+    expect(mockInvoke).toHaveBeenCalledWith(
+      "shopbite.config.get get /shopbite/config",
+    );
+    expect(deliveryTime.value).toBe(45);
+    expect(isCheckoutEnabled.value).toBe(true);
+    expect(mockDeliveryTime.value).toBe(45);
+    expect(mockIsCheckoutEnabled.value).toBe(true);
+  });
+});

package/test/nuxt/useTopSellers.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { useTopSellers } from "../../app/composables/useTopSellers";
+
+const { mockInvoke } = vi.hoisted(() => ({
+  mockInvoke: vi.fn(),
+}));
+
+mockNuxtImport("useShopwareContext", () => {
+  return () => ({
+    apiClient: {
+      invoke: mockInvoke,
+    },
+  });
+});
+
+describe("useTopSellers", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should load top sellers successfully", async () => {
+    const mockElements = [{ id: "1", name: "Top Product" }];
+    mockInvoke.mockResolvedValue({
+      data: {
+        elements: mockElements,
+      },
+    });
+
+    const { loadTopSellers } = useTopSellers();
+    const result = await loadTopSellers();
+
+    expect(mockInvoke).toHaveBeenCalledWith("getTopSellers post /product", expect.any(Object));
+    expect(result).toEqual(mockElements);
+  });
+
+  it("should return empty array on error", async () => {
+    mockInvoke.mockRejectedValue(new Error("Network error"));
+    
+    // Silence console.error for this test
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { loadTopSellers } = useTopSellers();
+    const result = await loadTopSellers();
+
+    expect(result).toEqual([]);
+    expect(consoleSpy).toHaveBeenCalled();
+    consoleSpy.mockRestore();
+  });
+});

package/test/nuxt/useWishlistActions.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { useWishlistActions } from "../../app/composables/useWishlistActions";
+
+
+const {
+  mockAddProducts,
+  mockRefreshCart,
+  mockToastAdd,
+  mockTriggerProductAdded,
+  mockClearWishlist,
+  mockTrackEvent,
+} = vi.hoisted(() => ({
+  mockAddProducts: vi.fn(),
+  mockRefreshCart: vi.fn(),
+  mockToastAdd: vi.fn(),
+  mockTriggerProductAdded: vi.fn(),
+  mockClearWishlist: vi.fn(),
+  mockTrackEvent: vi.fn(),
+}));
+
+mockNuxtImport("useCart", () => () => ({
+  addProducts: mockAddProducts,
+  refreshCart: mockRefreshCart,
+}));
+
+mockNuxtImport("useToast", () => () => ({
+  add: mockToastAdd,
+}));
+
+mockNuxtImport("useProductEvents", () => () => ({
+  triggerProductAdded: mockTriggerProductAdded,
+}));
+
+mockNuxtImport("useWishlist", () => () => ({
+  clearWishlist: mockClearWishlist,
+}));
+
+mockNuxtImport("useTrackEvent", () => mockTrackEvent);
+
+describe("useWishlistActions", () => {
+  const mockProduct = {
+    id: "prod-1",
+    translated: { name: "Test Product" },
+    productNumber: "SW123",
+  } as any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should clear wishlist", async () => {
+    const { clearWishlistHandler, isLoading } = useWishlistActions();
+    await clearWishlistHandler();
+    expect(mockClearWishlist).toHaveBeenCalled();
+    expect(mockToastAdd).toHaveBeenCalledWith(expect.objectContaining({ title: "Merkliste geleert" }));
+    expect(isLoading.value).toBe(false);
+  });
+
+  it("should add single item to cart", async () => {
+    const { addSingleItemToCart } = useWishlistActions();
+    mockAddProducts.mockResolvedValue({ id: "cart-1" });
+
+    await addSingleItemToCart(mockProduct);
+
+    expect(mockAddProducts).toHaveBeenCalledWith([{ id: "prod-1", quantity: 1, type: "product" }]);
+    expect(mockRefreshCart).toHaveBeenCalled();
+    expect(mockTriggerProductAdded).toHaveBeenCalled();
+    expect(mockToastAdd).toHaveBeenCalledWith(expect.objectContaining({ title: "In den Warenkorb gelegt" }));
+    expect(mockTrackEvent).toHaveBeenCalledWith("add_to_cart", expect.any(Object));
+  });
+
+  it("should warn when adding a base product with variants", async () => {
+    const baseProduct = { ...mockProduct, childCount: 2 };
+    const { addSingleItemToCart } = useWishlistActions();
+
+    await addSingleItemToCart(baseProduct);
+
+    expect(mockAddProducts).not.toHaveBeenCalled();
+    expect(mockToastAdd).toHaveBeenCalledWith(expect.objectContaining({ title: "Variante erforderlich" }));
+  });
+
+  it("should add all items to cart", async () => {
+    const products = [
+      { id: "p1", translated: { name: "P1" } },
+      { id: "p2", translated: { name: "P2" } },
+    ] as any[];
+    const { addAllItemsToCart, isAddingToCart } = useWishlistActions();
+    mockAddProducts.mockResolvedValue({ id: "cart-1" });
+
+    await addAllItemsToCart(products);
+
+    expect(mockAddProducts).toHaveBeenCalledWith([
+      { id: "p1", quantity: 1, type: "product" },
+      { id: "p2", quantity: 1, type: "product" },
+    ]);
+    expect(mockToastAdd).toHaveBeenCalledWith(expect.objectContaining({ title: "Produkte hinzugefügt" }));
+    expect(isAddingToCart.value).toBe(false);
+  });
+
+  it("should handle empty products in addAllItemsToCart", async () => {
+    const { addAllItemsToCart } = useWishlistActions();
+    await addAllItemsToCart([]);
+    expect(mockAddProducts).not.toHaveBeenCalled();
+  });
+
+  it("should skip base products in addAllItemsToCart", async () => {
+    const products = [
+      { id: "p1", translated: { name: "P1" } },
+      { id: "p2", childCount: 1, translated: { name: "P2" } },
+    ] as any[];
+    const { addAllItemsToCart } = useWishlistActions();
+    mockAddProducts.mockResolvedValue({ id: "cart-1" });
+
+    await addAllItemsToCart(products);
+
+    expect(mockAddProducts).toHaveBeenCalledWith([
+      { id: "p1", quantity: 1, type: "product" },
+    ]);
+    expect(mockToastAdd).toHaveBeenCalledWith(expect.objectContaining({
+      description: expect.stringContaining("1 Produkte hinzugefügt. 1 Produkt(e) übersprungen")
+    }));
+  });
+});

package/vitest.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "vitest/config";
+import { defineVitestProject } from "@nuxt/test-utils/config";
+
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        test: {
+          name: "unit",
+          include: ["test/unit/*.{test,spec}.ts"],
+          environment: "node",
+        },
+      },
+      await defineVitestProject({
+        test: {
+          name: "nuxt",
+          include: ["test/nuxt/*.{test,spec}.ts"],
+          environment: "nuxt",
+        },
+      }),
+    ],
+  },
+});