chore: Fixed the intermittent failing browser tests by ArakTaiRoth · Pull Request #3410 · GovAlta/ui-components

ArakTaiRoth · 2026-02-10T03:15:28Z

Before (the change)

We had multiple intermittent failures in various browser tests.

Components affected:

Date Picker
Menu Button
Radio
Text Area
Temporary Notification

After (the change)

Hopefully no more intermittent failures. Though I did notice some failures in datagrid.browser.spec.tsx, but I never modified that file as it's quite different from the rest of our browser tests.

Make sure that you've checked the boxes below before you submit the PR

I have read and followed the setup steps
I have created necessary unit tests
I have tested the functionality in both React and Angular.

Steps needed to test

Explanation of changes made:

datepicker.browser.spec.tsx
- Modified renders with props to use an exact date as a value instead of basing it off today's date (which cares about timezone)
- Modified waitFor under browser event to detect the element only, and then click it outside of the waitFor, this should avoid a race condition
- Removed checking the month dropdown in the disabled test, I couldn't get that to work reliable, if you have a better way let me know. Also changed it to check the actual elements, this seemed to work better.
textarea.browser.spec.tsx
- Modified a couple waitFor statements to only check if an object exits, clicking the object is done outside. Same reason as above
radio.browser.spec.tsx
- Modified it to always re-get the elements involved in the enable/disable test. This should help due to React re-rendering wonkiness
menu-button.browser.spec.tsx
- Same waitFor changes as above made in this file as well
temporary-notification-ctrl.browser.spec.tsx
- Same waitFor changes as above

Also updated the vitest package to 4.0.13 (actually 4.0.18 I think), so it's the same as the other vitest packages (@vitest/browser for example). We were getting version mismatch errors, and that could potentially cause other issues with tests.

chrisolsen · 2026-02-10T20:25:38Z

+      const datePickerDay = result.getByTestId("input-day").element() as HTMLInputElement;
+      const datePickerYear = result.getByTestId("input-year").element() as HTMLInputElement;
+
+      expect(datePickerDay.disabled).toBe(true);
+      expect(datePickerYear.disabled).toBe(true);


How to move the locators out of the waitFor and use the locators to perform the test on. The month test is also included.

const result = render(<Component />); const datePickerDayLoc = result.getByTestId("input-day"); const datePickerMonthLoc = result.getByTestId("input-month").getByTestId("input"); const datePickerYearLoc = result.getByTestId("input-year"); await vi.waitFor(() => { expect(datePickerDayLoc).toBeDisabled(); expect(datePickerMonthLoc).toBeDisabled(); expect(datePickerYearLoc).toBeDisabled(); });

@chrisolsen The actual fix for this it seems was for the month input, getting "input-month", and then getting "input" based off of that.

chrisolsen · 2026-02-10T20:53:28Z

-
-        const menuAction = result.getByTestId(`menu-action-${i}`);
-        expect(menuAction).toBeDefined();
+      const menuAction = result.getByTestId(`menu-action-${i}`);


This locator can also be moved out of the loop with

const result = render(<Component />); const menuButton = result.getByTestId("menu-button"); const menuActions = result.getByTestId(/menu-action-*/); for (let i = 1; i <= 3; i++) { await menuButton.click(); await menuActions.nth(i-1).click(); await vi.waitFor(() => { expect(onAction).toHaveBeenNthCalledWith(i, { action: `action${i}`, }); expect(onAction).toHaveBeenCalledTimes(i); }); } expect(onAction).toHaveBeenCalledTimes(3);

Didn't know about the nth() function, thanks.

chrisolsen · 2026-02-10T20:54:14Z

-        await menuAction.click();
+      await menuAction.click();

-        // Verify the correct action was triggered


Is there a reason the comments were removed? They do make things easier to follow

I removed a lot of things, just assumed this wasn't necessary anymore either. I've re-added this specific comment.

chrisolsen · 2026-02-10T20:57:07Z

-      expect(actionIcon).toBeDefined();
+    await vi.waitFor(() => {
+      expect(actionIcon.elements().length).toBe(1);
+    });


This isn't needed, as the element() method in the next block will confirm that
the actionIcon exists.

That's fair. I was just trying to keep it doing as many of the same things as it was previously doing as I could.

chrisolsen · 2026-02-10T20:58:38Z

+    const firstAction = result.getByTestId("first-action");
+    const secondAction = result.getByTestId("second-action");

-    // Click first action


These comments also make things much easier to understand why things are being done the way they are.

I assumed firstAction.click() kind of implied "Click first action".

The comments were initially added for clarity and removing them makes things hard to follow, so I think they all need to be added back

@chrisolsen All comments have been restored, some remain gone though because their functionality is now gone

chrisolsen · 2026-02-10T21:52:00Z

@@ -40,62 +40,51 @@ describe("Radio", () => {
    };


After looking a little more into some of the Locator methods I think we could improve this even more.

it("should enable and disable radio group programmatically", async () => { const Component = () => { const [isDisabled, setIsDisabled] = useState(true); const [selectedValue, setSelectedValue] = useState(""); return ( <div> <GoabRadioGroup name="fruits" disabled={isDisabled} value={selectedValue} onChange={(e) => { setSelectedValue(e.value); }} > <GoabRadioItem name="fruits" value="apple" label="Apple" /> <GoabRadioItem name="fruits" value="banana" label="Banana" /> </GoabRadioGroup> <GoabButton testId="toggle-button" onClick={() => { setIsDisabled((value) => !value); }} > {isDisabled ? "Enable" : "Disable"} </GoabButton> <div data-testid="selected-value">{selectedValue}</div> </div> ); }; const result = render(<Component />); const radioItemsLoc = result.getByTestId(/^radio-option-.*/); const selectedValue = result.getByTestId("selected-value"); // check that the radio items are all disabled await vi.waitFor(() => { const els = radioItemsLoc.all(); expect(els.length).toBe(2); for (const item of els) { expect(item).toBeDisabled(); } }); // validate the selected value is blank await vi.waitFor(() => { expect(selectedValue.element().textContent).toBe(""); }); // enable the radio group const toggleButton = result.getByTestId("toggle-button"); await toggleButton.click(); // validate they are now enabled await vi.waitFor(() => { for (const item of radioItemsLoc.all()) { expect(item).toBeEnabled(); } }); // click the first radio item const appleRadioItem = radioItemsLoc.nth(0); appleRadioItem.element().click(); // indicator of the selected value is changed await vi.waitFor(() => { expect(selectedValue.element().textContent).toBe("apple"); }); // revert to disabled state await toggleButton.click(); // verify they are disabled await vi.waitFor(() => { for (const item of radioItemsLoc.all()) { expect(item).toBeDisabled(); } }); // click on a disabled item const bananaRadioItem = radioItemsLoc.nth(1); bananaRadioItem.element().click(); // old value is retained await vi.waitFor(() => { expect(selectedValue.element().textContent).toBe("apple"); });

I put this in place. I made a small change to your code, because the click() used on the radio items near the end didn't work in your version.

chrisolsen · 2026-02-10T22:03:39Z

-
-      await userEvent.type(textareaEL, "s");
+    await vi.waitFor(() => {
+      expect(textarea.elements().length).toBe(1);


This could be shortened to textarea.length

chrisolsen · 2026-02-10T22:05:03Z


+    const textareaEL = textarea.element() as HTMLTextAreaElement;
+    textareaEL.focus();
+    await userEvent.type(textareaEL, "s");


No need to focus if typing, so could be shortened to

await userEvent.type(textarea.element(), "s");

chrisolsen · 2026-02-10T22:05:54Z

+    const inputEL = input.element() as HTMLInputElement;
+    inputEL.focus();


Could be shortened to input.element().focus()

chrisolsen · 2026-02-10T22:08:16Z

    await vi.waitFor(() => {
-      const inputEL = input.element() as HTMLInputElement;
-      expect(inputEL).toBeTruthy();
-      inputEL.focus();
+      expect(input.elements().length).toBe(1);
    });


Since we are focusing on the first element below, this isn't really necessary. Since it is a selector with a testid, it should only be 0 or 1. But if you want to keep it, it can be shortened to expect(input.length).toBe(1);

vanessatran-ddi

I tested on my local, it passed all the test after I clean nx and dist and re-build.

chrisolsen · 2026-02-17T20:54:20Z

🎉 This PR is included in version 1.41.0-dev.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-17T20:55:18Z

🎉 This PR is included in version 4.11.0-dev.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-17T21:06:20Z

🎉 This PR is included in version 6.11.0-dev.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-24T20:48:03Z

🎉 This PR is included in version 1.11.0-dev.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-27T18:31:33Z

🎉 This PR is included in version 1.41.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-27T18:33:44Z

🎉 This PR is included in version 1.11.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-27T18:35:57Z

🎉 This PR is included in version 6.11.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-27T18:38:07Z

🎉 This PR is included in version 4.11.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-27T19:37:10Z

🎉 This PR is included in version 1.41.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-27T19:39:20Z

🎉 This PR is included in version 1.11.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-27T19:41:31Z

🎉 This PR is included in version 6.11.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-27T19:43:43Z

🎉 This PR is included in version 4.11.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:25:26Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:33:50Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:42:15Z

🎉 This PR is included in version 7.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:50:54Z

🎉 This PR is included in version 5.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:34:20Z

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:42:44Z

🎉 This PR is included in version 7.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:51:06Z

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

ArakTaiRoth requested review from chrisolsen, vanessatran-ddi and willcodeforcoffee February 10, 2026 03:23

ArakTaiRoth force-pushed the dustin/fix-tests branch from bf315d3 to 0bb123a Compare February 10, 2026 20:49

chrisolsen reviewed Feb 10, 2026

View reviewed changes

ArakTaiRoth force-pushed the dustin/fix-tests branch from 0bb123a to ccc521d Compare February 11, 2026 23:08

ArakTaiRoth requested a review from chrisolsen February 11, 2026 23:09

vanessatran-ddi previously approved these changes Feb 11, 2026

View reviewed changes

chore: Fixed the intermittent failing browser tests

c0ca42f

ArakTaiRoth dismissed vanessatran-ddi’s stale review via c0ca42f February 12, 2026 21:52

ArakTaiRoth force-pushed the dustin/fix-tests branch from ccc521d to c0ca42f Compare February 12, 2026 21:52

vanessatran-ddi approved these changes Feb 13, 2026

View reviewed changes

chrisolsen approved these changes Feb 17, 2026

View reviewed changes

chrisolsen merged commit ad5c0bc into dev Feb 17, 2026
4 checks passed

chrisolsen deleted the dustin/fix-tests branch February 17, 2026 20:26

chrisolsen added the released on @dev label Feb 17, 2026

chrisolsen added the released on @next label Feb 27, 2026

chrisolsen added the released Released into production. label Feb 27, 2026

		const inputEL = input.element() as HTMLInputElement;
		inputEL.focus();

Conversation

ArakTaiRoth commented Feb 10, 2026

Before (the change)

After (the change)

Make sure that you've checked the boxes below before you submit the PR

Steps needed to test

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vanessatran-ddi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chrisolsen commented Feb 17, 2026

Uh oh!

chrisolsen commented Feb 17, 2026

Uh oh!

chrisolsen commented Feb 17, 2026

Uh oh!

chrisolsen commented Feb 24, 2026

Uh oh!

chrisolsen commented Feb 27, 2026

Uh oh!

chrisolsen commented Feb 27, 2026

Uh oh!

chrisolsen commented Feb 27, 2026

Uh oh!

chrisolsen commented Feb 27, 2026

Uh oh!

chrisolsen commented Feb 27, 2026

Uh oh!

chrisolsen commented Feb 27, 2026

Uh oh!

chrisolsen commented Feb 27, 2026

Uh oh!

chrisolsen commented Feb 27, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Apr 1, 2026