oblador / loki

👁 Visual Regression Testing for Storybook
https://loki.js.org/
MIT License
1.78k stars 173 forks source link

Story test fails with request error when component uses mulitchunk xhr arraybuffer #250

Open duncan-truss opened 4 years ago

duncan-truss commented 4 years ago

We have a storybook component that uses Mozilla's pdf.js library for loading a file into the browser view. Our loki configuration was set to run for the chrome desktop and chrome iphone 7 configurations.

The storybook reference and diff would always load for the chrome iphone 7 configuration but would always fail with the error message 1 request failed to load; for the chrome desktop version. Manually inspecting storybook and using the remote debugger showed no apparent visual issues. I looked at the network tab and saw that the pdf file was being loaded in multiple requests. Each subsequent request was for a range of content bytes and returned a 206 status for partial content.

Screen Shot 2020-07-07 at 3 02 40 PM

In response I found a pdf that would fit inside a single request, in this case less than 60kb. This resulted in the test passing as only one xhr request was needed.

Is this a known limitation with how Loki handles xhr requests? It seems that Loki request errors assume they return a 404 error because no useful information was printed out in this scenario. Why do the configurations behave differently is it related to the fetch api?

oblador commented 4 years ago

Hey, would you be able to provide a repo demonstrating this issue? A request is marked as failed either if the network connection fails or response is 4xx/5xx, but it's possible that the multiple requests for the same resource here messes up the logic.

darkartur commented 3 years ago

Have the same issue. You can simply create story with .mp3 file like so:

<audio src="src to media file" title="title" />

Audio comes with code 206, but it fails story in loki without any real fails in network

fixed for myself with

<audio src="src to media file" title="title" preload="none" />