test(material-experimental/mdc-slider): try to reduce test flakes

[crisbeto]

We've been seeing more test flakes from the MDC slider recently. These changes try to address them by disabling animations and adding an extra change detection after flushing requestAnimationFrame.

[crisbeto]

@devversion this is a bit of a shot in the dark since I wasn't able to reproduce the failures locally against a device. I think that it might help, because I've re-run the CI checks 5 times now and it hasn't flaked yet.

[devversion]

@crisbeto Do you have a link to the flaky test you were seeing? I was seeing something similar and "assumingly" fixed it in #19961

[devversion]

The test failures I was looking at had incorrect transform assertions too, but the interesting thing was that the computed transform was always larger as if the slider had an uneven width of ~1000px instead of the desired 100px. Hence my proposed fix of just explicitly setting the width to explicitly 100px (not guaranteed to fix this issue though)

[crisbeto]

The ones I was looking at had to do with the transform too. I was thinking of setting the height explicitly as well, but there doesn't seem to be anything that would push it to be that wide. Also the 1000px+ difference is much wider than the screen of the device that the failures were showing up on. My theory is that MDC is trying to measure something while it's animating which throws things off.

[devversion]

yeah, looks like we both are just guessing here. I briefly looked at the MDC slider foundation code but couldn't find anything suspicious. They just get the bounding client rectangle, use the width value and multiply it with the percentage (assuming they compute that one correctly). Not sure though what could cause the slider to scale that much. It's just dealing with a min-width though so it could expand horizontally for whatever reason.

Either way, I'd be fine in trying this too. Seems like disabling animations would be good anyway (though the non-MDC slider doesn't seem to do it IIRC)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}