creevey 0.9.0-beta.1 → 0.9.0-non-webpack.0

package/lib/esm/server/storybook/providers/nodejs.js

@@ -0,0 +1,217 @@
+/* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/ban-ts-comment */
+import path from 'path';
+import cluster from 'cluster';
+import chokidar from 'chokidar';
+import { noop } from '../../../types';
+import { getCreeveyCache } from '../../utils';
+import { subscribeOn } from '../../messages';
+import { importStorybookClientLogger, importStorybookConfig, importStorybookCoreCommon, importStorybookCoreEvents, isStorybookVersionGreaterThan, isStorybookVersionLessThan } from '../helpers';
+import { logger } from '../../logger';
+import { denormalizeStoryParameters } from '../../../shared';
+
+async function initStorybookEnvironment() {
+  // @ts-expect-error There is no @types/global-jsdom package
+  (await import('global-jsdom')).default(undefined, {
+    url: 'http://localhost'
+  }); // NOTE Cutoff `jsdom` part from userAgent, because storybook check enviroment and create events channel if runs in browser
+  // https://github.com/storybookjs/storybook/blob/v5.2.8/lib/core/src/client/preview/start.js#L98
+  // Example: "Mozilla/5.0 (linux) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/15.2.1"
+
+  Object.defineProperty(window.navigator, 'userAgent', {
+    value: window.navigator.userAgent.split(' ').filter(token => !token.startsWith('jsdom')).join(' ')
+  }); // TODO Look at creevey debug flag
+
+  const {
+    logger
+  } = await importStorybookClientLogger(); // NOTE: Disable duplication warnings for >=6.2 storybook
+
+  if (cluster.isWorker) logger.warn = noop; // NOTE: disable logger for 5.x storybook
+
+  logger.debug = noop;
+  return import('../entry');
+}
+
+function watchStories(channel, watcher, initialFiles) {
+  const watchingFiles = initialFiles;
+  let storiesByFiles = new Map();
+  subscribeOn('shutdown', () => void watcher.close());
+  watcher.add(Array.from(watchingFiles));
+  watcher.on('change', filePath => storiesByFiles.set(path.isAbsolute(filePath) ? filePath : `./${filePath.replace(/\\/g, '/')}`, []));
+  watcher.on('unlink', filePath => storiesByFiles.set(path.isAbsolute(filePath) ? filePath : `./${filePath.replace(/\\/g, '/')}`, []));
+  return data => {
+    const stories = isStorybookVersionLessThan(6) || isStorybookVersionGreaterThan(6, 3) ? data.stories : denormalizeStoryParameters(data);
+    const files = new Set(Object.values(stories).map(story => story.parameters.fileName));
+    const addedFiles = Array.from(files).filter(filePath => !watchingFiles.has(filePath));
+    const removedFiles = Array.from(watchingFiles).filter(filePath => !files.has(filePath));
+    watcher.add(addedFiles);
+    addedFiles.forEach(filePath => {
+      watchingFiles.add(filePath);
+      storiesByFiles.set(filePath, []);
+    });
+    removedFiles.forEach(filePath => watchingFiles.delete(filePath));
+    Object.values(stories).forEach(story => {
+      var _storiesByFiles$get;
+
+      return (_storiesByFiles$get = storiesByFiles.get(story.parameters.fileName)) === null || _storiesByFiles$get === void 0 ? void 0 : _storiesByFiles$get.push(story);
+    });
+    channel.emit('storiesUpdated', storiesByFiles);
+    storiesByFiles = new Map();
+  };
+}
+
+function loadStoriesFromBundle(watch) {
+  const bundlePath = path.join(getCreeveyCache(), 'storybook/main.js');
+
+  if (watch) {
+    subscribeOn('webpack', message => {
+      if (message.type != 'rebuild succeeded') return;
+      Object.values(global.__CREEVEY_HMR_DATA__).filter(({
+        callback
+      }) => callback).forEach(({
+        data,
+        callback
+      }) => callback(data));
+      delete require.cache[bundlePath];
+      import(bundlePath);
+    });
+  }
+
+  import(bundlePath);
+}
+
+async function loadStoriesDirectly(config, {
+  watcher,
+  debug
+}) {
+  const {
+    toRequireContext,
+    normalizeStoriesEntry
+  } = await importStorybookCoreCommon();
+  const {
+    addParameters,
+    configure
+  } = await import('../entry');
+  const requireContext = await (await import('../../loaders/babel/register')).default(config, debug);
+
+  const preview = (() => {
+    try {
+      return require.resolve(`${config.storybookDir}/preview`);
+    } catch (_) {
+      /* noop */
+    }
+  })();
+
+  const {
+    stories
+  } = await importStorybookConfig();
+  const contexts = stories.map(entry => {
+    const normalizedEntry = isStorybookVersionLessThan(6, 4) ? entry : normalizeStoriesEntry(entry, {
+      configDir: config.storybookDir,
+      workingDir: process.cwd()
+    });
+    const {
+      path: storiesPath,
+      recursive,
+      match
+    } = toRequireContext(normalizedEntry);
+    watcher === null || watcher === void 0 ? void 0 : watcher.add(path.resolve(config.storybookDir, storiesPath));
+    return () => requireContext(storiesPath, recursive, new RegExp(match));
+  });
+
+  let disposeCallback = data => void data;
+
+  Object.assign(module, {
+    hot: {
+      data: {},
+
+      accept() {
+        /* noop */
+      },
+
+      dispose(callback) {
+        disposeCallback = callback;
+      }
+
+    }
+  });
+
+  async function startStorybook() {
+    if (preview) {
+      const {
+        parameters,
+        globals,
+        globalTypes
+      } = await import(preview);
+      if (parameters) addParameters(parameters);
+      if (globals) addParameters({
+        globals
+      });
+      if (globalTypes) addParameters({
+        globalTypes
+      });
+    }
+
+    try {
+      configure(contexts.map(ctx => ctx()), module, false);
+    } catch (error) {
+      if (cluster.isPrimary) logger.error(error);
+    }
+  }
+
+  watcher === null || watcher === void 0 ? void 0 : watcher.add(config.storybookDir);
+  watcher === null || watcher === void 0 ? void 0 : watcher.on('all', (_event, filename) => {
+    var _module$hot;
+
+    disposeCallback((_module$hot = module.hot) === null || _module$hot === void 0 ? void 0 : _module$hot.data);
+    delete require.cache[filename];
+    void startStorybook();
+  });
+  void startStorybook();
+} // TODO Do we need to support multiple storybooks here?
+
+
+export async function loadStories(config, {
+  watch,
+  debug
+}, storiesListener) {
+  const storybookApi = await initStorybookEnvironment();
+  const Events = await importStorybookCoreEvents();
+  const {
+    channel
+  } = storybookApi;
+  channel.removeAllListeners(Events.CURRENT_STORY_WAS_SET);
+  channel.on('storiesUpdated', storiesListener);
+  let watcher;
+  if (watch) watcher = chokidar.watch([], {
+    ignoreInitial: true
+  });
+  const loadPromise = new Promise(resolve => {
+    channel.once(Events.SET_STORIES, data => {
+      const stories = isStorybookVersionLessThan(6) || isStorybookVersionGreaterThan(6, 3) ? data.stories : denormalizeStoryParameters(data);
+      const files = new Set(Object.values(stories).map(story => story.parameters.fileName));
+      if (watcher) channel.on(Events.SET_STORIES, watchStories(channel, watcher, files));
+      resolve(stories);
+    });
+  });
+  if (config.useWebpackToExtractTests) loadStoriesFromBundle(watch);else void loadStoriesDirectly(config, {
+    watcher,
+    debug
+  });
+  return loadPromise;
+}
+export async function extractStoriesData(config, {
+  watch,
+  debug
+}) {
+  const storybookApi = await initStorybookEnvironment();
+  const Events = await importStorybookCoreEvents();
+  const {
+    channel
+  } = storybookApi;
+  channel.removeAllListeners(Events.CURRENT_STORY_WAS_SET);
+  const loadPromise = new Promise(resolve => channel.once(Events.SET_STORIES, resolve));
+  if (config.useWebpackToExtractTests) loadStoriesFromBundle(watch);else void loadStoriesDirectly(config, {
+    debug
+  });
+  return loadPromise;
+}

package/lib/esm/server/testsFiles/parser.js

@@ -0,0 +1,50 @@
+import { toId, storyNameFromExport } from '@storybook/csf';
+export default async function parse(files) {
+  result = {};
+  await Promise.all(files.map(async file => import(file)));
+  return result;
+}
+let result = {};
+let kindTitle = '';
+let storyTitle = '';
+let storyParams = null;
+
+const setStoryParameters = params => {
+  storyParams = params;
+};
+
+const getStoryId = (kindTitle, storyTitle) => {
+  return toId(kindTitle, storyNameFromExport(storyTitle));
+};
+
+export const kind = (title, kindFn) => {
+  kindTitle = title;
+  kindFn();
+  kindTitle = '';
+};
+export const story = (title, storyFn) => {
+  var _result$storyId;
+
+  storyTitle = title;
+  storyParams = null;
+  storyFn({
+    setStoryParameters
+  });
+  const storyId = getStoryId(kindTitle, storyTitle);
+  result[storyId] = Object.assign({}, storyParams, {
+    tests: (_result$storyId = result[storyId]) === null || _result$storyId === void 0 ? void 0 : _result$storyId.tests
+  });
+  storyTitle = '';
+  storyParams = null;
+};
+export const test = (title, testFn) => {
+  const storyId = getStoryId(kindTitle, storyTitle);
+
+  if (!result[storyId]) {
+    result[storyId] = {};
+  }
+
+  result[storyId].tests = Object.assign({}, result[storyId].tests, {
+    [title]: testFn
+  });
+};

package/lib/esm/server/testsFiles/register.js

@@ -0,0 +1,35 @@
+import { addHook } from 'pirates';
+import { getTsconfig } from 'get-tsconfig';
+export default async function register(config) {
+  addHook(() => '', {
+    exts: ['.jpg', '.jpeg', '.png', '.gif', '.eot', '.otf', '.svg', '.ttf', '.woff', '.woff2', '.css', '.less', '.scss', '.styl'],
+    ignoreNodeModules: false
+  });
+  const {
+    path: tsConfigPath
+  } = getTsconfig(config.tsConfig) || {}; // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+
+  (await import('@babel/register')).default(config.babelOptions({
+    babelrc: false,
+    rootMode: 'upward-optional',
+    ignore: [/node_modules/],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    parserOpts: {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript']
+    },
+    presets: ['@babel/preset-typescript', ['@babel/preset-env', {
+      targets: {
+        node: '10'
+      },
+      modules: 'commonjs'
+    }]],
+    plugins: [['@babel/plugin-transform-runtime'], ['babel-plugin-tsconfig-paths', {
+      tsconfig: tsConfigPath
+    }]]
+  }));
+  (await import('ts-node')).register({
+    project: tsConfigPath,
+    transpileOnly: true
+  });
+}

package/lib/esm/server/update.js

@@ -0,0 +1,61 @@
+import path from 'path';
+import fs, { mkdirSync } from 'fs';
+import micromatch from 'micromatch';
+import { isDefined } from '../types';
+
+function tryToLoadTestsData(filename) {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return require(filename);
+  } catch (_) {
+    /* noop */
+  }
+}
+
+const actualRegex = /^(.*)-actual-(\d+)\.png$/i;
+
+function approve(dirents, srcPath, dstPath, testPaths, isMatch) {
+  dirents.filter(dirent => dirent.isFile()).map(dirent => actualRegex.exec(dirent.name)).filter(isDefined).filter(([fileName, imageName]) => !testPaths || testPaths.find(([token]) => token == imageName) && isMatch(path.join(srcPath, fileName))).reduce((images, [, imageName, retry]) => Number(retry) > (images.get(imageName) ?? -1) ? images.set(imageName, Number(retry)) : images, new Map()).forEach((retry, imageName) => {
+    mkdirSync(dstPath, {
+      recursive: true
+    });
+    fs.copyFileSync(path.join(srcPath, `${imageName}-actual-${retry}.png`), path.join(dstPath, `${imageName}.png`));
+  });
+}
+
+function traverse(srcPath, dstPath, testPaths, isMatch) {
+  const dirents = fs.readdirSync(srcPath, {
+    withFileTypes: true
+  });
+  approve(dirents, srcPath, dstPath, testPaths, isMatch);
+  dirents.filter(dirent => dirent.isDirectory()).map(dirent => [dirent.name, testPaths === null || testPaths === void 0 ? void 0 : testPaths.map(([token, ...restPath]) => token == dirent.name ? restPath : null).filter(isDefined)]).filter(([, paths]) => !paths || paths.length > 0).forEach(([dirname, paths]) => traverse(path.join(srcPath, dirname), path.join(dstPath, dirname), paths, isMatch));
+}
+
+export default function update(config, grepPattern) {
+  const {
+    reportDir,
+    screenDir
+  } = config;
+  const isMatch = grepPattern ? micromatch.matcher(grepPattern, {
+    contains: true
+  }) : () => true;
+  const testsMeta = tryToLoadTestsData(`${reportDir}/tests.json`);
+  const testsReport = tryToLoadTestsData(`${reportDir}/data`);
+  let testPaths = null;
+
+  if (testsMeta && testsReport) {
+    testPaths = Object.values(testsMeta).filter(isDefined).filter(({
+      id
+    }) => {
+      var _testsReport$id;
+
+      return ((_testsReport$id = testsReport[id]) === null || _testsReport$id === void 0 ? void 0 : _testsReport$id.status) == 'failed';
+    }).map(({
+      storyPath,
+      testName,
+      browser
+    }) => [...storyPath, ...(testName ? [testName] : []), browser]);
+  }
+
+  traverse(reportDir, screenDir, testPaths, value => isMatch(path.relative(reportDir, value)));
+}

package/lib/esm/server/utils.js

@@ -0,0 +1,142 @@
+import { createWriteStream, existsSync, readFileSync, readdirSync, unlink } from 'fs';
+import cluster from 'cluster';
+import { isDefined, noop, isFunction } from '../types';
+import { emitShutdownMessage, sendShutdownMessage } from './messages';
+import findCacheDir from 'find-cache-dir';
+import { get } from 'https';
+export const isShuttingDown = {
+  current: false
+};
+export const LOCALHOST_REGEXP = /(localhost|127\.0\.0\.1)/i;
+export const extensions = ['.js', '.jsx', '.ts', '.tsx'];
+export const skipOptionKeys = ['in', 'kinds', 'stories', 'tests', 'reason'];
+
+function matchBy(pattern, value) {
+  return typeof pattern == 'string' && pattern == value || Array.isArray(pattern) && pattern.includes(value) || pattern instanceof RegExp && pattern.test(value) || !isDefined(pattern);
+}
+
+export function shouldSkip(browser, meta, skipOptions, test) {
+  if (typeof skipOptions != 'object') {
+    return skipOptions;
+  }
+
+  if (Array.isArray(skipOptions)) {
+    for (const skip of skipOptions) {
+      const reason = shouldSkip(browser, meta, skip, test);
+      if (reason) return reason;
+    }
+
+    return false;
+  }
+
+  let hasSkipOptionKeys = false;
+
+  for (const skipKey in skipOptions) {
+    if (skipOptionKeys.includes(skipKey)) {
+      hasSkipOptionKeys = true;
+      continue;
+    }
+
+    const reason = shouldSkip(browser, meta, {
+      reason: skipKey,
+      ...skipOptions[skipKey]
+    }, test);
+    if (reason) return reason;
+  }
+
+  if (!hasSkipOptionKeys) return false;
+  const {
+    in: browsers,
+    kinds,
+    stories,
+    tests,
+    reason = true
+  } = skipOptions;
+  const {
+    kind,
+    story
+  } = meta;
+  const skipByBrowser = matchBy(browsers, browser);
+  const skipByKind = matchBy(kinds, kind);
+  const skipByStory = matchBy(stories, story);
+  const skipByTest = !isDefined(test) || matchBy(tests, test);
+  return skipByBrowser && skipByKind && skipByStory && skipByTest && reason;
+}
+export async function shutdownWorkers() {
+  isShuttingDown.current = true;
+  await Promise.all(Object.values(cluster.workers ?? {}).filter(isDefined).filter(worker => worker.isConnected()).map(worker => new Promise(resolve => {
+    const timeout = setTimeout(() => worker.kill(), 10000);
+    worker.on('exit', () => {
+      clearTimeout(timeout);
+      resolve();
+    });
+    sendShutdownMessage(worker);
+  })));
+  emitShutdownMessage();
+}
+export function shutdown() {
+  // eslint-disable-next-line no-process-exit
+  process.exit();
+}
+export function getCreeveyCache() {
+  return findCacheDir({
+    name: 'creevey',
+    cwd: __dirname
+  });
+}
+export async function runSequence(seq, predicate) {
+  for (const fn of seq) {
+    if (predicate()) await fn();
+  }
+}
+export function testsToImages(tests) {
+  return new Set([].concat(...tests.filter(isDefined).map(({
+    browser,
+    testName,
+    storyPath,
+    results
+  }) => {
+    var _results$slice$;
+
+    return Object.keys((results === null || results === void 0 ? void 0 : (_results$slice$ = results.slice(-1)[0]) === null || _results$slice$ === void 0 ? void 0 : _results$slice$.images) ?? {}).map(image => `${[...storyPath, testName, browser, browser == image ? undefined : image].filter(isDefined).join('/')}.png`);
+  })));
+} // https://tuhrig.de/how-to-know-you-are-inside-a-docker-container/
+
+export const isInsideDocker = existsSync('/proc/1/cgroup') && /docker/.test(readFileSync('/proc/1/cgroup', 'utf8'));
+export const downloadBinary = (downloadUrl, destination) => new Promise((resolve, reject) => get(downloadUrl, response => {
+  if (response.statusCode == 302) {
+    const {
+      location
+    } = response.headers;
+    if (!location) return reject(new Error(`Couldn't download selenoid. Status code: ${response.statusCode ?? 'UNKNOWN'}`));
+    return resolve(downloadBinary(location, destination));
+  }
+
+  if (response.statusCode != 200) return reject(new Error(`Couldn't download selenoid. Status code: ${response.statusCode ?? 'UNKNOWN'}`));
+  const fileStream = createWriteStream(destination);
+  response.pipe(fileStream);
+  fileStream.on('finish', () => {
+    fileStream.close();
+    resolve();
+  });
+  fileStream.on('error', error => {
+    unlink(destination, noop);
+    reject(error);
+  });
+}));
+export function removeProps(obj, propPath) {
+  const [prop, ...restPath] = propPath;
+
+  if (restPath.length > 0) {
+    if (typeof prop == 'string') obj[prop] && removeProps(obj[prop], restPath);
+    if (isFunction(prop)) Object.keys(obj).filter(prop).forEach(key => obj[key] && removeProps(obj[key], restPath));
+  } else {
+    if (typeof prop == 'string') delete obj[prop];
+    if (isFunction(prop)) Object.keys(obj).filter(prop).forEach(key => delete obj[key]);
+  }
+}
+export function readDirRecursive(dirPath) {
+  return [].concat(...readdirSync(dirPath, {
+    withFileTypes: true
+  }).map(dirent => dirent.isDirectory() ? readDirRecursive(`${dirPath}/${dirent.name}`) : [`${dirPath}/${dirent.name}`]));
+}

package/lib/esm/server/worker/chai-image.js

@@ -0,0 +1,130 @@
+import { PNG } from 'pngjs';
+import pixelmatch from 'pixelmatch';
+
+function normalizeImageSize(image, width, height) {
+  const normalizedImage = Buffer.alloc(4 * width * height);
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const i = (y * width + x) * 4;
+
+      if (x < image.width && y < image.height) {
+        const j = (y * image.width + x) * 4;
+        normalizedImage[i + 0] = image.data[j + 0];
+        normalizedImage[i + 1] = image.data[j + 1];
+        normalizedImage[i + 2] = image.data[j + 2];
+        normalizedImage[i + 3] = image.data[j + 3];
+      } else {
+        normalizedImage[i + 0] = 0;
+        normalizedImage[i + 1] = 0;
+        normalizedImage[i + 2] = 0;
+        normalizedImage[i + 3] = 0;
+      }
+    }
+  }
+
+  return normalizedImage;
+}
+
+function hasDiffPixels(diff) {
+  for (let i = 0; i < diff.length; i += 4) {
+    if (diff[i + 0] == 255 && diff[i + 1] == 0 && diff[i + 2] == 0 && diff[i + 3] == 255) return true;
+  }
+
+  return false;
+}
+
+function compareImages(expect, actual, diffOptions) {
+  const expectImage = PNG.sync.read(expect);
+  const actualImage = PNG.sync.read(actual);
+  const width = Math.max(actualImage.width, expectImage.width);
+  const height = Math.max(actualImage.height, expectImage.height);
+  const diffImage = new PNG({
+    width,
+    height
+  });
+  let actualImageData = actualImage.data;
+
+  if (actualImage.width < width || actualImage.height < height) {
+    actualImageData = normalizeImageSize(actualImage, width, height);
+  }
+
+  let expectImageData = expectImage.data;
+
+  if (expectImage.width < width || expectImage.height < height) {
+    expectImageData = normalizeImageSize(expectImage, width, height);
+  }
+
+  pixelmatch(expectImageData, actualImageData, diffImage.data, width, height, diffOptions);
+  return {
+    isEqual: !hasDiffPixels(diffImage.data),
+    diff: PNG.sync.write(diffImage)
+  };
+}
+
+export default function (getExpected, diffOptions) {
+  return function chaiImage({
+    Assertion
+  }, utils) {
+    async function assertImage(actual, imageName) {
+      let onCompare = () => Promise.resolve();
+
+      let expected = await getExpected(imageName);
+      if (!(expected instanceof Buffer) && expected != null) ({
+        expected,
+        onCompare
+      } = expected);
+
+      if (expected == null) {
+        await onCompare(actual);
+        return imageName ? `Expected image '${imageName}' does not exists` : 'Expected image does not exists';
+      }
+
+      if (actual.equals(expected)) return await onCompare(actual);
+      const {
+        isEqual,
+        diff
+      } = compareImages(expected, actual, diffOptions);
+      if (isEqual) return await onCompare(actual);
+      await onCompare(actual, expected, diff);
+      return imageName ? `Expected image '${imageName}' to match` : 'Expected image to match';
+    }
+
+    utils.addMethod(Assertion.prototype, 'matchImage', async function matchImage(imageName) {
+      const actual = utils.flag(this, 'object');
+      const errorMessage = await assertImage(typeof actual == 'string' ? Buffer.from(actual, 'base64') : actual, imageName);
+
+      if (errorMessage) {
+        throw createImageError(imageName ? {
+          [imageName]: errorMessage
+        } : errorMessage);
+      }
+    });
+    utils.addMethod(Assertion.prototype, 'matchImages', async function matchImages() {
+      const errors = {};
+      await Promise.all(Object.entries(utils.flag(this, 'object')).map(async ([imageName, imageOrBase64]) => {
+        let errorMessage;
+
+        try {
+          errorMessage = await assertImage(typeof imageOrBase64 == 'string' ? Buffer.from(imageOrBase64, 'base64') : imageOrBase64, imageName);
+        } catch (error) {
+          errorMessage = error.stack;
+        }
+
+        if (errorMessage) {
+          errors[imageName] = errorMessage;
+        }
+      }));
+
+      if (Object.keys(errors).length > 0) {
+        throw createImageError(errors);
+      }
+    });
+  };
+}
+
+function createImageError(imageErrors) {
+  const error = new Error('Expected image to match');
+  error.images = imageErrors;
+  return error;
+}

package/lib/esm/server/worker/helpers.js

@@ -0,0 +1,60 @@
+import { Suite, Test } from 'mocha';
+import { isDefined } from '../../types';
+import { loadTestsFromStories } from '../stories';
+
+function findOrCreateSuite(name, parent) {
+  const suite = parent.suites.find(({
+    title
+  }) => title == name) || new Suite(name, parent.ctx);
+
+  if (!suite.parent) {
+    suite.parent = parent;
+    parent.addSuite(suite);
+  }
+
+  return suite;
+}
+
+function createTest(name, fn, skip = false) {
+  const test = new Test(name, skip ? undefined : fn);
+  test.pending = Boolean(skip); // NOTE Can't define skip reason in mocha https://github.com/mochajs/mocha/issues/2026
+
+  test.skipReason = skip;
+  return test;
+}
+
+function addTest(rootSuite, test) {
+  const [testName, ...suitePath] = [...test.storyPath, test.testName].reverse().filter(isDefined);
+  const suite = suitePath.reduceRight((subSuite, suiteName) => findOrCreateSuite(suiteName, subSuite), rootSuite);
+  const mochaTest = createTest(testName, test.fn, test.skip);
+  suite.addTest(mochaTest);
+  mochaTest.ctx = Object.setPrototypeOf({
+    id: test.id,
+    story: test.story
+  }, suite.ctx);
+  return mochaTest;
+}
+
+function removeTestOrSuite(testOrSuite) {
+  const {
+    parent
+  } = testOrSuite;
+  if (!parent) return;
+  if (testOrSuite instanceof Test) parent.tests = parent.tests.filter(test => test != testOrSuite);
+  if (testOrSuite instanceof Suite) parent.suites = parent.suites.filter(suite => suite != testOrSuite);
+  if (parent.tests.length == 0 && parent.suites.length == 0) removeTestOrSuite(parent);
+}
+
+export async function addTestsFromStories(rootSuite, config, {
+  browser,
+  ...options
+}) {
+  const mochaTestsById = new Map();
+  const tests = await loadTestsFromStories([browser], listener => config.storiesProvider(config, options, listener), testsDiff => Object.entries(testsDiff).forEach(([id, newTest]) => {
+    const oldTest = mochaTestsById.get(id);
+    mochaTestsById.delete(id);
+    if (oldTest) removeTestOrSuite(oldTest);
+    if (newTest) mochaTestsById.set(id, addTest(rootSuite, newTest));
+  }));
+  Object.values(tests).filter(isDefined).forEach(test => mochaTestsById.set(test.id, addTest(rootSuite, test)));
+}