https://github.com/codeyellowbv/storybook-addon-gemini
Addon for Storybook to see Gemini screenshot tests next to your stories.
https://github.com/codeyellowbv/storybook-addon-gemini
Last synced: 11 months ago
JSON representation
Addon for Storybook to see Gemini screenshot tests next to your stories.
- Host: GitHub
- URL: https://github.com/codeyellowbv/storybook-addon-gemini
- Owner: CodeYellowBV
- Created: 2016-12-05T14:03:51.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-05T14:10:32.000Z (over 9 years ago)
- Last Synced: 2025-03-06T01:45:41.404Z (over 1 year ago)
- Language: JavaScript
- Size: 147 KB
- Stars: 0
- Watchers: 10
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gemini Addon [](https://www.npmjs.com/package/storybook-addon-gemini)
> **Needs at least [react-storybook](https://github.com/kadirahq/react-storybook) 2.2.1**
This addon for [Storybook](https://getstorybook.io/) will allow you to see Gemini screenshot tests directly inside your Storybook. It will show only the relevant Gemini tests for the currently selected story.
**This is a Work in Progress. At the moment this depends on some modifications on the `gemini-gui` package (see [this PR](https://github.com/gemini-testing/gemini-gui/pull/72)). So don't use it yet!!**
This package is inspired a lot from [storybook-addon-specifications](https://github.com/mthuret/storybook-addon-specifications).
## Getting Started
First, install the addon:
```shell
npm install -D storybook-addon-gemini
```
Add these lines to your `addons.js` file (create this file inside your Storybook config directory if needed).
```js
import 'storybook-addon-gemini/register';
window.STORYBOOK_ADDON_GEMINI_DOMAIN = 'http://localhost:8000/';
```
Note that the exact host and port can be different, depending on the setup of Gemini.
Make sure [Gemini](https://github.com/gemini-testing/gemini) and [Gemini GUI](https://github.com/gemini-testing/gemini-gui) are installed. Gemini GUI must be running while using this addon.
## Writing Gemini tests
This addon does not care where in your folder structure the Gemini tests live, so you can follow the original documentation for that.
In the Gemini config file, make sure that `rootUrl` is set to the domain the Storybook runs on. So, using Storybook's default port, your `.gemini.js` file would look like this:
```js
module.exports = {
rootUrl: 'http://127.0.0.1:9009'
}
```
The name of a Gemini "suite" should be the name of the component, colon, name of the story. Example: `Button: with text`. This allows the addon to only show the relevant story you've selected.
This addon provides a simple helper that should make it easier to write tests:
```js
const { setStory } = require('storybook-addon-gemini');
gemini.suite('Button: with text', (suite) => {
setStory(suite, 'Button', 'with text')
.capture('plain');
});
```
## Roadmap
Currently this addon uses an iframe with the Gemini GUI tests in it.
Optimally, we would only use the backend of Gemini GUI. We could implement the frontend in this addon. That way we can style it better, and make the UI a bit simpler.