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

test(ivy): add tests around directive attribute ghosting (#30544) 

This battery of tests is to ensure the instructions we are generating have the same behavior in Ivy has they did in ViewEngine.

PR Close #30544
This commit is contained in:
Ben Lesh 2019-05-17 12:45:15 -07:00 committed by Jason Aden
parent c79bffaacb
commit abe4433202
1 changed files with 243 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

243
packages/core/test/acceptance/directive_spec.ts
View File

@ -253,4 +253,247 @@ describe('directives', () => {
}); });
describe('attribute shadowing behaviors', () => {
/**
* To match ViewEngine, we need to ensure the following behaviors
*/
@Directive({
selector: '[dir-with-title]',
})
class DirWithTitle {
@Input()
title = '';
}
it('should set both the div attribute and the directive input for `title="value"`', () => {
@Component({template: `<div dir-with-title title="a"></div>`})
class App {
}
TestBed.configureTestingModule({
declarations: [App, DirWithTitle],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirWithTitle =
fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
const div = fixture.nativeElement.querySelector('div');
expect(dirWithTitle.title).toBe('a');
expect(div.getAttribute('title')).toBe('a');
});
it('should set the directive input only, shadowing the title property of the div, for `[title]="value"`',
() => {
@Component({template: `<div dir-with-title [title]="value"></div>`})
class App {
value = 'a';
}
TestBed.configureTestingModule({
declarations: [App, DirWithTitle],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirWithTitle =
fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
const div = fixture.nativeElement.querySelector('div');
// We are checking the property here, not the attribute, because in the case of
// [key]="value" we are always setting the property of the instance, and actually setting
// the attribute is just a side-effect of the DOM implementation.
expect(dirWithTitle.title).toBe('a');
expect(div.title).toBe('');
});
it('should allow setting directive `title` input with `[title]="value"` and a "attr.title" attribute with `attr.title="test"`',
() => {
@Component({template: `<div dir-with-title [title]="value" attr.title="test"></div>`})
class App {
value = 'a';
}
TestBed.configureTestingModule({
declarations: [App, DirWithTitle],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirWithTitle =
fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
const div = fixture.nativeElement.querySelector('div');
expect(dirWithTitle.title).toBe('a');
expect(div.getAttribute('attr.title')).toBe('test');
expect(div.title).toBe('');
});
it('should allow setting directive `title` input with `[title]="value1"` and attribute with `[attr.title]="value2"`',
() => {
@Component({template: `<div dir-with-title [title]="value1" [attr.title]="value2"></div>`})
class App {
value1 = 'a';
value2 = 'b';
}
TestBed.configureTestingModule({
declarations: [App, DirWithTitle],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirWithTitle =
fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
const div = fixture.nativeElement.querySelector('div');
expect(dirWithTitle.title).toBe('a');
expect(div.getAttribute('title')).toBe('b');
});
it('should allow setting directive `title` input with `[title]="value1"` and attribute with `attr.title="{{value2}}"`',
() => {
@Component(
{template: `<div dir-with-title [title]="value1" attr.title="{{value2}}"></div>`})
class App {
value1 = 'a';
value2 = 'b';
}
TestBed.configureTestingModule({
declarations: [App, DirWithTitle],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirWithTitle =
fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
const div = fixture.nativeElement.querySelector('div');
expect(dirWithTitle.title).toBe('a');
expect(div.getAttribute('title')).toBe('b');
});
it('should allow setting directive `title` input with `title="{{value}}"` and a "attr.title" attribute with `attr.title="test"`',
() => {
@Component({template: `<div dir-with-title title="{{value}}" attr.title="test"></div>`})
class App {
value = 'a';
}
TestBed.configureTestingModule({
declarations: [App, DirWithTitle],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirWithTitle =
fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
const div = fixture.nativeElement.querySelector('div');
expect(dirWithTitle.title).toBe('a');
expect(div.getAttribute('attr.title')).toBe('test');
expect(div.title).toBe('');
});
it('should allow setting directive `title` input with `title="{{value1}}"` and attribute with `[attr.title]="value2"`',
() => {
@Component(
{template: `<div dir-with-title title="{{value1}}" [attr.title]="value2"></div>`})
class App {
value1 = 'a';
value2 = 'b';
}
TestBed.configureTestingModule({
declarations: [App, DirWithTitle],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirWithTitle =
fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
const div = fixture.nativeElement.querySelector('div');
expect(dirWithTitle.title).toBe('a');
expect(div.getAttribute('title')).toBe('b');
});
it('should allow setting directive `title` input with `title="{{value1}}"` and attribute with `attr.title="{{value2}}"`',
() => {
@Component(
{template: `<div dir-with-title title="{{value1}}" attr.title="{{value2}}"></div>`})
class App {
value1 = 'a';
value2 = 'b';
}
TestBed.configureTestingModule({
declarations: [App, DirWithTitle],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirWithTitle =
fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
const div = fixture.nativeElement.querySelector('div');
expect(dirWithTitle.title).toBe('a');
expect(div.getAttribute('title')).toBe('b');
});
it('should set the directive input only, shadowing the title property on the div, for `title="{{value}}"`',
() => {
@Component({template: `<div dir-with-title title="{{value}}"></div>`})
class App {
value = 'a';
}
TestBed.configureTestingModule({
declarations: [App, DirWithTitle],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirWithTitle =
fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
const div = fixture.nativeElement.querySelector('div');
expect(dirWithTitle.title).toBe('a');
expect(div.title).toBe('');
});
it('should set the title attribute only, not directive input, for `attr.title="{{value}}"`',
() => {
@Component({template: `<div dir-with-title attr.title="{{value}}"></div>`})
class App {
value = 'a';
}
TestBed.configureTestingModule({
declarations: [App, DirWithTitle],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirWithTitle =
fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
const div = fixture.nativeElement.querySelector('div');
expect(dirWithTitle.title).toBe('');
expect(div.getAttribute('title')).toBe('a');
});
it('should set the title attribute only, not directive input, for `[attr.title]="value"`',
() => {
@Component({template: `<div dir-with-title [attr.title]="value"></div>`})
class App {
value = 'a';
}
TestBed.configureTestingModule({
declarations: [App, DirWithTitle],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirWithTitle =
fixture.debugElement.query(By.directive(DirWithTitle)).injector.get(DirWithTitle);
const div = fixture.nativeElement.querySelector('div');
expect(dirWithTitle.title).toBe('');
expect(div.getAttribute('title')).toBe('a');
});
});
}); });