@nx/cypress 20.0.7 → 20.1.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/cypress",
-  "version": "20.0.7",
+  "version": "20.1.0-beta.0",
   "private": false,
   "description": "The Nx Plugin for Cypress contains executors and generators allowing your workspace to use the powerful Cypress integration testing capabilities.",
   "repository": {
@@ -36,9 +36,9 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nx/devkit": "20.0.7",
-    "@nx/eslint": "20.0.7",
-    "@nx/js": "20.0.7",
+    "@nx/devkit": "20.1.0-beta.0",
+    "@nx/eslint": "20.1.0-beta.0",
+    "@nx/js": "20.1.0-beta.0",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "detect-port": "^1.5.1",
     "tslib": "^2.3.0"

package/plugins/cypress-preset.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.nxBaseCypressPreset = nxBaseCypressPreset;
 exports.nxE2EPreset = nxE2EPreset;
 const devkit_1 = require("@nx/devkit");
-const path_1 = require("path");
-const fs_1 = require("fs");
-const preprocessor_vite_1 = require("../src/plugins/preprocessor-vite");
-const constants_1 = require("../src/utils/constants");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const child_process_1 = require("child_process");
+const fs_1 = require("fs");
 const http_1 = require("http");
 const https_1 = require("https");
+const path_1 = require("path");
+const preprocessor_vite_1 = require("../src/plugins/preprocessor-vite");
+const constants_1 = require("../src/utils/constants");
 function nxBaseCypressPreset(pathToConfig, options) {
     // used to set babel settings for react CT.
     process.env.NX_CYPRESS_COMPONENT_TEST =
@@ -21,8 +22,13 @@ function nxBaseCypressPreset(pathToConfig, options) {
         : (0, path_1.dirname)(pathToConfig);
     const projectPath = (0, path_1.relative)(devkit_1.workspaceRoot, normalizedPath);
     const offset = (0, path_1.relative)(normalizedPath, devkit_1.workspaceRoot);
-    const videosFolder = (0, path_1.join)(offset, 'dist', 'cypress', projectPath, 'videos');
-    const screenshotsFolder = (0, path_1.join)(offset, 'dist', 'cypress', projectPath, 'screenshots');
+    const isTsSolutionSetup = (0, ts_solution_setup_1.isUsingTsSolutionSetup)();
+    const videosFolder = isTsSolutionSetup
+        ? (0, path_1.join)('test-output', 'cypress', 'videos')
+        : (0, path_1.join)(offset, 'dist', 'cypress', projectPath, 'videos');
+    const screenshotsFolder = isTsSolutionSetup
+        ? (0, path_1.join)('test-output', 'cypress', 'screenshots')
+        : (0, path_1.join)(offset, 'dist', 'cypress', projectPath, 'screenshots');
     return {
         videosFolder,
         screenshotsFolder,

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addBaseCypressSetup = addBaseCypressSetup;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const path_1 = require("path");
 function addBaseCypressSetup(tree, options) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
@@ -19,9 +20,13 @@ function addBaseCypressSetup(tree, options) {
         tsConfigPath: opts.hasTsConfig
             ? `${opts.offsetFromProjectRoot}tsconfig.json`
             : (0, js_1.getRelativePathToRootTsConfig)(tree, projectConfig.root),
+        linter: isEslintInstalled(tree) ? 'eslint' : 'none',
         ext: '',
     };
     (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files/common'), projectConfig.root, templateVars);
+    (0, devkit_1.generateFiles)(tree, (0, ts_solution_setup_1.isUsingTsSolutionSetup)(tree)
+        ? (0, path_1.join)(__dirname, 'files/tsconfig/ts-solution')
+        : (0, path_1.join)(__dirname, 'files/tsconfig/non-ts-solution'), 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);
@@ -77,3 +82,7 @@ function isEsmProject(tree, projectRoot) {
     }
     return packageJson.type === 'module';
 }
+function isEslintInstalled(tree) {
+    const { dependencies, devDependencies } = (0, devkit_1.readJson)(tree, 'package.json');
+    return !!(dependencies?.eslint || devDependencies?.eslint);
+}

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

@@ -10,11 +10,13 @@
 // 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;
+declare global {<% if (linter === 'eslint') { %>
+  // eslint-disable-next-line @typescript-eslint/no-namespace<% } %>
+  namespace Cypress {<% if (linter === 'eslint') { %>
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars<% } %>
+    interface Chainable<Subject> {
+      login(email: string, password: string): void;
+    }
   }
 }
 

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

@@ -10,11 +10,13 @@
 // 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;
+declare global {<% if (linter === 'eslint') { %>
+  // eslint-disable-next-line @typescript-eslint/no-namespace<% } %>
+  namespace Cypress {<% if (linter === 'eslint') { %>
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars<% } %>
+    interface Chainable<Subject> {
+      login(email: string, password: string): void;
+    }
   }
 }
 

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

@@ -10,11 +10,13 @@
 // 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;
+declare global {<% if (linter === 'eslint') { %>
+  // eslint-disable-next-line @typescript-eslint/no-namespace<% } %>
+  namespace Cypress {<% if (linter === 'eslint') { %>
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars<% } %>
+    interface Chainable<Subject> {
+      login(email: string, password: string): void;
+    }
   }
 }
 

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

@@ -10,11 +10,13 @@
 // 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;
+declare global {<% if (linter === 'eslint') { %>
+  // eslint-disable-next-line @typescript-eslint/no-namespace<% } %>
+  namespace Cypress {<% if (linter === 'eslint') { %>
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars<% } %>
+    interface Chainable<Subject> {
+      login(email: string, password: string): void;
+    }
   }
 }
 

package/src/generators/base-setup/files/{common → tsconfig/non-ts-solution}/__directory__/tsconfig.json__ext__

@@ -12,9 +12,9 @@
     "**/*.js",
     "<%= offsetFromProjectRoot %>cypress.config.ts",
     "<%= offsetFromProjectRoot %>**/*.cy.ts",
-    <% if (jsx) { %> "<%= offsetFromProjectRoot %>**/*.cy.tsx",<% } %>
+    <%_ if (jsx) { _%>"<%= offsetFromProjectRoot %>**/*.cy.tsx",<%_ } _%>
     "<%= offsetFromProjectRoot %>**/*.cy.js",
-    <% if (jsx) { %>"<%= offsetFromProjectRoot %>**/*.cy.jsx",<% } %>
+    <%_ if (jsx) { _%>"<%= offsetFromProjectRoot %>**/*.cy.jsx",<%_ } _%>
     "<%= offsetFromProjectRoot %>**/*.d.ts"
   ]
 }

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

@@ -0,0 +1,20 @@
+{
+  "extends": "<%= tsConfigPath %>",
+  "compilerOptions": {
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo",
+    "allowJs": true,
+    "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/component-configuration/component-configuration.js

@@ -78,6 +78,7 @@ function addProjectFiles(tree, projectConfig, opts) {
         ...opts,
         projectRoot: projectConfig.root,
         offsetFromRoot: (0, devkit_1.offsetFromRoot)(projectConfig.root),
+        linter: isEslintInstalled(tree) ? 'eslint' : 'none',
         ext: '',
     });
 }
@@ -163,4 +164,8 @@ function updateTsConfigForComponentTesting(tree, projectConfig) {
         });
     }
 }
+function isEslintInstalled(tree) {
+    const { dependencies, devDependencies } = (0, devkit_1.readJson)(tree, 'package.json');
+    return !!(dependencies?.eslint || devDependencies?.eslint);
+}
 exports.default = componentConfigurationGenerator;

package/src/generators/component-configuration/files/__directory__/support/component.ts__ext__

@@ -17,11 +17,10 @@
 import './commands';
 
 // add component testing only related command here, such as mount
-declare global {
-// eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    interface Chainable<Subject> {
-    }
+declare global {<% if (linter === 'eslint') { %>
+  // eslint-disable-next-line @typescript-eslint/no-namespace<% } %>
+  namespace Cypress {<% if (linter === 'eslint') { %>
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars<% } %>
+    interface Chainable<Subject> {}
   }
 }

package/src/generators/configuration/configuration.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.configurationGenerator = configurationGenerator;
 exports.configurationGeneratorInternal = configurationGeneratorInternal;
 const devkit_1 = require("@nx/devkit");
-const eslint_1 = require("@nx/eslint");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const prompt_1 = require("@nx/devkit/src/generators/prompt");
 const js_1 = require("@nx/js");
+const package_manager_workspaces_1 = require("@nx/js/src/utils/package-manager-workspaces");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const path_1 = require("path");
 const add_linter_1 = require("../../utils/add-linter");
@@ -20,9 +22,7 @@ function configurationGenerator(tree, options) {
     });
 }
 async function configurationGeneratorInternal(tree, options) {
-    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(tree, 'cypress', 'configuration');
-    const opts = normalizeOptions(tree, options);
-    opts.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    const opts = await normalizeOptions(tree, options);
     const tasks = [];
     const projectGraph = await (0, devkit_1.createProjectGraphAsync)();
     if (!(0, cypress_version_1.installedCypressVersion)()) {
@@ -43,6 +43,20 @@ async function configurationGeneratorInternal(tree, options) {
     if (!hasPlugin) {
         addTarget(tree, opts, projectGraph);
     }
+    const { root: projectRoot } = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    const isTsSolutionSetup = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(tree);
+    if (isTsSolutionSetup) {
+        createPackageJson(tree, opts);
+        ignoreTestOutput(tree);
+        if (!options.rootProject) {
+            // add the project tsconfig to the workspace root tsconfig.json references
+            (0, devkit_1.updateJson)(tree, 'tsconfig.json', (json) => {
+                json.references ??= [];
+                json.references.push({ path: './' + projectRoot });
+                return json;
+            });
+        }
+    }
     const linterTask = await (0, add_linter_1.addLinterToCyProject)(tree, {
         ...opts,
         cypressDir: opts.directory,
@@ -54,6 +68,12 @@ async function configurationGeneratorInternal(tree, options) {
     if (!opts.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
+    if (isTsSolutionSetup) {
+        const projectPackageManagerWorkspaceState = (0, package_manager_workspaces_1.getProjectPackageManagerWorkspaceState)(tree, projectRoot);
+        if (projectPackageManagerWorkspaceState !== 'included') {
+            tasks.push((0, package_manager_workspaces_1.getProjectPackageManagerWorkspaceStateWarningTask)(projectPackageManagerWorkspaceState, tree.root));
+        }
+    }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 function ensureDependencies(tree, options) {
@@ -65,7 +85,22 @@ function ensureDependencies(tree, options) {
     }
     return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDependencies);
 }
-function normalizeOptions(tree, options) {
+async function normalizeOptions(tree, options) {
+    const isTsSolutionSetup = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(tree);
+    let linter = options.linter;
+    if (!linter) {
+        const choices = isTsSolutionSetup
+            ? [{ name: 'none' }, { name: 'eslint' }]
+            : [{ name: 'eslint' }, { name: 'none' }];
+        const defaultValue = isTsSolutionSetup ? 'none' : 'eslint';
+        linter = await (0, prompt_1.promptWhenInteractive)({
+            type: 'select',
+            name: 'linter',
+            message: `Which linter would you like to use?`,
+            choices,
+            initial: 0,
+        }, { linter: defaultValue }).then(({ linter }) => linter);
+    }
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     if (projectConfig?.targets?.e2e) {
         throw new Error(`Project ${options.project} already has an e2e target.
@@ -91,7 +126,7 @@ In this case you need to provide a devServerTarget,'<projectName>:<targetName>[:
         ...options,
         bundler: options.bundler ?? 'webpack',
         rootProject: options.rootProject ?? projectConfig.root === '.',
-        linter: options.linter ?? eslint_1.Linter.EsLint,
+        linter,
         devServerTarget,
     };
 }
@@ -221,4 +256,29 @@ function addTarget(tree, opts, projectGraph) {
     }
     (0, devkit_1.updateProjectConfiguration)(tree, opts.project, projectConfig);
 }
+function createPackageJson(tree, options) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    const packageJsonPath = (0, devkit_1.joinPathFragments)(projectConfig.root, 'package.json');
+    if (tree.exists(packageJsonPath)) {
+        return;
+    }
+    const importPath = (0, project_name_and_root_utils_1.resolveImportPath)(tree, projectConfig.name, projectConfig.root);
+    const packageJson = {
+        name: importPath,
+        version: '0.0.1',
+        private: true,
+    };
+    (0, devkit_1.writeJson)(tree, packageJsonPath, packageJson);
+}
+function ignoreTestOutput(tree) {
+    if (!tree.exists('.gitignore')) {
+        devkit_1.logger.warn(`Couldn't find a root .gitignore file to update.`);
+    }
+    let content = tree.read('.gitignore', 'utf-8');
+    if (/^test-output$/gm.test(content)) {
+        return;
+    }
+    content = `${content}\ntest-output\n`;
+    tree.write('.gitignore', content);
+}
 exports.default = configurationGenerator;

package/src/generators/configuration/schema.json

@@ -46,8 +46,8 @@
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",
-      "enum": ["eslint", "none"],
-      "default": "eslint"
+      "enum": ["none", "eslint"],
+      "x-priority": "important"
     },
     "js": {
       "description": "Generate JavaScript files rather than TypeScript files.",

package/src/generators/init/init.js

@@ -5,7 +5,6 @@ exports.cypressInitGenerator = cypressInitGenerator;
 exports.cypressInitGeneratorInternal = cypressInitGeneratorInternal;
 const devkit_1 = require("@nx/devkit");
 const add_plugin_1 = require("@nx/devkit/src/utils/add-plugin");
-const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const plugin_1 = require("../../plugins/plugin");
 const versions_1 = require("../../utils/versions");
 function setupE2ETargetDefaults(tree) {
@@ -62,7 +61,6 @@ async function cypressInitGenerator(tree, options) {
     return cypressInitGeneratorInternal(tree, { addPlugin: false, ...options });
 }
 async function cypressInitGeneratorInternal(tree, options) {
-    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(tree, 'cypress', 'init');
     updateProductionFileset(tree);
     const nxJson = (0, devkit_1.readNxJson)(tree);
     options.addPlugin ??=

package/src/plugins/plugin.js

@@ -68,6 +68,42 @@ async function createNodesInternal(configFilePath, options, context, targetsCach
         },
     };
 }
+function getTargetOutputs(outputs, subfolder) {
+    return outputs.map((output) => subfolder ? (0, path_1.join)(output, subfolder) : output);
+}
+function getTargetConfig(cypressConfig, outputSubfolder, ciBaseUrl) {
+    const config = {};
+    if (ciBaseUrl) {
+        config['baseUrl'] = ciBaseUrl;
+    }
+    const { screenshotsFolder, videosFolder, e2e, component } = cypressConfig;
+    if (videosFolder) {
+        config['videosFolder'] = (0, path_1.join)(videosFolder, outputSubfolder);
+    }
+    if (screenshotsFolder) {
+        config['screenshotsFolder'] = (0, path_1.join)(screenshotsFolder, outputSubfolder);
+    }
+    if (e2e) {
+        config['e2e'] = {};
+        if (e2e.videosFolder) {
+            config['e2e']['videosFolder'] = (0, path_1.join)(e2e.videosFolder, outputSubfolder);
+        }
+        if (e2e.screenshotsFolder) {
+            config['e2e']['screenshotsFolder'] = (0, path_1.join)(e2e.screenshotsFolder, outputSubfolder);
+        }
+    }
+    if (component) {
+        config['component'] = {};
+        if (component.videosFolder) {
+            config['component']['videosFolder'] = (0, path_1.join)(component.videosFolder, outputSubfolder);
+        }
+        if (component.screenshotsFolder) {
+            config['component']['screenshotsFolder'] = (0, path_1.join)(component.screenshotsFolder, outputSubfolder);
+        }
+    }
+    // Stringify twice to escape the quotes.
+    return JSON.stringify(JSON.stringify(config));
+}
 function getOutputs(projectRoot, cypressConfig, testingType) {
     function getOutput(path) {
         if (path.startsWith('..')) {
@@ -170,12 +206,15 @@ async function buildCypressTargets(configFilePath, projectRoot, options, context
             for (const file of specFiles) {
                 const relativeSpecFilePath = (0, devkit_1.normalizePath)((0, path_1.relative)(projectRoot, file));
                 const targetName = options.ciTargetName + '--' + relativeSpecFilePath;
+                const outputSubfolder = relativeSpecFilePath
+                    .replace(/[\/\\]/g, '-')
+                    .replace(/\./g, '-');
                 ciTargetGroup.push(targetName);
                 targets[targetName] = {
-                    outputs,
+                    outputs: getTargetOutputs(outputs, outputSubfolder),
                     inputs,
                     cache: true,
-                    command: `cypress run --env webServerCommand="${ciWebServerCommand}" --spec ${relativeSpecFilePath}${ciBaseUrl ? ` --config='{"baseUrl": "${ciBaseUrl}"}'` : ''}`,
+                    command: `cypress run --env webServerCommand="${ciWebServerCommand}" --spec ${relativeSpecFilePath} --config=${getTargetConfig(cypressConfig, outputSubfolder, ciBaseUrl)}`,
                     options: {
                         cwd: projectRoot,
                     },