Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cosmos Export Separate Documents #9

Open
jamiebuilds opened this issue Dec 19, 2019 · 2 comments
Open

Cosmos Export Separate Documents #9

jamiebuilds opened this issue Dec 19, 2019 · 2 comments
Labels
Ported from main repo Old feature ideas ported from react-cosmos repository

Comments

@jamiebuilds
Copy link

What's up?

In a CI environment I might want to run other tools against all (or some) of my fixtures. This might be something like visual regression tests or maybe some scripts written with Puppeteer to do smoke testing.

In those scenarios, I probably wouldn't care very much about the Cosmos UI itself, I'd just want to have statically built pages that I could use in other tools.

pages=$(cosmos-export --pages) # or some other flag, idk
# ./path/to/built/fixture.html
# ./path/to/other/built/fixture.html

for page in "${pages}"; do
   ./scripts/run-smoke-tests-on-page "${page}"
done

Mkay, tell me more...

This could potentially be extended by other tools out of the box:

cosmos-export --pages | cosmos-browser-visual-regressions
cosmos-export --pages | cosmos-etc
@ovidiuch
Copy link
Member

In those scenarios, I probably wouldn't care very much about the Cosmos UI itself, I'd just want to have statically built pages that I could use in other tools.

Just realized the getFixtureUrls example is outdated. If you call it with fullScreen set to true it will actually return URLs that don't include any Cosmos UI. The full screen URLs basically load the renderer iframe content with a fixture ID parameter.

@jamiebuilds
Copy link
Author

Hmm... I think it would be better to have something even more "pure" than that, where it's just static HTML pages with "no" runtime (short of rendering the component with ReactDOM.render()) or routing logic.

<!doctype html>
<html>
  <body>
     <div id="root"></div>
     <script src="./path/to/fixture-entry-point.js"></script>
  </body>
</html>

The benefit is that you can write scripts with tools like Puppeteer without having to be concerned with any implementation details of how Cosmos works. If you want to select an element, you just query for it, you don't have to select the iframe and enter its context or anything.

It would also be nice if these separate HTML files pointed to separate entry points for each different fixtures so that loading one fixture didn't load all of them. This makes the pages load faster, and also makes it faster to parallelize work on different fixtures in scripts.

@ovidiuch ovidiuch transferred this issue from react-cosmos/react-cosmos Jan 13, 2020
@ovidiuch ovidiuch added the Ported from main repo Old feature ideas ported from react-cosmos repository label Jan 13, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Ported from main repo Old feature ideas ported from react-cosmos repository
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ovidiuch @jamiebuilds