Recommended way to shutdown server with image snapshots

[interactivellama]

Issue details

The readme says to have the server concurrently running with the image snapshot tests. I can start an express server before the tests run, but I don't see any callback API with the initImageSnapshot function. What's the recommended way to shut down the server afterwards? Should initImageSnapshot be wrapped in a describe/ before/after structure?

I'm willing to pull request to the readme if you can provide me some direction.

Steps to reproduce

Follow the directions in the readme. ;-)

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/addon-something image-snapshots 3.4-alpha

[igor-dv]

I'm not sure I understand your question.

This example shows how to configure image snapshots with the static (exported) instance of Storybook.

What do you mean by

have the server concurrently running

[interactivellama]

I was unable to get file:///path/to/my/storybook-static working when pointed at my static build folder, so I've written my own Express server to allow jest image snapshots access to the static Storybook build.

Should I be doing something like this?

let server;

const startServer = () => {
	const app = express();
	app.use(express.static(`${__dirname}/storybook`));
	server = app.listen(port, () => {
		console.log('Server listening on port ', server.address().port);
	});
};

describe('Image Snapshots', function imageSnapshotFunction () {
	beforeEach(() => {
		startServer();
	});

	afterEach(() => {
		server.close();
	});

	initStoryshots({
		suite: 'Image storyshots',
		test: imageSnapshot({
			storybookUrl: `http://localhost:${port}`
		})
	});
});

[igor-dv]

Ah, I see. IMO the recommended way is to make it working with the static version. But if you think that for your purposes running an express server is a better solution go for it =)
Regarding the docs - everything that will help others to solve their problems is welcomed to be in docs 👍 .

P.S. Maybe @storybooks/team has another opinion.

[interactivellama]

I would love the for the static version to work. The static version doesn't serve my CSS and other cross origin issues (fonts, etc).

I get stuff like this when running

initStoryshots({
		suite: 'Image storyshots',
		test: imageSnapshot({
			storybookUrl: `file://${rootPath}/storybook`
		})
	});

@igor-dv How do you serve CSS, fonts, etc. in your static file:/// version?

[igor-dv]

How do you load/serve your assets in your app?

[interactivellama]

We used to use Webpack for Storybook, but Jest choked on the CSS (token not recognized?), so I put the CSS <link/> in the .storybook/preview-head.html file.

This isn't for a real production application. It's for a React implementation of a Design System.

[interactivellama]

I'm going to close this issue. The following works:

import express from 'express';
import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';

// Create server
const app = express();
app.use(express.static(`${__dirname}/storybook`));
// Static directories for assets
app.use(
	'/assets',
	express.static(
		`${__dirname}/node_modules/@salesforce-ux/design-system/assets/`
	)
);

const port = process.env.PORT || 9001;
let server;

const getMatchOptions = ({ context: { kind, story }, url }) => ({
	failureThreshold: 0.2,
	failureThresholdType: 'percent'
});

describe('Image Snapshots', function imageSnapshotFunction () {
	beforeAll((done) => {
		server = app.listen(port, () => {
			console.log('Storybook server listening on port ', server.address().port);
			done();
		});
	});

	afterAll((done) => {
		server.close(() => {
			console.log('Shutting down the server running Storybook');
			done();
		});
	});

	initStoryshots({
		suite: 'Image storyshots',
		test: imageSnapshot({
			storybookUrl: `http://localhost:${port}`,
			getMatchOptions
		})
	});
});

[interactivellama]

Unless a maintainer would like a pared down version of this in the readme?

[igor-dv]

@interactivellama , did you try to use -s (static assets) parameter with build-storybook command?

Also,

We used to use Webpack for Storybook, but Jest choked on the CSS

I am not sure I understand, why jest is related when you are exporting the static storybook

[interactivellama]

I don't know if it's Jest, but build-storybook, with Babel/Webpack's help doesn't choke on @charset "UTF-8";, but when I run a CSS/JS bundle with @charset "UTF-8"; in it through Jest, it does.

I was not aware of the -s argument. I figured -o was doing that, since there was a JS bundle there. I didn't need -s before, because the CSS was being bundled into the JS, so build-storybook always worked fine and Webpack understood it and it's been on the public internet for a while. This was built with the CSS into JS bundling with Webpack's help. I will look into -s. Thanks!