Merge pull request #14779 from storybookjs/angular/clean-args

Angular: Filter out args whose argType are missing a control or action

app/angular/src/client/preview/decorateStory.test.ts

@@ -231,6 +231,35 @@ describe('decorateStory', () => {
         template: '<parent></parent>',
       });
     });
+
+    it('should only keeps args with a control or an action in argTypes', () => {
+      const decorated = decorateStory(
+        (context: StoryContext) => ({
+          template: `Args available in the story : ${Object.keys(context.args).join()}`,
+        }),
+        []
+      );
+
+      expect(
+        decorated(
+          makeContext({
+            parameters: { component: FooComponent },
+            argTypes: {
+              withControl: { control: { type: 'object' }, name: 'withControl' },
+              withAction: { action: 'onClick', name: 'withAction' },
+              toRemove: { name: 'toRemove' },
+            },
+            args: {
+              withControl: 'withControl',
+              withAction: () => ({}),
+              toRemove: 'toRemove',
+            },
+          })
+        )
+      ).toEqual({
+        template: 'Args available in the story : withControl,withAction',
+      });
+    });
   });
 
   describe('default behavior', () => {

app/angular/src/client/preview/decorateStory.ts

@@ -17,7 +17,7 @@ export default function decorateStory(
   mainStoryFn: StoryFn<StoryFnAngularReturnType>,
   decorators: DecoratorFunction<StoryFnAngularReturnType>[]
 ): StoryFn<StoryFnAngularReturnType> {
-  const returnDecorators = decorators.reduce(
+  const returnDecorators = [cleanArgsDecorator, ...decorators].reduce(
     (previousStoryFn: StoryFn<StoryFnAngularReturnType>, decorator) => (
       context: StoryContext = defaultContext
     ) => {
@@ -56,3 +56,23 @@ const prepareMain = (
 function hasNoTemplate(template: string | null | undefined): template is undefined {
   return template === null || template === undefined;
 }
+
+const cleanArgsDecorator: DecoratorFunction<StoryFnAngularReturnType> = (storyFn, context) => {
+  if (!context.argTypes || !context.args) {
+    return storyFn();
+  }
+
+  const argsToClean = context.args;
+
+  context.args = Object.entries(argsToClean).reduce((obj, [key, arg]) => {
+    const argType = context.argTypes[key];
+
+    // Only keeps args with a control or an action in argTypes
+    if (argType.action || argType.control) {
+      return { ...obj, [key]: arg };
+    }
+    return obj;
+  }, {});
+
+  return storyFn();
+};

examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts

@@ -10,6 +10,11 @@ export default {
     moduleMetadata({
       imports: [FormsModule],
     }),
+    (storyFn) => {
+      const story = storyFn();
+      console.log(story);
+      return story;
+    },
   ],
 } as Meta;