fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

…ebpack config fixes: nrwl#11372
barbados-clemens · Aug 26, 2022 · 103474e · 103474e
1 parent d9b9bd1
commit 103474e
Show file tree

Hide file tree

Showing 17 changed files with 1,343 additions and 284 deletions.
diff --git a/docs/generated/packages/react.json b/docs/generated/packages/react.json
@@ -1207,7 +1207,7 @@
       "name": "cypress-component-configuration",
       "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator",
       "schema": {
-        "$schema": "http://json-schema.org/schema",
+        "$schema": "https://json-schema.org/schema",
         "cli": "nx",
         "$id": "NxReactCypressComponentTestConfiguration",
         "title": "Add Cypress component testing",
@@ -1230,6 +1230,11 @@
             "$default": { "$source": "projectName" },
             "x-prompt": "What project should we add Cypress component testing to?"
           },
+          "buildTarget": {
+            "type": "string",
+            "description": "A build target used to configure Cypress component testing in the format of `project:target[:configuration]`. The build target should be from a React app. If not provided we will try to infer it from your projects usage.",
+            "pattern": "^[^:\\s]+:[^:\\s]+(:\\S+)?$"
+          },
           "generateTests": {
             "type": "boolean",
             "description": "Generate default component tests for existing components in the project",

diff --git a/e2e/react/src/cypress-component-tests.test.ts b/e2e/react/src/cypress-component-tests.test.ts
@@ -1,4 +1,4 @@
-import { newProject, runCLI, uniq } from '../../utils';
+import { createFile, newProject, runCLI, uniq, updateFile } from '../../utils';
 
 describe('React Cypress Component Tests', () => {
   beforeAll(() => newProject());
@@ -17,14 +17,35 @@ describe('React Cypress Component Tests', () => {
     );
   }, 1000000);
 
-  it('should successfully test react app', () => {
+  it('should successfully test react lib', () => {
     const libName = uniq('cy-react-lib');
+    const appName = uniq('cy-react-app-target');
+    runCLI(`generate @nrwl/react:app ${appName} --no-interactive`);
     runCLI(`generate @nrwl/react:lib ${libName} --component --no-interactive`);
+    runCLI(
+      `generate @nrwl/react:setup-tailwind --project=${appName} --no-interactive`
+    );
     runCLI(
       `generate @nrwl/react:component fancy-component --project=${libName} --no-interactive`
     );
+    createFile(
+      `libs/${libName}/src/styles.css`,
+      `
+@tailwind components;
+@tailwind base;
+@tailwind utilities;
+`
+    );
+    updateFile(
+      `libs/${libName}/src/lib/fancy-component/fancy-component.tsx`,
+      (content) => {
+        return `
+import '../../styles.css';
+${content}`;
+      }
+    );
     runCLI(
-      `generate @nrwl/react:cypress-component-configuration --project=${libName} --generate-tests`
+      `generate @nrwl/react:cypress-component-configuration --project=${libName} --build-target=${appName}:build --generate-tests`
     );
     expect(runCLI(`component-test ${libName} --no-watch`)).toContain(
       'All specs passed!'

diff --git a/packages/angular/src/generators/ng-add/utilities/e2e.migrator.ts b/packages/angular/src/generators/ng-add/utilities/e2e.migrator.ts
@@ -562,7 +562,7 @@ export class E2eMigrator extends ProjectMigrator<SupportedTargets> {
   }
 
   private updateCypress10ConfigFile(configFilePath: string): void {
-    this.cypressPreset = nxE2EPreset(this.project.newRoot);
+    this.cypressPreset = nxE2EPreset(configFilePath);
 
     const fileContent = this.tree.read(configFilePath, 'utf-8');
     let sourceFile = tsquery.ast(fileContent);

diff --git a/packages/cypress/migrations.json b/packages/cypress/migrations.json
@@ -30,6 +30,12 @@
       "version": "12.8.0-beta.0",
       "description": "Remove Typescript Preprocessor Plugin",
       "factory": "./src/migrations/update-12-8-0/remove-typescript-plugin"
+    },
+    "update-cypress-configs-preset": {
+      "cli": "nx",
+      "version": "14.6.1-beta.0",
+      "description": "Change Cypress e2e and component testing presets to use __filename instead of __dirname and include a devServerTarget for component testing.",
+      "factory": "./src/migrations/update-14-6-1/update-cypress-configs-presets"
     }
   },
   "packageJsonUpdates": {

diff --git a/packages/cypress/plugins/cypress-preset.ts b/packages/cypress/plugins/cypress-preset.ts
@@ -1,5 +1,6 @@
 import { workspaceRoot } from '@nrwl/devkit';
-import { join, relative } from 'path';
+import { dirname, extname, join, relative } from 'path';
+import { lstatSync } from 'fs';
 
 interface BaseCypressPreset {
   videosFolder: string;
@@ -9,8 +10,12 @@ interface BaseCypressPreset {
 }
 
 export function nxBaseCypressPreset(pathToConfig: string): BaseCypressPreset {
-  const projectPath = relative(workspaceRoot, pathToConfig);
-  const offset = relative(pathToConfig, workspaceRoot);
+  // prevent from placing path outside the root of the workspace
+  // if they pass in a file or directory
+  const normalizedPath =
+    extname(pathToConfig) === '' ? pathToConfig : dirname(pathToConfig);
+  const projectPath = relative(workspaceRoot, normalizedPath);
+  const offset = relative(normalizedPath, workspaceRoot);
   const videosFolder = join(offset, 'dist', 'cypress', projectPath, 'videos');
   const screenshotsFolder = join(
     offset,