Integration tests: wait until stories appear

[Hypnosphi]

Issue: Integration test are failing randomly

What I did

Used page.waitFor API to ensure that stories are rendered before taking screenshot

@tmeasday maybe we can use a similar approach on chromatic?

[tmeasday]

@Hypnoshi maybe we need an async story API ;)

[Hypnosphi]

How would it help in terms of screenshoting?

[tmeasday]

You could do the waiting inside the story and then the screenshotting lib could just render the story (including waiting) and then immediately take the SS, without needing any special logic.

[Hypnosphi]

How would browser/node interop be implemented in that scheme? Would it involve some globals pollution?

[tmeasday]

I'm not sure what you mean? Are you thinking of storyshots?

[Hypnosphi]

do the waiting inside the story

Actually, I don't really get this part. The only thing we're waiting for are the stories themselves. So if they waited for something else, it wouldn't make things better

[Hypnosphi]

Are you thinking of storyshots

No, I'm thinking of puppeteer

[tmeasday]

@Hypnosphi ok, sorry this was a bit of a flippant comment, what I mean is something like:

.add('async story', async () => {
  return new Promise(resolve => {
    const story = <X ref={element => element.getElementByTagname('iframe')[0].onload = resolve(story) }});
  });
}

The above story will only "finish" when the iframe has loaded, and thus the library can just do something like:

await story();
takeScreenshot();

[tmeasday]

I'll admit I haven't really thought through the mechanics of how the above would work.

[Hypnosphi]

await story();
takeScreenshot();

In which environment does this code run?

[tmeasday]

Inside a browser. If you are controlling it via puppeteer there might be an additional layer of indirection like:

Page.evaluate(async () => await story());
Page.captureScreenshot()