fix(angular): fix multiple call with Input setter

storybookjs · Mar 5, 2022 · ff94ff2 · ff94ff2
1 parent 761501b
commit ff94ff2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 30 deletions.
diff --git a/app/angular/src/client/preview/angular-beta/StorybookModule.test.ts b/app/angular/src/client/preview/angular-beta/StorybookModule.test.ts
@@ -27,6 +27,11 @@ describe('StorybookModule', () => {
         @Input('inputBindingPropertyName')
         public localPropertyName: string;
 
+        // @Input()
+        // public set setter(value: string) {
+        //   this.setterCallNb += 1;
+        // }
+
         @Output()
         public output = new EventEmitter<string>();
 
@@ -36,6 +41,8 @@ describe('StorybookModule', () => {
         public localProperty: string;
 
         public localFunction = () => '';
+
+        public setterCallNb = 0;
       }
 
       it('should initialize inputs', async () => {
@@ -104,13 +111,15 @@ describe('StorybookModule', () => {
       it('should change inputs if storyProps$ Subject emit', async () => {
         const initialProps = {
           input: 'input',
+          inputBindingPropertyName: '',
         };
         const storyProps$ = new BehaviorSubject<ICollection>(initialProps);
 
         const ngModule = getStorybookModuleMetadata(
           {
             storyFnAngular: { props: initialProps },
             component: FooComponent,
+
             targetSelector: 'my-selector',
           },
           storyProps$
@@ -150,6 +159,7 @@ describe('StorybookModule', () => {
         let expectedOutputValue;
         let expectedOutputBindingValue;
         const initialProps = {
+          input: '',
           output: (value: string) => {
             expectedOutputValue = value;
           },

diff --git a/app/angular/src/client/preview/angular-beta/StorybookWrapperComponent.ts b/app/angular/src/client/preview/angular-beta/StorybookWrapperComponent.ts
@@ -32,7 +32,7 @@ const getNonInputsOutputsProps = (
 /**
  * Wraps the story template into a component
  *
- * @param storyComponent
+ * @param storyComponent //
  * @param initialProps
  */
 export const createStorybookWrapperComponent = (
@@ -98,39 +98,13 @@ export const createStorybookWrapperComponent = (
         this.storyComponentViewContainerRef.injector.get(ChangeDetectorRef).markForCheck();
         this.changeDetectorRef.detectChanges();
 
-        // Once target component has been initialized, the storyProps$ observable keeps target component inputs up to date
+        // Once target component has been initialized, the storyProps$ observable keeps target component none Input | Output up to date
         this.storyComponentPropsSubscription = this.storyProps$
           .pipe(
             skip(1),
             map((props) => {
-              // removes component output in props
-              const outputsKeyToRemove = ngComponentInputsOutputs.outputs.map(
-                (o) => o.templateName
-              );
-              return Object.entries(props).reduce(
-                (prev, [key, value]) => ({
-                  ...prev,
-                  ...(!outputsKeyToRemove.includes(key) && {
-                    [key]: value,
-                  }),
-                }),
-                {} as ICollection
-              );
-            }),
-            map((props) => {
-              // In case a component uses an input with `bindingPropertyName` (ex: @Input('name'))
-              // find the value of the local propName in the component Inputs
-              // otherwise use the input key
-              return Object.entries(props).reduce((prev, [propKey, value]) => {
-                const input = ngComponentInputsOutputs.inputs.find(
-                  (o) => o.templateName === propKey
-                );
-
-                return {
-                  ...prev,
-                  ...(input ? { [input.propName]: value } : { [propKey]: value }),
-                };
-              }, {} as ICollection);
+              const propsKeyToKeep = getNonInputsOutputsProps(ngComponentInputsOutputs, props);
+              return propsKeyToKeep.reduce((acc, p) => ({ ...acc, [p]: props[p] }), {});
             })
           )
           .subscribe((props) => {