Fix storybook 5 support

[NoriSte]

The tutorial-storybook-react project and the docs suggest to install the v4.0.0-alpha.24 version of Storybook while the current version is the 5.1.10.

I tried eyes-storybook the latest version of Storybook and it does not work. The reasons are the following:

• Storybook introduced a "lazy" loading of all the stories, it starts with a skeleton layout then it loads all the stories
• the story.parameters is no more serializable (from a Puppeteer perspective)

What I have done:

• I changed the CONCURRENT_PAGES constant from 3 to 1: the stories are not loaded (because of the "lazy" loading) if the page hosting Storybook is not in the foreground. The CONCURRENT_PAGES constant forces the first page (containing Storybook) in the background and the stories will not be loaded

• I serialized the story.parameters data: Puppeteer reports that

  If the function passed to the page.evaluate returns a non-Serializable value, then page.evaluate resolves to undefined.

  the problem was that the stories were correctly found but, once the await page.evaluate(getStories); was run in Puppeteer, it returned undefined

Now everything works fine in Storybook 5 and the tutorial-storybook-react could be updated.

Probably some more verifications are needed, I hope it could be useful to migrate eyes-storybook to the latest Storybook 5 😉

[danielschwartz85]

👋 @NoriSte Sorry for the late response. and thanks for the issue.

1. Regarding story.parameters we do fail for un-serilizable objects, will fix this and update.
2. Regarding Storybook V5 we do support this version and need to update the doc. What error do you get when trying to run with V5 ? Can you share the logs ?

Add logs with :

1. set APPLITOOLS_SHOW_LOGS=true env variable or
2. add showLogs: true to applitools.config.js

Thanks.

[NoriSte]

Hi @danielschwartz85 here the logs

 ✘ noriste@mac  ~/Sites/conio/backoffice-frontend-2018   feature/users-list  yarn test:regression
yarn run v1.15.2
$ npx eyes-storybook
Using @applitools/eyes-storybook version 2.7.26.

2019-08-19T08:00:35Z Eyes: [LOG    ] {} (): Running with the following config:
concurrency           : 10
storybookPort         : 9000
storybookHost         : localhost
storybookConfigDir    : .storybook
storybookUrl          : http://localhost:9005/
storybookStaticDir    : undefined
showStorybookOutput   : false
waitBeforeScreenshots : 50
tapFilePath           : undefined
exitcode              : true
showLogs              : true
apiKey                : [REMOVED]
appName               : backoffice-frontend-2018
batchName             : backoffice-frontend-2018
agentId               : eyes-storybook/2.7.26

2019-08-19T08:00:35Z Eyes: [LOG    ] {} (): eyesStorybook started
2019-08-19T08:00:35Z Eyes: [LOG    ] {} (): browser launched
2019-08-19T08:00:35Z Eyes: [LOG    ] {} (): 3 pages open
2019-08-19T08:00:35Z Eyes: [LOG    ] {} (): got script for processPage
2019-08-19T08:00:35Z Eyes: [LOG    ] {} (): finished creating functions
⠋ Reading stories2019-08-19T08:00:35Z Eyes: [LOG    ] {} (): navigating to storybook url: http://localhost:9005/
⠼ Reading stories2019-08-19T08:00:35Z Eyes: [LOG    ] {} Page.<init>(): JSHandle:%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools JSHandle:font-weight:bold
⠇ Reading stories2019-08-19T08:00:36Z Eyes: [LOG    ] {} (): Getting stories from storybook
⠏ Reading stories2019-08-19T08:00:36Z Eyes: [LOG    ] {} Page.<init>(): JSHandle:The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".
⠇ Reading stories2019-08-19T08:00:37Z Eyes: [LOG    ] {} (): TypeError: Cannot read property 'length' of undefined
    at eyesStorybook (/Users/noriste/Sites/conio/backoffice-frontend-2018/node_modules/@applitools/eyes-storybook/src/eyesStorybook.js:68:31)
    at process._tickCallback (internal/process/next_tick.js:68:7)
2019-08-19T08:00:37Z Eyes: [LOG    ] {} (): total time:  
⠏ Reading stories
Test is finished but no results returned.

Important notice: the Applitools visual tests are currently running with a concurrency value of 10.
This means that only up to 10 visual tests can run in parallel, and therefore the execution might be slow. This is the default behavior for free accounts.
If your account does support a higher level of concurrency, it's possible to pass a different value by specifying `concurrency:X` in the applitools.config.js file.
For more information on how to configure the concurrency level, visit the following link: https://www.npmjs.com/package/@applitools/eyes-storybook#concurrency.
If you are interested in speeding up your visual tests, contact sdr@applitools.com to get a trial account and a higher level of concurrency.

✨  Done in 2.86s.
 noriste@mac  ~/Sites/conio/backoffice-frontend-2018   feature/users-list  

[danielschwartz85]

This looks like the error of the un-serilizable story parameters, do you get another error besides this one? i.e. if you remove un-serilizable parameters from your stories do you fail ? (trying to understand if Version 5 has an issue..)

[NoriSte]

@danielschwartz85 I'm sorry! Well, solving the serializable error is enough, I've just tried. Regarding the CONCURRENT_PAGES change: it's not required, probably it was my fault that I'd launched Puppeteer in non-headless mode while fixing the problems.

[danielschwartz85]

• Will update here once un-serilizable story.parameters issue is fixed

[danielschwartz85]

Fixed un-serilizable story.parameters in version 2.7.32. Will ignore un-serilizable story.parameters.

[NoriSte]

Thank you @danielschwartz85 !