Bileşen birim testi: By.css(), SVG ad alanı

Question

ile eşleşmiyor Özetle, Angular2 (v2.0.1 +) bileşen birimi testlerinde By.css([css-selector]) (bkz https://angular.io/docs/ts/latest/api/platform-browser/index/By-class.html) çalışmasını gerçekleştirmenin bir yolunu arıyorum Bir isim alanı (SVG) söz konusu olduğunda.

(ilgili temel fonksiyonlar By.all() ve By.directive(DirectiveClass) çalışma cezası.) Aşağıda

sorunu göstermek için bir kendi kendine yeten spec. Sonuç

DivComponent class specs: 
    ✔ NG should evaluate component and template. 
    ✔ Div should be locatable by tag. 
    ✔ Div should be locatable by id. 
    ✔ Div should be locatable by class. 
    ✔ Match should fail a negative. 
ShapesComponent class specs: 
    ✔ NG should evaluate the component and template. 
    ✖ Circle should be locatable by tag. 
    ✖ Circle should be locatable by ns:tag. 
    ✖ Circle should be locatable by id. 
    ✖ Circle should be locatable by class. 

Spec geçerli: yorumlarla gönderilmiş

import {TestBed, ComponentFixture} from '@angular/core/testing'; 
import {Component, DebugElement} from '@angular/core'; 
import {By} from '@angular/platform-browser'; 

/* 
* A simple component in HTML namespace 
*/ 
@Component({ 
    selector: '[app-div]', 
    template: '<div class="myDivClass" id="myDivId">Hello World</div>' 
}) 
export class DivComponent { 
} 

/* 
* A simple component in SVG namespace 
*/ 
@Component({ 
    selector: '[app-shape]', 
    template: '<svg:circle class="myCircleClass" id="myCircleId" ' + 
    'cx="80" cy="80" r="20"></svg:circle>' 
}) 
export class ShapesComponent { 
} 

function dumpElements(elements: DebugElement[]) { 
    console.log('Matcher found ' + elements.length + ' elements.'); 
    for (let i = 0; i < elements.length; i++) { 
     console.log('element[' + i + '] = ' 
      + elements[i].nativeElement.tagName 
      + ': ' + elements[i].nativeElement.outerHTML); 
    } 
} 

/* 
* Test "By.css()" on the DivComponent. 
*/ 
describe('DivComponent class specs:',() => { 

    let divComponent: DivComponent; 
    let fixture: ComponentFixture<DivComponent>; 
    let de: DebugElement; 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ 
       DivComponent 
      ] 
     }); 
     TestBed.compileComponents(); 
     fixture = TestBed.createComponent(DivComponent); 
     fixture.detectChanges(); 
     de = fixture.debugElement; 
    }); 

    it('NG should evaluate component and template.',() => { 
     // Dump elements if needed: 
     // dumpElements(de.queryAll(By.all())); 
     expect(de.queryAll(By.all()).length).toBe(1); 
    }); 
    it('Div should be locatable by tag.',() => { 
     expect(de.queryAll(By.css('div')).length).toBe(1); 
    }); 
    it('Div should be locatable by id.',() => { 
     expect(de.queryAll(By.css('#myDivId')).length).toBe(1); 
    }); 
    it('Div should be locatable by class.',() => { 
     expect(de.queryAll(By.css('.myDivClass')).length).toBe(1); 
    }); 
    it('Match should fail a negative.',() => { 
     expect(de.queryAll(By.css('#negative')).length).toBe(0); 
    }); 
}); 

/* 
* Use the same "By.css()" syntax on the ShapeComponent. 
*/ 
describe('ShapesComponent class specs:',() => { 

    let divComponent: ShapesComponent; 
    let fixture: ComponentFixture<ShapesComponent>; 
    let de: DebugElement; 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ 
       ShapesComponent 
      ] 
     }); 
     TestBed.compileComponents(); 
     fixture = TestBed.createComponent(ShapesComponent); 
     fixture.detectChanges(); 
     de = fixture.debugElement; 
    }); 

    it('NG should evaluate the component and template.',() => { 
     // Dump elements if needed: 
     // dumpElements(de.queryAll(By.all())); 
     expect(de.queryAll(By.all()).length).toBe(1); // pass 
    }); 

    it('Circle should be locatable by tag.',() => { 
     expect(de.queryAll(By.css('circle')).length).toBe(1); 
    }); 
    it('Circle should be locatable by ns:tag.',() => { 
     expect(de.queryAll(By.css('svg:circle')).length).toBe(1); 
    }); 
    it('Circle should be locatable by id.',() => { 
     expect(de.queryAll(By.css('#myCircleId')).length).toBe(1); 
    }); 
    it('Circle should be locatable by class.',() => { 
     expect(de.queryAll(By.css('.myCircleClass')).length).toBe(1); 
    }); 
}); 

Answer 1

Nativ üzerinde bir querySelector yaparak işe aldım yerine eElement:

element.nativeElement.querySelector('.chart') 

Answer 2

@herkulano:

yerine nativeElement bir querySelector yaparak çalışmaya Anladım: element.nativeElement.querySelector ('.chart')