fix(nx): configure knobs correctly

nrwl · Nov 8, 2019 · ae93a87 · ae93a87
1 parent 562e096
commit ae93a87
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/e2e/storybook.test.ts b/e2e/storybook.test.ts
@@ -33,6 +33,31 @@ forEachCli(() => {
           runCLI(
             `generate @nrwl/storybook:configuration ${mylib} --no-interactive`
           );
+
+          writeFileSync(
+            tmpProjPath(
+              `apps/${mylib}-e2e/src/integration/test-button/test-button.component.spec.ts`
+            ),
+            `
+            describe('test-ui-lib3726865', () => {
+
+              it('should render the component', () => {
+                cy.visit('/iframe.html?id=testbuttoncomponent--primary&knob-buttonType=button&knob-style=default&knob-age&knob-isDisabled=false');
+                cy.get('proj-test-button').should('exist');
+                cy.get('button').should('not.be.disabled');
+                cy.get('button').should('have.class', 'default');
+                cy.contains('You are 0 years old.');
+              });
+              it('should adjust the knobs', () => {
+                cy.visit('/iframe.html?id=testbuttoncomponent--primary&knob-buttonType=button&knob-style=primary&knob-age=10&knob-isDisabled=true');
+                cy.get('button').should('be.disabled');
+                cy.get('button').should('have.class', 'primary');
+                cy.contains('You are 10 years old.');
+              });
+            });
+            `
+          );
+
           runCLI(
             `generate @nrwl/react:storybook-configuration ${mylib2} --configureCypress --no-interactive`
           );
@@ -68,7 +93,7 @@ export class TestButtonComponent implements OnInit {
   @Input('buttonType') type = 'button';
   @Input() style: ButtonStyle = 'default';
   @Input() age: number;
-  @Input() isOn = false;
+  @Input() isDisabled = false;
 
   constructor() { }
 
@@ -83,7 +108,10 @@ export class TestButtonComponent implements OnInit {
     tmpProjPath(
       `libs/${libName}/src/lib/test-button/test-button.component.html`
     ),
-    `<button [attr.type]="type" [ngClass]="style"></button>`
+    `
+    <button [disabled]="isDisabled" [attr.type]="type" [ngClass]="style">Click me</button>
+    <p>You are {{age}} years old.</p>
+    `
   );
   runCLI(
     `g @schematics/angular:component test-other --project=${libName} --no-interactive`

diff --git a/packages/storybook/src/schematics/configuration/lib-files/.storybook/config.js__tmpl__ b/packages/storybook/src/schematics/configuration/lib-files/.storybook/config.js__tmpl__
@@ -1,3 +1,5 @@
-import { configure } from '<%= uiFramework %>';
+import { configure, addDecorator } from '<%= uiFramework %>';
+import { withKnobs } from '@storybook/addon-knobs';
 
+addDecorator(withKnobs);
 configure(require.context('../src/lib', true, /\.stories\.ts$/), module);