From 7e90efbfc5f31aceb82b42f8b6457a50a4795199 Mon Sep 17 00:00:00 2001 From: Karan Gandhi Date: Mon, 16 Feb 2026 15:20:53 +0530 Subject: [PATCH] feat: vb to ve --- .../__test__/startEditingButton.test.tsx | 111 ++++++++++-------- .../generateStartEditingButton.test.ts | 4 +- .../getVisualBuilderRedirectionUrl.test.ts | 10 +- .../utils/getVisualBuilderRedirectionUrl.ts | 2 +- 4 files changed, 73 insertions(+), 54 deletions(-) diff --git a/src/visualBuilder/components/__test__/startEditingButton.test.tsx b/src/visualBuilder/components/__test__/startEditingButton.test.tsx index b4aa7122..8a5a943f 100644 --- a/src/visualBuilder/components/__test__/startEditingButton.test.tsx +++ b/src/visualBuilder/components/__test__/startEditingButton.test.tsx @@ -1,5 +1,7 @@ import { render, fireEvent, screen } from "@testing-library/preact"; -import StartEditingButtonComponent, { getEditButtonPosition } from "../startEditingButton"; +import StartEditingButtonComponent, { + getEditButtonPosition, +} from "../startEditingButton"; import Config from "../../../configManager/configManager"; import { asyncRender } from "../../../__test__/utils"; @@ -7,7 +9,7 @@ describe("StartEditingButtonComponent", () => { let visualBuilderContainer: HTMLDivElement; beforeEach(() => { - document.getElementsByTagName('html')[0].innerHTML = ''; + document.getElementsByTagName("html")[0].innerHTML = ""; Config.reset(); Config.set("stackDetails.apiKey", "bltapikey"); Config.set("stackDetails.environment", "bltenvironment"); @@ -38,103 +40,120 @@ describe("StartEditingButtonComponent", () => { }); test("should update the href when clicked", async () => { - const { getByTestId } = await asyncRender(); + const { getByTestId } = await asyncRender( + + ); const button = getByTestId("vcms-start-editing-btn"); expect(button?.getAttribute("href")).toBe( - "https://app.contentstack.com/#!/stack/bltapikey/visual-builder?branch=main&environment=bltenvironment&target-url=http%3A%2F%2Flocalhost%3A3000%2F&locale=en-us" + "https://app.contentstack.com/#!/stack/bltapikey/visual-editor?branch=main&environment=bltenvironment&target-url=http%3A%2F%2Flocalhost%3A3000%2F&locale=en-us" ); }); test("should not render when enable is false", async () => { Config.set("editInVisualBuilderButton.enable", false); - const { container } = await asyncRender(); + const { container } = await asyncRender( + + ); expect(container).toBeEmptyDOMElement(); }); test("should render when enable is true", async () => { Config.set("editInVisualBuilderButton.enable", true); - const { getByTestId } = await asyncRender(); + const { getByTestId } = await asyncRender( + + ); const button = getByTestId("vcms-start-editing-btn"); expect(button).toBeInTheDocument(); }); - test.each([ - 'bottom-right', - 'bottom-left', - 'top-left', - 'top-right' - ])('should return valid position %s', (position) => { - expect(getEditButtonPosition(position)).toBe(position); - }); + test.each(["bottom-right", "bottom-left", "top-left", "top-right"])( + "should return valid position %s", + (position) => { + expect(getEditButtonPosition(position)).toBe(position); + } + ); test.each([ - 'invalid-position', - 'center', - '', + "invalid-position", + "center", + "", undefined, null, 123, {}, [], false, - ])('should return bottom-right for invalid input: %s', (invalidPosition) => { - expect(getEditButtonPosition(invalidPosition)).toBe('bottom-right'); - }); - + ])( + "should return bottom-right for invalid input: %s", + (invalidPosition) => { + expect(getEditButtonPosition(invalidPosition)).toBe("bottom-right"); + } + ); + test("should render with default values when editInVisualBuilderButton config is missing", async () => { Config.reset(); Config.set("stackDetails.apiKey", "bltapikey"); Config.set("stackDetails.environment", "bltenvironment"); - const { getByTestId } = await asyncRender(); + const { getByTestId } = await asyncRender( + + ); const button = getByTestId("vcms-start-editing-btn"); - - expect(Config.get().editInVisualBuilderButton.position).toBe("bottom-right") + + expect(Config.get().editInVisualBuilderButton.position).toBe( + "bottom-right" + ); expect(button).toBeInTheDocument(); }); test("should update href with current URL when mouse enters button", async () => { - Object.defineProperty(window, 'location', { - value: new URL('http://localhost:3000'), + Object.defineProperty(window, "location", { + value: new URL("http://localhost:3000"), }); - - const { getByTestId } = await asyncRender(); + + const { getByTestId } = await asyncRender( + + ); const button = getByTestId("vcms-start-editing-btn"); const initialHref = button.getAttribute("href"); - - Object.defineProperty(window, 'location', { - value: new URL('http://localhost:3000/about'), - writable: true + + Object.defineProperty(window, "location", { + value: new URL("http://localhost:3000/about"), + writable: true, }); fireEvent.mouseEnter(button); - + const updatedHref = button.getAttribute("href"); expect(updatedHref).not.toBe(initialHref); - expect(updatedHref).toContain(encodeURIComponent("http://localhost:3000/about")); + expect(updatedHref).toContain( + encodeURIComponent("http://localhost:3000/about") + ); }); test("should update href with current URL when button is focused", async () => { - Object.defineProperty(window, 'location', { - value: new URL('http://localhost:3000'), + Object.defineProperty(window, "location", { + value: new URL("http://localhost:3000"), }); - - const { getByTestId } = await asyncRender(); + + const { getByTestId } = await asyncRender( + + ); const button = getByTestId("vcms-start-editing-btn"); const initialHref = button.getAttribute("href"); - - Object.defineProperty(window, 'location', { - value: new URL('http://localhost:3000/contact'), - writable: true + + Object.defineProperty(window, "location", { + value: new URL("http://localhost:3000/contact"), + writable: true, }); fireEvent.focus(button); - + const updatedHref = button.getAttribute("href"); expect(updatedHref).not.toBe(initialHref); - expect(updatedHref).toContain(encodeURIComponent("http://localhost:3000/contact")); + expect(updatedHref).toContain( + encodeURIComponent("http://localhost:3000/contact") + ); }); - - }); diff --git a/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts b/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts index e652fffe..457a8159 100644 --- a/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts +++ b/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts @@ -39,7 +39,7 @@ describe("generateStartEditingButton", () => { button?.click(); expect(button?.getAttribute("href")).toBe( - "https://app.contentstack.com/#!/stack//visual-builder?branch=main&target-url=http%3A%2F%2Flocalhost%3A3000%2F&locale=en-us" + "https://app.contentstack.com/#!/stack//visual-editor?branch=main&target-url=http%3A%2F%2Flocalhost%3A3000%2F&locale=en-us" ); }); @@ -57,7 +57,7 @@ describe("generateStartEditingButton", () => { button?.click(); expect(button?.getAttribute("href")).toBe( - "https://app.contentstack.com/#!/stack//visual-builder?branch=main&target-url=http%3A%2F%2Flocalhost%3A3000%2F&locale=en-us" + "https://app.contentstack.com/#!/stack//visual-editor?branch=main&target-url=http%3A%2F%2Flocalhost%3A3000%2F&locale=en-us" ); }); }); diff --git a/src/visualBuilder/utils/__test__/getVisualBuilderRedirectionUrl.test.ts b/src/visualBuilder/utils/__test__/getVisualBuilderRedirectionUrl.test.ts index c09ec900..84912c10 100644 --- a/src/visualBuilder/utils/__test__/getVisualBuilderRedirectionUrl.test.ts +++ b/src/visualBuilder/utils/__test__/getVisualBuilderRedirectionUrl.test.ts @@ -27,7 +27,7 @@ describe('getVisualBuilderRedirectionUrl', () => { }); const result = getVisualBuilderRedirectionUrl(); - expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-builder?branch=main&environment=production&target-url=https%3A%2F%2Fexample.com%2F&locale=en-US'); + expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-editor?branch=main&environment=production&target-url=https%3A%2F%2Fexample.com%2F&locale=en-US'); }); it('should return the correct URL without branch and environment', () => { @@ -44,7 +44,7 @@ describe('getVisualBuilderRedirectionUrl', () => { }); const result = getVisualBuilderRedirectionUrl(); - expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-builder?target-url=https%3A%2F%2Fexample.com%2F&locale=en-US'); + expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-editor?target-url=https%3A%2F%2Fexample.com%2F&locale=en-US'); }); it('should use locale from data-cslp attribute if present', () => { @@ -64,7 +64,7 @@ describe('getVisualBuilderRedirectionUrl', () => { extractDetailsFromCslp.mockReturnValue({ locale: 'fr-FR' }); const result = getVisualBuilderRedirectionUrl(); - expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-builder?branch=main&environment=production&target-url=https%3A%2F%2Fexample.com%2F&locale=fr-FR'); + expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-editor?branch=main&environment=production&target-url=https%3A%2F%2Fexample.com%2F&locale=fr-FR'); }); it('should return the correct URL without locale', () => { @@ -82,7 +82,7 @@ describe('getVisualBuilderRedirectionUrl', () => { }); const result = getVisualBuilderRedirectionUrl(); - expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-builder?branch=main&environment=production&target-url=https%3A%2F%2Fexample.com%2F'); + expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-editor?branch=main&environment=production&target-url=https%3A%2F%2Fexample.com%2F'); }); it('should ignore invalid data-cslp attribute and use locale from config', () => { @@ -101,7 +101,7 @@ describe('getVisualBuilderRedirectionUrl', () => { const result = getVisualBuilderRedirectionUrl(); // Should use locale from config when data-cslp attribute is invalid (empty or no value) - expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-builder?branch=main&environment=production&target-url=https%3A%2F%2Fexample.com%2F&locale=en-US'); + expect(result.toString()).toBe('https://app.example.com/#!/stack/12345/visual-editor?branch=main&environment=production&target-url=https%3A%2F%2Fexample.com%2F&locale=en-US'); // Should not call extractDetailsFromCslp for invalid cslp expect(extractDetailsFromCslp).not.toHaveBeenCalled(); }); diff --git a/src/visualBuilder/utils/getVisualBuilderRedirectionUrl.ts b/src/visualBuilder/utils/getVisualBuilderRedirectionUrl.ts index 02e4659b..0e95cdea 100644 --- a/src/visualBuilder/utils/getVisualBuilderRedirectionUrl.ts +++ b/src/visualBuilder/utils/getVisualBuilderRedirectionUrl.ts @@ -37,7 +37,7 @@ export default function getVisualBuilderRedirectionUrl(): URL { } const completeURL = new URL( - `/#!/stack/${apiKey}/visual-builder?${searchParams.toString()}`, + `/#!/stack/${apiKey}/visual-editor?${searchParams.toString()}`, appUrl ); return completeURL;