orphic-cypress/dist/mount.js

Set of utilities and typescript transformers to cover storybook stories with cypress component tests

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.setStorybookFiles = exports.getStorybookFiles = exports.mountTest = void 0;
/**
 * Utilities for executing all cypress tests within a single describe block
 * as opposed to `useIsolatedComponentFiles` option which uses a typescript
 * transformer to make the story files themselves into cypress tests.
 *
 * If you're opting for `useIsolatedComponentFiles` or have provided `false`
 * for all format configs such that you only want to support external test
 * files, then you won't need anything in here.
 */
const fs = __importStar(require("fs"));
const path = __importStar(require("path"));
const config_1 = require("./config");
const execute_1 = require("./execute");
/**
 * Execute all tests as part of one large cypress describe block.
 * Put it into a file like `mount.cy.ts` with
 *
 * ```ts
 * import { mountTest } from "./test";
 *
 * // if the full file needs to be skipped for some reason, instead of just
 * // putting `cySkip: true` on the default export for that file. E.g. if
 * // the file uses webpack plugins that you don't want to bother with
 * const skipFiles = [
 *   "src/common/components/SomeComponent/index.stories.tsx",
 *   "src/app/other/component/index.stories.tsx",
 * ];
 * mountTest(skipFiles);
 * ```
 */
const mountTest = (
/**
 * Any *.stories.tsx files with their full paths from root dir through to filetype suffix
 */
skipFiles, 
/**
 * Transform the full file path into the imported module. This can be tricky
 * b/c webpack needs some manual text to hook in properly. See {@link RequireFileCallback}
 */
requireFileCallback = require, 
/** Text passed to cypress's describe block */
description = "mount all storybook files") => {
    describe(description, () => {
        Cypress.env("storybookFiles").forEach((file) => {
            if (skipFiles === null || skipFiles === void 0 ? void 0 : skipFiles.includes(file))
                return;
            const stories = requireFileCallback(file);
            if (!stories || !stories.default) {
                console.error(`\nNo stories found! you may want to add this to skipFile: ${file}\n`);
            }
            else {
                (0, execute_1.executeCyTests)(stories, stories.default.title || file);
            }
        });
    });
};
exports.mountTest = mountTest;
/**
 * Recursively look for files in a provided directory that include a pattern, `.stories.ts`
 * by default. Could be done easily with the `glob` library, but this is simple enough to
 * keep locally maintained. See {@link setStorybookFiles} for use inside `setupNodeEvents`
 */
const getStorybookFiles = (dir, storyPattern = /\.(stories|story)\./) => fs.readdirSync(dir).flatMap((file) => {
    const absolute = path.join(dir, file);
    if (fs.statSync(absolute).isDirectory()) {
        return (0, exports.getStorybookFiles)(absolute, storyPattern);
    }
    const matches = storyPattern instanceof RegExp
        ? storyPattern.test(absolute)
        : absolute.includes(storyPattern);
    return matches ? [absolute] : [];
});
exports.getStorybookFiles = getStorybookFiles;
/**
 * Get storybook files recursively, then make them available at
 * `Cypress.env("storybookFiles")`. Put this in `setupNodeEvents` if either
 * opting for the mountTest style of tests or if you want to maintain the
 * option of switching to isolated component files.
 *
 * Drop in to `setupNodeEvents` for `component` tests in cypress.config.ts
 * If this is the only thing you're doing there, could look like
 * `setupNodeEvents: setStorybookFiles`. Otherwise:
 *
 * ```ts
 * setupNodeEvents: (on, config) => {
 *   on.task({...});
 *   setStorybookFiles(on, config, optionalStoryPattern);
 *   return config; // be sure to return config
 * },
 * ```
 */
const setStorybookFiles = (on, config, storyPattern) => {
    var _a;
    if (!config_1.useIsolatedComponentFiles) {
        config.env.storybookFiles = (0, exports.getStorybookFiles)(((_a = config.env["orphic-cypress"]) === null || _a === void 0 ? void 0 : _a.storyLocation) || "./src/", storyPattern);
    }
    return config;
};
exports.setStorybookFiles = setStorybookFiles;
//# sourceMappingURL=mount.js.map