fix(testing): normalize paths for component-testing (#11963)

* fix(testing): normalize paths before accessing the project graph

* fix(testing): return object with offset input instead of string

* fix(testing): update schemas to provide better prompts

docs/generated/packages/angular.json

@@ -526,17 +526,20 @@
           "componentName": {
             "type": "string",
             "description": "Class name of the component to create a test for.",
-            "examples": ["MyFancyButtonComponent"]
+            "examples": ["MyFancyButtonComponent"],
+            "x-prompt": "What is the class name of the component to create a test for?"
           },
           "componentDir": {
             "type": "string",
             "description": "Relative path to the folder that contains the component from the project root.",
-            "example": ["src/lib/my-fancy-button"]
+            "examples": ["src/lib/my-fancy-button"],
+            "x-prompt": "What is the path to the component directory from the project root?"
           },
           "componentFileName": {
             "type": "string",
             "description": "File name that contains the component without the `.ts` extension.",
-            "examples": ["my-fancy-button.component"]
+            "examples": ["my-fancy-button.component"],
+            "x-prompt": "What is the file name that contains the component?"
           },
           "skipFormat": {
             "description": "Skip formatting files.",
@@ -546,9 +549,9 @@
         },
         "additionalProperties": false,
         "required": [
-          "projectPath",
+          "project",
           "componentName",
-          "componentPath",
+          "componentDir",
           "componentFileName"
         ],
         "presets": []
@@ -2193,12 +2196,13 @@
           "project": {
             "type": "string",
             "description": "The name of the project to add cypress component testing configuration to",
-            "$default": { "$source": "projectName" },
+            "x-dropdown": "projects",
             "x-prompt": "What project should we add Cypress component testing to?"
           },
           "generateTests": {
             "type": "boolean",
             "description": "Generate default component tests for existing components in the project",
+            "x-prompt": "Automatically generate tests for components declared in this project?",
             "default": false
           },
           "buildTarget": {

docs/generated/packages/react.json

@@ -1227,19 +1227,20 @@
           "project": {
             "type": "string",
             "description": "The name of the project to add cypress component testing configuration to",
-            "$default": { "$source": "projectName" },
+            "x-dropdown": "projects",
             "x-prompt": "What project should we add Cypress component testing to?"
           },
+          "generateTests": {
+            "type": "boolean",
+            "description": "Generate default component tests for existing components in the project",
+            "x-prompt": "Automatically generate tests for components declared in this project?",
+            "default": false
+          },
           "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",
-            "default": false
-          },
           "skipFormat": {
             "type": "boolean",
             "description": "Skip formatting files",
@@ -1275,7 +1276,7 @@
           "project": {
             "type": "string",
             "description": "The name of the project the component is apart of",
-            "$default": { "$source": "projectName" },
+            "x-dropdown": "projects",
             "x-prompt": "What project is this component apart of?"
           },
           "componentPath": {

e2e/angular-extensions/src/cypress-component-tests.test.ts

@@ -5,6 +5,7 @@ import {
   runCLI,
   uniq,
   updateFile,
+  updateProjectConfig,
 } from '../../utils';
 import { names } from '@nrwl/devkit';
 describe('Angular Cypress Component Tests', () => {
@@ -130,6 +131,17 @@ import {CommonModule} from '@angular/common';
   }
   `
     );
+
+    // make sure assets from the workspace root work.
+    createFile('libs/assets/data.json', JSON.stringify({ data: 'data' }));
+    updateProjectConfig(appName, (config) => {
+      config.targets['build'].options.assets.push({
+        glob: '**/*',
+        input: 'libs/assets',
+        output: 'assets',
+      });
+      return config;
+    });
   });
 
   it('should test app', () => {

packages/angular/plugins/component-testing.ts

@@ -196,17 +196,17 @@ function normalizeBuildTargetOptions(
     buildOptions.assets = buildOptions.assets.map((asset) => {
       return typeof asset === 'string'
         ? joinPathFragments(offset, asset)
-        : (asset.input = joinPathFragments(offset, asset.input));
+        : { ...asset, input: joinPathFragments(offset, asset.input) };
     });
     buildOptions.styles = buildOptions.styles.map((style) => {
       return typeof style === 'string'
         ? joinPathFragments(offset, style)
-        : (style.input = joinPathFragments(offset, style.input));
+        : { ...style, input: joinPathFragments(offset, style.input) };
     });
     buildOptions.scripts = buildOptions.scripts.map((script) => {
       return typeof script === 'string'
         ? joinPathFragments(offset, script)
-        : (script.input = joinPathFragments(offset, script.input));
+        : { ...script, input: joinPathFragments(offset, script.input) };
     });
   } else {
     const stylePath = getTempStylesForTailwind(ctContext);

packages/angular/src/generators/component-test/schema.json

@@ -14,17 +14,20 @@
     "componentName": {
       "type": "string",
       "description": "Class name of the component to create a test for.",
-      "examples": ["MyFancyButtonComponent"]
+      "examples": ["MyFancyButtonComponent"],
+      "x-prompt": "What is the class name of the component to create a test for?"
     },
     "componentDir": {
       "type": "string",
       "description": "Relative path to the folder that contains the component from the project root.",
-      "example": ["src/lib/my-fancy-button"]
+      "examples": ["src/lib/my-fancy-button"],
+      "x-prompt": "What is the path to the component directory from the project root?"
     },
     "componentFileName": {
       "type": "string",
       "description": "File name that contains the component without the `.ts` extension.",
-      "examples": ["my-fancy-button.component"]
+      "examples": ["my-fancy-button.component"],
+      "x-prompt": "What is the file name that contains the component?"
     },
     "skipFormat": {
       "description": "Skip formatting files.",
@@ -33,10 +36,5 @@
     }
   },
   "additionalProperties": false,
-  "required": [
+  "required": ["project", "componentName", "componentDir", "componentFileName"]
-    "projectPath",
-    "componentName",
-    "componentPath",
-    "componentFileName"
-  ]
 }

packages/angular/src/generators/cypress-component-configuration/schema.json

@@ -9,14 +9,13 @@
     "project": {
       "type": "string",
       "description": "The name of the project to add cypress component testing configuration to",
-      "$default": {
+      "x-dropdown": "projects",
-        "$source": "projectName"
-      },
       "x-prompt": "What project should we add Cypress component testing to?"
     },
     "generateTests": {
       "type": "boolean",
       "description": "Generate default component tests for existing components in the project",
+      "x-prompt": "Automatically generate tests for components declared in this project?",
       "default": false
     },
     "buildTarget": {

packages/cypress/plugins/cypress-preset.ts

@@ -1,5 +1,6 @@
 import {
   ExecutorContext,
+  normalizePath,
   ProjectConfiguration,
   ProjectGraph,
   readNxJson,
@@ -83,9 +84,11 @@ export function getProjectConfigByPath(
   configPath: string
 ): ProjectConfiguration {
   const configFileFromWorkspaceRoot = relative(workspaceRoot, configPath);
-  const normalizedPathFromWorkspaceRoot = lstatSync(configPath).isFile()
+  const normalizedPathFromWorkspaceRoot = normalizePath(
+    lstatSync(configPath).isFile()
       ? configFileFromWorkspaceRoot.replace(extname(configPath), '')
-    : configFileFromWorkspaceRoot;
+      : configFileFromWorkspaceRoot
+  );
 
   const mappedGraph = mapProjectGraphFiles(graph);
   const componentTestingProjectName =

packages/react/src/generators/component-test/schema.json

@@ -15,9 +15,7 @@
     "project": {
       "type": "string",
       "description": "The name of the project the component is apart of",
-      "$default": {
+      "x-dropdown": "projects",
-        "$source": "projectName"
-      },
       "x-prompt": "What project is this component apart of?"
     },
     "componentPath": {

packages/react/src/generators/cypress-component-configuration/schema.json

@@ -19,21 +19,20 @@
     "project": {
       "type": "string",
       "description": "The name of the project to add cypress component testing configuration to",
-      "$default": {
+      "x-dropdown": "projects",
-        "$source": "projectName"
-      },
       "x-prompt": "What project should we add Cypress component testing to?"
     },
+    "generateTests": {
+      "type": "boolean",
+      "description": "Generate default component tests for existing components in the project",
+      "x-prompt": "Automatically generate tests for components declared in this project?",
+      "default": false
+    },
     "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",
-      "default": false
-    },
     "skipFormat": {
       "type": "boolean",
       "description": "Skip formatting files",