{"id":20525997,"url":"https://github.com/codeyellowbv/storybook-addon-gemini","last_synced_at":"2025-07-19T06:06:51.020Z","repository":{"id":66356468,"uuid":"75630313","full_name":"CodeYellowBV/storybook-addon-gemini","owner":"CodeYellowBV","description":"Addon for Storybook to see Gemini screenshot tests next to your stories.","archived":false,"fork":false,"pushed_at":"2016-12-05T14:10:32.000Z","size":151,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-06T01:45:41.404Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeYellowBV.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-05T14:03:51.000Z","updated_at":"2016-12-05T14:04:26.000Z","dependencies_parsed_at":"2023-02-22T06:30:55.204Z","dependency_job_id":null,"html_url":"https://github.com/CodeYellowBV/storybook-addon-gemini","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodeYellowBV/storybook-addon-gemini","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fstorybook-addon-gemini","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fstorybook-addon-gemini/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fstorybook-addon-gemini/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fstorybook-addon-gemini/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeYellowBV","download_url":"https://codeload.github.com/CodeYellowBV/storybook-addon-gemini/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fstorybook-addon-gemini/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265896125,"owners_count":23845426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T23:11:46.358Z","updated_at":"2025-07-19T06:06:50.996Z","avatar_url":"https://github.com/CodeYellowBV.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gemini Addon [![npm version](https://img.shields.io/npm/v/storybook-addon-gemini.svg)](https://www.npmjs.com/package/storybook-addon-gemini)\n\n\u003e **Needs at least [react-storybook](https://github.com/kadirahq/react-storybook) 2.2.1**\n\nThis 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.\n\n**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!!**\n\nThis package is inspired a lot from [storybook-addon-specifications](https://github.com/mthuret/storybook-addon-specifications).\n\n![Screenshot of addon](./image.png)\n\n## Getting Started\n\nFirst, install the addon:\n\n```shell\nnpm install -D storybook-addon-gemini\n```\n\nAdd these lines to your `addons.js` file (create this file inside your Storybook config directory if needed).\n\n```js\nimport 'storybook-addon-gemini/register';\n\nwindow.STORYBOOK_ADDON_GEMINI_DOMAIN = 'http://localhost:8000/';\n```\n\nNote that the exact host and port can be different, depending on the setup of Gemini.\n\nMake 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.\n\n## Writing Gemini tests\n\nThis addon does not care where in your folder structure the Gemini tests live, so you can follow the original documentation for that.\n\nIn 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:\n\n```js\nmodule.exports = {\n    rootUrl: 'http://127.0.0.1:9009'\n}\n```\n\nThe 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.\n\nThis addon provides a simple helper that should make it easier to write tests:\n\n```js\nconst { setStory } = require('storybook-addon-gemini');\n\ngemini.suite('Button: with text', (suite) =\u003e {\n    setStory(suite, 'Button', 'with text')\n        .capture('plain');\n});\n```\n\n## Roadmap\n\nCurrently this addon uses an iframe with the Gemini GUI tests in it.\nOptimally, 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeyellowbv%2Fstorybook-addon-gemini","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeyellowbv%2Fstorybook-addon-gemini","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeyellowbv%2Fstorybook-addon-gemini/lists"}