create-outsystems-astro 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -11
- package/bin/cli.js +71 -5
- package/package.json +1 -1
- package/template/.prettierignore +2 -0
- package/template/.prettierrc +4 -0
- package/template/AGENTS.md +145 -22
- package/template/astro.config.mjs +15 -2
- package/template/bun.lock +529 -716
- package/template/deno.json +14 -7
- package/template/deno.lock +1100 -688
- package/template/eslint.config.mjs +43 -0
- package/template/output.ts +14 -2
- package/template/package-lock.json +3404 -3080
- package/template/package.json +59 -85
- package/template/patches/{@angular+build+21.2.0.patch → @angular+build+21.2.1.patch} +1 -10
- package/template/patches-deno/playwright+1.58.2.patch +26 -0
- package/template/playwright.config.ts +1 -1
- package/template/pnpm-lock.yaml +2041 -1584
- package/template/pnpm-workspace.yaml +6 -0
- package/template/src/framework/angular/{Counter.component.ts → Demo.component.ts} +12 -5
- package/template/src/framework/angular/Store.component.ts +24 -0
- package/template/src/framework/preact/Demo.tsx +86 -0
- package/template/src/framework/preact/Store.tsx +31 -0
- package/template/src/framework/react/{Counter.tsx → Demo.tsx} +23 -17
- package/template/src/framework/react/Store.tsx +31 -0
- package/template/src/framework/svelte/Demo.svelte +74 -0
- package/template/src/framework/svelte/Store.svelte +22 -0
- package/template/src/framework/vue/{Counter.vue → Demo.vue} +7 -9
- package/template/src/framework/vue/Store.vue +28 -0
- package/template/src/images/angular.png +0 -0
- package/template/src/images/preact.png +0 -0
- package/template/src/images/react.png +0 -0
- package/template/src/images/svelte.png +0 -0
- package/template/src/images/vue.png +0 -0
- package/template/src/pages/angular/angular-demo.astro +42 -0
- package/template/src/pages/multi/store.astro +22 -0
- package/template/src/pages/preact/preact-demo.astro +66 -0
- package/template/src/pages/react/react-demo.astro +66 -0
- package/template/src/pages/svelte/svelte-demo.astro +63 -0
- package/template/src/pages/vue/vue-demo.astro +61 -0
- package/template/src/stores/framework.ts +10 -0
- package/template/src/styles/index.css +4 -0
- package/template/svelte.config.js +5 -0
- package/template/test/e2e/angular/angular-counter.spec.ts +7 -1
- package/template/test/e2e/preact/preact-counter.spec.ts +42 -0
- package/template/test/e2e/react/react-counter.spec.ts +2 -2
- package/template/test/e2e/svelte/svelte-counter.spec.ts +42 -0
- package/template/test/e2e/vue/vue-counter.spec.ts +2 -2
- package/template/test/integration/angular/{Counter.component.spec.ts → Demo.component.spec.ts} +6 -6
- package/template/test/integration/preact/Demo.test.tsx +84 -0
- package/template/test/integration/react/{Counter.test.tsx → Demo.test.tsx} +10 -9
- package/template/test/integration/svelte/Demo.test.ts +81 -0
- package/template/test/integration/svelte/Demo.wrapper.svelte +27 -0
- package/template/test/integration/vue/{Counter.test.ts → Demo.test.ts} +9 -9
- package/template/tsconfig.json +0 -1
- package/template/vitest.config.ts +29 -2
- package/template/yarn.lock +2311 -2251
- package/template/src/pages/angular/angular-counter.astro +0 -31
- package/template/src/pages/react/react-counter.astro +0 -58
- package/template/src/pages/vue/vue-counter.astro +0 -62
- /package/template/patches/{@analogjs+astro-angular+2.3.0.patch → @analogjs+astro-angular+2.3.1.patch} +0 -0
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
---
|
|
2
|
+
import DemoComponent from "../../framework/react/Demo";
|
|
3
|
+
import styles from "../../styles/index.css?url";
|
|
4
|
+
const initialCount = 5;
|
|
5
|
+
const showMessage = "showMessage";
|
|
6
|
+
---
|
|
7
|
+
<html lang="en">
|
|
8
|
+
<head>
|
|
9
|
+
<link href={styles} rel="stylesheet" />
|
|
10
|
+
<script>
|
|
11
|
+
import { atom } from "nanostores";
|
|
12
|
+
window["showMessage"] = (count) => {
|
|
13
|
+
document.getElementById("counter").textContent = count;
|
|
14
|
+
};
|
|
15
|
+
window.Stores = [];
|
|
16
|
+
window.Stores["reactStore"] = atom("Test Value");
|
|
17
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
18
|
+
const input = document.getElementById("store");
|
|
19
|
+
input.value = window.Stores["reactStore"].get();
|
|
20
|
+
});
|
|
21
|
+
</script>
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<div class="counter-title">Astro Page</div>
|
|
25
|
+
<div class="card-grid">
|
|
26
|
+
<div class="card">
|
|
27
|
+
<strong>Counter component</strong>
|
|
28
|
+
<div class="card-content">
|
|
29
|
+
<div style="text-align: center; margin-top: 30px;">
|
|
30
|
+
Counter value:
|
|
31
|
+
<div>
|
|
32
|
+
<span id="counter"></span>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="card">
|
|
38
|
+
<strong>Nano Stores</strong>
|
|
39
|
+
<div class="card-content">
|
|
40
|
+
<div style="text-align: center; margin-top: 30px;">
|
|
41
|
+
<input
|
|
42
|
+
id="store"
|
|
43
|
+
placeholder="Type something..."
|
|
44
|
+
type="text"
|
|
45
|
+
/><button
|
|
46
|
+
class="card-btn"
|
|
47
|
+
onclick="window.Stores['reactStore'].set(document.getElementById('store').value)"
|
|
48
|
+
>Update Store</button
|
|
49
|
+
>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
<hr />
|
|
55
|
+
<DemoComponent
|
|
56
|
+
client:only="react"
|
|
57
|
+
initialCount={initialCount}
|
|
58
|
+
showMessage={showMessage}
|
|
59
|
+
>
|
|
60
|
+
<div class="counter-title" slot="header">React Demo Component</div>
|
|
61
|
+
<div style="text-align: center;">
|
|
62
|
+
<p><em>This is content passed into the component.</em></p>
|
|
63
|
+
</div>
|
|
64
|
+
</DemoComponent>
|
|
65
|
+
</body>
|
|
66
|
+
</html>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
---
|
|
2
|
+
import DemoComponent from "../../framework/svelte/Demo.svelte";
|
|
3
|
+
import styles from "../../styles/index.css?url";
|
|
4
|
+
const initialCount = 5;
|
|
5
|
+
const showMessage = "showMessage";
|
|
6
|
+
---
|
|
7
|
+
<html lang="en">
|
|
8
|
+
<head>
|
|
9
|
+
<link href={styles} rel="stylesheet" />
|
|
10
|
+
<script>
|
|
11
|
+
import { atom } from "nanostores";
|
|
12
|
+
window["showMessage"] = (count) => {
|
|
13
|
+
document.getElementById("counter").textContent = count;
|
|
14
|
+
};
|
|
15
|
+
window.Stores = [];
|
|
16
|
+
window.Stores["svelteStore"] = atom("Test Value");
|
|
17
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
18
|
+
const input = document.getElementById("store");
|
|
19
|
+
input.value = window.Stores["svelteStore"].get();
|
|
20
|
+
});
|
|
21
|
+
</script>
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<div class="counter-title">Astro Page</div>
|
|
25
|
+
<div class="card-grid">
|
|
26
|
+
<div class="card">
|
|
27
|
+
<strong>Counter component</strong>
|
|
28
|
+
<div class="card-content">
|
|
29
|
+
<div style="text-align: center; margin-top: 30px;">
|
|
30
|
+
Counter value: <br /><span id="counter"></span>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="card">
|
|
35
|
+
<strong>Nano Stores</strong>
|
|
36
|
+
<div class="card-content">
|
|
37
|
+
<div style="text-align: center; margin-top: 30px;">
|
|
38
|
+
<input
|
|
39
|
+
id="store"
|
|
40
|
+
placeholder="Type something..."
|
|
41
|
+
type="text"
|
|
42
|
+
/><button
|
|
43
|
+
class="card-btn"
|
|
44
|
+
onclick="window.Stores['svelteStore'].set(document.getElementById('store').value)"
|
|
45
|
+
>Update Store</button
|
|
46
|
+
>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<hr />
|
|
52
|
+
<DemoComponent
|
|
53
|
+
client:only="svelte"
|
|
54
|
+
initialCount={initialCount}
|
|
55
|
+
showMessage={showMessage}
|
|
56
|
+
>
|
|
57
|
+
<div class="counter-title" slot="header">Svelte Demo Component</div>
|
|
58
|
+
<div style="text-align: center;">
|
|
59
|
+
<p><em>This is content passed into the component.</em></p>
|
|
60
|
+
</div>
|
|
61
|
+
</DemoComponent>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
---
|
|
2
|
+
import DemoComponent from '../../framework/vue/Demo.vue';
|
|
3
|
+
import styles from "../../styles/index.css?url";
|
|
4
|
+
const initialCount = 5;
|
|
5
|
+
const showMessage = "showMessage";
|
|
6
|
+
---
|
|
7
|
+
<html lang="en">
|
|
8
|
+
<head>
|
|
9
|
+
<link href={styles} rel="stylesheet" />
|
|
10
|
+
<script>
|
|
11
|
+
import { atom } from "nanostores";
|
|
12
|
+
window["showMessage"] = (count) => {
|
|
13
|
+
document.getElementById("counter").textContent = count;
|
|
14
|
+
};
|
|
15
|
+
window.Stores = [];
|
|
16
|
+
window.Stores["vueStore"] = atom("Test Value");
|
|
17
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
18
|
+
const input = document.getElementById("store");
|
|
19
|
+
input.value = window.Stores["vueStore"].get();
|
|
20
|
+
});
|
|
21
|
+
</script>
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<div class="counter-title">Astro Page</div>
|
|
25
|
+
<div class="card-grid">
|
|
26
|
+
<div class="card">
|
|
27
|
+
<strong>Counter component</strong>
|
|
28
|
+
<div class="card-content">
|
|
29
|
+
<div style="text-align: center; margin-top: 30px;">
|
|
30
|
+
Counter value: <br /><span id="counter"></span>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="card">
|
|
35
|
+
<strong>Nano Stores</strong>
|
|
36
|
+
<div class="card-content">
|
|
37
|
+
<div style="text-align: center; margin-top: 30px;">
|
|
38
|
+
<input
|
|
39
|
+
id="store"
|
|
40
|
+
placeholder="Type something..."
|
|
41
|
+
type="text"
|
|
42
|
+
/><button
|
|
43
|
+
class="card-btn"
|
|
44
|
+
onclick="window.Stores['vueStore'].set(document.getElementById('store').value)"
|
|
45
|
+
>Update Store</button
|
|
46
|
+
>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<hr />
|
|
52
|
+
<DemoComponent client:only="vue" initialCount={initialCount} showMessage={showMessage}>
|
|
53
|
+
<div class="counter-title" slot="header">
|
|
54
|
+
Vue Demo Component
|
|
55
|
+
</div>
|
|
56
|
+
<div style="text-align: center;">
|
|
57
|
+
<p><em>This is content passed into the component.</em></p>
|
|
58
|
+
</div>
|
|
59
|
+
</DemoComponent>
|
|
60
|
+
</body>
|
|
61
|
+
</html>
|
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
import { expect, test } from "@playwright/test";
|
|
2
2
|
|
|
3
3
|
test.beforeEach(async ({ page }) => {
|
|
4
|
-
await page.goto("/angular/angular-
|
|
4
|
+
await page.goto("/angular/angular-demo");
|
|
5
5
|
// Angular sometimes needs a bit more time to fully render the island component.
|
|
6
6
|
// eslint-disable-next-line playwright/no-wait-for-timeout
|
|
7
7
|
await page.waitForTimeout(2000);
|
|
8
8
|
});
|
|
9
9
|
|
|
10
|
+
test.describe("Has values", () => {
|
|
11
|
+
test("Should have header", async ({ page }) => {
|
|
12
|
+
await expect(page.getByText("Angular Demo Component")).toBeVisible();
|
|
13
|
+
});
|
|
14
|
+
});
|
|
15
|
+
|
|
10
16
|
test.describe("Change counter", () => {
|
|
11
17
|
test("Should increment counter when clicking + button", async ({ page }) => {
|
|
12
18
|
await page.getByRole("button", { name: "+" }).click();
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { expect, test } from "@playwright/test";
|
|
2
|
+
|
|
3
|
+
test.beforeEach(async ({ page }) => {
|
|
4
|
+
await page.goto("/preact/preact-demo");
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
test.describe("Has values", () => {
|
|
8
|
+
test("Should have header", async ({ page }) => {
|
|
9
|
+
await expect(page.getByText("Preact Demo Component")).toBeVisible();
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
test("Should have slot content", async ({ page }) => {
|
|
13
|
+
await expect(
|
|
14
|
+
page.getByText("This is content passed into the component"),
|
|
15
|
+
).toBeVisible();
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
test.describe("Change counter", () => {
|
|
20
|
+
test("Should increment counter when clicking + button", async ({ page }) => {
|
|
21
|
+
await page.getByRole("button", { name: "+" }).click();
|
|
22
|
+
await expect(page.locator("pre")).toContainText("6");
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
test("Should decrement counter when clicking - button", async ({ page }) => {
|
|
26
|
+
await page.getByRole("button", { name: "-" }).click();
|
|
27
|
+
await expect(page.locator("pre")).toContainText("4");
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
test("Should show message on Send value", async ({ page }) => {
|
|
31
|
+
await page.getByRole("button", { name: "Send value" }).click();
|
|
32
|
+
await expect(page.locator("span#counter")).toContainText("5");
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
test.describe("Update Nano Store", () => {
|
|
37
|
+
test("Should update Nano Store", async ({ page }) => {
|
|
38
|
+
await page.locator("#store").fill("Updated Value");
|
|
39
|
+
await page.getByRole("button", { name: "Update Store" }).click();
|
|
40
|
+
await expect(page.locator("#nanostore")).toHaveText("Updated Value");
|
|
41
|
+
});
|
|
42
|
+
});
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { expect, test } from "@playwright/test";
|
|
2
2
|
|
|
3
3
|
test.beforeEach(async ({ page }) => {
|
|
4
|
-
await page.goto("/react/react-
|
|
4
|
+
await page.goto("/react/react-demo");
|
|
5
5
|
});
|
|
6
6
|
|
|
7
7
|
test.describe("Has values", () => {
|
|
8
8
|
test("Should have header", async ({ page }) => {
|
|
9
|
-
await expect(page.getByText("
|
|
9
|
+
await expect(page.getByText("React Demo Component")).toBeVisible();
|
|
10
10
|
});
|
|
11
11
|
|
|
12
12
|
test("Should have slot content", async ({ page }) => {
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { expect, test } from "@playwright/test";
|
|
2
|
+
|
|
3
|
+
test.beforeEach(async ({ page }) => {
|
|
4
|
+
await page.goto("/svelte/svelte-demo");
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
test.describe("Has values", () => {
|
|
8
|
+
test("Should have header", async ({ page }) => {
|
|
9
|
+
await expect(page.getByText("Svelte Demo Component")).toBeVisible();
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
test("Should have slot content", async ({ page }) => {
|
|
13
|
+
await expect(
|
|
14
|
+
page.getByText("This is content passed into the component"),
|
|
15
|
+
).toBeVisible();
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
test.describe("Change counter", () => {
|
|
20
|
+
test("Should increment counter when clicking + button", async ({ page }) => {
|
|
21
|
+
await page.getByRole("button", { name: "+" }).click();
|
|
22
|
+
await expect(page.locator("pre")).toContainText("6");
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
test("Should decrement counter when clicking - button", async ({ page }) => {
|
|
26
|
+
await page.getByRole("button", { name: "-" }).click();
|
|
27
|
+
await expect(page.locator("pre")).toContainText("4");
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
test("Should show message on Send value", async ({ page }) => {
|
|
31
|
+
await page.getByRole("button", { name: "Send value" }).click();
|
|
32
|
+
await expect(page.locator("span#counter")).toContainText("5");
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
test.describe("Update Nano Store", () => {
|
|
37
|
+
test("Should update Nano Store", async ({ page }) => {
|
|
38
|
+
await page.locator("#store").fill("Updated Value");
|
|
39
|
+
await page.getByRole("button", { name: "Update Store" }).click();
|
|
40
|
+
await expect(page.locator("#nanostore")).toHaveText("Updated Value");
|
|
41
|
+
});
|
|
42
|
+
});
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { expect, test } from "@playwright/test";
|
|
2
2
|
|
|
3
3
|
test.beforeEach(async ({ page }) => {
|
|
4
|
-
await page.goto("/vue/vue-
|
|
4
|
+
await page.goto("/vue/vue-demo");
|
|
5
5
|
});
|
|
6
6
|
|
|
7
7
|
test.describe("Has values", () => {
|
|
8
8
|
test("Should have header", async ({ page }) => {
|
|
9
|
-
await expect(page.getByText("
|
|
9
|
+
await expect(page.getByText("Vue Demo Component")).toBeVisible();
|
|
10
10
|
});
|
|
11
11
|
|
|
12
12
|
test("Should have slot content", async ({ page }) => {
|
package/template/test/integration/angular/{Counter.component.spec.ts → Demo.component.spec.ts}
RENAMED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { fireEvent, render, screen } from "@testing-library/angular";
|
|
2
2
|
import { it, vi } from "vitest";
|
|
3
|
-
import
|
|
3
|
+
import DemoComponent from "../../../src/framework/angular/Demo.component";
|
|
4
4
|
|
|
5
|
-
describe("
|
|
5
|
+
describe("DemoComponent (Testing Library)", () => {
|
|
6
6
|
it("should render the initial count", async () => {
|
|
7
|
-
await render(
|
|
7
|
+
await render(DemoComponent, {
|
|
8
8
|
componentInputs: { initialCount: 5 },
|
|
9
9
|
});
|
|
10
10
|
|
|
@@ -13,7 +13,7 @@ describe("CounterComponent (Testing Library)", () => {
|
|
|
13
13
|
});
|
|
14
14
|
|
|
15
15
|
it("should increment the count when add button is clicked", async () => {
|
|
16
|
-
await render(
|
|
16
|
+
await render(DemoComponent, {
|
|
17
17
|
componentInputs: { initialCount: 5 },
|
|
18
18
|
});
|
|
19
19
|
|
|
@@ -24,7 +24,7 @@ describe("CounterComponent (Testing Library)", () => {
|
|
|
24
24
|
});
|
|
25
25
|
|
|
26
26
|
it("should decrement the count when add button is clicked", async () => {
|
|
27
|
-
await render(
|
|
27
|
+
await render(DemoComponent, {
|
|
28
28
|
componentInputs: { initialCount: 5 },
|
|
29
29
|
});
|
|
30
30
|
|
|
@@ -35,7 +35,7 @@ describe("CounterComponent (Testing Library)", () => {
|
|
|
35
35
|
});
|
|
36
36
|
|
|
37
37
|
it('should call the showParentMessage function when "Send value" button is clicked', async () => {
|
|
38
|
-
const { fixture } = await render(
|
|
38
|
+
const { fixture } = await render(DemoComponent, {
|
|
39
39
|
componentInputs: { initialCount: 5 },
|
|
40
40
|
});
|
|
41
41
|
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/** @jsxImportSource preact */
|
|
2
|
+
import { act, fireEvent, render, screen } from "@testing-library/preact";
|
|
3
|
+
import { it, vi } from "vitest";
|
|
4
|
+
|
|
5
|
+
import Demo from "../../../src/framework/preact/Demo";
|
|
6
|
+
|
|
7
|
+
describe("Demo", () => {
|
|
8
|
+
const defaultProps = {
|
|
9
|
+
children: <div>Test Children</div>,
|
|
10
|
+
header: <h1>Test Header</h1>,
|
|
11
|
+
initialCount: 5,
|
|
12
|
+
showMessage: "mockFunction",
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
let capturedListener: ((val: string) => void) | undefined;
|
|
16
|
+
let storeValue = "Mocked Nano Value";
|
|
17
|
+
|
|
18
|
+
beforeEach(() => {
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
20
|
+
(window as any).mockFunction = vi.fn();
|
|
21
|
+
|
|
22
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
23
|
+
(window as any).Stores = {
|
|
24
|
+
preactStore: {
|
|
25
|
+
get: vi.fn(() => storeValue),
|
|
26
|
+
listen: vi.fn((callback) => {
|
|
27
|
+
capturedListener = callback;
|
|
28
|
+
callback(storeValue);
|
|
29
|
+
return () => {};
|
|
30
|
+
}),
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
afterEach(() => {
|
|
36
|
+
vi.clearAllMocks();
|
|
37
|
+
capturedListener = undefined;
|
|
38
|
+
storeValue = "Mocked Nano Value";
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
it("renders the initial count", () => {
|
|
42
|
+
render(<Demo {...defaultProps} />);
|
|
43
|
+
expect(screen.getByText("5")).toBeInTheDocument();
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
it("renders header", () => {
|
|
47
|
+
render(<Demo {...defaultProps} />);
|
|
48
|
+
expect(screen.getByText("Test Header")).toBeInTheDocument();
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
it("renders children", () => {
|
|
52
|
+
render(<Demo {...defaultProps} />);
|
|
53
|
+
expect(screen.getByText("Test Children")).toBeInTheDocument();
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
it("increments count when add button is clicked", () => {
|
|
57
|
+
render(<Demo {...defaultProps} />);
|
|
58
|
+
fireEvent.click(screen.getByRole("button", { name: "+" }));
|
|
59
|
+
expect(screen.getByText("6")).toBeInTheDocument();
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
it("decrements count when subtract button is clicked", () => {
|
|
63
|
+
render(<Demo {...defaultProps} />);
|
|
64
|
+
fireEvent.click(screen.getByRole("button", { name: "-" }));
|
|
65
|
+
expect(screen.getByText("4")).toBeInTheDocument();
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
it("calls the show message function", () => {
|
|
69
|
+
render(<Demo {...defaultProps} />);
|
|
70
|
+
fireEvent.click(screen.getByRole("button", { name: "Send value" }));
|
|
71
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
72
|
+
expect((window as any).mockFunction).toHaveBeenCalledWith(5);
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
it("updates the component when the nanostore value changes", async () => {
|
|
76
|
+
render(<Demo {...defaultProps} />);
|
|
77
|
+
expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
|
|
78
|
+
await act(async () => {
|
|
79
|
+
storeValue = "Updated Nano Value";
|
|
80
|
+
capturedListener?.("Updated Nano Value");
|
|
81
|
+
});
|
|
82
|
+
expect(await screen.findByText(/Updated Nano Value/i)).toBeInTheDocument();
|
|
83
|
+
});
|
|
84
|
+
});
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
/** @jsxImportSource react */
|
|
1
2
|
import { act, fireEvent, render, screen } from "@testing-library/react";
|
|
2
3
|
import { it, vi } from "vitest";
|
|
3
4
|
|
|
4
|
-
import
|
|
5
|
+
import Demo from "../../../src/framework/react/Demo";
|
|
5
6
|
|
|
6
|
-
describe("
|
|
7
|
+
describe("Demo", () => {
|
|
7
8
|
const defaultProps = {
|
|
8
9
|
children: <div>Test Children</div>,
|
|
9
10
|
header: <h1>Test Header</h1>,
|
|
@@ -38,41 +39,41 @@ describe("Counter", () => {
|
|
|
38
39
|
});
|
|
39
40
|
|
|
40
41
|
it("renders the initial count", () => {
|
|
41
|
-
render(<
|
|
42
|
+
render(<Demo {...defaultProps} />);
|
|
42
43
|
expect(screen.getByText("5")).toBeInTheDocument();
|
|
43
44
|
});
|
|
44
45
|
|
|
45
46
|
it("renders header", () => {
|
|
46
|
-
render(<
|
|
47
|
+
render(<Demo {...defaultProps} />);
|
|
47
48
|
expect(screen.getByText("Test Header")).toBeInTheDocument();
|
|
48
49
|
});
|
|
49
50
|
|
|
50
51
|
it("renders children", () => {
|
|
51
|
-
render(<
|
|
52
|
+
render(<Demo {...defaultProps} />);
|
|
52
53
|
expect(screen.getByText("Test Children")).toBeInTheDocument();
|
|
53
54
|
});
|
|
54
55
|
|
|
55
56
|
it("increments count when add button is clicked", () => {
|
|
56
|
-
render(<
|
|
57
|
+
render(<Demo {...defaultProps} />);
|
|
57
58
|
fireEvent.click(screen.getByRole("button", { name: "+" }));
|
|
58
59
|
expect(screen.getByText("6")).toBeInTheDocument();
|
|
59
60
|
});
|
|
60
61
|
|
|
61
62
|
it("decrements count when subtract button is clicked", () => {
|
|
62
|
-
render(<
|
|
63
|
+
render(<Demo {...defaultProps} />);
|
|
63
64
|
fireEvent.click(screen.getByRole("button", { name: "-" }));
|
|
64
65
|
expect(screen.getByText("4")).toBeInTheDocument();
|
|
65
66
|
});
|
|
66
67
|
|
|
67
68
|
it("calls the show message function", () => {
|
|
68
|
-
render(<
|
|
69
|
+
render(<Demo {...defaultProps} />);
|
|
69
70
|
fireEvent.click(screen.getByRole("button", { name: "Send value" }));
|
|
70
71
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
71
72
|
expect((window as any).mockFunction).toHaveBeenCalledWith(5);
|
|
72
73
|
});
|
|
73
74
|
|
|
74
75
|
it("updates the component when the nanostore value changes", async () => {
|
|
75
|
-
render(<
|
|
76
|
+
render(<Demo {...defaultProps} />);
|
|
76
77
|
expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
|
|
77
78
|
await act(async () => {
|
|
78
79
|
storeValue = "Updated Nano Value";
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { act, fireEvent, render, screen } from "@testing-library/svelte";
|
|
2
|
+
import { writable } from "svelte/store";
|
|
3
|
+
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
4
|
+
import Demo from "../../../src/framework/svelte/Demo.svelte";
|
|
5
|
+
import DemoWrapper from "./Demo.wrapper.svelte";
|
|
6
|
+
|
|
7
|
+
describe("Demo", () => {
|
|
8
|
+
const defaultProps = {
|
|
9
|
+
initialCount: 5,
|
|
10
|
+
showMessage: "mockFunction",
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14
|
+
let mockStore: any;
|
|
15
|
+
|
|
16
|
+
beforeEach(() => {
|
|
17
|
+
mockStore = writable("Mocked Nano Value");
|
|
18
|
+
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
20
|
+
(window as any).mockFunction = vi.fn();
|
|
21
|
+
|
|
22
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
23
|
+
(window as any).Stores = {
|
|
24
|
+
svelteStore: mockStore,
|
|
25
|
+
};
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
afterEach(() => {
|
|
29
|
+
vi.clearAllMocks();
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
it("renders the initial count", () => {
|
|
33
|
+
render(Demo, { props: defaultProps });
|
|
34
|
+
expect(screen.getByText("5")).toBeInTheDocument();
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
it("renders slots (header and default)", () => {
|
|
38
|
+
render(DemoWrapper);
|
|
39
|
+
|
|
40
|
+
expect(screen.getByText("Test Header")).toBeInTheDocument();
|
|
41
|
+
expect(screen.getByText("Test Children")).toBeInTheDocument();
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
it("increments count when add button is clicked", async () => {
|
|
45
|
+
render(Demo, { props: defaultProps });
|
|
46
|
+
const addButton = screen.getByRole("button", { name: "+" });
|
|
47
|
+
|
|
48
|
+
await fireEvent.click(addButton);
|
|
49
|
+
expect(screen.getByText("6")).toBeInTheDocument();
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
it("decrements count when subtract button is clicked", async () => {
|
|
53
|
+
render(Demo, { props: defaultProps });
|
|
54
|
+
const subtractButton = screen.getByRole("button", { name: "-" });
|
|
55
|
+
|
|
56
|
+
await fireEvent.click(subtractButton);
|
|
57
|
+
expect(screen.getByText("4")).toBeInTheDocument();
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
it("calls the show message function", async () => {
|
|
61
|
+
render(Demo, { props: defaultProps });
|
|
62
|
+
const sendButton = screen.getByRole("button", { name: "Send value" });
|
|
63
|
+
|
|
64
|
+
await fireEvent.click(sendButton);
|
|
65
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
66
|
+
expect((window as any).mockFunction).toHaveBeenCalledWith(5);
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
it("updates the component when the nanostore value changes", async () => {
|
|
70
|
+
render(Demo, { props: defaultProps });
|
|
71
|
+
|
|
72
|
+
expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
|
|
73
|
+
|
|
74
|
+
// Update the Svelte store
|
|
75
|
+
await act(() => {
|
|
76
|
+
mockStore.set("Updated Nano Value");
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
expect(screen.getByText(/Updated Nano Value/i)).toBeInTheDocument();
|
|
80
|
+
});
|
|
81
|
+
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { vi } from "vitest";
|
|
3
|
+
|
|
4
|
+
import Demo from "../../../src/framework/svelte/Demo.svelte";
|
|
5
|
+
|
|
6
|
+
export let initialCount = 5;
|
|
7
|
+
export let showMessage = "mockFn";
|
|
8
|
+
|
|
9
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
10
|
+
(window as any)[showMessage] = vi.fn();
|
|
11
|
+
|
|
12
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
13
|
+
(window as any).Stores = {
|
|
14
|
+
svelteStore: {
|
|
15
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
16
|
+
subscribe: (fn: any) => {
|
|
17
|
+
fn("test-store-value");
|
|
18
|
+
return () => {};
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<Demo {initialCount} {showMessage}>
|
|
25
|
+
<h1 slot="header">Test Header</h1>
|
|
26
|
+
<div>Test Children</div>
|
|
27
|
+
</Demo>
|