[Bug]: Angular: Functions declared in stories overrides implementation of functions in components when the names of the functions are the same

[prawsang]

Describe the bug

When a function is declared in a component's story with the same name as a function in the component and passed as props, the implementation of the function in the story overrides the implementation in the component. Private functions in the component are also overridden.

Reproduction link

https://stackblitz.com/edit/github-ybftbv?file=src%2Fstories%2Fbutton.component.ts

Reproduction steps

1. Go to the above link.
2. Run npm run storybook
3. Open the console to see the logs.

System

Storybook Environment Info:

  System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - /usr/local/bin/node
    npm: 10.8.2 - /usr/local/bin/npm <----- active
  Browsers:
    Chrome: 128.0.6613.138
    Safari: 17.5
  npmPackages:
    @storybook/addon-essentials: ^8.3.0 => 8.3.0 
    @storybook/addon-interactions: ^8.3.0 => 8.3.0 
    @storybook/addon-links: ^8.3.0 => 8.3.0 
    @storybook/angular: ^8.3.0 => 8.3.0 
    @storybook/blocks: ^8.3.0 => 8.3.0 
    @storybook/test: ^8.3.0 => 8.3.0 
    msw-storybook-addon: ^1.10.0 => 1.10.0 
    storybook: ^8.3.0 => 8.3.0

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This issue likely stems from how Angular components are rendered in Storybook. The relevant code is probably in the @storybook/angular package, specifically in the component rendering logic. Check renderers/angular/src/render.ts for the component rendering process. The issue might be in how props are applied to the component, possibly overwriting methods instead of merging them. A potential fix could involve modifying the prop application logic to preserve existing component methods when story props are applied.

References

/code/addons/docs/template/stories/docspage/override.stories.ts
/docs/_snippets/storybook-preview-with-angular-polyfills.md
/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts
/code/frameworks/angular/template/stories/core/applicationConfig
/code/lib/cli/src/automigrate/fixes/angular-builders.test.ts
/code/renderers/server/template/cli/button.stories.json
/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.test.ts
/code/frameworks/angular/template/stories/others/issues
/code/core/src/core-server/utils/save-story/mocks/unsupported-csf-variances.stories.tsx
/code/lib/cli/src/automigrate/fixes/angular-builders.ts
/docs/_snippets/component-story-auto-title.md
/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts
/docs/_snippets/my-component-story-with-storyname.md
/docs/_snippets/other-foo-bar-story.md
/docs/_snippets/button-story-hypothetical-example.md
/.github/comments/invalid-link.md
/docs/_snippets/custom-build-script-production.md
/.github/DISCUSSION_TEMPLATE/help.yml
/code/frameworks/angular/template/stories/core/styles
/docs/_snippets/checkbox-story-grouped.md
/code/frameworks/ember/src/client/preview/docs
/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts
/docs/_snippets/your-component.md
/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings