ui: flight icons sprite sheet slows test suite

[jgwhite]

Describe the bug As of #2922, we add the flight icons sprite sheet within #ember-testing so that Percy finds it correctly. Unfortunately, this has made the test suite 2x slower (~2m before, around ~4m after).

Steps to Reproduce Check CirleCI logs for the ember-tests step.

Expected behavior It’d be nice if we could have icons in Percy and a fast test suite.

Any idea what’s going on? The slowdown comes from a11yAudit taking a long time to process the sprite sheet.

We already configured aXe to ignore the sprite sheet but it’s likely that this setting just suppresses violations found in that area, rather than also suppressing processing.

Any leads? We may be able to try a different approach for sending the correct fragment of the page to Percy. See this note for more.

[jgwhite]

Another idea: we could tighten the scope of ember-a11y-testing. So here:

https://github.com/hashicorp/waypoint/blob/main/ui/tests/helpers/a11y.ts#L26

We could potentially wrap an extra div around the app (but not the sprite sheet) and target that instead.

[jgwhite]

Looks like axe-core always starts with the entire document. Next thing to investigate: where does it apply the exclude list exactly?

[jgwhite]

Useful finding:

Passing the performanceTimer: true option gives this handy output:

⋮
Measure runchecks_valid-lang took 0ms
Measure rule_video-caption took 3ms
Measure rule_video-caption#gather took 2.7000000029802322ms
Measure rule_video-caption#matches took 0ms
Measure runchecks_video-caption took 0ms
Measure axe took 740.1999999955297ms

[jgwhite]

Side by of the impact this has on performance of just one test. This is a timeline from the test page loading up to the single test finishing. Note how much larger the lavender area on the right is (716ms vs 216ms). This is the time spent in axe-core.

[jgwhite]

I dove pretty deep into axe-core to figure out why the spritesheets are so expensive even though they’re in the exclude list. I don’t have a definitive answer, but it basically seems like axe gathers up the entire DOM at various different stages, and only uses the exclude information later on. That’s not really an answer, but we can observe basically everything in axe-core taking twice as along with the extra spritesheet present.

I finally reached the end of my time box and opted to try a percy-centric solution instead, which you can see in #2977.