create-nube-app 0.1.0 → 0.2.0

package/package.json

@@ -1,35 +1,29 @@
 {
-    "name": "create-nube-app",
-    "description": "Create Nube App",
-    "author": "Tiendanube / Nuvemshop",
-    "license": "MIT",
-    "version": "0.1.0",
-    "bin": {
-        "create-nube-app": "dist/index.js"
-    },
-    "scripts": {
-        "build": "tsup",
-        "check": "biome check src/*",
-        "check:fix": "biome check --write src/*"
-    },
-    "type": "module",
-    "dependencies": {
-        "@clack/prompts": "^0.10.0",
-        "fs-extra": "^11.1.1"
-    },
-    "devDependencies": {
-        "@biomejs/biome": "1.8.3",
-        "@types/fs-extra": "^11.0.4",
-        "@types/node": "^22.13.11",
-        "@types/prompts": "^2.4.9",
-        "tsup": "^8.4.0",
-        "typescript": "^5.6.2"
-    },
-    "files": [
-        "./dist",
-        "README.md",
-        "CHANGELOG.md",
-        "LICENSE",
-        "./templates"
-    ]
+	"name": "create-nube-app",
+	"description": "Create Nube App",
+	"author": "Tiendanube / Nuvemshop",
+	"license": "MIT",
+	"version": "0.2.0",
+	"bin": {
+		"create-nube-app": "dist/index.js"
+	},
+	"scripts": {
+		"build": "tsup",
+		"check": "biome check src/*",
+		"check:fix": "biome check --write src/*"
+	},
+	"type": "module",
+	"dependencies": {
+		"@clack/prompts": "^0.10.0",
+		"fs-extra": "^11.1.1"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "1.8.3",
+		"@types/fs-extra": "^11.0.4",
+		"@types/node": "^22.13.11",
+		"@types/prompts": "^2.4.9",
+		"tsup": "^8.4.0",
+		"typescript": "^5.6.2"
+	},
+	"files": ["./dist", "README.md", "CHANGELOG.md", "LICENSE", "./templates"]
 }

package/templates/minimal/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "biomejs.biome",
+    "vitest.explorer",
+    "ms-vscode.extension-test-runner",
+    "ambar.bundle-size"
+  ]
+}

package/templates/minimal/.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+}

package/templates/minimal/README.md

@@ -1,11 +1,25 @@
-# Minimum setup for app development with NubeSDK
+# Minimal App
 
-This project uses the type package in version `0.1.2-alpha` and `tsup` to compile typescript to javascript
+This is a minimalist project using TypeScript and Tiendanube tools.
 
-# How to use
+## Available Scripts
 
-- install the development dependencies with the `npm install` command.
-- Then start the development changing the `src/main.ts` file.
-- To compile the project use the `npm run build` command.
+### Development
 
-The final script is created in the `dist` folder.
+- `npm run dev` - Starts local development server
+- `npm run build` - Builds the project using tsup
+- `npm test` - Runs unit tests
+- `npm run test:watch` - Runs tests in watch mode (automatically re-runs when changes are detected)
+- `npm run test:coverage` - Runs tests and generates a coverage report
+
+### Code Quality
+
+- `npm run format` - Formats all project files using Biome
+- `npm run lint` - Runs linting on all project files using Biome
+
+## Technologies Used
+
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vitest](https://vitest.dev/) for testing
+- [Biome](https://biomejs.dev/) for formatting and linting
+- [tsup](https://tsup.egoist.dev/) for building

package/templates/minimal/biome.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  }
+}

package/templates/minimal/package.json

@@ -1,13 +1,24 @@
 {
-  "name": "minimal-app",
-  "version": "1.0.2",
-  "scripts": {
-    "build": "tsup"
-  },
-  "author": "Tiendanube / Nuvemshop",
-  "devDependencies": {
-    "@tiendanube/nube-sdk-types": "0.4.0",
-    "tsup": "^8.3.0",
-    "typescript": "^5.6.2"
-  }
+	"name": "template-minimal-app",
+	"version": "0.1.0",
+	"scripts": {
+		"dev": "concurrently -k -n BUILD,SERVE -c blue,green \"tsup --sourcemap inline --watch\" \"serve dist -l 8080 --cors\"",
+		"build": "tsup",
+		"test": "vitest run",
+		"test:watch": "vitest watch",
+		"test:coverage": "vitest run --coverage",
+		"format": "biome check --write ./src",
+		"lint": "biome check ./src"
+	},
+	"author": "Tiendanube / Nuvemshop",
+	"devDependencies": {
+		"@biomejs/biome": "^1.9.4",
+		"@tiendanube/nube-sdk-types": "0.4.0",
+		"@vitest/coverage-v8": "^3.0.9",
+		"concurrently": "^9.1.2",
+		"serve": "^14.2.4",
+		"tsup": "^8.3.0",
+		"typescript": "^5.6.2",
+		"vitest": "^3.0.9"
+	}
 }

package/templates/minimal/src/main.test.ts

@@ -0,0 +1,42 @@
+import type { NubeSDK } from "@tiendanube/nube-sdk-types";
+import { describe, expect, it, vi } from "vitest";
+import { App } from "./main";
+
+describe("App", () => {
+	it("should register cart:update event handler", () => {
+		// Mock NubeSDK
+		const mockNube: Partial<NubeSDK> = {
+			on: vi.fn(),
+		};
+
+		// Execute App function with mock
+		App(mockNube as NubeSDK);
+
+		// Verify if cart:update event was registered
+		expect(mockNube.on).toHaveBeenCalledWith(
+			"cart:update",
+			expect.any(Function),
+		);
+	});
+
+	it("should log cart data when cart:update event is triggered", () => {
+		// Mock console.log
+		const consoleSpy = vi.spyOn(console, "log");
+
+		// Mock NubeSDK
+		const mockNube: Partial<NubeSDK> = {
+			on: vi.fn((event, handler) => {
+				if (event === "cart:update") {
+					// Simulate event being triggered
+					handler({ cart: { id: "123", total: 100 } });
+				}
+			}),
+		};
+
+		// Execute App function with mock
+		App(mockNube as NubeSDK);
+
+		// Verify if console.log was called with cart data
+		expect(consoleSpy).toHaveBeenCalledWith({ id: "123", total: 100 });
+	});
+});

package/templates/minimal/src/main.ts

@@ -2,6 +2,6 @@ import type { NubeSDK } from "@tiendanube/nube-sdk-types";
 
 export function App(nube: NubeSDK) {
 	nube.on("cart:update", ({ cart }) => {
-		console.log(cart);
+		console.log(cart, "cart");
 	});
 }

package/templates/minimal/tsconfig.json

@@ -1,10 +1,10 @@
 {
-  "compilerOptions": {
-    "target": "es2016",
-    "module": "commonjs",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "skipLibCheck": true
-  }
-}
+	"compilerOptions": {
+		"target": "es2016",
+		"module": "commonjs",
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"strict": true,
+		"skipLibCheck": true
+	}
+}

package/templates/minimal/tsup.config.js

@@ -1,14 +1,14 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ["./src/main.ts"],
-  clean: true,
-  format: ["esm"],
-  dts: false,
-  outDir: "./dist",
-  minify: true,
-  sourcemap: false,
-  outExtension: ({ options }) => ({
-    js: options.minify ? ".min.js" : ".js"
-  })
+	entry: ["./src/main.ts"],
+	clean: true,
+	format: ["esm"],
+	dts: false,
+	outDir: "./dist",
+	minify: true,
+	sourcemap: false,
+	outExtension: ({ options }) => ({
+		js: options.minify ? ".min.js" : ".js",
+	}),
 });

package/templates/minimal/vitest.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {},
+});

package/templates/minimal-ui/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "biomejs.biome",
+    "vitest.explorer",
+    "ms-vscode.extension-test-runner",
+    "ambar.bundle-size"
+  ]
+}

package/templates/minimal-ui/.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+}

package/templates/minimal-ui/README.md

@@ -1,11 +1,25 @@
-# Minimum setup for app development with NubeSDK
+# Minimal App with UI
 
-This project uses the type package in version `0.1.2-alpha` and `tsup` to compile typescript to javascript
+This is a template project to develop custom apps for Tiendanube using declarative UI funcions
 
-# How to use
+## Available Scripts
 
-- install the development dependencies with the `npm install` command.
-- Then start the development changing the `src/main.ts` file.
-- To compile the project use the `npm run build` command.
+### Development
 
-The final script is created in the `dist` folder.
+- `npm run dev` - Starts local development server
+- `npm run build` - Builds the project using tsup
+- `npm test` - Runs unit tests
+- `npm run test:watch` - Runs tests in watch mode (automatically re-runs when changes are detected)
+- `npm run test:coverage` - Runs tests and generates a coverage report
+
+### Code Quality
+
+- `npm run format` - Formats all project files using Biome
+- `npm run lint` - Runs linting on all project files using Biome
+
+## Technologies Used
+
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vitest](https://vitest.dev/) for testing
+- [Biome](https://biomejs.dev/) for formatting and linting
+- [tsup](https://tsup.egoist.dev/) for building

package/templates/minimal-ui/biome.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  }
+}

package/templates/minimal-ui/package.json

@@ -1,17 +1,26 @@
 {
-  "name": "minimal-ui-app",
-  "version": "1.0.2",
-  "type": "module",
-  "scripts": {
-    "build": "tsup"
-  },
-  "author": "Tiendanube / Nuvemshop",
-  "dependencies": {
-    "@tiendanube/nube-sdk-ui": "0.2.0"
-  },
-  "devDependencies": {
-    "@tiendanube/nube-sdk-types": "0.4.0",
-    "tsup": "^8.3.0",
-    "typescript": "^5.6.2"
-  }
+	"name": "template-minimal-ui-app",
+	"version": "0.1.0",
+	"type": "module",
+	"scripts": {
+		"dev": "concurrently -k -n BUILD,SERVE -c blue,green \"tsup --sourcemap inline --watch\" \"serve dist -l 8080 --cors\"",
+		"build": "tsup",
+		"test": "vitest run",
+		"test:watch": "vitest watch",
+		"test:coverage": "vitest run --coverage",
+		"format": "biome check --write ./src",
+		"lint": "biome check ./src"
+	},
+	"author": "Tiendanube / Nuvemshop",
+	"devDependencies": {
+		"@biomejs/biome": "^1.9.4",
+		"@tiendanube/nube-sdk-ui": "0.2.0",
+		"@tiendanube/nube-sdk-types": "0.4.0",
+		"@vitest/coverage-v8": "^3.0.9",
+		"concurrently": "^9.1.2",
+		"serve": "^14.2.4",
+		"tsup": "^8.3.0",
+		"typescript": "^5.6.2",
+		"vitest": "^3.0.9"
+	}
 }

package/templates/minimal-ui/src/components/MyCustomField.test.ts

@@ -0,0 +1,51 @@
+import type {
+	NubeComponent,
+	NubeComponentBox,
+	NubeComponentField,
+	NubeSDKState,
+} from "@tiendanube/nube-sdk-types";
+import { describe, expect, it, vi } from "vitest";
+import { MyCustomField } from "./MyCustomField";
+
+describe("MyCustomField", () => {
+	it("should render a Box with correct dimensions", () => {
+		const result = MyCustomField() as NubeComponentBox;
+
+		expect(result).toEqual({
+			type: "box",
+			width: 100,
+			height: 200,
+			children: expect.any(Array),
+		});
+	});
+
+	it("should render a Field component with correct props", () => {
+		const result = MyCustomField() as NubeComponentBox;
+		const children = result.children as NubeComponent[];
+		const field = children[0] as NubeComponentField;
+
+		expect(field).toEqual({
+			type: "field",
+			id: "my-custom-field",
+			label: "Name",
+			name: "Name",
+			onChange: expect.any(Function),
+		});
+	});
+
+	it("should log user input when field changes", () => {
+		const consoleSpy = vi.spyOn(console, "log");
+		const result = MyCustomField() as NubeComponentBox;
+		const children = result.children as NubeComponent[];
+		const field = children[0] as NubeComponentField;
+
+		// Simulate field change event
+		field.onChange?.({
+			type: "change",
+			state: {} as NubeSDKState,
+			value: "John Doe",
+		});
+
+		expect(consoleSpy).toHaveBeenCalledWith("User name: John Doe");
+	});
+});

package/templates/minimal-ui/src/components/MyCustomField.ts

@@ -0,0 +1,18 @@
+import { box, field } from "@tiendanube/nube-sdk-ui";
+
+export function MyCustomField() {
+	return box({
+		width: 100,
+		height: 200,
+		children: [
+			field({
+				id: "my-custom-field",
+				label: "Name",
+				name: "Name",
+				onChange: (e) => {
+					console.log(`User name: ${e.value}`);
+				},
+			}),
+		],
+	});
+}

package/templates/minimal-ui/src/main.test.ts

@@ -0,0 +1,52 @@
+import type { NubeSDK, NubeSDKState } from "@tiendanube/nube-sdk-types";
+import { describe, expect, it, vi } from "vitest";
+import { App } from "./main";
+
+// Mock do componente MyCustomField
+vi.mock("./components/MyCustomField", () => ({
+	MyCustomField: vi.fn(() => ({
+		type: "box",
+		width: 100,
+		height: 100,
+	})),
+}));
+
+describe("App", () => {
+	it("should set MyCustomField component in after_line_items slot", () => {
+		// Mock NubeSDK
+		const mockNube: Partial<NubeSDK> = {
+			send: vi.fn(),
+		};
+
+		// Execute App function with mock
+		App(mockNube as NubeSDK);
+
+		// Verify if send was called with correct parameters
+		expect(mockNube.send).toHaveBeenCalledWith(
+			"ui:slot:set",
+			expect.any(Function),
+		);
+
+		// Get the slot setter function
+		const slotSetter = (mockNube.send as ReturnType<typeof vi.fn>).mock
+			.calls[0][1] as (state: NubeSDKState) => {
+			ui: { slots: { after_line_items: unknown } };
+		};
+
+		// Execute the slot setter function
+		const result = slotSetter({} as NubeSDKState);
+
+		// Verify if the slot was set with MyCustomField component
+		expect(result).toEqual({
+			ui: {
+				slots: {
+					after_line_items: expect.objectContaining({
+						type: "box",
+						width: 100,
+						height: 100,
+					}),
+				},
+			},
+		});
+	});
+});

package/templates/minimal-ui/src/main.ts

@@ -1,28 +1,12 @@
 import type { NubeSDK } from "@tiendanube/nube-sdk-types";
-import { box, field } from "@tiendanube/nube-sdk-ui";
+import { MyCustomField } from "./components/MyCustomField";
 
 export function App(nube: NubeSDK) {
-  nube.on("cart:update", ({ cart }) => {
-    console.log(cart);
-  });
-
-  nube.send("ui:slot:set", () => ({
-    ui: {
-      slots: {
-        after_line_items:
-          box({
-            width: 100, height: 200, children: [
-              field({
-                id: "myField",
-                label: "Name",
-                name: "Name",
-                onChange: (e) => {
-                  console.log("User name: " + e.value)
-                }
-              })
-            ]
-          })
-      }
-    }
-  }));
+	nube.send("ui:slot:set", () => ({
+		ui: {
+			slots: {
+				after_line_items: MyCustomField(),
+			},
+		},
+	}));
 }

package/templates/minimal-ui/vitest.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {},
+});

package/templates/minimal-ui-jsx/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "biomejs.biome",
+    "vitest.explorer",
+    "ms-vscode.extension-test-runner",
+    "ambar.bundle-size"
+  ]
+}

package/templates/minimal-ui-jsx/.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+}

package/templates/minimal-ui-jsx/README.md

@@ -1,12 +1,25 @@
-# Minimum setup for UI app development with NubeSDK using JSX
+# JSX App
 
-This project uses the type package in version `0.1.2-alpha` and `tsup` to compile typescript to javascript
+This is a template project to develop custom apps for Tiendanube using JSX components
 
-# How to use
+## Available Scripts
 
-- install the development dependencies with the `npm install` command.
-- Then start the development changing the `src/main.tsx` file.
-- To compile the project use the `npm run build` command.
-- The contents of the `src/jsx` is required for JSX support, in the future we will provide a new `npm` package with the JSX support embedded.
+### Development
 
-The final script is created in the `dist` folder.
+- `npm run dev` - Starts local development server
+- `npm run build` - Builds the project using tsup
+- `npm test` - Runs unit tests
+- `npm run test:watch` - Runs tests in watch mode (automatically re-runs when changes are detected)
+- `npm run test:coverage` - Runs tests and generates a coverage report
+
+### Code Quality
+
+- `npm run format` - Formats all project files using Biome
+- `npm run lint` - Runs linting on all project files using Biome
+
+## Technologies Used
+
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vitest](https://vitest.dev/) for testing
+- [Biome](https://biomejs.dev/) for formatting and linting
+- [tsup](https://tsup.egoist.dev/) for building

package/templates/minimal-ui-jsx/biome.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  }
+}

package/templates/minimal-ui-jsx/package.json

@@ -1,16 +1,27 @@
 {
-	"name": "minimal-jsx-app",
-	"version": "1.0.2",
+	"name": "template-minimal-jsx-app",
+	"version": "0.1.0",
 	"type": "module",
 	"scripts": {
-		"build": "tsup"
+		"dev": "concurrently -k -n BUILD,SERVE -c blue,green \"tsup --sourcemap inline --watch\" \"serve dist -l 8080 --cors\"",
+		"build": "tsup",
+		"test": "vitest run",
+		"test:watch": "vitest watch",
+		"test:coverage": "vitest run --coverage",
+		"format": "biome check --write ./src",
+		"lint": "biome check ./src"
 	},
 	"author": "Tiendanube / Nuvemshop",
 	"devDependencies": {
+		"@biomejs/biome": "^1.9.4",
 		"@tiendanube/nube-sdk-ui": "0.2.0",
 		"@tiendanube/nube-sdk-jsx": "0.2.1",
 		"@tiendanube/nube-sdk-types": "0.4.0",
+		"@vitest/coverage-v8": "^3.0.9",
+		"concurrently": "^9.1.2",
+		"serve": "^14.2.4",
 		"tsup": "^8.3.0",
-		"typescript": "^5.6.2"
+		"typescript": "^5.6.2",
+		"vitest": "^3.0.9"
 	}
 }

package/templates/minimal-ui-jsx/src/components/MyCustomField.test.tsx

@@ -0,0 +1,61 @@
+import type {
+	NubeComponent,
+	NubeComponentBox,
+	NubeComponentField,
+	NubeSDKState,
+} from "@tiendanube/nube-sdk-types";
+import { describe, expect, it, vi } from "vitest";
+import { MyCustomField } from "./MyCustomField";
+
+describe("MyCustomField", () => {
+	it("should render a Box with correct dimensions", () => {
+		const result = MyCustomField() as NubeComponentBox;
+
+		expect(result).toEqual({
+			type: "box",
+			width: 100,
+			height: 200,
+			children: expect.any(Array),
+		});
+	});
+
+	it("should render a Text component with correct content", () => {
+		const result = MyCustomField() as NubeComponentBox;
+		const children = result.children as NubeComponent[];
+
+		expect(children[0]).toEqual({
+			type: "txt",
+			children: "Hello!!",
+		});
+	});
+
+	it("should render a Field component with correct props", () => {
+		const result = MyCustomField() as NubeComponentBox;
+		const children = result.children as NubeComponent[];
+		const field = children[1] as NubeComponentField;
+
+		expect(field).toEqual({
+			type: "field",
+			id: "my-custom-field",
+			label: "Name",
+			name: "Name",
+			onChange: expect.any(Function),
+		});
+	});
+
+	it("should log user input when field changes", () => {
+		const consoleSpy = vi.spyOn(console, "log");
+		const result = MyCustomField() as NubeComponentBox;
+		const children = result.children as NubeComponent[];
+		const field = children[1] as NubeComponentField;
+
+		// Simulate field change event
+		field.onChange?.({
+			type: "change",
+			state: {} as NubeSDKState,
+			value: "John Doe",
+		});
+
+		expect(consoleSpy).toHaveBeenCalledWith("User name: John Doe");
+	});
+});

package/templates/minimal-ui-jsx/src/components/MyCustomField.tsx

@@ -0,0 +1,17 @@
+import { Box, Field, Txt } from "@tiendanube/nube-sdk-jsx";
+
+export function MyCustomField() {
+	return (
+		<Box width={100} height={200}>
+			<Txt>Hello!!</Txt>
+			<Field
+				id="my-custom-field"
+				label="Name"
+				name="Name"
+				onChange={(e) => {
+					console.log(`User name: ${e.value}`);
+				}}
+			/>
+		</Box>
+	);
+}

package/templates/minimal-ui-jsx/src/main.test.tsx

@@ -0,0 +1,52 @@
+import type { NubeSDK, NubeSDKState } from "@tiendanube/nube-sdk-types";
+import { describe, expect, it, vi } from "vitest";
+import { App } from "./main";
+
+// Mock do componente MyCustomField
+vi.mock("./components/MyCustomField", () => ({
+	MyCustomField: vi.fn(() => ({
+		type: "box",
+		width: 100,
+		height: 100,
+	})),
+}));
+
+describe("App", () => {
+	it("should set MyCustomField component in after_line_items slot", () => {
+		// Mock NubeSDK
+		const mockNube: Partial<NubeSDK> = {
+			send: vi.fn(),
+		};
+
+		// Execute App function with mock
+		App(mockNube as NubeSDK);
+
+		// Verify if send was called with correct parameters
+		expect(mockNube.send).toHaveBeenCalledWith(
+			"ui:slot:set",
+			expect.any(Function),
+		);
+
+		// Get the slot setter function
+		const slotSetter = (mockNube.send as ReturnType<typeof vi.fn>).mock
+			.calls[0][1] as (state: NubeSDKState) => {
+			ui: { slots: { after_line_items: unknown } };
+		};
+
+		// Execute the slot setter function
+		const result = slotSetter({} as NubeSDKState);
+
+		// Verify if the slot was set with MyCustomField component
+		expect(result).toEqual({
+			ui: {
+				slots: {
+					after_line_items: expect.objectContaining({
+						type: "box",
+						width: 100,
+						height: 100,
+					}),
+				},
+			},
+		});
+	});
+});

package/templates/minimal-ui-jsx/src/main.tsx

@@ -1,28 +1,12 @@
 import type { NubeSDK } from "@tiendanube/nube-sdk-types";
-import { Box, Field, Txt } from "@tiendanube/nube-sdk-jsx";
-
-function MyComponent() {
-  return (
-    <Box width={100} height={200}>
-      <Txt>Hello!!</Txt>
-      <Field
-        id="myField"
-        label="Name"
-        name="Name"
-        onChange={(e) => {
-          console.log(`User name: ${e.value}`);
-        }}
-      />
-    </Box>
-  );
-}
+import { MyCustomField } from "./components/MyCustomField";
 
 export function App(nube: NubeSDK) {
-  nube.send("ui:slot:set", () => ({
-    ui: {
-      slots: {
-        after_line_items: <MyComponent />,
-      },
-    },
-  }));
+	nube.send("ui:slot:set", () => ({
+		ui: {
+			slots: {
+				after_line_items: <MyCustomField />,
+			},
+		},
+	}));
 }

package/templates/minimal-ui-jsx/vitest.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {},
+});