Add option of specifying media features for chrome

[rafal2228]

This feature adds support for emulating specific CSS media features (like preferred color scheme). The features parameter of setEmulatedMedia can be specified via configuration file for any chrome-based target.

It is inspired by the idea proposed by @oblador's idea to override what users can emulate in this commment. It also was mentioned in the following discussion.

The PR also updates the application in the examples folder, but at the current time the configuration of it seems to be broken due to:

• loki/examples/react/src/stories/index.stories.js

  Line 24 in 0e7acbd

  .lokiSkip('to Storybook', () => <Welcome showApp={linkTo('Button')} />)

• loki/examples/react/src/stories/index.stories.js

  Line 36 in 0e7acbd

  .lokiAsync('lokiAsync() with 1s delay', ({ done }) => (

loki specific API usage, that seems to be misconfigured/deprecated. @oblador @techeverri if you could please provide some guidance on how to fix these issues, I would be more than happy to include it in this PR (together with updated loki's reference images)

[techeverri]

Reference images for the new stories are missing

[rafal2228]

Reference images for the new stories are missing

@techeverri Yeah, I mentioned in the description that I wasn't able to generate them due to lokiSkip and lokiAsync usage inside of the stories file. Should I remove the usage and generate new reference images?

[techeverri]

lokiSkip was deprecated by #228, but it should still work. And #263 fixed and issue that broke lokiAsync

What errors do you get?

[rafal2228]

lokiSkip was deprecated by #228, but it should still work. And #263 fixed and issue that broke lokiAsync

What errors do you get?

Storybook compiles normally, but all stories from examples/react/src/stories/index.stories.js do not show due to:

vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-e6597f.iframe.bundle.js:14808 Unexpected error while loading ./stories/index.stories.js: (0 , _storybook_react__WEBPACK_IMPORTED_MODULE_1__.storiesOf)(...).addParameters(...).lokiSkip is not a function
 TypeError: (0 , _storybook_react__WEBPACK_IMPORTED_MODULE_1__.storiesOf)(...).addParameters(...).lokiSkip is not a function
    at Module../src/stories/index.stories.js (http://localhost:6006/main.iframe.bundle.js:3450:4)
    at Module.options.factory (http://localhost:6006/runtime~main.iframe.bundle.js:637:31)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:308:21)
    at webpackContext (http://localhost:6006/main.iframe.bundle.js:70:9)
    at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-e6597f.iframe.bundle.js:15035:29
    at Array.forEach (<anonymous>)
    at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-e6597f.iframe.bundle.js:15033:18
    at Array.forEach (<anonymous>)
    at executeLoadable (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-e6597f.iframe.bundle.js:15032:10)

Which is thrown in browser console

Note. after commenting out usage of lokiSkip, similar error is being thrown with lokiAsync

[oblador]

Yeah, these are deprecated APIs and I guess it's time to remove them from the tests too (I kept them to not break accidentally). They run fine on master though and looking at the test output, it complains about reference image not being present (you added new stories and configurations without adding baselines, so that is kinda expected). If you're unable to run the tests locally (try rebasing in that case) you can also download the baselines from the test run: https://github.com/oblador/loki/suites/6373156022/artifacts/234968222

[rafal2228]

They run fine on master though and looking at the test output, it complains about reference image not being present (you added new stories and configurations without adding baselines, so that is kinda expected). If you're unable to run the tests locally (try rebasing in that case) you can also download the baselines from the test run: https://github.com/oblador/loki/suites/6373156022/artifacts/234968222

Seems like the baseline is not actually correct. The tests run fine, but all examples from the above mentioned file (index.stories.js) are missing. I guess it's caused by the same problem with lokiSkip and lokiAsync.

Yeah, these are deprecated APIs and I guess it's time to remove them from the tests too (I kept them to not break accidentally).

So should I delete the usage of those APIs from examples and update baseline images as part of this PR or do we need this work done on separate PR?

[oblador]

I can do this in a separate PR 👍

[oblador]

Fixed in #390!

[oblador]

Sorry for being annoying here, but don't you think it would enough to do this for just one test instead of adding two more configurations? See this example: https://github.com/oblador/loki/blob/master/examples/react/src/api/Decorators.stories.js#L56

[rafal2228]

Sorry for being annoying here, but don't you think it would enough to do this for just one test instead of adding two more configurations? See this example: https://github.com/oblador/loki/blob/master/examples/react/src/api/Decorators.stories.js#L56

This is actually a brilliant idea 👍 I had to update chrome target to allow passing of story parameters to tabOptions

@oblador is there any reason why it wasn't done previously? - ff69659

[oblador]

Ah, didn't know this wasn't supported yet :D Thanks for fixing/adding!

[techeverri]

We should remove this from the docs before merging

[techeverri]

Never mind I just saw that it was added to the preset file https://github.com/oblador/loki/pull/388/files#diff-32dd6d5e208ff82474b1c3cfc1bd3b9ee59482fb9939ca0117de04a70eb4a4a3