Skip to content

Commit 1f9c713

Browse files
karancs06karancs06
committed
fix: field wrapper test
1 parent e5f44d0 commit 1f9c713

5 files changed

Lines changed: 501 additions & 381 deletions

File tree

‎src/visualBuilder/__test__/index.test.ts‎

Lines changed: 173 additions & 191 deletions
Original file line numberDiff line numberDiff line change
@@ -94,221 +94,203 @@ Object.defineProperty(globalThis, "crypto", {
9494
},
9595
});
9696
// Increase the timeout for the test
97-
describe(
98-
"Visual builder",
99-
() => {
100-
beforeAll(() => {
101-
FieldSchemaMap.setFieldSchema(
102-
"all_fields",
103-
getFieldSchemaMap().all_fields
104-
);
105-
Config.set("mode", 2);
106-
vi.spyOn(
107-
document.documentElement,
108-
"clientWidth",
109-
"get"
110-
).mockReturnValue(100);
111-
vi.spyOn(
112-
document.documentElement,
113-
"clientHeight",
114-
"get"
115-
).mockReturnValue(100);
116-
vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100);
117-
});
97+
describe("Visual builder", () => {
98+
beforeAll(() => {
99+
FieldSchemaMap.setFieldSchema(
100+
"all_fields",
101+
getFieldSchemaMap().all_fields
102+
);
103+
Config.set("mode", 2);
104+
vi.spyOn(
105+
document.documentElement,
106+
"clientWidth",
107+
"get"
108+
).mockReturnValue(100);
109+
vi.spyOn(
110+
document.documentElement,
111+
"clientHeight",
112+
"get"
113+
).mockReturnValue(100);
114+
vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100);
115+
});
118116

119-
beforeEach(() => {
120-
vi.clearAllMocks();
121-
document.getElementsByTagName("html")[0].innerHTML = "";
122-
cleanup();
123-
});
117+
beforeEach(() => {
118+
vi.clearAllMocks();
119+
document.getElementsByTagName("html")[0].innerHTML = "";
120+
cleanup();
121+
});
124122

125-
afterAll(() => {
126-
FieldSchemaMap.clear();
127-
});
123+
afterAll(() => {
124+
FieldSchemaMap.clear();
125+
});
128126

129-
test(
130-
"should append a visual builder container to the DOM",
131-
async () => {
132-
let visualBuilderDOM = document.querySelector(
133-
".visual-builder__container"
134-
);
127+
test("should append a visual builder container to the DOM", async () => {
128+
let visualBuilderDOM = document.querySelector(
129+
".visual-builder__container"
130+
);
135131

136-
expect(visualBuilderDOM).toBeNull();
132+
expect(visualBuilderDOM).toBeNull();
137133

138-
const x = new VisualBuilder();
139-
await waitForBuilderSDKToBeInitialized(
140-
visualBuilderPostMessage
141-
);
134+
const x = new VisualBuilder();
135+
await waitForBuilderSDKToBeInitialized(visualBuilderPostMessage);
142136

143-
visualBuilderDOM = document.querySelector(
144-
`[data-testid="visual-builder__container"]`
145-
);
137+
visualBuilderDOM = document.querySelector(
138+
`[data-testid="visual-builder__container"]`
139+
);
140+
141+
expect(
142+
document.querySelector('[data-testid="visual-builder__cursor"]')
143+
).toBeInTheDocument();
144+
expect(
145+
document.querySelector(
146+
'[data-testid="visual-builder__focused-toolbar"]'
147+
)
148+
).toBeInTheDocument();
149+
expect(
150+
document.querySelector(
151+
'[data-testid="visual-builder__hover-outline"]'
152+
)
153+
).toBeInTheDocument();
154+
expect(
155+
document.querySelector(
156+
'[data-testid="visual-builder__overlay__wrapper"]'
157+
)
158+
).toBeInTheDocument();
159+
x.destroy();
160+
});
146161

147-
expect(
148-
document.querySelector(
149-
'[data-testid="visual-builder__cursor"]'
150-
)
151-
).toBeInTheDocument();
152-
expect(
153-
document.querySelector(
154-
'[data-testid="visual-builder__focused-toolbar"]'
155-
)
156-
).toBeInTheDocument();
157-
expect(
158-
document.querySelector(
159-
'[data-testid="visual-builder__hover-outline"]'
160-
)
161-
).toBeInTheDocument();
162-
expect(
163-
document.querySelector(
164-
'[data-testid="visual-builder__overlay__wrapper"]'
165-
)
166-
).toBeInTheDocument();
167-
x.destroy();
168-
}
162+
test("should add overlay to DOM when clicked", async () => {
163+
const h1Tag = document.createElement("h1");
164+
h1Tag.textContent = INLINE_EDITABLE_FIELD_VALUE;
165+
h1Tag.setAttribute(
166+
"data-cslp",
167+
"all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line"
169168
);
169+
document.body.appendChild(h1Tag);
170+
mockGetBoundingClientRect(h1Tag);
171+
const x = new VisualBuilder();
170172

171-
test.skip("should add overlay to DOM when clicked", async () => {
172-
const h1Tag = document.createElement("h1");
173-
h1Tag.textContent = INLINE_EDITABLE_FIELD_VALUE;
174-
h1Tag.setAttribute(
175-
"data-cslp",
176-
"all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line"
177-
);
178-
document.body.appendChild(h1Tag);
179-
mockGetBoundingClientRect(h1Tag);
173+
await triggerAndWaitForClickAction(visualBuilderPostMessage, h1Tag);
174+
175+
const overlayOutline = document.querySelector(
176+
'[data-testid="visual-builder__overlay--outline"]'
177+
);
178+
// Verify overlay exists and has correct positioning
179+
expect(overlayOutline).toBeInTheDocument();
180+
expect(overlayOutline).toHaveStyle({
181+
top: "10px",
182+
left: "10px",
183+
width: "10px",
184+
height: "5px",
185+
});
186+
187+
x.destroy();
188+
});
189+
190+
// skipped as this is already tested in click related tests.
191+
// this can cause failure for the above test.
192+
describe.skip("on click, the sdk", () => {
193+
afterEach(() => {
194+
document.getElementsByTagName("html")[0].innerHTML = "";
195+
});
196+
197+
test("should do nothing if data-cslp not available", async () => {
198+
const h1 = document.createElement("h1");
199+
200+
document.body.appendChild(h1);
180201
const x = new VisualBuilder();
181-
182-
await triggerAndWaitForClickAction(
183-
visualBuilderPostMessage,
184-
h1Tag
185-
);
186-
187-
const overlayOutline = document.querySelector(
188-
'[data-testid="visual-builder__overlay--outline"]'
189-
);
190-
// Verify overlay exists and has correct positioning
191-
expect(overlayOutline).toBeInTheDocument();
192-
expect(overlayOutline).toHaveStyle({
193-
top: "10px",
194-
left: "10px",
195-
width: "10px",
196-
height: "5px",
202+
await triggerAndWaitForClickAction(visualBuilderPostMessage, h1, {
203+
skipWaitForFieldType: true,
197204
});
198-
205+
206+
expect(h1).not.toHaveAttribute("contenteditable");
207+
expect(h1).not.toHaveAttribute("data-cslp-field-type");
199208
x.destroy();
200209
});
201210

202-
// skipped as this is already tested in click related tests.
203-
// this can cause failure for the above test.
204-
describe.skip("on click, the sdk", () => {
205-
afterEach(() => {
206-
document.getElementsByTagName("html")[0].innerHTML = "";
211+
describe("inline elements must be contenteditable", () => {
212+
let visualBuilder: VisualBuilder;
213+
let h1: HTMLHeadingElement;
214+
beforeAll(() => {
215+
(visualBuilderPostMessage?.send as Mock).mockImplementation(
216+
(eventName: string, args) => {
217+
if (
218+
eventName ===
219+
VisualBuilderPostMessageEvents.GET_FIELD_DATA
220+
) {
221+
const values: Record<string, any> = {
222+
single_line: INLINE_EDITABLE_FIELD_VALUE,
223+
multi_line: INLINE_EDITABLE_FIELD_VALUE,
224+
file: {
225+
uid: "fileUid",
226+
},
227+
};
228+
return Promise.resolve({
229+
fieldData: values[args.entryPath],
230+
});
231+
} else if (
232+
eventName ===
233+
VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES
234+
) {
235+
const names: Record<string, string> = {
236+
"all_fields.blt58a50b4cebae75c5.en-us.single_line":
237+
"Single Line",
238+
"all_fields.blt58a50b4cebae75c5.en-us.multi_line":
239+
"Multi Line",
240+
"all_fields.blt58a50b4cebae75c5.en-us.file":
241+
"File",
242+
};
243+
return Promise.resolve({
244+
[args.cslp]: names[args.cslp],
245+
});
246+
}
247+
return Promise.resolve({});
248+
}
249+
);
207250
});
208251

209-
test("should do nothing if data-cslp not available", async () => {
210-
const h1 = document.createElement("h1");
252+
beforeEach(async () => {
253+
document.getElementsByTagName("html")[0].innerHTML = "";
254+
h1 = document.createElement("h1");
255+
h1.textContent = INLINE_EDITABLE_FIELD_VALUE;
256+
mockGetBoundingClientRect(h1);
257+
h1.setAttribute(
258+
"data-cslp",
259+
"all_fields.blt58a50b4cebae75c5.en-us.single_line"
260+
);
211261

212262
document.body.appendChild(h1);
213-
const x = new VisualBuilder();
263+
visualBuilder = new VisualBuilder();
264+
});
265+
afterEach(() => {
266+
visualBuilder.destroy();
267+
});
268+
test("single line should be contenteditable", async () => {
214269
await triggerAndWaitForClickAction(
215270
visualBuilderPostMessage,
216-
h1,
217-
{ skipWaitForFieldType: true }
271+
h1
218272
);
219273

220-
expect(h1).not.toHaveAttribute("contenteditable");
221-
expect(h1).not.toHaveAttribute("data-cslp-field-type");
222-
x.destroy();
274+
expect(h1).toHaveAttribute("contenteditable");
275+
expect(h1).toHaveAttribute(
276+
"data-cslp-field-type",
277+
"singleline"
278+
);
223279
});
224280

225-
describe("inline elements must be contenteditable", () => {
226-
let visualBuilder: VisualBuilder;
227-
let h1: HTMLHeadingElement;
228-
beforeAll(() => {
229-
(visualBuilderPostMessage?.send as Mock).mockImplementation(
230-
(eventName: string, args) => {
231-
if (
232-
eventName ===
233-
VisualBuilderPostMessageEvents.GET_FIELD_DATA
234-
) {
235-
const values: Record<string, any> = {
236-
single_line: INLINE_EDITABLE_FIELD_VALUE,
237-
multi_line: INLINE_EDITABLE_FIELD_VALUE,
238-
file: {
239-
uid: "fileUid",
240-
},
241-
};
242-
return Promise.resolve({
243-
fieldData: values[args.entryPath],
244-
});
245-
} else if (
246-
eventName ===
247-
VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES
248-
) {
249-
const names: Record<string, string> = {
250-
"all_fields.blt58a50b4cebae75c5.en-us.single_line":
251-
"Single Line",
252-
"all_fields.blt58a50b4cebae75c5.en-us.multi_line":
253-
"Multi Line",
254-
"all_fields.blt58a50b4cebae75c5.en-us.file":
255-
"File",
256-
};
257-
return Promise.resolve({
258-
[args.cslp]: names[args.cslp],
259-
});
260-
}
261-
return Promise.resolve({});
262-
}
263-
);
264-
});
265-
266-
beforeEach(async () => {
267-
document.getElementsByTagName("html")[0].innerHTML = "";
268-
h1 = document.createElement("h1");
269-
h1.textContent = INLINE_EDITABLE_FIELD_VALUE;
270-
mockGetBoundingClientRect(h1);
271-
h1.setAttribute(
272-
"data-cslp",
273-
"all_fields.blt58a50b4cebae75c5.en-us.single_line"
274-
);
275-
276-
document.body.appendChild(h1);
277-
visualBuilder = new VisualBuilder();
278-
});
279-
afterEach(() => {
280-
visualBuilder.destroy();
281-
});
282-
test("single line should be contenteditable", async () => {
283-
await triggerAndWaitForClickAction(
284-
visualBuilderPostMessage,
285-
h1
286-
);
287-
288-
expect(h1).toHaveAttribute("contenteditable");
289-
expect(h1).toHaveAttribute(
290-
"data-cslp-field-type",
291-
"singleline"
292-
);
293-
});
294-
295-
test("multi line should be contenteditable", async () => {
296-
h1.setAttribute(
297-
"data-cslp",
298-
"all_fields.blt58a50b4cebae75c5.en-us.multi_line"
299-
);
300-
await triggerAndWaitForClickAction(
301-
visualBuilderPostMessage,
302-
h1
303-
);
281+
test("multi line should be contenteditable", async () => {
282+
h1.setAttribute(
283+
"data-cslp",
284+
"all_fields.blt58a50b4cebae75c5.en-us.multi_line"
285+
);
286+
await triggerAndWaitForClickAction(
287+
visualBuilderPostMessage,
288+
h1
289+
);
304290

305-
expect(h1).toHaveAttribute("contenteditable");
306-
expect(h1).toHaveAttribute(
307-
"data-cslp-field-type",
308-
"multiline"
309-
);
310-
});
291+
expect(h1).toHaveAttribute("contenteditable");
292+
expect(h1).toHaveAttribute("data-cslp-field-type", "multiline");
311293
});
312294
});
313-
},
314-
);
295+
});
296+
});

0 commit comments

Comments
 (0)