Короче говоря, я ищу способ сделать предикат By.css([css-selector])
(см. https://angular.io/docs/ts/latest/api/platform-browser/index/By-class.html) в Angular2 (v2.0.1 +), когда используется пространство имен (SVG).
(Связанные предикаты By.all()
и By.directive(DirectiveClass)
работают нормально.)
Ниже приведена отдельная спецификация для демонстрации проблемы. Результатом является
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);
});
});