iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test(ivy): account for inconsistent attribute order (#34305) 

We've got some tests that assert that the generate DOM looks correct. The problem is that IE changes the attribute order in `innerHTML` which caused the tests to fail. I've reworked the relevant tests not to assert directly against `innerHTML`.

PR Close #34305
This commit is contained in:
crisbeto 2019-12-11 22:04:31 +01:00 committed by Kara Erickson
parent 8eb0596463
commit 758f7a7d8e
1 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/core/test/acceptance/i18n_spec.ts
View File

@ -1451,13 +1451,13 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
@Component({ @Component({
selector: `my-app`, selector: `my-app`,
template: ` template: `
<div i18n test i18n-title title="start {{exp1}} middle {{exp2}} end"> <div i18n test i18n-title title="start {{exp1}} middle {{exp2}} end" outer>
trad: {exp1, plural, trad: {exp1, plural,
=0 {no <b title="none">emails</b>!} =0 {no <b title="none">emails</b>!}
=1 {one <i>email</i>} =1 {one <i>email</i>}
other {{{exp1}} emails} other {{{exp1}} emails}
} }
</div><div test></div>` </div><div test inner></div>`
}) })
class MyApp { class MyApp {
exp1 = 1; exp1 = 1;
@ -1476,19 +1476,27 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
}); });
const fixture = TestBed.createComponent(MyApp); const fixture = TestBed.createComponent(MyApp);
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.nativeElement.innerHTML)
.toEqual( const outerDiv: HTMLElement = fixture.nativeElement.querySelector('div[outer]');
`<div test="" title="début 2 milieu 1 fin" class="foo"> traduction: un <i>email</i><!--ICU 21--> ` + const innerDiv: HTMLElement = fixture.nativeElement.querySelector('div[inner]');
`</div><div test="" class="foo"></div>`);
// Note that ideally we'd just compare the innerHTML here, but different browsers return
// the order of attributes differently. E.g. most browsers preserve the declaration order,
// but IE does not.
expect(outerDiv.getAttribute('title')).toBe('début 2 milieu 1 fin');
expect(outerDiv.getAttribute('class')).toBe('foo');
expect(outerDiv.textContent !.trim()).toBe('traduction: un email');
expect(innerDiv.getAttribute('class')).toBe('foo');
directiveInstances.forEach(instance => instance.klass = 'bar'); directiveInstances.forEach(instance => instance.klass = 'bar');
fixture.componentRef.instance.exp1 = 2; fixture.componentRef.instance.exp1 = 2;
fixture.componentRef.instance.exp2 = 3; fixture.componentRef.instance.exp2 = 3;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.nativeElement.innerHTML)
.toEqual( expect(outerDiv.getAttribute('title')).toBe('début 3 milieu 2 fin');
`<div test="" title="début 3 milieu 2 fin" class="bar"> traduction: 2 emails<!--ICU 21--> ` + expect(outerDiv.getAttribute('class')).toBe('bar');
`</div><div test="" class="bar"></div>`); expect(outerDiv.textContent !.trim()).toBe('traduction: 2 emails');
expect(innerDiv.getAttribute('class')).toBe('bar');
}); });
it('should handle i18n attribute with directive inputs', () => { it('should handle i18n attribute with directive inputs', () => {
@ -2033,9 +2041,15 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
const fixture = TestBed.createComponent(ContentElementDialog); const fixture = TestBed.createComponent(ContentElementDialog);
fixture.detectChanges(); fixture.detectChanges();
// Remove the reflect attribute, because the attribute order in innerHTML
// isn't guaranteed in different browsers so it could throw off our assertions.
const button = fixture.nativeElement.querySelector('button');
button.removeAttribute('ng-reflect-dialog-result');
expect(fixture.nativeElement.innerHTML).toEqual(`<div dialog=""><!--bindings={ expect(fixture.nativeElement.innerHTML).toEqual(`<div dialog=""><!--bindings={
"ng-reflect-ng-if": "false" "ng-reflect-ng-if": "false"
}--></div><button ng-reflect-dialog-result="true" title="Close dialog">Button label</button>`); }--></div><button title="Close dialog">Button label</button>`);
}); });
}); });