web-dev-qa-db-fra.com

Test unitaire du composant: By.css () ne correspond pas dans un espace de noms SVG

En bref, je cherche un moyen de faire fonctionner le prédicat By.css([css-selector]) (voir https://angular.io/docs/ts/latest/api/platform-browser/index/By-class.html ) dans Angular2 (v2.0.1 +), l’unité du composant teste lorsqu’un espace de nom (SVG) est impliqué.

(Les prédicats associés By.all() et By.directive(DirectiveClass) fonctionnent correctement.)

Vous trouverez ci-dessous une spécification autonome illustrant le problème. Le résultat est

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:

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);
    });
});
svgangular
12
John C

Le faire fonctionner en faisant un querySelector sur le nativeElement à la place: 

element.nativeElement.querySelector('.chart')
0
herkulano

@herkulano a posté dans les commentaires:

Le faire fonctionner en faisant un querySelector sur le nativeElement à la place: element.nativeElement.querySelector ('. Chart')

0
0mpurdy

Je sais que c’est une vieille question, mais j’ai ce problème aussi dans Angular 5. Cela ne fonctionne pas si je fais ceci:

debugElement.query (By.css ('svg.underline'))

Cependant, si je le fais, cela fonctionne très bien:

debugElement.query (By.css ('svg [class = underline]'))
0
Collin Klopfenstein