@shopbite-de/storefront 1.6.2 → 1.7.1

package/server/utils/shopware/adminApiClient.ts

@@ -0,0 +1,24 @@
+import { createAdminAPIClient } from "@shopware/api-client";
+import type { operations } from "@shopware/api-client/admin-api-types";
+
+/**
+ * Creates a Shopware Admin API client
+ */
+export function createAdminApiClient(baseURL: string, accessToken: string) {
+  return createAdminAPIClient<operations>({
+    baseURL,
+    accessToken,
+  });
+}
+
+/**
+ * Fetches sales channels using the Admin API client
+ */
+export async function getSalesChannels(client: any) {
+  const response = await client.invoke({
+    method: "GET",
+    path: "/api/v3/sales-channel",
+  });
+
+  return response.data;
+}

package/test/nuxt/Header.test.ts

@@ -1,23 +1,17 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { describe, it, expect, vi } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
 import Header from "~/components/Header.vue";
-import { ref, reactive, toRefs } from "vue";
+import { ref } from "vue";
 
-const mocks = vi.hoisted(() => ({
-  state: {
-    isLoggedIn: false,
-    isGuestSession: false,
-    user: null as any,
-  },
-  logout: vi.fn(),
+mockNuxtImport("useHeaderNavigation", () => () => ({
+  navi: ref([{ label: "Home", to: "/" }]),
 }));
 
-const reactiveState = reactive(mocks.state);
-
 mockNuxtImport("useUser", () => () => ({
-  ...toRefs(reactiveState),
-  logout: mocks.logout,
+  isLoggedIn: ref(false),
+  isGuestSession: ref(false),
+  user: ref(null),
+  logout: vi.fn(),
 }));
 
 mockNuxtImport("useShopBiteConfig", () => () => ({
@@ -28,97 +22,46 @@ mockNuxtImport("useCart", () => () => ({
   count: ref(0),
 }));
 
+mockNuxtImport("useToast", () => () => ({
+  add: vi.fn(),
+}));
+
 mockNuxtImport("useRuntimeConfig", () => () => ({
-  app: {
-    baseURL: "/",
-  },
-  public: {
-    site: {
-      name: "ShopBite",
-    },
-    shopware: {
-      devStorefrontUrl: "http://localhost:3000",
-    },
-  },
+  app: { baseURL: "/" },
+  public: { site: { name: "ShopBite" } },
 }));
 
 // Mock Nuxt Content queryCollection
 mockNuxtImport("queryCollection", () => (collection: string) => ({
   first: () =>
     Promise.resolve({
-      main: [],
       account: {
-        loggedIn: [
-          [{ label: "Mein Konto", type: "label" }],
-          [
-            { label: "Konto", icon: "i-lucide-user", to: "/konto" },
-            {
-              label: "Bestellungen",
-              icon: "i-lucide-pizza",
-              to: "/konto/bestellungen",
-            },
-          ],
-          [{ label: "Abmelden", icon: "i-lucide-log-out", action: "logout" }],
-        ],
-        loggedOut: [
-          [{ label: "Jetzt anmelden", type: "label" }],
-          [{ label: "Zur Anmeldung", icon: "i-lucide-user", to: "/anmelden" }],
-        ],
+        loggedIn: [],
+        loggedOut: [],
       },
     }),
 }));
 
 describe("Header", () => {
-  beforeEach(() => {
-    reactiveState.isLoggedIn = false;
-    reactiveState.isGuestSession = false;
-    reactiveState.user = null;
-    vi.clearAllMocks();
-  });
-
-  it("renders correctly when logged out", async () => {
+  it("renders structure correctly", async () => {
     const component = await mountSuspended(Header);
-    // Should show user icon
-    expect(component.html()).toContain("i-lucide:user");
-    // Should NOT show checkmark chip
-    expect(component.html()).not.toContain("✓");
-  });
 
-  it("renders correctly when logged in", async () => {
-    reactiveState.isLoggedIn = true;
-    reactiveState.user = { firstName: "John", lastName: "Doe" };
-    const component = await mountSuspended(Header);
+    const srOnlySiteName = component.find(".sr-only");
+    expect(srOnlySiteName.exists()).toBe(true);
+    expect(srOnlySiteName.text()).toBe("ShopBite");
+    expect(component.html()).toContain("i-lucide:phone");
+    expect(component.html()).toContain("i-lucide:shopping-cart");
 
-    // Should show checkmark chip
-    expect(component.html()).toContain("✓");
+    const navMenu = component.findComponent({ name: "UNavigationMenu" });
+    expect(navMenu.exists()).toBe(true);
   });
 
-  it("renders correctly for guest session", async () => {
-    reactiveState.isGuestSession = true;
-    reactiveState.user = { firstName: "Guest", lastName: "User" };
+  it("renders login slideover", async () => {
     const component = await mountSuspended(Header);
 
-    // Should show checkmark chip for guest session too
-    expect(component.html()).toContain("✓");
-  });
-
-  it("filters menu items for guest session", async () => {
-    reactiveState.isGuestSession = true;
-    reactiveState.user = { firstName: "Guest", lastName: "User" };
-    const component = await mountSuspended(Header);
-
-    // Find the dropdown menu
-    const dropdown = component.findComponent({ name: "UDropdownMenu" });
-    expect(dropdown.exists()).toBe(true);
-
-    const items = dropdown.props("items");
-
-    // Group 0 should have the user label
-    // Group 1 should be gone (filtered out because it only contained links)
-    // Group 2 (now index 1) should have logout
-    expect(items.length).toBe(2);
-    expect(items[0][0].label).toBe("Guest User");
-    expect(items[1][0].label).toBe("Abmelden");
-    expect(items[1][0].onSelect).toBeDefined();
+    // USlideover might not be directly in HTML if it uses teleport and is closed
+    const slideover = component.findComponent({ name: "USlideover" });
+    expect(slideover.exists()).toBe(true);
+    expect(slideover.props("title")).toBe("Konto");
   });
 });

package/test/nuxt/HeaderBody.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import HeaderBody from "~/components/Header/Body.vue";
+import { ref } from "vue";
+
+const mockNavi = [
+  { label: "Home", to: "/", icon: "i-lucide-home" },
+  { label: "Products", to: "/products", icon: "i-lucide-package" },
+];
+
+mockNuxtImport("useHeaderNavigation", () => () => ({
+  navi: ref(mockNavi),
+}));
+
+describe("HeaderBody", () => {
+  it("renders navigation menu with correct items", async () => {
+    const component = await mountSuspended(HeaderBody);
+    const navMenu = component.findComponent({ name: "UNavigationMenu" });
+
+    expect(navMenu.exists()).toBe(true);
+    expect(navMenu.props("items")).toEqual(mockNavi);
+    expect(navMenu.props("orientation")).toBe("vertical");
+  });
+
+  it("renders SalesChannelSwitch", async () => {
+    const component = await mountSuspended(HeaderBody);
+    const switchComponent = component.findComponent({
+      name: "SalesChannelSwitch",
+    });
+
+    expect(switchComponent.exists()).toBe(true);
+  });
+});

package/test/nuxt/HeaderRight.test.ts

@@ -0,0 +1,141 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import HeaderRight from "~/components/Header/Right.vue";
+import { ref, reactive, computed } from "vue";
+
+const mocks = vi.hoisted(() => ({
+  state: {
+    isLoggedIn: false,
+    isGuestSession: false,
+    user: null as any,
+  },
+  toastAddCalled: { value: false },
+}));
+
+const reactiveState = reactive(mocks.state);
+
+mockNuxtImport("useUser", () => () => ({
+  isLoggedIn: computed(() => reactiveState.isLoggedIn),
+  isGuestSession: computed(() => reactiveState.isGuestSession),
+  user: computed(() => reactiveState.user),
+  logout: () => {
+    reactiveState.isLoggedIn = false;
+    reactiveState.user = null;
+  },
+}));
+
+mockNuxtImport("useToast", () => () => ({
+  add: (payload: any) => {
+    if (typeof global !== "undefined" && (global as any).toastAddCalled) {
+      (global as any).toastAddCalled.value = true;
+    }
+  },
+}));
+
+mockNuxtImport("useShopBiteConfig", () => () => ({
+  isCheckoutEnabled: ref(true),
+}));
+
+mockNuxtImport("useCart", () => () => ({
+  count: ref(5),
+}));
+
+mockNuxtImport("useRuntimeConfig", () => () => ({
+  app: { baseURL: "/" },
+}));
+
+// Mock Nuxt Content queryCollection
+mockNuxtImport("queryCollection", () => (collection: string) => ({
+  first: () =>
+    Promise.resolve({
+      account: {
+        loggedIn: [
+          [{ label: "Mein Konto", type: "label" }],
+          [
+            {
+              label: "Bestellungen",
+              icon: "i-lucide-pizza",
+              to: "/konto/bestellungen",
+            },
+          ],
+          [{ label: "Abmelden", icon: "i-lucide-log-out", action: "logout" }],
+        ],
+        loggedOut: [
+          [{ label: "Jetzt anmelden", type: "label" }],
+          [{ label: "Zur Anmeldung", icon: "i-lucide-user", to: "/anmelden" }],
+        ],
+      },
+    }),
+}));
+
+describe("HeaderRight", () => {
+  beforeEach(() => {
+    reactiveState.isLoggedIn = false;
+    reactiveState.isGuestSession = false;
+    reactiveState.user = null;
+    mocks.toastAddCalled.value = false;
+    (global as any).toastAddCalled = mocks.toastAddCalled;
+    vi.clearAllMocks();
+  });
+
+  it("renders phone link", async () => {
+    const component = await mountSuspended(HeaderRight);
+    const phoneButton = component.find('a[href="tel:+49610471427"]');
+    expect(phoneButton.exists()).toBe(true);
+  });
+
+  it("shows logged out dropdown items when not logged in", async () => {
+    const component = await mountSuspended(HeaderRight);
+    const dropdown = component.findComponent({ name: "UDropdownMenu" });
+    const items = dropdown.props("items");
+
+    expect(items[0][0].label).toBe("Jetzt anmelden");
+    expect(items[1][0].to).toBe("/anmelden");
+  });
+
+  it("shows logged in dropdown items when logged in", async () => {
+    reactiveState.isLoggedIn = true;
+    reactiveState.user = { firstName: "Jane", lastName: "Doe" };
+
+    const component = await mountSuspended(HeaderRight);
+    const dropdown = component.findComponent({ name: "UDropdownMenu" });
+    const items = dropdown.props("items");
+
+    expect(items[0][0].label).toBe("Jane Doe");
+    expect(items[1][0].to).toBe("/konto/bestellungen");
+    expect(items[2][0].label).toBe("Abmelden");
+  });
+
+  it("shows cart drawer with correct count when checkout is enabled", async () => {
+    const component = await mountSuspended(HeaderRight);
+    const drawer = component.findComponent({ name: "UDrawer" });
+    expect(drawer.exists()).toBe(true);
+
+    const chip = component.findComponent({ name: "UChip" });
+    expect(chip.props("text")).toBe(5);
+  });
+
+  it("calls logout and updates state when logout is selected", async () => {
+    reactiveState.isLoggedIn = true;
+    const component = await mountSuspended(HeaderRight);
+    const dropdown = component.findComponent({ name: "UDropdownMenu" });
+    const items = dropdown.props("items");
+
+    // Find the item with logout handler
+    let logoutItem;
+    for (const group of items) {
+      for (const item of group) {
+        if (item.label === "Abmelden") {
+          logoutItem = item;
+          break;
+        }
+      }
+    }
+
+    expect(logoutItem).toBeDefined();
+    logoutItem.onSelect();
+
+    expect(reactiveState.isLoggedIn).toBe(false);
+    expect(mocks.toastAddCalled.value).toBe(true);
+  });
+});

package/test/nuxt/HeaderTitle.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect, vi } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import HeaderTitle from "~/components/Header/Title.vue";
+
+const { mockRuntimeConfig } = vi.hoisted(() => ({
+  mockRuntimeConfig: {
+    app: {
+      baseURL: "/",
+    },
+    public: {
+      site: {
+        name: "ShopBite Test Store",
+      },
+    },
+  },
+}));
+
+mockNuxtImport("useRuntimeConfig", () => () => mockRuntimeConfig);
+
+describe("HeaderTitle", () => {
+  it("renders the site name for screen readers", async () => {
+    const component = await mountSuspended(HeaderTitle);
+    const srOnly = component.find(".sr-only");
+    expect(srOnly.exists()).toBe(true);
+    expect(srOnly.text()).toBe("ShopBite Test Store");
+  });
+
+  it("renders a link to the home page", async () => {
+    const component = await mountSuspended(HeaderTitle);
+    const link = component.findComponent({ name: "NuxtLink" });
+    expect(link.exists()).toBe(true);
+    expect(link.props("to")).toBe("/");
+  });
+
+  it("renders the logo image", async () => {
+    const component = await mountSuspended(HeaderTitle);
+    const image = component.findComponent({ name: "UColorModeImage" });
+    expect(image.exists()).toBe(true);
+    expect(image.props("light")).toBe("/light/Logo.png");
+    expect(image.props("dark")).toBe("/dark/Logo.png");
+  });
+});

package/test/nuxt/SalesChannelSwitch.test.ts

@@ -0,0 +1,201 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import SalesChannelSwitch from "~/components/SalesChannelSwitch.vue";
+import { ref } from "vue";
+
+// Mock window.location
+const mockWindowLocation = {
+  href: "",
+};
+
+// Mock the sales channels data that would be returned by useFetch
+const mockSalesChannels = [
+  {
+    label: "Main Store",
+    value: "https://main-store.example.com",
+  },
+  {
+    label: "Secondary Store",
+    value: "https://secondary-store.example.com",
+  },
+];
+
+// Use vi.hoisted to avoid hoisting issues
+const { mockUseFetch, mockRuntimeConfig } = vi.hoisted(() => ({
+  mockUseFetch: vi.fn(() => {
+    return {
+      data: ref(mockSalesChannels),
+      status: ref("success"),
+    };
+  }),
+  mockRuntimeConfig: {
+    public: {
+      shopBite: {
+        feature: {
+          multiChannel: true,
+        },
+      },
+      storeUrl: "https://main-store.example.com",
+    },
+  },
+}));
+
+// Set up the mocks at the top level
+mockNuxtImport("useRuntimeConfig", () => () => mockRuntimeConfig);
+mockNuxtImport("useFetch", () => mockUseFetch);
+
+describe("SalesChannelSwitch", () => {
+  beforeEach(() => {
+    // Reset window.location mock
+    mockWindowLocation.href = "";
+    global.window = { location: mockWindowLocation } as any;
+    vi.clearAllMocks();
+
+    // Reset default mock implementation for useFetch
+    mockUseFetch.mockImplementation(() => {
+      return {
+        data: ref(mockSalesChannels),
+        status: ref("success"),
+      };
+    });
+  });
+
+  it("should not render when multiChannel feature is disabled", async () => {
+    // Temporarily disable multiChannel
+    mockRuntimeConfig.public.shopBite.feature.multiChannel = false;
+
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    // Should not render the select menu
+    expect(component.findComponent({ name: "USelectMenu" }).exists()).toBe(
+      false,
+    );
+
+    // Re-enable for other tests
+    mockRuntimeConfig.public.shopBite.feature.multiChannel = true;
+  });
+
+  it("should render select menu when multiChannel feature is enabled", async () => {
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    // Should render the select menu
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    expect(selectMenu.exists()).toBe(true);
+    expect(selectMenu.props("icon")).toBe("i-lucide-store");
+  });
+
+  it("should load and transform sales channels correctly", async () => {
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    const items = selectMenu.props("items");
+
+    expect(items).toHaveLength(2);
+    expect(items[0]).toEqual({
+      label: "Main Store",
+      value: "https://main-store.example.com",
+    });
+    expect(items[1]).toEqual({
+      label: "Secondary Store",
+      value: "https://secondary-store.example.com",
+    });
+  });
+
+  it("should select the current store URL by default", async () => {
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    const modelValue = selectMenu.props("modelValue");
+
+    expect(modelValue).toEqual({
+      label: "Main Store",
+      value: "https://main-store.example.com",
+    });
+  });
+
+  it("should show loading state when fetching data", async () => {
+    // Mock pending state
+    mockUseFetch.mockImplementationOnce(() => {
+      return {
+        data: ref(null),
+        status: ref("pending"),
+      };
+    });
+
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    expect(selectMenu.props("loading")).toBe(true);
+  });
+
+  it("should redirect to new store URL when selection changes", async () => {
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+
+    // Change the selection
+    await selectMenu.setValue({
+      label: "Secondary Store",
+      value: "https://secondary-store.example.com",
+    });
+
+    // Should have redirected
+    expect(mockWindowLocation.href).toBe("https://secondary-store.example.com");
+  });
+
+  it("should not redirect on initial selection", async () => {
+    // Mock that no initial selection was made
+    mockRuntimeConfig.public.storeUrl = "https://unknown-store.example.com";
+
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    // Should not redirect immediately
+    expect(mockWindowLocation.href).toBe("");
+
+    // Restore original store URL
+    mockRuntimeConfig.public.storeUrl = "https://main-store.example.com";
+  });
+
+  it("should handle empty sales channels gracefully", async () => {
+    // Mock empty sales channels
+    mockUseFetch.mockImplementationOnce(() => {
+      return {
+        data: ref([]),
+        status: ref("success"),
+      };
+    });
+
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    const items = selectMenu.props("items");
+
+    expect(items).toHaveLength(0);
+  });
+
+  it("should handle sales channels without domains", async () => {
+    const mockChannelsWithoutDomains = [
+      {
+        label: "Store Without Domain",
+        value: "",
+      },
+    ];
+
+    mockUseFetch.mockImplementationOnce(() => {
+      return {
+        data: ref(mockChannelsWithoutDomains),
+        status: ref("success"),
+      };
+    });
+
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    const items = selectMenu.props("items");
+
+    expect(items[0]).toEqual({
+      label: "Store Without Domain",
+      value: "",
+    });
+  });
+});

package/test/unit/sales-channels.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import {
+  createAdminApiClient,
+  getSalesChannels,
+} from "../../server/utils/shopware/adminApiClient";
+
+describe("Shopware Admin API Client", () => {
+  describe("createAdminApiClient", () => {
+    it("should create a client with correct configuration", () => {
+      const endpoint = "https://shopware.example.com/api";
+      const accessToken = "test-token";
+
+      const client = createAdminApiClient(endpoint, accessToken);
+
+      expect(client).toBeDefined();
+      // The client should have the invoke method
+      expect(client).toHaveProperty("invoke");
+      expect(typeof client.invoke).toBe("function");
+    });
+  });
+
+  describe("getSalesChannels", () => {
+    it("should fetch sales channels successfully", async () => {
+      // Mock the client
+      const mockClient = {
+        invoke: vi.fn().mockResolvedValue({
+          data: [
+            { id: "1", name: "Storefront", typeId: "storefront" },
+            { id: "2", name: "Headless", typeId: "headless" },
+          ],
+        }),
+      };
+
+      const result = await getSalesChannels(mockClient);
+
+      expect(result).toEqual([
+        { id: "1", name: "Storefront", typeId: "storefront" },
+        { id: "2", name: "Headless", typeId: "headless" },
+      ]);
+
+      expect(mockClient.invoke).toHaveBeenCalledWith({
+        method: "GET",
+        path: "/api/v3/sales-channel",
+      });
+    });
+
+    it("should handle errors when fetching sales channels", async () => {
+      const mockClient = {
+        invoke: vi.fn().mockRejectedValue(new Error("API error")),
+      };
+
+      await expect(getSalesChannels(mockClient)).rejects.toThrow("API error");
+    });
+
+    it("should handle empty response gracefully", async () => {
+      const mockClient = {
+        invoke: vi.fn().mockResolvedValue({
+          data: [],
+        }),
+      };
+
+      const result = await getSalesChannels(mockClient);
+      expect(result).toEqual([]);
+    });
+  });
+});