How to access getStoryBook in Node? (Storybook 3.0.1)

[rvenugopal]

Hello

I am trying to add visual diffing using PhantomCSS. I see that there is an open issue #26.

To integrate with Casper, I need to get all the StoryKinds and associated stories (at least the labels if not the actual methods).
My question is how to execute the getStoryBook() method in '@storybook/react' so I can integrate with Casper. Is there any sample code/ config which will do the same?

Btw, I am using https://github.com/storybooks/storybook/releases/tag/v3.0.1

Thanks
RV

[peter-mouland]

I'm going to be visual diff'ing using StoryBook soon too, but I wont be access the node api, just the'iFrame storybook gives us i.e. http://localhost:9001/iframe.html?selectedKind=COMPONENT_NAME&selectedStory=STORY NAME

This is good enough for me for now, as you can set up each story individually.

Having said that, I do want access to the node api also, but only to start / stop story book cleanly
scratch out need for start/stop as I am now building the static storybook, then running a static node server.

[heinzmuller]

@peter-mouland But how would you "extract" all components and stories so you know which url's to test? Or will you be hardcoding all urls?

[rvenugopal]

@heinzmuller
Exactly that is my question. Right now, my quick and dirty hack is to use a hardcoded json object which holds all the storyKind and stories(similar to return from getStoryBook) and I am using that to visit the URLs. This is definitely not ideal. Wish storybook provided a way to get these automatically

[peter-mouland]

good point - for now i'm hard coding as I've only got a few.

It sounds a little left field for the main project, but maybe we need to create a plugin like storybook-index or something. I've not done one before so not sure if it's possible... but maybe a starting point.

[ndelangen]

Percy and Screener are doing. I think both based on the code Storyshots uses:

https://github.com/storybooks/storybook/blob/master/addons/storyshots/src/index.js#L61

[peter-mouland]

if anyone else ends up coming back here (years later) then there is a quick and simple solution.

The reason I was interested in a node-api (more recently) is because storybook takes an age to start (300+ components). Luckily for me, in CI, we've already built storybook (to publish demos per feature branch). This means that we can run a simple static server + anything in the middleware.js (like mock responses) in an instant.

My functional tests can then point to this server (via Cypress etc) and load pages using the iframe mentioned earlier (http://localhost:9001/iframe.html?selectedKind=COMPONENT_NAME&selectedStory=STORY NAME)

// spa.js
const path = require('path');
const express = require('express');
const mockApiMiddleware = require('./middleware');
 const app = express();
const router = express.Router();
 mockApiMiddleware(router);
 app.use('/', express.static(path.join(__dirname, 'out')));
app.use('/', router);
 const runner = ({ port = 9001 } = {}) =>
    new Promise((resolve) => {
        const server = app.listen(port, () => {
            console.log(`app listening on port ${port}!`);
            resolve(server);
        });
    });
 if (require.main === module) {
    runner();
} else {
    module.exports = { runner };
}

for completeness
this is my run-cypress.js script which starts and stops the servers gracefully.

/* eslint-disable no-console */
const cypress = require('cypress');
const { argv } = require('yargs');

const { runner } = require('../.storybook/spa');

const { browser = 'electron', debug = false, host = 'localhost', dev = false } = argv;

const PORT = process.env.port || process.env.PORT || '3021';
const timeout = 2000;

const testFiles = '**/*.func.js';
const config = {
    baseUrl: `http://localhost:${PORT}`,
    integrationFolder: 'scopes',
    testFiles,
    reporter: 'junit',
    reporterOptions: {
        mochaFile: 'cypress/results/test-results.xml',
        toConsole: true,
    },
    chromeWebSecurity: false,
};
const cypressConfig = {
    spec: `scopes/**`,
    reporter: 'junit',
    browser,
    config,
    env: {},
};

const beginTester = () => cypress[debug ? 'open' : 'run'](cypressConfig);

if (dev) {
    console.log(`Please ensure you already have storybook running\n * yarn storybook`);
    beginTester();
} else {
    console.log(`Please ensure you have built storybook\n * yarn storybook:build`);
    runner({ port: PORT }).then((server) => {
        beginTester().then((results) => {
            server.close();
            const exitCode = results.totalFailed > 0 ? 1 : 0;
            process.exit(exitCode);
        });
    });
}