feat(testing): add support for the ts solution config setup to the cy…

…press plugin

docs/generated/packages/cypress/generators/configuration.json

@@ -43,8 +43,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.",

packages/angular/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap

@@ -22,7 +22,7 @@ import './commands';
 
 // add component testing only related command here, such as mount
 declare global {
-// eslint-disable-next-line @typescript-eslint/no-namespace
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     interface Chainable<Subject> {

packages/cypress/plugins/cypress-preset.ts

@@ -1,14 +1,13 @@
 import { workspaceRoot } from '@nx/devkit';
-import { dirname, join, relative } from 'path';
-import { lstatSync } from 'fs';
-
-import vitePreprocessor from '../src/plugins/preprocessor-vite';
-import { NX_PLUGIN_OPTIONS } from '../src/utils/constants';
-
+import { isUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-solution-setup';
 import { execSync, spawn } from 'child_process';
+import { lstatSync } from 'fs';
 import { request as httpRequest } from 'http';
 import { request as httpsRequest } from 'https';
+import { dirname, join, relative } from 'path';
 import type { InlineConfig } from 'vite';
+import vitePreprocessor from '../src/plugins/preprocessor-vite';
+import { NX_PLUGIN_OPTIONS } from '../src/utils/constants';
 
 // Importing the cypress type here causes the angular and next unit
 // tests to fail when transpiling, it seems like the cypress types are
@@ -54,14 +53,13 @@ export function nxBaseCypressPreset(
     : dirname(pathToConfig);
   const projectPath = relative(workspaceRoot, normalizedPath);
   const offset = relative(normalizedPath, workspaceRoot);
-  const videosFolder = join(offset, 'dist', 'cypress', projectPath, 'videos');
-  const screenshotsFolder = join(
-    offset,
-    'dist',
-    'cypress',
-    projectPath,
-    'screenshots'
-  );
+  const isTsSolutionSetup = isUsingTsSolutionSetup();
+  const videosFolder = isTsSolutionSetup
+    ? join('test-output', 'cypress', 'videos')
+    : join(offset, 'dist', 'cypress', projectPath, 'videos');
+  const screenshotsFolder = isTsSolutionSetup
+    ? join('test-output', 'cypress', 'screenshots')
+    : join(offset, 'dist', 'cypress', projectPath, 'screenshots');
 
   return {
     videosFolder,

packages/cypress/src/generators/base-setup/base-setup.ts

@@ -4,11 +4,12 @@ import {
   generateFiles,
   joinPathFragments,
   offsetFromRoot,
+  readJson,
   readProjectConfiguration,
   updateJson,
-  readJson,
 } from '@nx/devkit';
 import { getRelativePathToRootTsConfig } from '@nx/js';
+import { isUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-solution-setup';
 import { join } from 'path';
 
 export interface CypressBaseSetupSchema {
@@ -44,6 +45,7 @@ export function addBaseCypressSetup(
     tsConfigPath: opts.hasTsConfig
       ? `${opts.offsetFromProjectRoot}tsconfig.json`
       : getRelativePathToRootTsConfig(tree, projectConfig.root),
+    linter: isEslintInstalled(tree) ? 'eslint' : 'none',
     ext: '',
   };
 
@@ -54,6 +56,15 @@ export function addBaseCypressSetup(
     templateVars
   );
 
+  generateFiles(
+    tree,
+    isUsingTsSolutionSetup(tree)
+      ? join(__dirname, 'files/tsconfig/ts-solution')
+      : join(__dirname, 'files/tsconfig/non-ts-solution'),
+    projectConfig.root,
+    templateVars
+  );
+
   if (options.js) {
     if (isEsmProject(tree, projectConfig.root)) {
       generateFiles(
@@ -144,3 +155,8 @@ function isEsmProject(tree: Tree, projectRoot: string) {
   }
   return packageJson.type === 'module';
 }
+
+function isEslintInstalled(tree: Tree): boolean {
+  const { dependencies, devDependencies } = readJson(tree, 'package.json');
+  return !!(dependencies?.eslint || devDependencies?.eslint);
+}

packages/cypress/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;
+    }
   }
 }
 

packages/cypress/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;
+    }
   }
 }
 

packages/cypress/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;
+    }
   }
 }
 

packages/cypress/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;
+    }
   }
 }
 

packages/cypress/src/generators/base-setup/files/common/__directory__/tsconfig.json__ext__ → packages/cypress/src/generators/base-setup/files/tsconfig/non-ts-solution/__directory__/tsconfig.json__ext__

@@ -12,7 +12,7 @@
     "**/*.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",<%_ } _%>
     "<%= offsetFromProjectRoot %>**/*.d.ts"

packages/cypress/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"
+  ]
+}

packages/cypress/src/generators/component-configuration/component-configuration.ts

@@ -13,6 +13,7 @@ import {
   updateNxJson,
   runTasksInSerial,
   GeneratorCallback,
+  readJson,
 } from '@nx/devkit';
 import { assertNotUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-solution-setup';
 import { installedCypressVersion } from '../../utils/cypress-version';
@@ -139,6 +140,7 @@ function addProjectFiles(
       ...opts,
       projectRoot: projectConfig.root,
       offsetFromRoot: offsetFromRoot(projectConfig.root),
+      linter: isEslintInstalled(tree) ? 'eslint' : 'none',
       ext: '',
     }
   );
@@ -255,4 +257,9 @@ export function updateTsConfigForComponentTesting(
   }
 }
 
+function isEslintInstalled(tree: Tree): boolean {
+  const { dependencies, devDependencies } = readJson(tree, 'package.json');
+  return !!(dependencies?.eslint || devDependencies?.eslint);
+}
+
 export default componentConfigurationGenerator;

packages/cypress/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> {}
   }
 }