@nx/cypress 0.0.0-pr-22179-271588f

package/src/executors/cypress/cypress.impl.js

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const ct_helpers_1 = require("../../utils/ct-helpers");
+const cypress_version_1 = require("../../utils/cypress-version");
+const start_dev_server_1 = require("../../utils/start-dev-server");
+const Cypress = require('cypress'); // @NOTE: Importing via ES6 messes the whole test dependencies.
+async function cypressExecutor(options, context) {
+    options = normalizeOptions(options, context);
+    // this is used by cypress component testing presets to build the executor contexts with the correct configuration options.
+    process.env.NX_CYPRESS_TARGET_CONFIGURATION = context.configurationName;
+    let success;
+    for await (const devServerValues of (0, start_dev_server_1.startDevServer)(options, context)) {
+        try {
+            success = await runCypress(devServerValues.baseUrl, {
+                ...options,
+                portLockFilePath: devServerValues.portLockFilePath,
+            });
+            if (!options.watch)
+                break;
+        }
+        catch (e) {
+            devkit_1.logger.error(e.message);
+            success = false;
+            if (!options.watch)
+                break;
+        }
+    }
+    return { success };
+}
+exports.default = cypressExecutor;
+function normalizeOptions(options, context) {
+    options.env = options.env || {};
+    if (options.testingType === 'component') {
+        const project = context?.projectGraph?.nodes?.[context.projectName];
+        if (project?.data?.root) {
+            options.ctTailwindPath = (0, ct_helpers_1.getTempTailwindPath)(context);
+        }
+    }
+    checkSupportedBrowser(options);
+    warnDeprecatedHeadless(options);
+    warnDeprecatedCypressVersion();
+    return options;
+}
+function checkSupportedBrowser({ browser }) {
+    // Browser was not passed in as an option, cypress will use whatever default it has set and we dont need to check it
+    if (!browser) {
+        return;
+    }
+    if ((0, cypress_version_1.installedCypressVersion)() >= 4 && browser == 'canary') {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `
+  Warning:
+  You are using a browser that is not supported by cypress v4+.
+
+  Read here for more info:
+  https://docs.cypress.io/guides/references/migration-guide.html#Launching-Chrome-Canary-with-browser
+  `);
+        return;
+    }
+    const supportedV3Browsers = ['electron', 'chrome', 'canary', 'chromium'];
+    if ((0, cypress_version_1.installedCypressVersion)() <= 3 &&
+        !supportedV3Browsers.includes(browser)) {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `
+    Warning:
+    You are using a browser that is not supported by cypress v3.
+    `);
+        return;
+    }
+}
+function warnDeprecatedHeadless({ headless }) {
+    if ((0, cypress_version_1.installedCypressVersion)() < 8 || headless === undefined) {
+        return;
+    }
+    if (headless) {
+        const deprecatedMsg = (0, devkit_1.stripIndents) `
+    NOTE:
+    You can now remove the use of the '--headless' flag during 'cypress run' as this is the default for all browsers.`;
+        devkit_1.logger.warn(deprecatedMsg);
+    }
+}
+function warnDeprecatedCypressVersion() {
+    if ((0, cypress_version_1.installedCypressVersion)() < 10) {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `
+NOTE:
+Support for Cypress versions < 10 is deprecated. Please upgrade to at least Cypress version 10.
+A generator to migrate from v8 to v10 is provided. See https://nx.dev/cypress/v10-migration-guide
+`);
+    }
+}
+/**
+ * @whatItDoes Initialize the Cypress test runner with the provided project configuration.
+ * By default, Cypress will run tests from the CLI without the GUI and provide directly the results in the console output.
+ * If `watch` is `true`: Open Cypress in the interactive GUI to interact directly with the application.
+ */
+async function runCypress(baseUrl, opts) {
+    const cypressVersion = (0, cypress_version_1.installedCypressVersion)();
+    // Cypress expects the folder where a cypress config is present
+    const projectFolderPath = (0, path_1.dirname)(opts.cypressConfig);
+    const options = {
+        project: projectFolderPath,
+        configFile: (0, path_1.basename)(opts.cypressConfig),
+    };
+    // If not, will use the `baseUrl` normally from `cypress.json`
+    if (baseUrl) {
+        options.config = { baseUrl };
+    }
+    if (opts.browser) {
+        options.browser = opts.browser;
+    }
+    if (opts.env) {
+        options.env = {
+            ...options.env,
+            ...opts.env,
+        };
+    }
+    if (opts.spec) {
+        options.spec = opts.spec;
+    }
+    options.tag = opts.tag;
+    options.exit = opts.exit;
+    options.headed = opts.headed;
+    options.runnerUi = opts.runnerUi;
+    if (opts.headless) {
+        options.headless = opts.headless;
+    }
+    options.record = opts.record;
+    options.key = opts.key;
+    options.parallel = opts.parallel;
+    options.ciBuildId = opts.ciBuildId?.toString();
+    options.group = opts.group;
+    // renamed in cy 10
+    if (cypressVersion >= 10) {
+        options.config ??= {};
+        options.config[opts.testingType] = {
+            excludeSpecPattern: opts.ignoreTestFiles,
+        };
+    }
+    else {
+        options.ignoreTestFiles = opts.ignoreTestFiles;
+    }
+    if (opts.reporter) {
+        options.reporter = opts.reporter;
+    }
+    if (opts.reporterOptions) {
+        options.reporterOptions = opts.reporterOptions;
+    }
+    if (opts.quiet) {
+        options.quiet = opts.quiet;
+    }
+    options.testingType = opts.testingType;
+    const result = await (opts.watch
+        ? Cypress.open(options)
+        : Cypress.run(options));
+    cleanupTmpFile(opts.ctTailwindPath);
+    cleanupTmpFile(opts.portLockFilePath);
+    if (process.env.NX_VERBOSE_LOGGING === 'true' && opts.portLockFilePath) {
+        (0, fs_1.readdirSync)((0, path_1.dirname)(opts.portLockFilePath)).forEach((f) => {
+            if (f.endsWith('.txt')) {
+                devkit_1.logger.debug(`Lock file ${f} still present`);
+            }
+        });
+    }
+    /**
+     * `cypress.open` is returning `0` and is not of the same type as `cypress.run`.
+     * `cypress.open` is the graphical UI, so it will be obvious to know what wasn't
+     * working. Forcing the build to success when `cypress.open` is used.
+     */
+    return !result.totalFailed && !result.failures;
+}
+function cleanupTmpFile(path) {
+    try {
+        if (path && (0, fs_1.existsSync)(path)) {
+            (0, fs_1.unlinkSync)(path);
+        }
+        return true;
+    }
+    catch (err) {
+        return false;
+    }
+}

package/src/executors/cypress/schema.json

@@ -0,0 +1,186 @@
+{
+  "version": 2,
+  "title": "Cypress Target",
+  "description": "Run Cypress for e2e, integration and component testing.",
+  "type": "object",
+  "outputCapture": "pipe",
+  "cli": "nx",
+  "presets": [
+    {
+      "name": "Starting Dev Server",
+      "keys": ["cypressConfig", "devServerTarget"]
+    },
+    {
+      "name": "Custom Base Url",
+      "keys": ["cypressConfig", "baseUrl"]
+    },
+    {
+      "name": "Component Testing",
+      "keys": ["cypressConfig", "devServerTarget", "testingType", "skipServe"]
+    }
+  ],
+  "properties": {
+    "cypressConfig": {
+      "type": "string",
+      "description": "The path of the Cypress configuration json file.",
+      "x-completion-type": "file",
+      "x-completion-glob": "cypress?(*)@(.js|.ts|.json)"
+    },
+    "watch": {
+      "type": "boolean",
+      "description": "Recompile and run tests when files change.",
+      "default": false
+    },
+    "tsConfig": {
+      "x-deprecated": "This option no longer has any effect. Cypress supports typescript out of the box. Add any options directly to <projectRoot>/tsconfig.json or <projectRoot>/cypress/tsconfig.json",
+      "type": "string",
+      "description": "The path of the Cypress tsconfig configuration json file.",
+      "x-completion-type": "file",
+      "x-completion-glob": "tsconfig.*.json"
+    },
+    "devServerTarget": {
+      "type": "string",
+      "description": "Dev server target to run tests against."
+    },
+    "headed": {
+      "type": "boolean",
+      "description": "Displays the browser instead of running headlessly. Set this to `true` if your run depends on a Chrome extension being loaded.",
+      "default": false
+    },
+    "headless": {
+      "type": "boolean",
+      "description": "Hide the browser instead of running headed.",
+      "default": false,
+      "x-deprecated": "Cypress runs headless by default. Use the --watch flag to control head/headless behavior instead."
+    },
+    "exit": {
+      "type": "boolean",
+      "description": "Whether or not the Cypress Test Runner will stay open after running tests in a spec file.",
+      "default": true
+    },
+    "key": {
+      "type": "string",
+      "description": "The key cypress should use to run tests in parallel/record the run (CI only)."
+    },
+    "record": {
+      "type": "boolean",
+      "description": "Whether or not Cypress should record the results of the tests.",
+      "default": false
+    },
+    "parallel": {
+      "aliases": ["p"],
+      "type": "boolean",
+      "description": "Whether or not Cypress should run its tests in parallel (CI only).",
+      "default": false
+    },
+    "baseUrl": {
+      "type": "string",
+      "description": "The address (with the port) which your application is running on.",
+      "x-priority": "important"
+    },
+    "browser": {
+      "type": "string",
+      "description": "The browser to run tests in."
+    },
+    "env": {
+      "type": "object",
+      "description": "A key-value Pair of environment variables to pass to Cypress runner."
+    },
+    "spec": {
+      "type": "string",
+      "description": "A comma delimited glob string that is provided to the Cypress runner to specify which spec files to run. i.e. `**examples/**,**actions.spec**`."
+    },
+    "copyFiles": {
+      "type": "string",
+      "description": "A regex string that is used to choose what additional integration files to copy to the dist folder.",
+      "x-deprecated": "No longer used since cypress supports typescript out of the box. If specified, it will be ignored.",
+      "x-priority": "internal"
+    },
+    "ciBuildId": {
+      "oneOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "number"
+        }
+      ],
+      "description": "A unique identifier for a run to enable grouping or parallelization."
+    },
+    "group": {
+      "type": "string",
+      "description": "A named group for recorded runs in the Cypress dashboard."
+    },
+    "ignoreTestFiles": {
+      "aliases": ["excludeSpecPattern"],
+      "oneOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      ],
+      "description": "A String or Array of glob patterns used to ignore test files that would otherwise be shown in your list of tests. Cypress uses minimatch with the options: `{dot: true, matchBase: true}`. We suggest using https://globster.xyz to test what files would match."
+    },
+    "reporter": {
+      "type": "string",
+      "description": "The reporter used during cypress run."
+    },
+    "reporterOptions": {
+      "oneOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "object"
+        }
+      ],
+      "description": "The reporter options used. Supported options depend on the reporter. https://docs.cypress.io/guides/tooling/reporters#Reporter-Options"
+    },
+    "skipServe": {
+      "type": "boolean",
+      "description": "Skip dev-server build.",
+      "default": false
+    },
+    "testingType": {
+      "type": "string",
+      "description": "Specify the type of tests to execute.",
+      "enum": ["component", "e2e"],
+      "default": "e2e"
+    },
+    "tag": {
+      "type": "string",
+      "description": "A comma delimited list to identify a run with.",
+      "aliases": ["t"]
+    },
+    "port": {
+      "oneOf": [
+        {
+          "type": "string",
+          "enum": ["cypress-auto"]
+        },
+        {
+          "type": "number"
+        }
+      ],
+      "description": "Pass a specified port value to the devServerTarget, if the value is 'cypress-auto' a free port will automatically be picked for the devServerTarget."
+    },
+    "quiet": {
+      "aliases": ["q"],
+      "type": "boolean",
+      "description": "If passed, Cypress output will not be printed to stdout. Only output from the configured Mocha reporter will print.",
+      "default": false
+    },
+    "runnerUi": {
+      "type": "boolean",
+      "description": "Displays the Cypress Runner UI. Useful for when Test Replay is enabled and you would still like the Cypress Runner UI to be displayed for screenshots and video."
+    }
+  },
+  "additionalProperties": true,
+  "required": ["cypressConfig"],
+  "examplesFile": "../../../docs/cypress-examples.md"
+}

package/src/generators/base-setup/base-setup.d.ts

@@ -0,0 +1,12 @@
+import { Tree } from '@nx/devkit';
+export interface CypressBaseSetupSchema {
+    project: string;
+    /**
+     * directory from the projectRoot where cypress files will be generated
+     * default is `cypress`
+     * */
+    directory?: string;
+    js?: boolean;
+    jsx?: boolean;
+}
+export declare function addBaseCypressSetup(tree: Tree, options: CypressBaseSetupSchema): void;

package/src/generators/base-setup/base-setup.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addBaseCypressSetup = void 0;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const path_1 = require("path");
+function addBaseCypressSetup(tree, options) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    if (tree.exists((0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress.config.ts')) ||
+        tree.exists((0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress.config.js'))) {
+        return;
+    }
+    const opts = normalizeOptions(tree, projectConfig, options);
+    const templateVars = {
+        ...opts,
+        jsx: !!opts.jsx,
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(projectConfig.root),
+        offsetFromProjectRoot: opts.hasTsConfig ? opts.offsetFromProjectRoot : '',
+        tsConfigPath: opts.hasTsConfig
+            ? `${opts.offsetFromProjectRoot}tsconfig.json`
+            : (0, js_1.getRelativePathToRootTsConfig)(tree, projectConfig.root),
+        ext: '',
+    };
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files/common'), projectConfig.root, templateVars);
+    if (options.js) {
+        if (isEsmProject(tree, projectConfig.root)) {
+            (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files/config-js-esm'), projectConfig.root, templateVars);
+        }
+        else {
+            (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files/config-js-cjs'), projectConfig.root, templateVars);
+        }
+    }
+    else {
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files/config-ts'), projectConfig.root, templateVars);
+    }
+    if (opts.hasTsConfig) {
+        (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(projectConfig.root, 'tsconfig.json'), (json) => {
+            // tsconfig doesn't have references so it shouldn't add them
+            // like in the case of nextjs apps.
+            if (!json.references) {
+                return json;
+            }
+            const tsconfigPath = `./${options.directory}/tsconfig.json`;
+            if (!json.references.some((ref) => ref.path === tsconfigPath)) {
+                json.references.push({
+                    path: tsconfigPath,
+                });
+            }
+            return json;
+        });
+    }
+    else {
+        tree.rename((0, devkit_1.joinPathFragments)(projectConfig.root, options.directory, 'tsconfig.json'), (0, devkit_1.joinPathFragments)(projectConfig.root, 'tsconfig.json'));
+    }
+}
+exports.addBaseCypressSetup = addBaseCypressSetup;
+function normalizeOptions(tree, projectConfig, options) {
+    options.directory ??= 'cypress';
+    const offsetFromProjectRoot = options.directory
+        .split('/')
+        .map((_) => '..')
+        .join('/');
+    const hasTsConfig = tree.exists((0, devkit_1.joinPathFragments)(projectConfig.root, 'tsconfig.json'));
+    return {
+        ...options,
+        projectConfig,
+        offsetFromProjectRoot: `${offsetFromProjectRoot}/`,
+        hasTsConfig,
+    };
+}
+function isEsmProject(tree, projectRoot) {
+    let packageJson;
+    if (tree.exists((0, devkit_1.joinPathFragments)(projectRoot, 'package.json'))) {
+        packageJson = (0, devkit_1.readJson)(tree, (0, devkit_1.joinPathFragments)(projectRoot, 'package.json'));
+    }
+    else {
+        packageJson = (0, devkit_1.readJson)(tree, 'package.json');
+    }
+    return packageJson.type === 'module';
+}

package/src/generators/base-setup/files/common/__directory__/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/src/generators/base-setup/files/common/__directory__/support/commands.ts__ext__

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress { 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

package/src/generators/base-setup/files/common/__directory__/tsconfig.json__ext__

@@ -0,0 +1,20 @@
+{
+  "extends": "<%= tsConfigPath %>",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "<%= offsetFromRoot %>dist/out-tsc",
+    "module": "commonjs",
+    "types": ["cypress", "node"],
+    "sourceMap": false
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "<%= offsetFromProjectRoot %>cypress.config.ts",
+    "<%= offsetFromProjectRoot %>**/*.cy.ts",
+    <% if (jsx) { %> "<%= offsetFromProjectRoot %>**/*.cy.tsx",<% } %>
+    "<%= offsetFromProjectRoot %>**/*.cy.js",
+    <% if (jsx) { %>"<%= offsetFromProjectRoot %>**/*.cy.jsx",<% } %>
+    "<%= offsetFromProjectRoot %>**/*.d.ts"
+  ]
+}

package/src/generators/base-setup/files/config-js-cjs/__directory__/support/commands.js__ext__

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress { 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

package/src/generators/base-setup/files/config-js-cjs/cypress.config.js__ext__

@@ -0,0 +1,3 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({});

package/src/generators/base-setup/files/config-js-esm/__directory__/support/commands.js__ext__

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress { 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

package/src/generators/base-setup/files/config-js-esm/cypress.config.js__ext__

@@ -0,0 +1,3 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({});

package/src/generators/base-setup/files/config-ts/__directory__/support/commands.ts__ext__

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress { 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

package/src/generators/base-setup/files/config-ts/cypress.config.ts__ext__

@@ -0,0 +1,3 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({});

package/src/generators/component-configuration/component-configuration.d.ts

@@ -0,0 +1,6 @@
+import { ProjectConfiguration, Tree, GeneratorCallback } from '@nx/devkit';
+import { CypressComponentConfigurationSchema } from './schema';
+export declare function componentConfigurationGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<GeneratorCallback>;
+export declare function componentConfigurationGeneratorInternal(tree: Tree, options: CypressComponentConfigurationSchema): Promise<GeneratorCallback>;
+export declare function updateTsConfigForComponentTesting(tree: Tree, projectConfig: ProjectConfiguration): void;
+export default componentConfigurationGenerator;