2017-02-01 86 views
12

Angular 2 uygulamamdaki gizlilik gösterme düğmesinin işlevselliğini test etmek istiyorum (Testler Jasmine'de yazılmıştır), dolayısıyla ilgili display özelliğinin değerini kontrol etmem gerekiyor öğesi. Angular'ın debugElement'u kullanarak bu özelliği nasıl alabilirim? Testi kodu:Köşeli 2 testleri - DOM eleman stilleri alın

let input = fixture.debugElement.query(By.css('input')); 
expect(input.styles['visibility']).toBe('false'); 

hata alıyorum: tanımsız Beklenen 'yanlış' olması.

+0

[belgelerine] göz atın (https://angular.io/docs/ts/latest/guide/testing.html#simple-component-: Ben doğrusu doğrudan tarayıcının native element o alacağı test) ... Test edilen bileşenlerin şablonunda belirli bir HTML'nin nasıl seçileceğini gösteren bir kod var. Öyleyse, sadece bu elementin 'style' özelliğine erişme meselesi. – AngularChef

+0

Bir hata alıyorum. Yukarıdaki düzenlemeye bakın. – user6251216

+0

@ user6251216 - HTML DOM Element Nesnesine erişmek istiyorsanız, bunun gibi nativeElement ile sarmanız gerekir: 'let input = fixture.debugElement.query (By.css ('input')). '. – yl2015

cevap

0

Bu örnek üzerinde tökezleyen herkes için, display numaralı bu özel soruna yönelik çözüm, debugElement adresindeki hidden özelliğidir. Öğe gizli ve false aksi takdirde true içerecektir.

+1

Benim için çalışmaz: 'Özellik 'gizli', 'DebugElement' türünde yok. , Compiler.compiler.plugin (C: \ Users \ ... \ node_modules \ @gengular \ cli \ plugins \ karma-webpack-throw-error.js: 10: 23) ' –

+0

nativeElement sınıfının classList özelliğine erişmeyi deneyin. hata ayıklama özelliği – user6251216

2

Aynı sorunu yaşıyordum. DebugElement.styles, bu öğeye belirli bir stil belirlesem bile (belki köşeli kodda hata olabilir) her zaman boş bir nesnedir.

let input = fixture.debugElement.query(By.css('input')); 
expect(input.nativeElement.style.visibility).toBe('false');