create-outsystems-astro 0.4.2 → 0.6.0

package/template/test/e2e/react/react-counter.spec.ts

@@ -6,11 +6,13 @@ test.beforeEach(async ({ page }) => {
 
 test.describe("Has values", () => {
   test("Should have header", async ({ page }) => {
-    await expect(page.getByText("Counter")).toBeVisible();
+    await expect(page.getByText("Counter Component")).toBeVisible();
   });
 
   test("Should have slot content", async ({ page }) => {
-    await expect(page.getByText("Slot content")).toBeVisible();
+    await expect(
+      page.getByText("This is content passed into the component"),
+    ).toBeVisible();
   });
 });
 
@@ -30,3 +32,11 @@ test.describe("Change counter", () => {
     await expect(page.locator("span#counter")).toContainText("5");
   });
 });
+
+test.describe("Update Nano Store", () => {
+  test("Should update Nano Store", async ({ page }) => {
+    await page.locator("#store").fill("Updated Value");
+    await page.getByRole("button", { name: "Update Store" }).click();
+    await expect(page.locator("#nanostore")).toHaveText("Updated Value");
+  });
+});

package/template/test/e2e/svelte/svelte-counter.spec.ts

@@ -0,0 +1,42 @@
+import { expect, test } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/svelte/svelte-counter");
+});
+
+test.describe("Has values", () => {
+  test("Should have header", async ({ page }) => {
+    await expect(page.getByText("Counter Component")).toBeVisible();
+  });
+
+  test("Should have slot content", async ({ page }) => {
+    await expect(
+      page.getByText("This is content passed into the component"),
+    ).toBeVisible();
+  });
+});
+
+test.describe("Change counter", () => {
+  test("Should increment counter when clicking + button", async ({ page }) => {
+    await page.getByRole("button", { name: "+" }).click();
+    await expect(page.locator("pre")).toContainText("6");
+  });
+
+  test("Should decrement counter when clicking - button", async ({ page }) => {
+    await page.getByRole("button", { name: "-" }).click();
+    await expect(page.locator("pre")).toContainText("4");
+  });
+
+  test("Should show message on Send value", async ({ page }) => {
+    await page.getByRole("button", { name: "Send value" }).click();
+    await expect(page.locator("span#counter")).toContainText("5");
+  });
+});
+
+test.describe("Update Nano Store", () => {
+  test("Should update Nano Store", async ({ page }) => {
+    await page.locator("#store").fill("Updated Value");
+    await page.getByRole("button", { name: "Update Store" }).click();
+    await expect(page.locator("#nanostore")).toHaveText("Updated Value");
+  });
+});

package/template/test/e2e/vue/vue-counter.spec.ts

@@ -6,11 +6,13 @@ test.beforeEach(async ({ page }) => {
 
 test.describe("Has values", () => {
   test("Should have header", async ({ page }) => {
-    await expect(page.getByText("Counter")).toBeVisible();
+    await expect(page.getByText("Counter Component")).toBeVisible();
   });
 
   test("Should have slot content", async ({ page }) => {
-    await expect(page.getByText("Slot content")).toBeVisible();
+    await expect(
+      page.getByText("This is content passed into the component"),
+    ).toBeVisible();
   });
 });
 
@@ -30,3 +32,11 @@ test.describe("Change counter", () => {
     await expect(page.locator("span#counter")).toContainText("5");
   });
 });
+
+test.describe("Update Nano Store", () => {
+  test("Should update Nano Store", async ({ page }) => {
+    await page.locator("#store").fill("Updated Value");
+    await page.getByRole("button", { name: "Update Store" }).click();
+    await expect(page.locator("#nanostore")).toHaveText("Updated Value");
+  });
+});

package/template/test/integration/angular/Counter.component.spec.ts

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/angular";
-import { vi } from "vitest";
+import { it, vi } from "vitest";
 import CounterComponent from "../../../src/framework/angular/Counter.component";
 
 describe("CounterComponent (Testing Library)", () => {

package/template/test/integration/react/Counter.test.tsx

@@ -1,4 +1,6 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { it, vi } from "vitest";
+
 import Counter from "../../../src/framework/react/Counter";
 
 describe("Counter", () => {
@@ -9,14 +11,30 @@ describe("Counter", () => {
     showMessage: "mockFunction",
   };
 
+  let capturedListener: ((val: string) => void) | undefined;
+  let storeValue = "Mocked Nano Value";
+
   beforeEach(() => {
-    // Mock the document function
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (document as any).mockFunction = vi.fn();
+    (window as any).mockFunction = vi.fn();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).Stores = {
+      reactStore: {
+        get: vi.fn(() => storeValue),
+        listen: vi.fn((callback) => {
+          capturedListener = callback;
+          callback(storeValue);
+          return () => {};
+        }),
+      },
+    };
   });
 
   afterEach(() => {
     vi.clearAllMocks();
+    capturedListener = undefined;
+    storeValue = "Mocked Nano Value";
   });
 
   it("renders the initial count", () => {
@@ -36,23 +54,30 @@ describe("Counter", () => {
 
   it("increments count when add button is clicked", () => {
     render(<Counter {...defaultProps} />);
-    const addButton = screen.getByRole("button", { name: "+" });
-    fireEvent.click(addButton);
+    fireEvent.click(screen.getByRole("button", { name: "+" }));
     expect(screen.getByText("6")).toBeInTheDocument();
   });
 
   it("decrements count when subtract button is clicked", () => {
     render(<Counter {...defaultProps} />);
-    const subtractButton = screen.getByRole("button", { name: "-" });
-    fireEvent.click(subtractButton);
+    fireEvent.click(screen.getByRole("button", { name: "-" }));
     expect(screen.getByText("4")).toBeInTheDocument();
   });
 
   it("calls the show message function", () => {
     render(<Counter {...defaultProps} />);
-    const sendButton = screen.getByRole("button", { name: "Send value" });
-    fireEvent.click(sendButton);
+    fireEvent.click(screen.getByRole("button", { name: "Send value" }));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((document as any).mockFunction).toHaveBeenCalledWith(5);
+    expect((window as any).mockFunction).toHaveBeenCalledWith(5);
+  });
+
+  it("updates the component when the nanostore value changes", async () => {
+    render(<Counter {...defaultProps} />);
+    expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
+    await act(async () => {
+      storeValue = "Updated Nano Value";
+      capturedListener?.("Updated Nano Value");
+    });
+    expect(await screen.findByText(/Updated Nano Value/i)).toBeInTheDocument();
   });
 });

package/template/test/integration/svelte/Counter.test.ts

@@ -0,0 +1,81 @@
+import { act, fireEvent, render, screen } from "@testing-library/svelte";
+import { writable } from "svelte/store";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import Counter from "../../../src/framework/svelte/Counter.svelte";
+import SlotCounter from "./SlotCounter.wrapper.svelte";
+
+describe("Counter.svelte", () => {
+  const defaultProps = {
+    initialCount: 5,
+    showMessage: "mockFunction",
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let mockStore: any;
+
+  beforeEach(() => {
+    mockStore = writable("Mocked Nano Value");
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).mockFunction = vi.fn();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).Stores = {
+      svelteStore: mockStore,
+    };
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders the initial count", () => {
+    render(Counter, { props: defaultProps });
+    expect(screen.getByText("5")).toBeInTheDocument();
+  });
+
+  it("renders slots (header and default)", () => {
+    render(SlotCounter);
+
+    expect(screen.getByText("Test Header")).toBeInTheDocument();
+    expect(screen.getByText("Test Children")).toBeInTheDocument();
+  });
+
+  it("increments count when add button is clicked", async () => {
+    render(Counter, { props: defaultProps });
+    const addButton = screen.getByRole("button", { name: "+" });
+
+    await fireEvent.click(addButton);
+    expect(screen.getByText("6")).toBeInTheDocument();
+  });
+
+  it("decrements count when subtract button is clicked", async () => {
+    render(Counter, { props: defaultProps });
+    const subtractButton = screen.getByRole("button", { name: "-" });
+
+    await fireEvent.click(subtractButton);
+    expect(screen.getByText("4")).toBeInTheDocument();
+  });
+
+  it("calls the show message function", async () => {
+    render(Counter, { props: defaultProps });
+    const sendButton = screen.getByRole("button", { name: "Send value" });
+
+    await fireEvent.click(sendButton);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    expect((window as any).mockFunction).toHaveBeenCalledWith(5);
+  });
+
+  it("updates the component when the nanostore value changes", async () => {
+    render(Counter, { props: defaultProps });
+
+    expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
+
+    // Update the Svelte store
+    await act(() => {
+      mockStore.set("Updated Nano Value");
+    });
+
+    expect(screen.getByText(/Updated Nano Value/i)).toBeInTheDocument();
+  });
+});

package/template/test/integration/svelte/SlotCounter.wrapper.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { vi } from "vitest";
+
+  import Counter from "../../../src/framework/svelte/Counter.svelte";
+
+  export let initialCount = 5;
+  export let showMessage = "mockFn";
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as any)[showMessage] = vi.fn();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as any).Stores = {
+    svelteStore: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      subscribe: (fn: any) => {
+        fn("test-store-value");
+        return () => {};
+      },
+    },
+  };
+</script>
+
+<Counter {initialCount} {showMessage}>
+  <h1 slot="header">Test Header</h1>
+  <div>Test Children</div>
+</Counter>

package/template/test/integration/vue/Counter.test.ts

@@ -1,4 +1,6 @@
-import { fireEvent, render, screen } from "@testing-library/vue";
+import { fireEvent, render, screen, waitFor } from "@testing-library/vue";
+import { it, vi } from "vitest";
+
 import Counter from "../../../src/framework/vue/Counter.vue";
 
 describe("Counter", () => {
@@ -7,15 +9,34 @@ describe("Counter", () => {
     showMessage: "mockFunction",
   };
 
+  let capturedListener: ((val: string) => void) | undefined;
+  let storeValue = "Mocked Nano Value";
+
   beforeEach(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (document as any).mockFunction = vi.fn();
+    (window as any).mockFunction = vi.fn();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).Stores = {
+      vueStore: {
+        get: vi.fn(() => storeValue),
+        subscribe: vi.fn((callback) => {
+          capturedListener = callback;
+          callback(storeValue);
+          return () => {};
+        }),
+      },
+    };
   });
 
   afterEach(() => {
     vi.clearAllMocks();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    delete (document as any).mockFunction;
+    delete (window as any).mockFunction;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (window as any).Stores;
+    capturedListener = undefined;
+    storeValue = "Mocked Nano Value";
   });
 
   it("renders the initial count", () => {
@@ -88,6 +109,23 @@ describe("Counter", () => {
 
     await fireEvent.click(screen.getByRole("button", { name: "Send value" }));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((document as any).mockFunction).toHaveBeenCalledWith(5);
+    expect((window as any).mockFunction).toHaveBeenCalledWith(5);
+  });
+
+  it("updates the component when the nanostore value changes", async () => {
+    render(Counter, {
+      props: defaultProps,
+      slots: {
+        default: "<div><p>Test Children</p></div>",
+        header: "<div>Test Header</div>",
+      },
+    });
+
+    expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
+    await waitFor(async () => {
+      storeValue = "Updated Nano Value";
+      capturedListener?.("Updated Nano Value");
+    });
+    expect(await screen.findByText(/Updated Nano Value/i)).toBeInTheDocument();
   });
 });

package/template/vitest.config.ts

@@ -1,10 +1,11 @@
 /// <reference types="vitest" />
 import angular from "@analogjs/vite-plugin-angular";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
 import react from "@vitejs/plugin-react";
 import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vitest/config";
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   test: {
     projects: [
       {
@@ -30,6 +31,20 @@ export default defineConfig({
           setupFiles: ["test/setup-test-env.ts"],
         },
       },
+      {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        plugins: [svelte() as any],
+        resolve: {
+          conditions: mode === "test" ? ["browser"] : [],
+        },
+        test: {
+          environment: "happy-dom",
+          globals: true,
+          include: ["test/integration/svelte/**/*.test.ts"],
+          name: "svelte",
+          setupFiles: ["test/setup-test-env.ts"],
+        },
+      },
       {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         plugins: [vue() as any],
@@ -53,4 +68,4 @@ export default defineConfig({
     ],
     reporters: ["default"],
   },
-});
+}));