Skip to content

Commit 58dc4dc

Browse files
karancs06karancs06
committed
timeout improve
1 parent d657b13 commit 58dc4dc

1 file changed

Lines changed: 69 additions & 104 deletions

File tree

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

Lines changed: 69 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -394,25 +394,24 @@ describe("FieldLabelWrapperComponent", () => {
394394
const mockGetParentEditable = () => document.createElement("div");
395395

396396
test("renders current field and parent fields correctly", async () => {
397-
// Wrap render in act to batch all updates and reduce reconciliation cycles
398-
let container!: HTMLElement;
399-
await act(async () => {
400-
const result = render(
401-
<FieldLabelWrapperComponent
402-
fieldMetadata={mockFieldMetadata}
403-
eventDetails={mockEventDetails}
404-
parentPaths={PARENT_PATHS}
405-
getParentEditableElement={mockGetParentEditable}
406-
/>
407-
);
408-
container = result.container as HTMLElement;
409-
// Use queueMicrotask for faster resolution than setTimeout
410-
await new Promise<void>((resolve) =>
411-
queueMicrotask(() => resolve())
412-
);
413-
});
397+
const { container } = render(
398+
<FieldLabelWrapperComponent
399+
fieldMetadata={mockFieldMetadata}
400+
eventDetails={mockEventDetails}
401+
parentPaths={PARENT_PATHS}
402+
getParentEditableElement={mockGetParentEditable}
403+
/>
404+
);
414405

415-
// Use waitFor with shorter timeout since mocks resolve immediately
406+
// Use findByTestId to wait for component to load
407+
await findByTestId(
408+
container as HTMLElement,
409+
"visual-builder__focused-toolbar__field-label-wrapper",
410+
{},
411+
{ timeout: 1000 }
412+
);
413+
414+
// Wait for text content to appear (display names may take a microtask)
416415
await waitFor(
417416
() => {
418417
const text = Array.from(container.querySelectorAll("*")).find(
@@ -421,32 +420,23 @@ describe("FieldLabelWrapperComponent", () => {
421420
if (!text) throw new Error("Text not found");
422421
expect(text).toBeInTheDocument();
423422
},
424-
{ timeout: 1000, interval: 10 }
423+
{ timeout: 1000, interval: 5 }
425424
);
426425
});
427426

428427
test("displays current field icon", async () => {
429-
// Wrap render in act to batch all updates and reduce reconciliation cycles
430-
let container!: HTMLElement;
431-
await act(async () => {
432-
const result = render(
433-
<FieldLabelWrapperComponent
434-
fieldMetadata={mockFieldMetadata}
435-
eventDetails={mockEventDetails}
436-
parentPaths={[]}
437-
getParentEditableElement={mockGetParentEditable}
438-
/>
439-
);
440-
container = result.container as HTMLElement;
441-
// Use queueMicrotask for faster resolution than setTimeout
442-
await new Promise<void>((resolve) =>
443-
queueMicrotask(() => resolve())
444-
);
445-
});
428+
const { container } = render(
429+
<FieldLabelWrapperComponent
430+
fieldMetadata={mockFieldMetadata}
431+
eventDetails={mockEventDetails}
432+
parentPaths={[]}
433+
getParentEditableElement={mockGetParentEditable}
434+
/>
435+
);
446436

447-
// Use findByTestId which is optimized for async queries
437+
// Use findByTestId which is optimized for async queries and handles act() internally
448438
const icon = await findByTestId(
449-
container,
439+
container as HTMLElement,
450440
"visual-builder__field-icon",
451441
{},
452442
{ timeout: 1000 }
@@ -468,22 +458,22 @@ describe("FieldLabelWrapperComponent", () => {
468458
/>
469459
);
470460

471-
// Use act() with queueMicrotask for faster resolution
472-
await act(async () => {
473-
await new Promise<void>((resolve) =>
474-
queueMicrotask(() => resolve())
475-
);
476-
});
477-
478-
// Use findByTestId which is optimized for async queries
461+
// Use findByTestId to wait for component, then wait for disabled class
479462
const fieldLabel = (await findByTestId(
480463
container as HTMLElement,
481464
"visual-builder__focused-toolbar__field-label-wrapper",
482465
{},
483466
{ timeout: 1000 }
484467
)) as HTMLElement;
485-
expect(fieldLabel).toHaveClass(
486-
"visual-builder__focused-toolbar--field-disabled"
468+
469+
// Wait for disabled class to be applied (may take a microtask)
470+
await waitFor(
471+
() => {
472+
expect(fieldLabel).toHaveClass(
473+
"visual-builder__focused-toolbar--field-disabled"
474+
);
475+
},
476+
{ timeout: 1000, interval: 5 }
487477
);
488478
});
489479

@@ -497,15 +487,7 @@ describe("FieldLabelWrapperComponent", () => {
497487
/>
498488
);
499489

500-
// Use act() with queueMicrotask for faster resolution
501-
await act(async () => {
502-
await new Promise<void>((resolve) =>
503-
queueMicrotask(() => resolve())
504-
);
505-
});
506-
507-
// Wait for component to mount and isFieldDisabled to be called
508-
// Use findByTestId for better performance than querySelector
490+
// Use findByTestId which handles act() internally - no need for separate act()
509491
await findByTestId(
510492
container as HTMLElement,
511493
"visual-builder__focused-toolbar__field-label-wrapper",
@@ -614,23 +596,15 @@ describe("FieldLabelWrapperComponent", () => {
614596
/>
615597
);
616598

617-
// Wait for component to finish loading (button enabled) and variant indicator to appear
618-
// Reduced timeout to 1000ms since mocks resolve immediately
619-
await waitFor(
620-
() => {
621-
const button = container.querySelector("button");
622-
if (!button || button.hasAttribute("disabled")) {
623-
throw new Error("Button still disabled");
624-
}
625-
const variantIndicator = container.querySelector(
626-
"[data-testid='variant-indicator']"
627-
);
628-
if (!variantIndicator) {
629-
throw new Error("Variant indicator not found");
630-
}
631-
},
632-
{ timeout: 1000, interval: 5 }
599+
// Use findByTestId to wait for variant indicator - faster and more reliable
600+
// No need to check button since findByTestId ensures component is loaded
601+
const variantIndicator = await findByTestId(
602+
container as HTMLElement,
603+
"variant-indicator",
604+
{},
605+
{ timeout: 1000 }
633606
);
607+
expect(variantIndicator).toBeInTheDocument();
634608
});
635609

636610
test("does not render VariantIndicator when field has no variant", async () => {
@@ -675,20 +649,18 @@ describe("FieldLabelWrapperComponent", () => {
675649
/>
676650
);
677651

678-
// Wait for component to finish loading (button enabled) and variant class to appear
679-
// Reduced timeout to 1000ms since mocks resolve immediately
652+
// Use findByTestId to wait for field label wrapper - faster and more reliable
653+
// Then check for variant class - no need to wait for button
654+
const fieldLabelWrapper = (await findByTestId(
655+
container as HTMLElement,
656+
"visual-builder__focused-toolbar__field-label-wrapper",
657+
{},
658+
{ timeout: 1000 }
659+
)) as HTMLElement;
660+
661+
// Wait for variant class to be applied (may take a microtask)
680662
await waitFor(
681663
() => {
682-
const button = container.querySelector("button");
683-
if (!button || button.hasAttribute("disabled")) {
684-
throw new Error("Button still disabled");
685-
}
686-
const fieldLabelWrapper = container.querySelector(
687-
"[data-testid='visual-builder__focused-toolbar__field-label-wrapper']"
688-
);
689-
if (!fieldLabelWrapper) {
690-
throw new Error("Field label wrapper not found");
691-
}
692664
expect(fieldLabelWrapper).toHaveClass(
693665
"visual-builder__focused-toolbar--variant"
694666
);
@@ -707,25 +679,18 @@ describe("FieldLabelWrapperComponent", () => {
707679
/>
708680
);
709681

710-
// Wait for component to finish loading and verify variant class is not present
711-
// Using waitFor to check both button enabled and class absence in one pass
712-
await waitFor(
713-
() => {
714-
const button = container.querySelector("button");
715-
if (!button || button.hasAttribute("disabled")) {
716-
throw new Error("Button still disabled");
717-
}
718-
const fieldLabelWrapper = container.querySelector(
719-
"[data-testid='visual-builder__focused-toolbar__field-label-wrapper']"
720-
);
721-
if (!fieldLabelWrapper) {
722-
throw new Error("Field label wrapper not found");
723-
}
724-
expect(fieldLabelWrapper).not.toHaveClass(
725-
"visual-builder__focused-toolbar--variant"
726-
);
727-
},
728-
{ timeout: 1000, interval: 5 }
682+
// Use findByTestId which is optimized and handles act() internally
683+
// This is much faster than waitFor and avoids timeout issues
684+
const fieldLabelWrapper = (await findByTestId(
685+
container as HTMLElement,
686+
"visual-builder__focused-toolbar__field-label-wrapper",
687+
{},
688+
{ timeout: 1000 }
689+
)) as HTMLElement;
690+
691+
// Direct assertion - no need to wait for button since component is loaded
692+
expect(fieldLabelWrapper).not.toHaveClass(
693+
"visual-builder__focused-toolbar--variant"
729694
);
730695
});
731696
});

0 commit comments

Comments
 (0)