Skip to content

chore(frontend): clean up template-override anti-pattern in component specs#5189

Merged
Yicong-Huang merged 3 commits into
apache:mainfrom
Yicong-Huang:chore/template-override-anti-pattern
May 24, 2026
Merged

chore(frontend): clean up template-override anti-pattern in component specs#5189
Yicong-Huang merged 3 commits into
apache:mainfrom
Yicong-Huang:chore/template-override-anti-pattern

Conversation

@Yicong-Huang
Copy link
Copy Markdown
Contributor

@Yicong-Huang Yicong-Huang commented May 24, 2026

What changes were proposed in this PR?

Three coordinated passes against the "specs that replace the parent template at test time" anti-pattern:

  1. frontend/TESTING.md: anti-patterns 2 and 3 are rewritten to describe what actually goes wrong (the real .component.html never executes, so v8 coverage stays at 0%), and a new Recipe F + anti-pattern 8 cover the right way to handle a heavy child component when one truly cannot be instantiated — additive overrideComponent({ remove, add }) with a minimal stub child.
  2. Spec cleanups: every spec that carried template: "", a stub-markup template substitute, NO_ERRORS_SCHEMA, or the broader set: { imports: [], schemas: [...] } override is migrated to render the real template. Two specs (Formly-driven and the full WorkspaceComponent) keep the old shape behind a scoped eslint-disable with a TODO; both need a more thorough redesign that isn't in scope here.
  3. ESLint guardrail: an *.spec.ts override in .eslintrc.json blocks the patterns going forward — NO_ERRORS_SCHEMA imports from @angular/core, any template or imports key inside overrideComponent({ set: ... }). Each rule's message points at the right replacement.

Any related issues, documentation, discussions?

Closes #5188. Builds on the testing guide introduced in #5170 and the lint-guardrail pattern from #5185.

How was this PR tested?

yarn ng test --watch=false --include=… over the touched specs runs 13 files / 108 tests, all green. yarn lint and yarn format:ci both clean. The three template files that originally pinned at 0% — preset-wrapper.component.html, operator-menu.component.html, menu.component.html — now report 44 / 79 / 59% line coverage under the new shape.

Was this PR authored or co-authored using generative AI tooling?

Generated-by: Claude Opus 4.7

@github-actions github-actions Bot added frontend Changes related to the frontend GUI docs Changes related to documentations labels May 24, 2026
@Yicong-Huang Yicong-Huang requested a review from aglinxinyuan May 24, 2026 22:10
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented May 24, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 45.26%. Comparing base (cfc6d9a) to head (5233462).

Additional details and impacted files
@@             Coverage Diff              @@
##               main    #5189      +/-   ##
============================================
+ Coverage     44.54%   45.26%   +0.71%     
  Complexity     2217     2217              
============================================
  Files          1042     1042              
  Lines         39989    39989              
  Branches       4260     4260              
============================================
+ Hits          17814    18101     +287     
+ Misses        21059    20768     -291     
- Partials       1116     1120       +4     
Flag Coverage Δ *Carryforward flag
access-control-service 39.53% <ø> (ø) Carriedforward from cfc6d9a
agent-service 33.76% <ø> (ø) Carriedforward from cfc6d9a
amber 45.74% <ø> (ø) Carriedforward from cfc6d9a
computing-unit-managing-service 0.00% <ø> (ø) Carriedforward from cfc6d9a
config-service 0.00% <ø> (ø) Carriedforward from cfc6d9a
file-service 32.18% <ø> (ø) Carriedforward from cfc6d9a
frontend 37.49% <ø> (+1.75%) ⬆️
python 90.50% <ø> (ø) Carriedforward from cfc6d9a
workflow-compiling-service 56.81% <ø> (ø) Carriedforward from cfc6d9a

*This pull request uses carry forward flags. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Yicong-Huang Yicong-Huang enabled auto-merge May 24, 2026 22:15
@Yicong-Huang Yicong-Huang added this pull request to the merge queue May 24, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to a conflict with the base branch May 24, 2026
…pattern 8

Revise TESTING.md to describe the right way to handle child components
in a standalone-component spec, based on actual texera experience:

- Anti-pattern 2 (NO_ERRORS_SCHEMA): explain why Angular 19 standalone
  parents rarely need the schema; the import graph is pulled in
  transitively. The typical failure that drives people to add it is a
  child's ngOnInit reading a service method that the stub doesn't have
  — extend the service stub, don't reach for the schema.
- Anti-pattern 3 (template substitution): generalise from "empty
  template" to any template substitution, including stub markup. Both
  pin the real .component.html to 0% coverage.
- New Recipe F: the legitimate way to stub a child component when it
  truly can't be instantiated — additive override via remove + add.
- New anti-pattern 8: the `set: { imports: [], schemas: [...] }` form
  is unreliable (angular/angular#48432) and silences real errors. Use
  the additive remove/add form instead.

Closes apache#5188 (docs portion).
…mponent specs

Drop the test-time template substitutions, schema escape hatches, and
"empty imports + CUSTOM_ELEMENTS_SCHEMA" overrides from the specs that
carried them. Each affected `.component.html` now renders its real
template under jsdom, lifting coverage off 0%.

In the cases where a child component's ngOnInit relied on a service
method the stub didn't have, the fix is to extend the stub — not to
re-introduce the schema. Two specs (operator-property-edit-frame and
workspace) keep the old shape behind targeted eslint-disable comments
with TODO references; they need a more thorough redesign to migrate
cleanly.
…ESLint

Add an `*.spec.ts` override to `.eslintrc.json` so the patterns the
previous commits just cleared can't grow back:

- `no-restricted-imports` blocks `NO_ERRORS_SCHEMA` from `@angular/core`.
- `no-restricted-syntax` flags any `template` or `imports` key inside
  `overrideComponent({ set: ... })` — empty string, stub markup, or
  empty array all violate.

The message on each rule points at the right replacement (extend the
service stub, or use the additive remove + add form). See
`frontend/TESTING.md` anti-patterns 2, 3, and 8.
@Yicong-Huang Yicong-Huang force-pushed the chore/template-override-anti-pattern branch from 5a9bc56 to 5233462 Compare May 24, 2026 22:29
@Yicong-Huang Yicong-Huang added this pull request to the merge queue May 24, 2026
Merged via the queue into apache:main with commit cbe90c7 May 24, 2026
16 checks passed
@Yicong-Huang Yicong-Huang deleted the chore/template-override-anti-pattern branch May 24, 2026 22:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Changes related to documentations frontend Changes related to the frontend GUI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Frontend specs replace the parent template at test time, hiding it from coverage

3 participants