cargdev/angular
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): match class and attribute value without case-sensitivity (#32548)

Browse Source 
Prior to this commit, a directive with a selector `selector=".Titledir"` would not match an element like `div class="titleDir"` in Ivy whereas it would in VE. The same issue was present for `selector="[title=Titledir]` and `title="titleDir"`.  This fixes the Ivy behavior by changing the matching algorithm to use lowercased values.

Note that some `render3` tests needed to be changed to reflect that the compiler generates lowercase selectors. These tests are in the process to be migrated to `acceptance` to use `TestBed` in another PR anyway.

PR Close #32548
This commit is contained in:
cexbrayat
2019-09-08 16:04:42 +02:00
committed by Matias Niemelä
parent 8a6e54a06d
commit ded57245e1
3 changed files with 36 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/core/test/render3/content_spec.ts
View File

@ -913,7 +913,8 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵprojectionDef(['*', [['span', 'title', 'toFirst']], [['span', 'title', 'toSecond']]]);
// selectors are in lowercase once compiled
ɵɵprojectionDef(['*', [['span', 'title', 'tofirst']], [['span', 'title', 'tosecond']]]);
ɵɵelementStart(0, 'div', ['id', 'first']);
{ ɵɵprojection(1, 1); }
ɵɵelementEnd();
@ -957,9 +958,10 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
// selectors are in lowercase once compiled
ɵɵprojectionDef([
'*', [['span', SelectorFlags.CLASS, 'toFirst']],
[['span', SelectorFlags.CLASS, 'toSecond']]
'*', [['span', SelectorFlags.CLASS, 'tofirst']],
[['span', SelectorFlags.CLASS, 'tosecond']]
]);
ɵɵelementStart(0, 'div', ['id', 'first']);
{ ɵɵprojection(1, 1); }
@ -1004,9 +1006,10 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
// selectors are in lowercase once compiled
ɵɵprojectionDef([
'*', [['span', SelectorFlags.CLASS, 'toFirst']],
[['span', SelectorFlags.CLASS, 'toSecond']]
'*', [['span', SelectorFlags.CLASS, 'tofirst']],
[['span', SelectorFlags.CLASS, 'tosecond']]
]);
ɵɵelementStart(0, 'div', ['id', 'first']);
{ ɵɵprojection(1, 1); }
@ -1095,7 +1098,8 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵprojectionDef(['*', [['span', SelectorFlags.CLASS, 'toFirst']]]);
// selectors are in lowercase once compiled
ɵɵprojectionDef(['*', [['span', SelectorFlags.CLASS, 'tofirst']]]);
ɵɵelementStart(0, 'div', ['id', 'first']);
{ ɵɵprojection(1, 1); }
ɵɵelementEnd();
@ -1140,7 +1144,8 @@ describe('content projection', () => {
*/
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
ɵɵprojectionDef(['*', [['span', SelectorFlags.CLASS, 'toSecond']]]);
// selectors are in lowercase once compiled
ɵɵprojectionDef(['*', [['span', SelectorFlags.CLASS, 'tosecond']]]);
ɵɵelementStart(0, 'div', ['id', 'first']);
{ ɵɵprojection(1); }
ɵɵelementEnd();

34
packages/core/test/render3/node_selector_matcher_spec.ts
View File

@ -94,14 +94,16 @@ describe('css selector matching', () => {
])).toBeTruthy(`Selector '[title]' should match <span id="my_id" title="test_title">`);
});
/**
* We assume that compiler will lower-case all selectors when generating code
*/
it('should match single attribute with value', () => {
expect(isMatching('span', ['title', 'My Title'], [
'', 'title', 'My Title'
'', 'title', 'my title'
])).toBeTruthy(`Selector '[title="My Title"]' should match <span title="My Title">'`);
expect(isMatching('span', ['title', 'My Title'], [
'', 'title', 'Other Title'
'', 'title', 'other title'
])).toBeFalsy(`Selector '[title="Other Title"]' should NOT match <span title="My Title">`);
});
@ -111,7 +113,7 @@ describe('css selector matching', () => {
])).toBeFalsy(`Selector 'div[title]' should NOT match <span title="My Title">`);
expect(isMatching('span', ['title', 'My Title'], [
'div', 'title', 'My Title'
'div', 'title', 'my title'
])).toBeFalsy(`Selector 'div[title="My Title"]' should NOT match <span title="My Title">`);
});
@ -147,7 +149,8 @@ describe('css selector matching', () => {
});
/**
* We assume that compiler will lower-case all attribute names when generating code
* We assume that compiler will lower-case all selectors and attribute names when generating
* code
*/
it('should match attribute name case-sensitively', () => {
expect(isMatching('span', ['foo', ''], [
@ -159,14 +162,10 @@ describe('css selector matching', () => {
])).toBeFalsy(`Selector '[Foo]' should NOT match <span foo>`);
});
it('should match attribute values case-sensitively', () => {
it('should match attribute values case-insensitively', () => {
expect(isMatching('span', ['foo', 'Bar'], [
'', 'foo', 'Bar'
])).toBeTruthy(`Selector '[foo="Bar"]' should match <span foo="Bar">`);
expect(isMatching('span', ['foo', 'Bar'], [
'', 'Foo', 'bar'
])).toBeFalsy(`Selector '[Foo="bar"]' should match <span foo="Bar">`);
'', 'foo', 'bar'
])).toBeTruthy(`Selector '[foo="bar"]' should match <span foo="Bar">`);
});
it('should match class as an attribute', () => {
@ -288,14 +287,13 @@ describe('css selector matching', () => {
])).toBeTruthy(`Selector '.bar.foo' should match <span class="bar foo">`);
});
it('should match class name case-sensitively', () => {
expect(isMatching('span', ['class', 'Foo'], [
'', SelectorFlags.CLASS, 'Foo'
])).toBeTruthy(`Selector '.Foo' should match <span class="Foo">`);
/**
* We assume that compiler will lower-case all selectors when generating code
*/
it('should match class name case-insensitively', () => {
expect(isMatching('span', ['class', 'Foo'], [
'', SelectorFlags.CLASS, 'foo'
])).toBeFalsy(`Selector '.foo' should NOT match <span class-"Foo">`);
])).toBeTruthy(`Selector '.Foo' should match <span class="Foo">`);
});
it('should work without a class attribute', () => {