dsr-slds-markup-validate.js

/*
 * STORY-BASED SNAPSHOT TESTING
 *
 * This uses StoryShots to iterate over stories created in Storybook to
 * automatically create DOM and image snapshot tests.
 *
 * For more information, please visit:
 * https://github.com/storybooks/storybook/tree/master/addons/storyshots
 */

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

import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

// Express server setup. `npm run storyshots:build` must
// be run first.
const rootPath = path.resolve(__dirname, '../');
const app = express();
const port = process.env.PORT || 9001;

// Register static asset folders
app.use(
	'/assets',
	express.static(
		`${rootPath}/node_modules/@salesforce-ux/design-system/assets/`
	)
);
app.use(express.static(`${rootPath}/storybook-based-tests`));

// Run SLDS validation tests on Storybook stories
initStoryshots({
	configPath: '.storybook-based-tests',
	suite: 'SLDS validation',
	test: ({ story, context }) => {
		const snapshotFileName = getSnapshotFileName(context);
		const storyElement = story.render(context);
		const shallowTree = shallow(storyElement); // Enzyme

		console.log(storyElement); // root DOM element (like React test util's render())
		console.log(shallowTree.html()); // Enzyme HTML markup
		console.log(toJson(shallowTree)); // Enzyme JSON nested objects

		if (snapshotFileName) {
			expect([Boolean value]);
		}
	}
});