Skip to content

Commit 53c1641

Browse files
karancs06karancs06
committed
more improvement
1 parent f4156b1 commit 53c1641

1 file changed

Lines changed: 68 additions & 105 deletions

File tree

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

Lines changed: 68 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -342,23 +342,21 @@ describe("FieldLabelWrapperComponent", () => {
342342
const mockGetParentEditable = () => document.createElement("div");
343343

344344
test("renders current field and parent fields correctly", async () => {
345-
// Wrap render in act to batch all updates and reduce reconciliation cycles
346-
let container!: HTMLElement;
347-
await act(async () => {
348-
const result = render(
349-
<FieldLabelWrapperComponent
350-
fieldMetadata={mockFieldMetadata}
351-
eventDetails={mockEventDetails}
352-
parentPaths={PARENT_PATHS}
353-
getParentEditableElement={mockGetParentEditable}
354-
/>
355-
);
356-
container = result.container as HTMLElement;
357-
// Use queueMicrotask for faster resolution than setTimeout
358-
await new Promise<void>((resolve) =>
359-
queueMicrotask(() => resolve())
360-
);
361-
});
345+
// render() doesn't need act() wrapper - it handles updates internally
346+
// Removing act() wrapper eliminates the 20-33 second render bottleneck
347+
const renderStartTime = performance.now();
348+
const { container } = render(
349+
<FieldLabelWrapperComponent
350+
fieldMetadata={mockFieldMetadata}
351+
eventDetails={mockEventDetails}
352+
parentPaths={PARENT_PATHS}
353+
getParentEditableElement={mockGetParentEditable}
354+
/>
355+
);
356+
const renderEndTime = performance.now();
357+
console.log(
358+
`[TIMING] test - render: ${(renderEndTime - renderStartTime).toFixed(2)}ms`
359+
);
362360

363361
// Use waitFor with shorter timeout since mocks resolve immediately
364362
await waitFor(
@@ -374,27 +372,20 @@ describe("FieldLabelWrapperComponent", () => {
374372
});
375373

376374
test("displays current field icon", async () => {
377-
// Wrap render in act to batch all updates and reduce reconciliation cycles
378-
let container!: HTMLElement;
379-
await act(async () => {
380-
const result = render(
381-
<FieldLabelWrapperComponent
382-
fieldMetadata={mockFieldMetadata}
383-
eventDetails={mockEventDetails}
384-
parentPaths={[]}
385-
getParentEditableElement={mockGetParentEditable}
386-
/>
387-
);
388-
container = result.container as HTMLElement;
389-
// Use queueMicrotask for faster resolution than setTimeout
390-
await new Promise<void>((resolve) =>
391-
queueMicrotask(() => resolve())
392-
);
393-
});
375+
// render() doesn't need act() wrapper - it handles updates internally
376+
// Removing act() wrapper eliminates the render bottleneck
377+
const { container } = render(
378+
<FieldLabelWrapperComponent
379+
fieldMetadata={mockFieldMetadata}
380+
eventDetails={mockEventDetails}
381+
parentPaths={[]}
382+
getParentEditableElement={mockGetParentEditable}
383+
/>
384+
);
394385

395386
// Use findByTestId which is optimized for async queries
396387
const icon = await findByTestId(
397-
container,
388+
container as HTMLElement,
398389
"visual-builder__field-icon",
399390
{},
400391
{ timeout: 1000 }
@@ -409,23 +400,16 @@ describe("FieldLabelWrapperComponent", () => {
409400
reason: "You have only read access to this field",
410401
});
411402
const renderStartTime = performance.now();
412-
// Wrap render in act to batch all updates and reduce reconciliation cycles
413-
let container!: HTMLElement;
414-
await act(async () => {
415-
const result = render(
416-
<FieldLabelWrapperComponent
417-
fieldMetadata={mockFieldMetadata}
418-
eventDetails={mockEventDetails}
419-
parentPaths={[]}
420-
getParentEditableElement={mockGetParentEditable}
421-
/>
422-
);
423-
container = result.container as HTMLElement;
424-
// Use queueMicrotask for faster resolution than setTimeout
425-
await new Promise<void>((resolve) =>
426-
queueMicrotask(() => resolve())
427-
);
428-
});
403+
// render() doesn't need act() wrapper - it handles updates internally
404+
// Removing act() wrapper eliminates the 20-33 second render bottleneck
405+
const { container } = render(
406+
<FieldLabelWrapperComponent
407+
fieldMetadata={mockFieldMetadata}
408+
eventDetails={mockEventDetails}
409+
parentPaths={[]}
410+
getParentEditableElement={mockGetParentEditable}
411+
/>
412+
);
429413
const renderEndTime = performance.now();
430414
console.log(
431415
`[TIMING] test - render: ${(renderEndTime - renderStartTime).toFixed(2)}ms`
@@ -435,7 +419,7 @@ describe("FieldLabelWrapperComponent", () => {
435419
// This eliminates the redundant act() bottleneck
436420
const findByTestIdStartTime = performance.now();
437421
const fieldLabel = (await findByTestId(
438-
container,
422+
container as HTMLElement,
439423
"visual-builder__focused-toolbar__field-label-wrapper",
440424
{},
441425
{ timeout: 1000 }
@@ -456,23 +440,16 @@ describe("FieldLabelWrapperComponent", () => {
456440
test("calls isFieldDisabled with correct arguments", async () => {
457441
const testStartTime = performance.now();
458442
const renderStartTime = performance.now();
459-
// Wrap render in act to batch all updates and reduce reconciliation cycles
460-
let container!: HTMLElement;
461-
await act(async () => {
462-
const result = render(
463-
<FieldLabelWrapperComponent
464-
fieldMetadata={mockFieldMetadata}
465-
eventDetails={mockEventDetails}
466-
parentPaths={[]}
467-
getParentEditableElement={mockGetParentEditable}
468-
/>
469-
);
470-
container = result.container as HTMLElement;
471-
// Use queueMicrotask for faster resolution than setTimeout
472-
await new Promise<void>((resolve) =>
473-
queueMicrotask(() => resolve())
474-
);
475-
});
443+
// render() doesn't need act() wrapper - it handles updates internally
444+
// Removing act() wrapper eliminates the 20-33 second render bottleneck
445+
const { container } = render(
446+
<FieldLabelWrapperComponent
447+
fieldMetadata={mockFieldMetadata}
448+
eventDetails={mockEventDetails}
449+
parentPaths={[]}
450+
getParentEditableElement={mockGetParentEditable}
451+
/>
452+
);
476453
const renderEndTime = performance.now();
477454
console.log(
478455
`[TIMING] test - render: ${(renderEndTime - renderStartTime).toFixed(2)}ms`
@@ -556,23 +533,16 @@ describe("FieldLabelWrapperComponent", () => {
556533
);
557534

558535
const renderStartTime = performance.now();
559-
// Wrap render in act to batch all updates and reduce reconciliation cycles
560-
let container!: HTMLElement;
561-
await act(async () => {
562-
const result = render(
563-
<FieldLabelWrapperComponent
564-
fieldMetadata={mockFieldMetadata}
565-
eventDetails={mockEventDetails}
566-
parentPaths={[]}
567-
getParentEditableElement={mockGetParentEditable}
568-
/>
569-
);
570-
container = result.container as HTMLElement;
571-
// Use queueMicrotask for faster resolution than setTimeout
572-
await new Promise<void>((resolve) =>
573-
queueMicrotask(() => resolve())
574-
);
575-
});
536+
// render() doesn't need act() wrapper - it handles updates internally
537+
// Removing act() wrapper eliminates the 20-33 second render bottleneck
538+
const { container } = render(
539+
<FieldLabelWrapperComponent
540+
fieldMetadata={mockFieldMetadata}
541+
eventDetails={mockEventDetails}
542+
parentPaths={[]}
543+
getParentEditableElement={mockGetParentEditable}
544+
/>
545+
);
576546
const renderEndTime = performance.now();
577547
console.log(
578548
`[TIMING] test - render: ${(renderEndTime - renderStartTime).toFixed(2)}ms`
@@ -704,23 +674,16 @@ describe("FieldLabelWrapperComponent", () => {
704674
test("does not apply variant CSS classes when field has no variant", async () => {
705675
const testStartTime = performance.now();
706676
const renderStartTime = performance.now();
707-
// Wrap render in act to batch all updates and reduce reconciliation cycles
708-
let container!: HTMLElement;
709-
await act(async () => {
710-
const result = render(
711-
<FieldLabelWrapperComponent
712-
fieldMetadata={mockFieldMetadata}
713-
eventDetails={mockEventDetails}
714-
parentPaths={[]}
715-
getParentEditableElement={mockGetParentEditable}
716-
/>
717-
);
718-
container = result.container as HTMLElement;
719-
// Use queueMicrotask for faster resolution than setTimeout
720-
await new Promise<void>((resolve) =>
721-
queueMicrotask(() => resolve())
722-
);
723-
});
677+
// render() doesn't need act() wrapper - it handles updates internally
678+
// Removing act() wrapper eliminates the 20-33 second render bottleneck
679+
const { container } = render(
680+
<FieldLabelWrapperComponent
681+
fieldMetadata={mockFieldMetadata}
682+
eventDetails={mockEventDetails}
683+
parentPaths={[]}
684+
getParentEditableElement={mockGetParentEditable}
685+
/>
686+
);
724687
const renderEndTime = performance.now();
725688
console.log(
726689
`[TIMING] test - render: ${(renderEndTime - renderStartTime).toFixed(2)}ms`
@@ -731,7 +694,7 @@ describe("FieldLabelWrapperComponent", () => {
731694
// Use findByTestId which is optimized for async queries
732695
const findByTestIdStartTime = performance.now();
733696
const fieldLabelWrapper = (await findByTestId(
734-
container,
697+
container as HTMLElement,
735698
"visual-builder__focused-toolbar__field-label-wrapper",
736699
{},
737700
{ timeout: 1000 }

0 commit comments

Comments
 (0)