Angular: Component creation with TestBed API by christoph-rogalla · Pull Request #31311 · storybookjs/storybook

christoph-rogalla · 2025-04-29T16:00:46Z

What I did

The PR modifies the component creation for a story using Angular's TestBed API. The PR includes a TestBed component builder that follows the method chaining pattern. It carries all the component initialization data.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

Run a sandbox for template "angular-cli-default-ts"
Open Storybook in your browser
Try out diffrent Stories

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-31311-sha-927762ce. Try it out in a new sandbox by running npx storybook@0.0.0-pr-31311-sha-927762ce sandbox or in an existing project with npx storybook@0.0.0-pr-31311-sha-927762ce upgrade.

More information


Published version	`0.0.0-pr-31311-sha-927762ce`
Triggered by	@valentinpalkovic
Repository	christoph-rogalla/storybook
Branch	`angular-dependencies`
Commit	`927762ce`
Datetime	Wed Jul 23 19:52:21 UTC 2025 (`1753300341`)
Workflow run	16480444265

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=31311

Greptile Summary

Introduces TestBed API integration for Angular component rendering in Storybook, with significant architectural changes to support component testing and lifecycle management.

Added new TestBedComponentBuilder in code/frameworks/angular/src/client/angular-beta/utils/TestBedComponentBuilder.ts implementing the builder pattern for TestBed configuration
Added support for standalone and non-standalone components through code/frameworks/angular/src/client/angular-beta/TestBedRenderer.ts
Upgraded Angular dependencies to v20.0.0 in code/frameworks/angular/package.json with expanded peer dependency range
Introduced new story examples in code/frameworks/angular/template/stories/ demonstrating TestBed integration
Added safe cleanup handling in code/frameworks/angular/src/client/config.ts to prevent test environment leaks

feat: add provider story in angular storybook template

refactor: set wrapper component in render function refactor: wrapper creation refactor: metadata override on TestBedComponentBuilder.ts

refactor: init testbed on creation

greptile-apps

_{7 file(s) reviewed, 14 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-04-29T16:01:26Z


 const applicationRefs = new Map<HTMLElement, ApplicationRef>();
-
+const componentBuilders: TestBedComponentBuilder[] = [];


logic: Memory leak potential - componentBuilders array grows but never cleared

greptile-apps · 2025-04-29T16:01:30Z

+  setStoryFn(storyFn: StoryFnAngularReturnType) {
+    this.styles = storyFn.styles;
+    this.schemas = storyFn.moduleMetadata?.schemas;
+    console.log(this.schemas);


style: Remove debug console.log statement before merging

Suggested change

console.log(this.schemas);

greptile-apps · 2025-04-29T16:01:31Z

+    if (this.props != null)
+      this.fixture.componentInstance = Object.assign(this.fixture.componentInstance, this.props);
+    this.fixture.detectChanges();


logic: Potential race condition if updateComponentProps is called before fixture is initialized. Add null check for this.fixture

Suggested change

if (this.props != null)

this.fixture.componentInstance = Object.assign(this.fixture.componentInstance, this.props);

this.fixture.detectChanges();

if (this.props != null && this.fixture) {

this.fixture.componentInstance = Object.assign(this.fixture.componentInstance, this.props);

this.fixture.detectChanges();

}

greptile-apps · 2025-04-29T16:01:32Z

+
+  private component: Type<unknown> | undefined;
+
+  private fixture: ComponentFixture<unknown>;


logic: fixture is used before initialization - should be marked as optional with '?' or initialized in constructor

greptile-apps · 2025-04-29T16:01:35Z

  @Component({
-    selector,
    template,
    standalone: true,
-    imports: [StorybookComponentModule],
-    providers,
-    styles,
-    schemas: moduleMetadata.schemas,
  })


logic: Missing selector property in @component decorator could cause issues with component instantiation

greptile-apps · 2025-04-29T16:01:57Z

+) => {
+  return {
+    set: {
+      exports: [...declarations, ...imports],


logic: Spreading both declarations and imports into exports could cause naming conflicts if components have the same selectors

greptile-apps · 2025-04-29T16:02:00Z

+    this.label = apiService.data;
+  }
+
+  label = 'NotSetYet';


logic: label property initialized after constructor runs - move initialization to constructor to avoid potential undefined state

Suggested change

label = 'NotSetYet';

label: string;

greptile-apps · 2025-04-29T16:02:01Z

+  constructor(private apiService: ApiService) {
+    this.label = apiService.data;
+  }


style: consider making apiService readonly since it's only used in constructor

greptile-apps

_{7 file(s) reviewed, 2 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-04-29T16:02:48Z

+    this.testBedInstance = new TestBed();
+    this.testBedInstance.initTestEnvironment(
+      BrowserDynamicTestingModule,
+      platformBrowserDynamicTesting()
+    );


logic: TestBed environment is initialized in constructor which could cause issues if multiple instances are created. Consider moving to a static initialization or adding checks to prevent multiple initializations.

Suggested change

this.testBedInstance = new TestBed();

this.testBedInstance.initTestEnvironment(

BrowserDynamicTestingModule,

platformBrowserDynamicTesting()

);

if (!TestBed.initialized) {

TestBed.initTestEnvironment(

BrowserDynamicTestingModule,

platformBrowserDynamicTesting()

);

}

this.testBedInstance = TestBed;

greptile-apps · 2025-04-29T16:03:07Z

+      exports: [...declarations, ...imports],
+      declarations: declarations,
+      imports: imports,
+      providers: environmentProvider,


logic: environmentProvider could be undefined - add null check similar to other parameters

Suggested change

providers: environmentProvider,

providers: environmentProvider ?? [],

shilman · 2025-04-30T02:18:27Z

Amazing work, @christoph-rogalla!!! @valentinpalkovic should this be labeled with a breaking change label? Or is it fully backward compatible?

greptile-apps

_{1 file(s) reviewed, 1 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-04-30T02:20:25Z

+  private imports: any[] = [];
+
+  private declarations: any[] = [];
+
+  private componentProviders: any[] = [];


style: Consider using more specific types instead of any[] for better type safety

valentinpalkovic · 2025-04-30T06:31:12Z

@shilman, I don't think we can merge it in the next few days. The plan was to make the TestBed API work, get all of our Angular stories green, and then think about a way to integrate it in a non-breaking way in a second step, so that people have time in 9 to migrate, and in Storybook 10, we will remove the old renderer.

# Conflicts: # code/frameworks/angular/package.json

…31311

…ring

… enhanced component rendering

…ar-dependencies

valentinpalkovic · 2025-12-01T13:41:43Z

@christoph-rogalla any chance to get this over the finish line?

fgirardey · 2026-01-14T09:07:12Z

@valentinpalkovic Is there any chance that a Storybook core maintainer can take over this PR to finish this?

It's been a while now that we can inject dependencies at the Component level in Angular and sadly we have ugly workarounds in my our codebase to inject mocked dependencies in page level components.

valentinpalkovic · 2026-01-14T09:42:03Z

Some of our internal story tests are still failing, and we currently have no internal resources to bring this PR across the finish line. Is someone from @storybookjs/angular interested in fixing the remaining issues? I would also be happy if someone from the community took over the remaining work.

valentinpalkovic · 2026-03-26T11:52:59Z

Closing for now due to its out-of-date state

christoph-rogalla added 10 commits March 13, 2025 18:33

feat: add TestBedComponentBuilder.ts for component creation

bdc2876

feat: add provider story in angular storybook template

feat: add dependency at component level fix WIP

7dfc0d5

feat: add dependency at component level fix WIP

df1923d

fix: error on reset/init testbed module

2dc32db

refactor: testbed builder pattern and prop assignment

5e90152

fix: not standalone angular schematics

87466cf

fix: multiple component declaration by wrapper module

6937f05

WIP: multiple import of some components causes error

2f920fb

refactor: testbed creation to constructor

c15a3fb

refactor: set wrapper component in render function refactor: wrapper creation refactor: metadata override on TestBedComponentBuilder.ts

refactor: override meta data generation to file

a217ee2

refactor: init testbed on creation

greptile-apps Bot reviewed Apr 29, 2025

View reviewed changes

remove: console.log

c952ddd

valentinpalkovic self-assigned this Apr 29, 2025

valentinpalkovic added feature request angular ci:normal Run our default set of CI jobs (choose this for most PRs). labels Apr 29, 2025

shilman changed the title ~~Refactoring Component Creation with TestBed-Api~~ Angular: Component creation with TestBed API Apr 30, 2025

greptile-apps Bot reviewed Apr 30, 2025

View reviewed changes

christoph-rogalla added 9 commits April 30, 2025 15:35

Merge branch 'next' into angular-dependencies

6809141

# Conflicts: # code/frameworks/angular/package.json

refactor: @angular/animations dependency back to dev-dependencies

98bcd54

refactor: split throw on null required values into specific functions

2feab65

refactor: angular sandbox dependencies and yarn.lock

e736144

fix: yarn lock diff on install

93cd136

feat: add feature switch useTestBedRenderer in parameters

df4753f

fix: preview didnt visualized correctly

a4d719f

refactor: render function to move duplicate code into own function

7c48733

fix: RendererFactory.test.ts due new parameter

df05233

valentinpalkovic and others added 5 commits July 21, 2025 12:15

Merge remote-tracking branch 'origin/next' into pr/christoph-rogalla/…

6aa3c90

…31311

Make @angular/router optional

f4ae462

[Angular] fix: add missing await statements

2a51649

Introduce previewTestBedRenderer feature for enhanced component rende…

2d6b193

…ring

Remove previewTestBedRenderer feature from Angular templates

49c603c

valentinpalkovic force-pushed the angular-dependencies branch from 2e6618a to 49c603c Compare July 23, 2025 14:15

valentinpalkovic and others added 14 commits July 23, 2025 16:18

Refactor TestBedDocsRenderer to remove forced rendering option

04efc4f

Angular: Disable prod mode if new TestBed renderer is used

fc7e574

Update sandbox-templates to enable previewTestBedRenderer feature for…

63a06a3

… enhanced component rendering

Fix linting

927762c

[Angular] fix: story html width

2506aed

Merge remote-tracking branch 'origin/angular-dependencies' into angul…

4840d2c

…ar-dependencies

[Angular] fix: chip module story

2c58729

[Angular] fix: getting provider from ModuleWithProviders

37604c9

[Angular] fix: getting provider from ModuleWithProviders

3b5df69

[Angular] fix: input signals error due invalid value set

474b9ee

[Angular] fix: circular dependency wrapper module

7dbd6a3

[Angular] fix: declarations

e418f78

[Angular] feat: add reactive stories for debugging

1ed7890

remove: debug stories

2286ce1

github-actions Bot added the Stale label Aug 25, 2025

github-actions Bot removed the Stale label Oct 6, 2025

github-actions Bot added the Stale label Oct 18, 2025

valentinpalkovic marked this pull request as draft December 1, 2025 13:41

valentinpalkovic mentioned this pull request Mar 4, 2026

[Tracking]: @storybook/angular-vite Framework #34012

Open

19 tasks

valentinpalkovic closed this Mar 26, 2026


		const applicationRefs = new Map<HTMLElement, ApplicationRef>();

		const componentBuilders: TestBedComponentBuilder[] = [];


		private component: Type<unknown> \| undefined;

		private fixture: ComponentFixture<unknown>;

	providers: environmentProvider,
	providers: environmentProvider ?? [],

Uh oh!

Conversation

christoph-rogalla commented Apr 29, 2025 • edited by storybook-bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

greptile-apps Bot Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

shilman commented Apr 30, 2025

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Apr 30, 2025

Choose a reason for hiding this comment

Uh oh!

valentinpalkovic commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

valentinpalkovic commented Dec 1, 2025

Uh oh!

fgirardey commented Jan 14, 2026

Uh oh!

valentinpalkovic commented Jan 14, 2026

Uh oh!

valentinpalkovic commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

christoph-rogalla commented Apr 29, 2025 •

edited by storybook-bot

Loading

valentinpalkovic commented Apr 30, 2025 •

edited

Loading