Skip to content

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Jun 26, 2025

Currently when testing a component using TestBed.createComponent, we always create the component as a div which isn't aligned with the runtime. The runtime tries to parse out the tag name from the first selector in @Component and only falls back to div if there isn't one. This behavior difference can cause components to not behave like they would in production which reduces the usefulness of the tests.

These changes add the inferTagName option to TestBed.createComponent and TestBed.configureTestingModule that allows apps to opt into inferring the tag name from the selector in the same way as the runtime. Currently the new option is set to false, but we intend to change it to true in a future version.

@crisbeto crisbeto added action: review The PR is still awaiting reviews from at least one requested reviewer target: patch This PR is targeted for the next patch release labels Jun 26, 2025
@angular-robot angular-robot bot added the area: core Issues related to the framework runtime label Jun 26, 2025
@ngbot ngbot bot added this to the Backlog milestone Jun 26, 2025
@crisbeto crisbeto marked this pull request as ready for review June 26, 2025 09:52
@pullapprove pullapprove bot requested a review from kirjs June 26, 2025 09:52
Copy link
Contributor

@thePunderWoman thePunderWoman left a comment

Choose a reason for hiding this comment

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

LGTM

reviewed-for: fw-general, public-api

// Note: injecting the renderer before accessing the definition appears to be load-bearing.
const testComponentRenderer = this.inject(TestComponentRenderer);
const componentDef: ComponentDef<T> = (type as any).ɵcmp;
const rootElId = `root${_nextRootElementId++}`;
Copy link
Contributor

Choose a reason for hiding this comment

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

Optional nit: It'd be nice to have a comment for the next two lines explaining what this is doing.

@pullapprove pullapprove bot requested a review from mmalerba June 26, 2025 09:58
Copy link
Member

@devversion devversion left a comment

Choose a reason for hiding this comment

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

LGTM

Reviewed-for: public-api

@crisbeto crisbeto removed request for kirjs and mmalerba June 26, 2025 11:14
@crisbeto crisbeto added target: minor This PR is targeted for the next minor release and removed target: patch This PR is targeted for the next patch release labels Jul 23, 2025
Exposes the code that we use to infer the tag name of a component as a private export so that we can use it in `TestBed`.
@crisbeto crisbeto force-pushed the test-bed-tag-name branch from ba6cba3 to 3f210b0 Compare July 23, 2025 09:17
@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Jul 23, 2025
@crisbeto crisbeto changed the title fix(core): infer tag name for test root component feat(core): add option to infer the tag names of components in tests Jul 23, 2025
@crisbeto
Copy link
Member Author

I've reworked this PR with the following changes:

  1. The logic for inferring the behavior is now behind a flag to avoid breaking changes.
  2. We now share the logic for inferring the tag name with ComponentFactory.create.

Currently when testing a component using `TestBed.createComponent`, we always create the component as a `div` which isn't aligned with the runtime. The runtime tries to parse out the tag name from the first selector in `@Component` and only falls back to `div` if there isn't one. This behavior difference can cause components to not behave like they would in production which reduces the usefulness of the tests.

These changes add the `inferTagName` option to `TestBed.createComponent` and `TestBed.configureTestingModule` that allows apps to opt into inferring the tag name from the selector in the same way as the runtime. Currently the new option is set to `false`, but we intend to change it to `true` in a future version.
@crisbeto crisbeto force-pushed the test-bed-tag-name branch from 3f210b0 to 4458318 Compare July 23, 2025 09:27
@crisbeto crisbeto added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Jul 23, 2025
@kirjs
Copy link
Contributor

kirjs commented Jul 23, 2025

This PR was merged into the repository by commit cec91c0.

The changes were merged into the following branches: main

@kirjs kirjs closed this in 68f3c65 Jul 23, 2025
kirjs pushed a commit that referenced this pull request Jul 23, 2025
…62283)

Currently when testing a component using `TestBed.createComponent`, we always create the component as a `div` which isn't aligned with the runtime. The runtime tries to parse out the tag name from the first selector in `@Component` and only falls back to `div` if there isn't one. This behavior difference can cause components to not behave like they would in production which reduces the usefulness of the tests.

These changes add the `inferTagName` option to `TestBed.createComponent` and `TestBed.configureTestingModule` that allows apps to opt into inferring the tag name from the selector in the same way as the runtime. Currently the new option is set to `false`, but we intend to change it to `true` in a future version.

PR Close #62283
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 23, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker area: core Issues related to the framework runtime detected: feature PR contains a feature commit target: minor This PR is targeted for the next minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants