Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

feat(material/dialog): Make MatTestDialogOpener better

Offen
  • Stimmt etwas nicht?
#33,838 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
35/100
Issue-Typ
Feature
Klarheit
Muss geklärt werden
Aktivitätsstatus
Aktiv
Tech-Stack
angular, typescript
Bereich
testing

Rechercherichtung

Start with MatTestDialogOpener and the existing dialog-opener.spec.ts, then read the referenced OverlayContainer implementation and its testing-overlay comments. Investigate how fixture querying, harness loading, and afterClosed handling currently work. Done should provide a defined, tested approach that makes dialog content queryable from the fixture and simplifies checking the closing result.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

area: material/dialog feature P4
Feature Description

There's currently no supported way to render an overlay (and therefore a MatDialog) inside a component fixture during unit tests. Because overlays are attached to an OverlayContainer appended to document.body, they live outside the fixture's root element, which means:

fixture.debugElement.query(...) finds nothing inside the dialog.
Loading harnesses requires TestbedHarnessEnvironment.documentRootLoader rather than the standard fixture loader.
Asserting on dialog content requires reaching back to the document, e.g. getDebugNode(document.body) as DebugElement.

MatTestDialogOpener helps instantiate a dialog-hosted component (and removes the boilerplate of manually providing MatDialogRef + MAT_DIALOG_DATA mocks), but it doesn't address querying, and testing the close result still needs a manual async flush.

I prototyped a custom OverlayContainer that appends the container into the DOM, but it expects the fixture to be the first element in body:

import { OverlayContainer } from "@angular/cdk/overlay";
import { Injectable, Provider } from "@angular/core";

@Injectable()
export class FixtureOverlayContainer extends OverlayContainer {
    protected override _createContainer(): void {
        super._createContainer();
        document.body.children[0].appendChild(this._containerElement);

    }
}

export function provideFixtureOverlayContainer(): Provider[] {
    return [{
        provide: OverlayContainer,
        useClass: FixtureOverlayContainer
    }]
}

providing it in the test environment removes the need of documentRootLoader, the "simple" loader is enough, but querying the fixture still finds nothing. I found some comments about testing overlay plans I expect it could be useful in this case.

MatTestDialogOpener helps with creating the component, but testing the closing result still requires a manual await step, like
await firstValueFrom(fixture.componentInstance.dialogRef.afterClosed());. I found in the dialog-opener.spec.ts a setTimeout is awaited, there could be an async method baked into the MatTestDialogOpener class.

It would be really nice, if there would be a TestOverlay which creates the dialog in the fixture, so no const bodyDebug = getDebugNode(document.body) as DebugElement; is needed for querying components inside the dialog. Or at least have some methods getting the debugElement of the newly created component.

Use Case

Make testing components meant to be used inside MatDialogs more convenient, not like this

Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 12 Std.
Gemergte PRs (30 T.)
92

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/components

Alle Issues in angular/components

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.