Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Improve support for testing protected component methods recommended by Angular Style Guide #62172

Closed as not planned
@devinvestidor

Description

@devinvestidor

Which @angular/* package(s) are relevant/related to the feature request?

  • @angular/core
  • @angular/core/testing

Description

According to the official Angular Style Guide:

Use protected on class members that are only used by a component's template

  it('should navigate to form on btnAdicionar', () => {
    component.add(); // ❌ Property 'add' is protected and only accessible within class ...
    expect(routerMock.navigate).toHaveBeenCalledWith(['/feriados/form']);
  });

To bypass this, we are forced to write:

  it('should navigate to form on btnAdicionar', () => {
    (component as any).add(); // ✅ but unsafe and breaks TS encapsulation
    expect(routerMock.navigate).toHaveBeenCalledWith(['/feriados/form']);
  });

Proposed solution

✅ Suggested Improvement
Provide a way to access protected members in tests cleanly. Some ideas:

  • Add a TestBed.invokeProtected() helper
  • Add documentation guidance or an official utility for accessing these
  • Allow exposing protected methods via metadata in @component (just like inputs/outputs)

🔍 Why it matters
This discrepancy creates friction:

  • The style guide encourages encapsulation (👍),
  • But testing becomes harder or hacky (👎),

Especially in large projects with test coverage requirements.

Thanks for considering!

Alternatives considered

.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions