Nx: [storybook] No easy way to generate component stories/e2e-spec files

[jon301]

Expected Behavior

It should be possible to easily generate component stories/e2e-spec file for library/project that already has a storybook configuration.

Current Behavior

The storybook-configuration schematic can add a new storybook configuration on a library + generate stories/spec files for all the components that currently exist in the library, which is fine.

But if you add a new component in this library afterwards, stories/e2e-spec files are not generated automatically.

After digging a bit, it seems you need to type a very long command like this :

$ ng g component-story --component-file-name card.component --component-name CardComponent --ng-module-class-name WebuiModule --lib-path libs/webui --module-file-name webui.module --component-path src/lib/card
CREATE libs/webui/src/lib/card/card.component.stories.ts (269 bytes)

You need to type another command if you want to generate the e2e-spec file for the same component :

$ ng g component-cypress-spec --component-file-name ... --component-name ... --lib-path ... ... ...

Steps to Reproduce

1. npx create-nx-workspace@latest repro-workspace
2. ng g lib webui
3. ng g component button --project webui
4. ng g storybook-configuration webui

? Configure a cypress e2e app to run against the storybook instance? Yes
? Automatically generate *.stories.ts files for components declared in this library? Yes
? Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure schematic? Yes
CREATE libs/webui/.storybook/tsconfig.json (118 bytes)
CREATE libs/webui/.storybook/addons.js (37 bytes)
CREATE libs/webui/.storybook/config.js (216 bytes)
CREATE libs/webui/.storybook/webpack.config.js (261 bytes)
CREATE apps/webui-e2e/tslint.json (42 bytes)
CREATE apps/webui-e2e/cypress.json (448 bytes)
CREATE apps/webui-e2e/tsconfig.e2e.json (152 bytes)
CREATE apps/webui-e2e/tsconfig.json (126 bytes)
CREATE apps/webui-e2e/src/fixtures/example.json (80 bytes)
CREATE apps/webui-e2e/src/plugins/index.js (811 bytes)
CREATE apps/webui-e2e/src/support/commands.ts (1068 bytes)
CREATE apps/webui-e2e/src/support/index.ts (599 bytes)
CREATE libs/webui/src/lib/button/button.component.stories.ts (271 bytes)
CREATE apps/webui-e2e/src/integration/button/button.component.spec.ts (205 bytes)
UPDATE package.json (2478 bytes)
UPDATE libs/webui/tsconfig.lib.json (575 bytes)
UPDATE angular.json (10519 bytes)
UPDATE nx.json (485 bytes)
✨ Done in 3.66s.

1. ng g component card --project webui

CREATE libs/webui/src/lib/card/card.component.scss (0 bytes)
CREATE libs/webui/src/lib/card/card.component.html (19 bytes)
CREATE libs/webui/src/lib/card/card.component.spec.ts (614 bytes)
CREATE libs/webui/src/lib/card/card.component.ts (270 bytes)
UPDATE libs/webui/src/lib/webui.module.ts (326 bytes)
✨ Done in 1.61s.

---> At this point I cannot find any easy way to generate stories/e2e-spec files for this new card component

I've tried stories schematic with no success :

$ ng g stories webui
ERROR! libs/webui/src/lib/button/button.component.stories.ts already exists.
The Schematic workflow failed. See above.
error Command failed with exit code 1.

Context

  @nrwl/angular : 8.8.0
  @nrwl/cli : 8.8.0
  @nrwl/cypress : 8.8.0
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 8.8.0
  @nrwl/linter : 8.8.0
  @nrwl/nest : 8.8.0
  @nrwl/next : Not Found
  @nrwl/node : 8.8.0
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 8.8.0
  @nrwl/web : Not Found
  @nrwl/workspace : 8.8.0

Angular CLI: 8.3.14
Node: 10.17.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.14
@angular-devkit/build-angular     0.803.19
@angular-devkit/build-optimizer   0.803.19
@angular-devkit/build-webpack     0.803.19
@angular-devkit/core              8.3.14
@angular-devkit/schematics        8.3.14
@angular/cli                      8.3.14
@ngtools/webpack                  8.3.19
@schematics/angular               8.3.14
@schematics/update                0.803.14
rxjs                              6.4.0
typescript                        3.5.3

[geebru]

Related to your errors (ERROR! libs/webui/src/lib/button/button.component.stories.ts already exists. The Schematic workflow failed. See above.) - I wish this wasn't considered an error. When I was toying with this, I ran stories first which gave me a great collection of stories. I updated them, then wanted to run the configuration to create the .storybook/e2e files as well - but it errors because it already made the stories.

I feel like the process wouldn't be as cumbersome if it didn't fail just because stories exist already. Being able to run stories on newly created components, while ignoring those that already have stories connected to them seems like the ideal path.

[mbriggs]

Thank you for the report :) This is definitely something we will be looking into making easier