fix(storybook): find Angular components in destructured arrays (#7494)

ISSUES CLOSED: 7117

packages/angular/src/generators/stories/lib/module-info.ts

@@ -56,13 +56,61 @@ export function getModuleFilePaths(tree: Tree, projectPath: string): string[] {
 function getDeclaredComponentsInDeclarations(
   declarationsArray: Node
 ): string[] {
-  return declarationsArray
+  return getDeclaredComponentNodes(declarationsArray)
+    .map((node) => node.getText())
+    .filter((name) => name.endsWith('Component'));
+}
+
+function getDeclaredComponentNodes(declarationsArray: Node): Node[] {
+  const cmps = declarationsArray
     .getChildren()
     .find((node) => node.kind === SyntaxKind.SyntaxList)
     .getChildren()
-    .filter((node) => node.kind === SyntaxKind.Identifier)
+    .map((node) => {
-    .map((node) => node.getText())
+      if (node.kind === SyntaxKind.Identifier) {
-    .filter((name) => name.endsWith('Component'));
+        return node;
+      }
+      // if the node is a destructuring, follow the variable
+      if (node.kind === SyntaxKind.SpreadElement) {
+        const declarationVariableNode = node
+          .getChildren()
+          .find((node) => node.kind === SyntaxKind.Identifier);
+
+        // try to find the variable declaration in the same component
+        const declarationVariable = getVariableDeclaration(
+          declarationVariableNode.getText(),
+          declarationVariableNode.getSourceFile()
+        );
+        if (
+          declarationVariable &&
+          declarationVariable.initializer.kind ===
+            SyntaxKind.ArrayLiteralExpression
+        ) {
+          const nodes = getDeclaredComponentNodes(
+            declarationVariable.initializer
+          );
+          return nodes;
+        }
+      }
+      return null;
+    })
+    .filter((node) => !!node);
+
+  return flatten(cmps);
+}
+
+function flatten(arr) {
+  let flattened = [];
+
+  for (const entry of arr) {
+    if (Array.isArray(entry)) {
+      flattened.push(...flatten(entry));
+    } else {
+      flattened.push(entry);
+    }
+  }
+
+  return flattened;
 }
 
 function getDeclarationsArray(

packages/angular/src/generators/stories/stories-lib.spec.ts

@@ -154,6 +154,50 @@ describe('angularStories generator: libraries', () => {
       ).toBeTruthy();
     });
 
+    it('should handle modules with where components are spread into the declarations array', async () => {
+      await cypressProjectGenerator(tree, {
+        linter: Linter.EsLint,
+        name: libName,
+      });
+
+      angularStoriesGenerator(tree, {
+        name: libName,
+        generateCypressSpecs: true,
+      });
+
+      expect(
+        tree.exists(
+          `libs/${libName}/src/lib/variable-spread-declare/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.stories.ts`
+        )
+      ).toBeTruthy();
+      expect(
+        tree.exists(
+          `libs/${libName}/src/lib/variable-spread-declare/variable-spread-declare-button/variable-spread-declare-button.component.stories.ts`
+        )
+      ).toBeTruthy();
+      expect(
+        tree.exists(
+          `libs/${libName}/src/lib/variable-spread-declare/variable-spread-declare-view/variable-spread-declare-view.component.stories.ts`
+        )
+      ).toBeTruthy();
+
+      expect(
+        tree.exists(
+          `apps/${libName}-e2e/src/integration/variable-spread-declare-button/variable-spread-declare-button.component.spec.ts`
+        )
+      ).toBeTruthy();
+      expect(
+        tree.exists(
+          `apps/${libName}-e2e/src/integration/variable-spread-declare-view/variable-spread-declare-view.component.spec.ts`
+        )
+      ).toBeTruthy();
+      expect(
+        tree.exists(
+          `apps/${libName}-e2e/src/integration/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.spec.ts`
+        )
+      ).toBeTruthy();
+    });
+
     it('should handle modules using static members for declarations rather than literals', async () => {
       await cypressProjectGenerator(tree, {
         linter: Linter.EsLint,

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

@@ -48,6 +48,9 @@ Array [
   "apps/one/two/test-ui-lib-e2e/src/integration/test-other/test-other.component.spec.ts",
   "apps/one/two/test-ui-lib-e2e/src/integration/variable-declare-button/variable-declare-button.component.spec.ts",
   "apps/one/two/test-ui-lib-e2e/src/integration/variable-declare-view/variable-declare-view.component.spec.ts",
+  "apps/one/two/test-ui-lib-e2e/src/integration/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.spec.ts",
+  "apps/one/two/test-ui-lib-e2e/src/integration/variable-spread-declare-button/variable-spread-declare-button.component.spec.ts",
+  "apps/one/two/test-ui-lib-e2e/src/integration/variable-spread-declare-view/variable-spread-declare-view.component.spec.ts",
   "apps/one/two/test-ui-lib-e2e/src/support/commands.ts",
   "apps/one/two/test-ui-lib-e2e/src/support/index.ts",
   "apps/one/two/test-ui-lib-e2e/tsconfig.json",
@@ -106,6 +109,22 @@ Array [
   "libs/test-ui-lib/src/lib/variable-declare/variable-declare-view/variable-declare-view.component.stories.ts",
   "libs/test-ui-lib/src/lib/variable-declare/variable-declare-view/variable-declare-view.component.ts",
   "libs/test-ui-lib/src/lib/variable-declare/variable-declare.module.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.css",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.html",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.spec.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.stories.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-button/variable-spread-declare-button.component.css",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-button/variable-spread-declare-button.component.html",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-button/variable-spread-declare-button.component.spec.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-button/variable-spread-declare-button.component.stories.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-button/variable-spread-declare-button.component.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-view/variable-spread-declare-view.component.css",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-view/variable-spread-declare-view.component.html",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-view/variable-spread-declare-view.component.spec.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-view/variable-spread-declare-view.component.stories.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-view/variable-spread-declare-view.component.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare.module.ts",
   "libs/test-ui-lib/src/test-setup.ts",
   "libs/test-ui-lib/tsconfig.json",
   "libs/test-ui-lib/tsconfig.lib.json",
@@ -134,6 +153,9 @@ Array [
   "apps/test-ui-lib-e2e/src/integration/test-other/test-other.component.spec.ts",
   "apps/test-ui-lib-e2e/src/integration/variable-declare-button/variable-declare-button.component.spec.ts",
   "apps/test-ui-lib-e2e/src/integration/variable-declare-view/variable-declare-view.component.spec.ts",
+  "apps/test-ui-lib-e2e/src/integration/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.spec.ts",
+  "apps/test-ui-lib-e2e/src/integration/variable-spread-declare-button/variable-spread-declare-button.component.spec.ts",
+  "apps/test-ui-lib-e2e/src/integration/variable-spread-declare-view/variable-spread-declare-view.component.spec.ts",
   "apps/test-ui-lib-e2e/src/support/commands.ts",
   "apps/test-ui-lib-e2e/src/support/index.ts",
   "apps/test-ui-lib-e2e/tsconfig.json",
@@ -192,6 +214,22 @@ Array [
   "libs/test-ui-lib/src/lib/variable-declare/variable-declare-view/variable-declare-view.component.stories.ts",
   "libs/test-ui-lib/src/lib/variable-declare/variable-declare-view/variable-declare-view.component.ts",
   "libs/test-ui-lib/src/lib/variable-declare/variable-declare.module.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.css",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.html",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.spec.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.stories.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-anotherview/variable-spread-declare-anotherview.component.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-button/variable-spread-declare-button.component.css",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-button/variable-spread-declare-button.component.html",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-button/variable-spread-declare-button.component.spec.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-button/variable-spread-declare-button.component.stories.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-button/variable-spread-declare-button.component.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-view/variable-spread-declare-view.component.css",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-view/variable-spread-declare-view.component.html",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-view/variable-spread-declare-view.component.spec.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-view/variable-spread-declare-view.component.stories.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare-view/variable-spread-declare-view.component.ts",
+  "libs/test-ui-lib/src/lib/variable-spread-declare/variable-spread-declare.module.ts",
   "libs/test-ui-lib/src/test-setup.ts",
   "libs/test-ui-lib/tsconfig.json",
   "libs/test-ui-lib/tsconfig.lib.json",

packages/angular/src/generators/utils/testing.ts

@@ -137,6 +137,53 @@ const COMPONENTS = [
 export class VariableDeclareModule {}`
   );
 
+  // create a module with components that get Angular exported and declared by variable
+  await moduleGenerator(tree, {
+    name: 'variable-spread-declare',
+    project: libName,
+  });
+
+  await componentGenerator(tree, {
+    name: 'variable-spread-declare-button',
+    project: libName,
+    path: `libs/${libName}/src/lib/variable-spread-declare`,
+    module: 'variable-spread-declare',
+  });
+
+  await componentGenerator(tree, {
+    name: 'variable-spread-declare-view',
+    project: libName,
+    path: `libs/${libName}/src/lib/variable-spread-declare`,
+    module: 'variable-spread-declare',
+  });
+
+  await componentGenerator(tree, {
+    name: 'variable-spread-declare-anotherview',
+    project: libName,
+    path: `libs/${libName}/src/lib/variable-spread-declare`,
+    module: 'variable-spread-declare',
+  });
+
+  tree.write(
+    `libs/${libName}/src/lib/variable-spread-declare/variable-spread-declare.module.ts`,
+    `import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VariableSpreadDeclareButtonComponent } from './variable-spread-declare-button/variable-spread-declare-button.component';
+import { VariableSpreadDeclareViewComponent } from './variable-spread-declare-view/variable-spread-declare-view.component';
+import { VariableSpreadDeclareAnotherviewComponent } from './variable-spread-declare-anotherview/variable-spread-declare-anotherview.component';
+
+const COMPONENTS = [ 
+  VariableSpreadDeclareButtonComponent, 
+  VariableSpreadDeclareViewComponent 
+]
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [...COMPONENTS, VariableSpreadDeclareAnotherviewComponent],
+})
+export class VariableSpreadDeclareModule {}`
+  );
+
   // create a module where declared components are pulled from a static member of the module
   await moduleGenerator(tree, {
     name: 'static-member-declarations',