The typeahead search component is very prone to visual regressions, and there has been much time spent correcting either the position of the input box or the position of the magnifying glass icon. One way we can minimize these regressions is to add visual regression tests of its two loading states which are more complex than one might imagine:
Search component states
Before WVUI loads
When the search input is focused, it initiates a request to load the WVUI library. This search input is styled to look identical to the WVUI component so that when WVUI finally loads, the transition is seamless. Note there is also a loader that appears. The screenshot taken of this state would look something like:
After WVUI loads
The screenshot would look something like:
Developer notes
Using the page.emulateNetworkConditions api or page.setOfflineMode and disabling download might be helpful when taking a screenshot of the intermediate state
The intermediate state has a loader animation which will be problematic for the visual regression states. Part of this work might be to make this animation listen to the prefers-reduced-motion media query and disable the animation if that is set to reduce. The visual regression tests would then emulate this setting (similar to the approach taken in T306229).
Acceptance Criteria
- A visual regression test is added that captures the state of the component after the input box has been focused and before WVUI has loaded.
- A visual regression test is added that captures the state of the component after the input box has been focused and after WVUI has loaded.
- The search component in the main header is tested. In addition, an attempt has been made to also test the search component in the sticky header (if this makes the task bigger than a "Large", split off the sticky header test into a new ticket).
- page.waitForTimeout is not used to wait for WVUI to load as it can significantly slow down tests. Instead, using something like waitForSelector callback to watch for the WVUI elements might be a good alternative.