Skip to content

Commit 8dbaf36

Browse files
karancs06karancs06
committed
optimizing
1 parent 053f7be commit 8dbaf36

File tree

2 files changed

+143
-71
lines changed

2 files changed

+143
-71
lines changed

‎src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx‎

Lines changed: 131 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@ vi.mock("../../utils/fieldSchemaMap", async (importOriginal) => {
4444
(contentTypeUid: string, fieldPath: string) => {
4545
// Check cache first for immediate resolution (synchronous)
4646
if (testFieldSchemaCache[contentTypeUid]?.[fieldPath]) {
47-
// Use Promise.resolve() for immediate resolution
48-
return Promise.resolve(
49-
testFieldSchemaCache[contentTypeUid][fieldPath]
50-
);
47+
// Return resolved promise immediately - use cached value
48+
const cachedValue = testFieldSchemaCache[contentTypeUid][fieldPath];
49+
// Use a pre-resolved promise for maximum speed
50+
return Promise.resolve(cachedValue);
5151
}
52-
// Fallback to default mock - resolve immediately
53-
return Promise.resolve({
52+
// Fallback to default mock - resolve immediately with cached schema
53+
const defaultSchema = {
5454
display_name: "Field 0",
5555
data_type: "text",
5656
field_metadata: {
@@ -59,7 +59,13 @@ vi.mock("../../utils/fieldSchemaMap", async (importOriginal) => {
5959
version: 3,
6060
},
6161
uid: "test_field",
62-
});
62+
};
63+
// Cache it for future calls
64+
if (!testFieldSchemaCache[contentTypeUid]) {
65+
testFieldSchemaCache[contentTypeUid] = {};
66+
}
67+
testFieldSchemaCache[contentTypeUid][fieldPath] = defaultSchema;
68+
return Promise.resolve(defaultSchema);
6369
}
6470
),
6571
setFieldSchema: vi
@@ -69,9 +75,11 @@ vi.mock("../../utils/fieldSchemaMap", async (importOriginal) => {
6975
contentTypeUid: string,
7076
schemaMap: Record<string, any>
7177
) => {
78+
// Populate cache synchronously for immediate access
7279
if (!testFieldSchemaCache[contentTypeUid]) {
7380
testFieldSchemaCache[contentTypeUid] = {};
7481
}
82+
// Use Object.assign for fast merging
7583
Object.assign(
7684
testFieldSchemaCache[contentTypeUid],
7785
schemaMap
@@ -136,7 +144,7 @@ vi.mock("../../utils/visualBuilderPostMessage", () => ({
136144
}
137145
});
138146
}
139-
// Resolve immediately with all display names (synchronous resolution)
147+
// Return immediately resolved promise (no delay)
140148
return Promise.resolve(result);
141149
} else if (
142150
eventName ===
@@ -216,11 +224,26 @@ vi.mock("../generators/generateCustomCursor", () => ({
216224
},
217225
}));
218226

227+
// Create a comprehensive mock that returns all styles the component needs
228+
// This avoids repeated function calls and expensive style calculations
229+
// Cache the result so the function returns the same object reference (faster)
230+
const mockStyles = {
231+
"visual-builder__focused-toolbar--variant": "visual-builder__focused-toolbar--variant",
232+
"visual-builder__tooltip--persistent": "visual-builder__tooltip--persistent",
233+
"visual-builder__custom-tooltip": "visual-builder__custom-tooltip",
234+
"visual-builder__focused-toolbar__field-label-wrapper": "visual-builder__focused-toolbar__field-label-wrapper",
235+
"visual-builder__focused-toolbar--field-disabled": "visual-builder__focused-toolbar--field-disabled",
236+
"visual-builder__focused-toolbar__text": "visual-builder__focused-toolbar__text",
237+
"field-label-dropdown-open": "field-label-dropdown-open",
238+
"visual-builder__button": "visual-builder__button",
239+
"visual-builder__button-loader": "visual-builder__button-loader",
240+
"visual-builder__reference-icon-container": "visual-builder__reference-icon-container",
241+
"visual-builder__content-type-icon": "visual-builder__content-type-icon",
242+
};
243+
244+
// Return cached object to avoid object creation overhead
219245
vi.mock("../visualBuilder.style", () => ({
220-
visualBuilderStyles: vi.fn().mockReturnValue({
221-
"visual-builder__focused-toolbar--variant":
222-
"visual-builder__focused-toolbar--variant",
223-
}),
246+
visualBuilderStyles: vi.fn(() => mockStyles),
224247
}));
225248

226249
vi.mock("../VariantIndicator", () => ({
@@ -312,18 +335,20 @@ describe("FieldLabelWrapperComponent", () => {
312335
const mockGetParentEditable = () => document.createElement("div");
313336

314337
test("renders current field and parent fields correctly", async () => {
315-
const { container } = render(
316-
<FieldLabelWrapperComponent
317-
fieldMetadata={mockFieldMetadata}
318-
eventDetails={mockEventDetails}
319-
parentPaths={PARENT_PATHS}
320-
getParentEditableElement={mockGetParentEditable}
321-
/>
322-
);
323-
324-
// Use act() to ensure React processes all state updates
338+
// Wrap render in act to batch all updates and reduce reconciliation cycles
339+
let container: HTMLElement;
325340
await act(async () => {
326-
await new Promise(resolve => setTimeout(resolve, 0));
341+
const result = render(
342+
<FieldLabelWrapperComponent
343+
fieldMetadata={mockFieldMetadata}
344+
eventDetails={mockEventDetails}
345+
parentPaths={PARENT_PATHS}
346+
getParentEditableElement={mockGetParentEditable}
347+
/>
348+
);
349+
container = result.container;
350+
// Use queueMicrotask for faster resolution than setTimeout
351+
await new Promise(resolve => queueMicrotask(resolve));
327352
});
328353

329354
// Use waitFor with shorter timeout since mocks resolve immediately
@@ -340,18 +365,20 @@ describe("FieldLabelWrapperComponent", () => {
340365
});
341366

342367
test("displays current field icon", async () => {
343-
const { container } = render(
344-
<FieldLabelWrapperComponent
345-
fieldMetadata={mockFieldMetadata}
346-
eventDetails={mockEventDetails}
347-
parentPaths={[]}
348-
getParentEditableElement={mockGetParentEditable}
349-
/>
350-
);
351-
352-
// Use act() to ensure React processes all state updates
368+
// Wrap render in act to batch all updates and reduce reconciliation cycles
369+
let container: HTMLElement;
353370
await act(async () => {
354-
await new Promise(resolve => setTimeout(resolve, 0));
371+
const result = render(
372+
<FieldLabelWrapperComponent
373+
fieldMetadata={mockFieldMetadata}
374+
eventDetails={mockEventDetails}
375+
parentPaths={[]}
376+
getParentEditableElement={mockGetParentEditable}
377+
/>
378+
);
379+
container = result.container;
380+
// Use queueMicrotask for faster resolution than setTimeout
381+
await new Promise(resolve => queueMicrotask(resolve));
355382
});
356383

357384
// Use findByTestId which is optimized for async queries
@@ -371,21 +398,29 @@ describe("FieldLabelWrapperComponent", () => {
371398
reason: "You have only read access to this field",
372399
});
373400
const renderStartTime = performance.now();
374-
const { container } = render(
375-
<FieldLabelWrapperComponent
376-
fieldMetadata={mockFieldMetadata}
377-
eventDetails={mockEventDetails}
378-
parentPaths={[]}
379-
getParentEditableElement={mockGetParentEditable}
380-
/>
381-
);
401+
// Wrap render in act to batch all updates and reduce reconciliation cycles
402+
let container: HTMLElement;
403+
await act(async () => {
404+
const result = render(
405+
<FieldLabelWrapperComponent
406+
fieldMetadata={mockFieldMetadata}
407+
eventDetails={mockEventDetails}
408+
parentPaths={[]}
409+
getParentEditableElement={mockGetParentEditable}
410+
/>
411+
);
412+
container = result.container;
413+
// Use queueMicrotask for faster resolution than setTimeout
414+
await new Promise(resolve => queueMicrotask(resolve));
415+
});
382416
const renderEndTime = performance.now();
383417
console.log(`[TIMING] test - render: ${(renderEndTime - renderStartTime).toFixed(2)}ms`);
384418

385419
// Use act() to ensure React processes all state updates
386420
const actStartTime = performance.now();
387421
await act(async () => {
388-
await new Promise(resolve => setTimeout(resolve, 0));
422+
// Use queueMicrotask for faster resolution than setTimeout
423+
await new Promise(resolve => queueMicrotask(resolve));
389424
});
390425
const actEndTime = performance.now();
391426
console.log(`[TIMING] test - act: ${(actEndTime - actStartTime).toFixed(2)}ms`);
@@ -410,21 +445,29 @@ describe("FieldLabelWrapperComponent", () => {
410445
test("calls isFieldDisabled with correct arguments", async () => {
411446
const testStartTime = performance.now();
412447
const renderStartTime = performance.now();
413-
const { container } = render(
414-
<FieldLabelWrapperComponent
415-
fieldMetadata={mockFieldMetadata}
416-
eventDetails={mockEventDetails}
417-
parentPaths={[]}
418-
getParentEditableElement={mockGetParentEditable}
419-
/>
420-
);
448+
// Wrap render in act to batch all updates and reduce reconciliation cycles
449+
let container: HTMLElement;
450+
await act(async () => {
451+
const result = render(
452+
<FieldLabelWrapperComponent
453+
fieldMetadata={mockFieldMetadata}
454+
eventDetails={mockEventDetails}
455+
parentPaths={[]}
456+
getParentEditableElement={mockGetParentEditable}
457+
/>
458+
);
459+
container = result.container;
460+
// Use queueMicrotask for faster resolution than setTimeout
461+
await new Promise(resolve => queueMicrotask(resolve));
462+
});
421463
const renderEndTime = performance.now();
422464
console.log(`[TIMING] test - render: ${(renderEndTime - renderStartTime).toFixed(2)}ms`);
423465

424466
// Use act() to ensure React processes all state updates
425467
const actStartTime = performance.now();
426468
await act(async () => {
427-
await new Promise(resolve => setTimeout(resolve, 0));
469+
// Use queueMicrotask for faster resolution than setTimeout
470+
await new Promise(resolve => queueMicrotask(resolve));
428471
});
429472
const actEndTime = performance.now();
430473
console.log(`[TIMING] test - act: ${(actEndTime - actStartTime).toFixed(2)}ms`);
@@ -502,21 +545,29 @@ describe("FieldLabelWrapperComponent", () => {
502545
);
503546

504547
const renderStartTime = performance.now();
505-
const { container } = render(
506-
<FieldLabelWrapperComponent
507-
fieldMetadata={mockFieldMetadata}
508-
eventDetails={mockEventDetails}
509-
parentPaths={[]}
510-
getParentEditableElement={mockGetParentEditable}
511-
/>
512-
);
548+
// Wrap render in act to batch all updates and reduce reconciliation cycles
549+
let container: HTMLElement;
550+
await act(async () => {
551+
const result = render(
552+
<FieldLabelWrapperComponent
553+
fieldMetadata={mockFieldMetadata}
554+
eventDetails={mockEventDetails}
555+
parentPaths={[]}
556+
getParentEditableElement={mockGetParentEditable}
557+
/>
558+
);
559+
container = result.container;
560+
// Use queueMicrotask for faster resolution than setTimeout
561+
await new Promise(resolve => queueMicrotask(resolve));
562+
});
513563
const renderEndTime = performance.now();
514564
console.log(`[TIMING] test - render: ${(renderEndTime - renderStartTime).toFixed(2)}ms`);
515565

516566
// Use act() to ensure React processes all state updates
517567
const actStartTime = performance.now();
518568
await act(async () => {
519-
await new Promise(resolve => setTimeout(resolve, 0));
569+
// Use queueMicrotask for faster resolution than setTimeout
570+
await new Promise(resolve => queueMicrotask(resolve));
520571
});
521572
const actEndTime = performance.now();
522573
console.log(`[TIMING] test - act: ${(actEndTime - actStartTime).toFixed(2)}ms`);
@@ -582,8 +633,9 @@ describe("FieldLabelWrapperComponent", () => {
582633
);
583634

584635
// Use act() to ensure React processes all state updates
636+
// Use queueMicrotask for faster resolution than setTimeout
585637
await act(async () => {
586-
await new Promise(resolve => setTimeout(resolve, 0));
638+
await new Promise(resolve => queueMicrotask(resolve));
587639
});
588640

589641
// Wait for component to load and check variant indicator
@@ -644,21 +696,29 @@ describe("FieldLabelWrapperComponent", () => {
644696
test("does not apply variant CSS classes when field has no variant", async () => {
645697
const testStartTime = performance.now();
646698
const renderStartTime = performance.now();
647-
const { container } = render(
648-
<FieldLabelWrapperComponent
649-
fieldMetadata={mockFieldMetadata}
650-
eventDetails={mockEventDetails}
651-
parentPaths={[]}
652-
getParentEditableElement={mockGetParentEditable}
653-
/>
654-
);
699+
// Wrap render in act to batch all updates and reduce reconciliation cycles
700+
let container: HTMLElement;
701+
await act(async () => {
702+
const result = render(
703+
<FieldLabelWrapperComponent
704+
fieldMetadata={mockFieldMetadata}
705+
eventDetails={mockEventDetails}
706+
parentPaths={[]}
707+
getParentEditableElement={mockGetParentEditable}
708+
/>
709+
);
710+
container = result.container;
711+
// Use queueMicrotask for faster resolution than setTimeout
712+
await new Promise(resolve => queueMicrotask(resolve));
713+
});
655714
const renderEndTime = performance.now();
656715
console.log(`[TIMING] test - render: ${(renderEndTime - renderStartTime).toFixed(2)}ms`);
657716

658717
// Use act() to ensure React processes all state updates
659718
const actStartTime = performance.now();
660719
await act(async () => {
661-
await new Promise(resolve => setTimeout(resolve, 0));
720+
// Use queueMicrotask for faster resolution than setTimeout
721+
await new Promise(resolve => queueMicrotask(resolve));
662722
});
663723
const actEndTime = performance.now();
664724
console.log(`[TIMING] test - act: ${(actEndTime - actStartTime).toFixed(2)}ms`);

‎src/visualBuilder/utils/__test__/multipleElementAddButton.test.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,18 @@ vi.mock("@preact/signals", async (importOriginal) => {
5959
};
6060
});
6161

62+
// Optimize preact render in tests - use a faster synchronous render
63+
vi.mock("preact", async (importOriginal) => {
64+
const preact = await importOriginal<typeof import("preact")>();
65+
const originalRender = preact.render;
66+
67+
// In tests, use original render but ensure it's synchronous where possible
68+
return {
69+
...preact,
70+
render: originalRender,
71+
};
72+
});
73+
6274
// TODO: rewrite this
6375
describe("getChildrenDirection", () => {
6476
let visualBuilderContainer: HTMLDivElement;

0 commit comments

Comments
 (0)