fix(testing): cypress update ci webserver to serve-static based on pl…

…ugins (#27399)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
We're only checking for Vite and adding `preview` as a string on its own
when running the migration to update cypress.config.ts
ciWebServerCommand


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Check both Vite and Webpack and update according to plugin if one exists

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

packages/cypress/migrations.json

@@ -32,15 +32,9 @@
     },
     "update-19-6-0-update-ci-webserver-for-vite": {
       "cli": "nx",
-      "version": "19.6.0-beta.0",
-      "description": "Update ciWebServerCommand to use previewTargetName if Vite is detected for the application.",
-      "implementation": "./src/migrations/update-19-6-0/update-ci-webserver-for-vite"
-    },
-    "update-19-6-0-add-e2e-ci-target-defaults": {
-      "cli": "nx",
-      "version": "19.6.0-beta.0",
-      "description": "Add inferred ciTargetNames to targetDefaults with dependsOn to ensure dependent application builds are scheduled before atomized tasks.",
-      "implementation": "./src/migrations/update-19-6-0/add-e2e-ci-target-defaults"
+      "version": "19.6.0-beta.4",
+      "description": "Update ciWebServerCommand to use static serve for the application.",
+      "implementation": "./src/migrations/update-19-6-0/update-ci-webserver-for-static-serve"
     }
   },
   "packageJsonUpdates": {

packages/cypress/src/migrations/update-19-6-0/update-ci-webserver-for-vite.spec.ts → packages/cypress/src/migrations/update-19-6-0/update-ci-webserver-for-static-serve.spec.ts

@@ -1,4 +1,4 @@
-import updateCiWebserverForVite from './update-ci-webserver-for-vite';
+import updateCiWebserverForVite from './update-ci-webserver-for-static-serve';
 import {
   type Tree,
   type ProjectGraph,
@@ -35,7 +35,7 @@ describe('updateCiWebserverForVite', () => {
     tempFs.reset();
   });
 
-  it('should do nothing if vite is not found for application', async () => {
+  it('should update to serve-static target for webpack', async () => {
     // ARRANGE
     const nxJson = readNxJson(tree);
     nxJson.plugins = [
@@ -46,6 +46,65 @@ describe('updateCiWebserverForVite', () => {
           ciTargetName: 'e2e-ci',
         },
       },
+      {
+        plugin: '@nx/webpack/plugin',
+        options: {
+          serveStaticTargetName: 'webpack:serve-static',
+        },
+      },
+    ];
+    updateNxJson(tree, nxJson);
+
+    addProject(tree, tempFs, {
+      buildTargetName: 'build',
+      ciTargetName: 'e2e-ci',
+      appName: 'app',
+      noVite: true,
+    });
+
+    // ACT
+    await updateCiWebserverForVite(tree);
+
+    // ASSERT
+    expect(tree.read('app-e2e/cypress.config.ts', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+      import { defineConfig } from 'cypress';
+      export default defineConfig({
+        e2e: {
+          ...nxE2EPreset(__filename, {
+            cypressDir: 'src',
+            bundler: 'vite',
+            webServerCommands: {
+              default: 'nx run app:serve',
+              production: 'nx run app:preview',
+            },
+            ciWebServerCommand: 'nx run app:webpack:serve-static',
+          }),
+          baseUrl: 'http://localhost:4200',
+        },
+      });
+      "
+    `);
+  });
+
+  it('should not update the full command to serve-static target for webpack', async () => {
+    // ARRANGE
+    const nxJson = readNxJson(tree);
+    nxJson.plugins = [
+      {
+        plugin: '@nx/cypress/plugin',
+        options: {
+          targetName: 'e2e',
+          ciTargetName: 'e2e-ci',
+        },
+      },
+      {
+        plugin: '@nx/webpack/plugin',
+        options: {
+          serveStaticTargetName: 'webpack:serve-static',
+        },
+      },
     ];
     updateNxJson(tree, nxJson);
 
@@ -56,6 +115,27 @@ describe('updateCiWebserverForVite', () => {
       noVite: true,
     });
 
+    tree.write(
+      'app-e2e/cypress.config.ts',
+      `import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+import { defineConfig } from 'cypress';
+export default defineConfig({
+  e2e: {
+    ...nxE2EPreset(__filename, {
+      cypressDir: 'src',
+      bundler: 'vite',
+      webServerCommands: {
+        default: 'nx run app:serve',
+        production: 'nx run app:preview',
+      },
+      ciWebServerCommand: 'echo "start" && nx run app:serve',
+    }),
+    baseUrl: 'http://localhost:4200',
+  },
+});
+`
+    );
+
     // ACT
     await updateCiWebserverForVite(tree);
 
@@ -73,7 +153,7 @@ describe('updateCiWebserverForVite', () => {
               default: 'nx run app:serve',
               production: 'nx run app:preview',
             },
-            ciWebServerCommand: 'nx run app:serve-static',
+            ciWebServerCommand: 'echo "start" && nx run app:webpack:serve-static',
           }),
           baseUrl: 'http://localhost:4200',
         },
@@ -200,7 +280,7 @@ export default defineConfig({
       },
       ${
         !overrides.noCi
-          ? `ciWebServerCommand: 'nx run ${overrides.appName}:serve-static',`
+          ? `ciWebServerCommand: 'nx run ${overrides.appName}:serve',`
           : ''
       }
     }),
@@ -211,6 +291,11 @@ export default defineConfig({
 
   if (!overrides.noVite) {
     tree.write(`${overrides.appName}/vite.config.ts`, viteConfig);
+  } else {
+    tree.write(
+      `${overrides.appName}/webpack.config.ts`,
+      `module.exports = {output: 'dist/foo'}`
+    );
   }
   tree.write(
     `${overrides.appName}/project.json`,
@@ -223,6 +308,11 @@ export default defineConfig({
   );
   if (!overrides.noVite) {
     tempFs.createFile(`${overrides.appName}/vite.config.ts`, viteConfig);
+  } else {
+    tempFs.createFile(
+      `${overrides.appName}/webpack.config.ts`,
+      `module.exports = {output: 'dist/foo'}`
+    );
   }
   tempFs.createFilesSync({
     [`${overrides.appName}/project.json`]: JSON.stringify(appProjectConfig),

packages/cypress/src/migrations/update-19-6-0/update-ci-webserver-for-vite.ts → packages/cypress/src/migrations/update-19-6-0/update-ci-webserver-for-static-serve.ts

@@ -18,6 +18,7 @@ import {
 import { ConfigurationResult } from 'nx/src/project-graph/utils/project-configuration-utils';
 import { tsquery } from '@phenomnomnominal/tsquery';
 import { CypressPluginOptions } from '../../plugins/plugin';
+import addE2ECiTargetDefaults from './add-e2e-ci-target-defaults';
 
 export default async function (tree: Tree) {
   const pluginName = '@nx/cypress/plugin';
@@ -85,39 +86,74 @@ export default async function (tree: Tree) {
         joinPathFragments(graph.nodes[project].data.root, 'vite.config.js'),
       ].find((p) => tree.exists(p));
 
-      if (!pathToViteConfig) {
-        continue;
-      }
+      const pathToWebpackConfig = [
+        joinPathFragments(graph.nodes[project].data.root, 'webpack.config.ts'),
+        joinPathFragments(graph.nodes[project].data.root, 'webpack.config.js'),
+      ].find((p) => tree.exists(p));
 
-      const viteConfigContents = tree.read(pathToViteConfig, 'utf-8');
-      if (!viteConfigContents.includes('preview:')) {
+      if (!pathToViteConfig && !pathToWebpackConfig) {
         continue;
       }
 
-      const matchingVitePlugin = await findPluginForConfigFile(
-        tree,
-        '@nx/vite/plugin',
-        pathToViteConfig
-      );
-      const previewTargetName = matchingVitePlugin
-        ? typeof matchingVitePlugin === 'string'
-          ? 'preview'
-          : (matchingVitePlugin.options as any)?.previewTargetName ?? 'preview'
-        : 'preview';
-
-      tree.write(
-        configFile,
-        `${configFileContents.slice(
-          0,
-          nodes[0].getStart()
-        )}'nx run ${project}:${previewTargetName}',
+      if (pathToWebpackConfig) {
+        const matchingWebpackPlugin = await findPluginForConfigFile(
+          tree,
+          '@nx/webpack/plugin',
+          pathToWebpackConfig
+        );
+        const serveStaticTargetName = matchingWebpackPlugin
+          ? typeof matchingWebpackPlugin === 'string'
+            ? 'serve-static'
+            : (matchingWebpackPlugin.options as any)?.serveStaticTargetName ??
+              'serve-static'
+          : 'serve-static';
+
+        const newCommand = ciWebServerCommand.replace(
+          /nx.*[^"']/,
+          `nx run ${project}:${serveStaticTargetName}`
+        );
+        tree.write(
+          configFile,
+          `${configFileContents.slice(
+            0,
+            nodes[0].getStart()
+          )}${newCommand}${configFileContents.slice(nodes[0].getEnd())}`
+        );
+      } else if (pathToViteConfig) {
+        const viteConfigContents = tree.read(pathToViteConfig, 'utf-8');
+        if (!viteConfigContents.includes('preview:')) {
+          continue;
+        }
+
+        const matchingVitePlugin = await findPluginForConfigFile(
+          tree,
+          '@nx/vite/plugin',
+          pathToViteConfig
+        );
+        const previewTargetName = matchingVitePlugin
+          ? typeof matchingVitePlugin === 'string'
+            ? 'preview'
+            : (matchingVitePlugin.options as any)?.previewTargetName ??
+              'preview'
+          : 'preview';
+
+        const newCommand = ciWebServerCommand.replace(
+          /nx.*[^"']/,
+          `nx run ${project}:${previewTargetName}`
+        );
+        tree.write(
+          configFile,
+          `${configFileContents.slice(0, nodes[0].getStart())}${newCommand},
       ciBaseUrl: "http://localhost:4300"${configFileContents.slice(
         nodes[0].getEnd()
       )}`
-      );
+        );
+      }
     }
   }
 
+  await addE2ECiTargetDefaults(tree);
+
   await formatFiles(tree);
 }