miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source 
ISSUES CLOSED: 7117
This commit is contained in:
Juri Strumpflohner 2021-10-29 19:26:10 +02:00 committed by GitHub
parent 0d3a5c375d
commit 1241068fd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 181 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) => node.getText())
.filter((name) => name.endsWith('Component'));
.map((node) => {
if (node.kind === SyntaxKind.Identifier) {
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(

44
packages/angular/src/generators/stories/stories-lib.spec.ts
View File

@ -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,

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

@ -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",

47
packages/angular/src/generators/utils/testing.ts
View File

@ -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',