feat(angular): remove internal storybook properties in storyshot

Generates snapshots that will change less if the internal stroybook properties change
storybookjs · Dec 10, 2020 · bf3a014 · bf3a014
1 parent 2103688
commit bf3a014
Show file tree

Hide file tree

Showing 33 changed files with 64 additions and 403 deletions.
diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts b/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts
@@ -36,7 +36,8 @@ function getRenderedTree(story: any) {
     const tree = TestBed.createComponent(moduleMeta.bootstrap[0] as any);
     tree.detectChanges();
 
-    return tree;
+    // Empty componentInstance remove attributes of the internal main component (<storybook-wrapper>) in snapshot
+    return { ...tree, componentInstance: {} };
   });
 }
 

diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -1,15 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon/Actions Action and method 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  onClick={[Function Function]}
-  storyComponentElementRef={[Function ButtonComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
-  text={[Function String]}
->
+<storybook-wrapper>
   <storybook-button-component
     _nghost-a-c5=""
     ng-reflect-text="Action and Method"
@@ -24,15 +16,7 @@ exports[`Storyshots Addon/Actions Action and method 1`] = `
 `;
 
 exports[`Storyshots Addon/Actions Action only 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  onClick={[Function Function]}
-  storyComponentElementRef={[Function ButtonComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
-  text={[Function String]}
->
+<storybook-wrapper>
   <storybook-button-component
     _nghost-a-c4=""
     ng-reflect-text="Action only"

diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot
@@ -1,13 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon/Background background component 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  storyComponentElementRef={[Function AppComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   <storybook-app-root>
     <div
       class="hide"
@@ -67,13 +61,7 @@ exports[`Storyshots Addon/Background background component 1`] = `
 `;
 
 exports[`Storyshots Addon/Background background template 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  onClick={[Function Function]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
-  text={[Function String]}
->
+<storybook-wrapper>
   <storybook-button-component
     _nghost-a-c0=""
     ng-reflect-text="Hello Button"

diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-controls.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-controls.stories.storyshot
@@ -1,15 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon/Controls Basic 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  isDisabled="false"
-  label={[Function String]}
-  storyComponentElementRef={[Function DocButtonComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   <my-button
     ng-reflect-is-disabled="false"
     ng-reflect-label="Args test"
@@ -30,15 +22,7 @@ exports[`Storyshots Addon/Controls Basic 1`] = `
 `;
 
 exports[`Storyshots Addon/Controls Disabled 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  isDisabled={[Function Boolean]}
-  label={[Function String]}
-  storyComponentElementRef={[Function DocButtonComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   <my-button
     ng-reflect-is-disabled="true"
     ng-reflect-label="Disabled"

diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot
@@ -1,13 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon/Docs with some emoji 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  onClick={[Function Function]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
-  text={[Function String]}
->
+<storybook-wrapper>
   <storybook-button-component
     _nghost-a-c7=""
     ng-reflect-text="😀 😎 👍 💯"
@@ -22,13 +16,7 @@ exports[`Storyshots Addon/Docs with some emoji 1`] = `
 `;
 
 exports[`Storyshots Addon/Docs with text 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  onClick={[Function Function]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
-  text={[Function String]}
->
+<storybook-wrapper>
   <storybook-button-component
     _nghost-a-c6=""
     ng-reflect-text="Hello Button"

diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-jest.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-jest.stories.storyshot
@@ -1,13 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon/Jest app.component with jest tests 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  storyComponentElementRef={[Function AppComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   <storybook-app-root>
     <div
       class="hide"

diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -1,22 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon/Knobs All knobs 1`] = `
-<storybook-wrapper
-  border={[Function String]}
-  changeDetectorRef={[Function ViewRef_]}
-  fruit={[Function String]}
-  items={[Function Array]}
-  name={[Function String]}
-  nice={[Function Boolean]}
-  otherFruit={[Function String]}
-  price={[Function Number]}
-  stock={[Function Number]}
-  storyComponentElementRef={[Function AllKnobsComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
-  today={[Function Number]}
->
+<storybook-wrapper>
   <storybook-simple-knobs-component
     ng-reflect-border="deeppink"
     ng-reflect-fruit="apples"
@@ -72,14 +57,7 @@ exports[`Storyshots Addon/Knobs All knobs 1`] = `
 `;
 
 exports[`Storyshots Addon/Knobs Simple 1`] = `
-<storybook-wrapper
-  age="0"
-  changeDetectorRef={[Function ViewRef_]}
-  name={[Function String]}
-  phoneNumber={[Function String]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   <h1>
      This is a template 
   </h1><storybook-simple-knobs-component
@@ -98,11 +76,7 @@ exports[`Storyshots Addon/Knobs Simple 1`] = `
 `;
 
 exports[`Storyshots Addon/Knobs XSS safety 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   &lt;img src=x onerror="alert('XSS Attack')" &gt;
 </storybook-wrapper>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -1,15 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon/Links button with link to another story 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  onClick={[Function Function]}
-  storyComponentElementRef={[Function ButtonComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
-  text={[Function String]}
->
+<storybook-wrapper>
   <storybook-button-component
     _nghost-a-c8=""
     ng-reflect-text="Go to Welcome Story"

diff --git a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
@@ -1,13 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots App Component Component with fullscreen parameters 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  storyComponentElementRef={[Function AppComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   <storybook-app-root>
     <div
       class="hide"

diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
@@ -1,15 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Core/Parameters passed to story 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  onClick={[Function Function]}
-  storyComponentElementRef={[Function ButtonComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
-  text={[Function String]}
->
+<storybook-wrapper>
   <storybook-button-component
     _nghost-a-c9=""
     ng-reflect-text="Parameters are {

diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-ng-content.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-ng-content.stories.storyshot
@@ -1,11 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Custom/ng-content Default 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   <storybook-with-ng-content>
     <div
       style="color: #1e88e5;"

diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot
@@ -1,14 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Custom/Pipes Simple 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  field={[Function String]}
-  storyComponentElementRef={[Function NameComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   <storybook-name
     ng-reflect-field="foobar"
   >
@@ -20,14 +13,7 @@ exports[`Storyshots Custom/Pipes Simple 1`] = `
 `;
 
 exports[`Storyshots Custom/Pipes With Knobs 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  field={[Function String]}
-  storyComponentElementRef={[Function NameComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   <storybook-name
     ng-reflect-field="foobar"
   >

diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot
@@ -1,14 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Custom/Providers Simple 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  name={[Function String]}
-  storyComponentElementRef={[Function ServiceComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   <storybook-simple-service-component
     ng-reflect-name="Static name"
   >
@@ -23,14 +16,7 @@ exports[`Storyshots Custom/Providers Simple 1`] = `
 `;
 
 exports[`Storyshots Custom/Providers With knobs 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  name={[Function String]}
-  storyComponentElementRef={[Function ServiceComponent]}
-  storyComponentViewContainerRef={[Function ViewContainerRef_]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
->
+<storybook-wrapper>
   <storybook-simple-service-component
     ng-reflect-name="Dynamic knob"
   >

diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
@@ -1,13 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Custom/Style Default 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  onClick={[Function Function]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
-  text={[Function String]}
->
+<storybook-wrapper>
   <storybook-button-component
     _ngcontent-a-c10=""
     _nghost-a-c11=""
@@ -23,13 +17,7 @@ exports[`Storyshots Custom/Style Default 1`] = `
 `;
 
 exports[`Storyshots Custom/Style With Knobs 1`] = `
-<storybook-wrapper
-  changeDetectorRef={[Function ViewRef_]}
-  onClick={[Function Function]}
-  storyProps$={[Function Observable]}
-  storyPropsSubscription={[Function Subscriber]}
-  text={[Function String]}
->
+<storybook-wrapper>
   <storybook-button-component
     _ngcontent-a-c12=""
     _nghost-a-c13=""