Skip to content

feat(core): add option to infer the tag names of components in tests #62283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy