Skip to content

fix(storybook-angular): forward applyDecorators in testing#2236

Merged
brandonroberts merged 3 commits into
analogjs:alphafrom
benpsnyder:fix/2074-storybook-component-wrapper-decorator
Apr 13, 2026
Merged

fix(storybook-angular): forward applyDecorators in testing#2236
brandonroberts merged 3 commits into
analogjs:alphafrom
benpsnyder:fix/2074-storybook-component-wrapper-decorator

Conversation

@benpsnyder

Copy link
Copy Markdown
Contributor

PR Checklist

Closes #2074

Affected scope

  • Primary scope: storybook-angular
  • Secondary scopes:

Recommended merge strategy for maintainer [optional]

  • Squash merge
  • Rebase merge
  • Other

Commit preservation note [optional]

What is the new behavior?

This brings the componentWrapperDecorator fix onto analogjs/alpha.

The same applyDecorators fix already landed previously in analogjs/analog#2086, but that PR merged into beta. The current alpha branch still lacks the change in packages/storybook-angular/src/lib/testing.ts, so portable Vitest story rendering on alpha still falls back to the generic Storybook decorator path.

This PR forwards configAnnotations.applyDecorators through setProjectAnnotations() and adds a focused regression test to lock that behavior in.

Reproduction reference from the maintainer thread:
#2074 (comment)

Test plan

  • nx format:check
  • pnpm build
  • pnpm test
  • Manual verification

Commands run:

  • pnpm nx test storybook-angular --runTestsByPath packages/storybook-angular/src/lib/testing.spec.ts
  • pnpm nx build storybook-angular

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

The new regression test is the main value beyond reapplying the known fix: it makes sure setProjectAnnotations() keeps passing applyDecorators through on the alpha line.

@netlify

netlify Bot commented Apr 5, 2026

Copy link
Copy Markdown

Deploy Preview for analog-blog ready!

Name Link
🔨 Latest commit b7adf36
🔍 Latest deploy log https://app.netlify.com/projects/analog-blog/deploys/69db21632d35160008a7a1e8
😎 Deploy Preview https://deploy-preview-2236--analog-blog.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Apr 5, 2026

Copy link
Copy Markdown

Deploy Preview for analog-app ready!

Name Link
🔨 Latest commit b7adf36
🔍 Latest deploy log https://app.netlify.com/projects/analog-app/deploys/69db21639bddb80008a8e85d
😎 Deploy Preview https://deploy-preview-2236--analog-app.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai

coderabbitai Bot commented Apr 5, 2026

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

This PR adds a new local componentWrapperDecorator implementation along with comprehensive test coverage. The decorator automatically generates Angular templates when a story has a component but no template, using component reflection to derive selectors and convert story args into template bindings. Additionally, a test file for setProjectAnnotations validates the helper's behavior with mocked Storybook modules. The index.ts is updated to re-export componentWrapperDecorator from the new local module instead of from @storybook/angular.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Key observations

API source change: componentWrapperDecorator re-export now originates from the local ./lib/component-wrapper-decorator module rather than @storybook/angular. Verify this change maintains API compatibility and that the new implementation covers all use cases of the upstream version.

Implementation logic density: The componentWrapperDecorator.ts module contains multi-faceted logic including component metadata reflection via reflectComponentType, selector parsing with bracketed attribute handling, template string generation, and conditional binding filtering based on component inputs/outputs. Several code paths exist (standard selectors vs. void elements vs. fallback ng-container).

Test coverage breadth: Test cases include basic template generation and output binding preservation, but template generation logic has multiple branches (void element detection, attribute formatting, binding filtering) that may benefit from additional edge-case coverage.

Monorepo consistency: Changes follow the pattern of adding implementation + corresponding .spec.ts files, maintaining consistency with the codebase structure.

🚥 Pre-merge checks | ✅ 2
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title uses Conventional Commit style with the supported scope 'storybook-angular' and clearly describes the main change: forwarding applyDecorators in the testing module.
Description check ✅ Passed The PR description is well-detailed and directly related to the changeset, explaining the fix for the applyDecorators regression and the rationale behind the approach taken.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot added the scope:storybook-angular Changes in @analogjs/storybook-angular label Apr 5, 2026
@benpsnyder benpsnyder marked this pull request as ready for review April 5, 2026 08:08
@brandonroberts

Copy link
Copy Markdown
Member

This fix broken storybook and was reverted #2086 (comment)

@benpsnyder benpsnyder marked this pull request as draft April 12, 2026 04:24
@benpsnyder

Copy link
Copy Markdown
Contributor Author

This fix broken storybook and was reverted #2086 (comment)

I investigated this further and confirmed the concern about the earlier applyDecorators approach.

The previous fix from add missing applyDecorators to render annotations analogjs/analog#2086 does fix the componentWrapperDecorator() issue, but it also reintroduces the regression that was later reverted in revert "fix(storybook-angular): add missing applyDecorators to render annotaions" analogjs/analog#2088.

I reproduced that locally through the portable-story/Vitest path. When Angular's applyDecorators runs there, its cleanArgsDecorator strips args that are not marked in argTypes. That drops output-binding callbacks like btnClicked: fn(), so the story loses the output binding in Vitest interaction tests even though it still works in the Storybook UI. That matches the regression reported in componentWrapperDecorator broken in vitest analogjs/analog#2074 and the follow-up report on add missing applyDecorators to render annotations analogjs/analog#2086.

This PR no longer forwards applyDecorators globally through @analogjs/storybook-angular/testing. Instead, it keeps setProjectAnnotations() limited to the render hooks and fixes componentWrapperDecorator() directly by preparing the base story template before wrapping portable stories. That resolves the wrapper issue without reintroducing the output-binding regression.

I also added targeted regression coverage for:

  • preparing the base story template before wrapping portable stories
  • preserving output bindings when wrapping stories in portable tests
  • ensuring setProjectAnnotations() does not inject applyDecorators

Verified with pnpm nx test storybook-angular.

@benpsnyder benpsnyder marked this pull request as ready for review April 12, 2026 04:38

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/storybook-angular/src/lib/component-wrapper-decorator.spec.ts (1)

4-4: Add one lightweight public-API export assertion.

Since this PR also changes the re-export in packages/storybook-angular/src/index.ts, add a small test importing from ../index to lock package-entry compatibility.

Suggested test addition
 import { describe, expect, it, vi } from 'vitest';
 import { componentWrapperDecorator } from './component-wrapper-decorator';
+import { componentWrapperDecorator as publicComponentWrapperDecorator } from '../index';
@@
 describe('componentWrapperDecorator', () => {
+  it('is re-exported from the package entrypoint', () => {
+    expect(publicComponentWrapperDecorator).toBe(componentWrapperDecorator);
+  });
+
   it('prepares the base story template before wrapping portable stories', () => {

As per coding guidelines, "**/*.spec.{ts,tsx}: Keep tests lightweight and targeted to critical functionality testing."

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/storybook-angular/src/lib/component-wrapper-decorator.spec.ts` at
line 4, Add a lightweight public-API export test that imports
componentWrapperDecorator from the package entry (import {
componentWrapperDecorator } from '../index') and asserts it is defined; update
the spec file component-wrapper-decorator.spec.ts to import from '../index' (not
just './component-wrapper-decorator') and add a simple
expect(componentWrapperDecorator).toBeDefined() to lock the public re-export via
the package entry point.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/storybook-angular/src/lib/component-wrapper-decorator.spec.ts`:
- Line 4: Add a lightweight public-API export test that imports
componentWrapperDecorator from the package entry (import {
componentWrapperDecorator } from '../index') and asserts it is defined; update
the spec file component-wrapper-decorator.spec.ts to import from '../index' (not
just './component-wrapper-decorator') and add a simple
expect(componentWrapperDecorator).toBeDefined() to lock the public re-export via
the package entry point.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 97d8a8e8-1ded-490e-9b9a-a2bf6537fff1

📥 Commits

Reviewing files that changed from the base of the PR and between a7a0609 and b7adf36.

📒 Files selected for processing (4)
  • packages/storybook-angular/src/index.ts
  • packages/storybook-angular/src/lib/component-wrapper-decorator.spec.ts
  • packages/storybook-angular/src/lib/component-wrapper-decorator.ts
  • packages/storybook-angular/src/lib/testing.spec.ts
✅ Files skipped from review due to trivial changes (1)
  • packages/storybook-angular/src/lib/testing.spec.ts

@brandonroberts brandonroberts left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@brandonroberts brandonroberts merged commit 4d3c6c1 into analogjs:alpha Apr 13, 2026
22 checks passed
@brandonroberts brandonroberts deleted the fix/2074-storybook-component-wrapper-decorator branch April 13, 2026 14:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope:storybook-angular Changes in @analogjs/storybook-angular

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants