Angular actions Regex matching internal methods

Describe the bug

export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, } matches and intercepts methods within Angular components.

i.e. If a component has an internal method called onButtonClick then this will be matched by the actions regex and the internal method will no longer be called https://github.com/RGunning/storybook-bug-mwe/blob/master/stories/methodname-bug.component.ts#L8-L10

This is fixed by setting angularLegacyRendering: false,

To Reproduce Steps to reproduce the behaviour:

See MWE: https://github.com/RGunning/storybook-bug-mwe/blob/master/stories/methodname-bug.component.stories.ts

Expected behaviour Internal component methods are called as expected

Screenshots

onButtonClick action is seen in storybook, but no console.log message seen (which is what the internal method should do)

Code snippets

import { Component } from '@angular/core';

@Component({
  selector: 'app-method-name',
  template: `<button (click)="onButtonClick()">Click me</button>`,
})
export class MethodNameComponent {
  onButtonClick() {
    console.log('This is no longer called');
  }
}

import { Meta, Story } from '@storybook/angular/types-6-0';

import { MethodNameComponent } from './methodname-bug.component';

export default {
  title: 'Actions Regex Bug',
  component: MethodNameComponent,

} as Meta;

const Template: Story<MethodNameComponent> = (args: MethodNameComponent) => ({
  moduleMetadata: {
    declarations: [MethodNameComponent],
  },
  template: ` <app-method-name ></app-method-name>`,
  props: args,
});

export const Basic: Story<MethodNameComponent> = Template.bind({});

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 87.0
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-actions: ^6.2.5 => 6.2.5 
    @storybook/addon-essentials: ^6.2.5 => 6.2.5 
    @storybook/addon-links: ^6.2.5 => 6.2.5 
    @storybook/angular: ^6.2.5 => 6.2.5 

[RGunning]

Yes, I think this one can be closed but #14520 left open. This one is more my confusion around how the argTypesRegex should work. It seems that the argTypesRegex doesn’t necessarily make sense in an Angular context, but does in a React context due to the differences in how output events are handled. In Angular, I wouldn’t expect storybook to replace the method as output events are handled by eventEmitters rather than function callbacks.

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.18 containing PR #14769 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.