Winkel-2 tests - get DOM-element-Stile
Möchte ich Sie zum test der Funktionalität meiner hide-show button in meinem Winkel 2 app(Tests geschrieben werden, in der Jasmine), also muss ich überprüfen den Wert der display
- Eigenschaft des entsprechenden Elements. Wie kann ich diese Eigenschaft mit dem Eckigen ' s debugElement
?
Test-code:
let input = fixture.debugElement.query(By.css('input'));
expect(input.styles['visibility']).toBe('false');
Bekomme ich die Fehlermeldung:
Erwartet undefined auf 'false'.
- Bitte schauen Sie sich Dokumentation... Es hat code zeigt, wie Sie einen bestimmten HTML-Code in das template der Komponente unter test. Dann, es ist nur eine Frage der Zugriff auf das element hat
style
Eigenschaft. - Ich bekomme eine Fehlermeldung. Siehe mein edit oben.
- Ich denke, dass, Wenn Sie wollen, um den Zugriff auf die HTML-DOM-Element-Objekts müssen Sie wickeln Sie es mit nativeElement, wie diese:
let input = fixture.debugElement.query(By.css('input')).nativeElement
. - Für diese Sache speziell verwendet habe ich das "versteckt" - Eigenschaft auf die debugElement. Für die anderen css-Klassen die einzige Sache, die für mich gearbeitet ist die classList innerhalb der nativeElement. Der einzige Nachteil ist es, dass es hat 'alle' - Typ. Irgendwie ist die ganze Sache erfordert eine Menge voodoo.
- Könnte Sie nicht einfach nur gegossen. ie als HTMLInputElement oder <HTMLInputElement>Eingang
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte das gleiche Problem. Die
DebugElement.styles
ist immer ein leeres Objekt, auch wenn ich einige style-Elemente explizit(vielleicht Fehler in der Winkel-code?). Also ich würde eher davon aus, dass der browsernative element
direkt:Für jeden Stolperstein auf diesem Beispiel, die Lösung für dieses spezielle Problem mit
display
ist diehidden
Eigenschaft auf diedebugElement
. Es enthälttrue
wenn das element ausgeblendet ist undfalse
sonst.Property 'hidden' does not exist on type 'DebugElement'. at Compiler.compiler.plugin (C:\Users\...\node_modules\@angular\cli\plugins\karma-webpack-throw-error.js:10:23)