skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

test: binding to a mix of zone and signal inputs

Browse Source 
This commit adds a test for a case of a binding targetting
multiple inputs with the same name. Test passes for both
signal based components as well as a mix of zone and signal
based components.
This commit is contained in:
Pawel Kozlowski
2023-06-26 11:36:26 +02:00
committed by Paul Gschwendtner
parent 1344da62ad
commit 1d1338fced
1 changed files with 94 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/test/acceptance/signal-components/input_bindings.spec.ts
+94 -43
View File
@@ -159,58 +159,59 @@ describe('Signal component inputs', () => {
expect(fixture.nativeElement.textContent).toBe('3:3'); expect(fixture.nativeElement.textContent).toBe('3:3');
}); });
it('should reveal dragon no 1: shared expression value for non-primitive literals', () => { it('should evaluate expression only once when binding to multiple inputs with the same name',
@Directive({ () => {
selector: '[dir1]', @Directive({
standalone: true, selector: '[dir1]',
signals: true, standalone: true,
}) signals: true,
class Dir1 { })
@Input() testInputArr = input<string[]>({initialValue: []}); class Dir1 {
@Input() @Input() testInputArr = input<string[]>({initialValue: []});
testInputObj = @Input()
input<{foo: string, bar: string}>({initialValue: {foo: 'before', bar: 'before'}}); testInputObj =
} input<{foo: string, bar: string}>({initialValue: {foo: 'before', bar: 'before'}});
}
@Directive({ @Directive({
selector: '[dir2]', selector: '[dir2]',
standalone: true, standalone: true,
signals: true, signals: true,
}) })
class Dir2 { class Dir2 {
@Input() testInputArr = input<string[]>({initialValue: []}); @Input() testInputArr = input<string[]>({initialValue: []});
@Input() @Input()
testInputObj = testInputObj =
input<{foo: string, bar: string}>({initialValue: {foo: 'before', bar: 'before'}}); input<{foo: string, bar: string}>({initialValue: {foo: 'before', bar: 'before'}});
} }
@Component({ @Component({
signals: true, signals: true,
template: ` template: `
<div dir1 dir2 <div dir1 dir2
[testInputArr]="['foo', 'bar']" [testInputArr]="['foo', 'bar']"
[testInputObj]="{foo: 'foo', bar: 'bar'}" [testInputObj]="{foo: 'foo', bar: 'bar'}"
></div>`, ></div>`,
imports: [Dir1, Dir2], imports: [Dir1, Dir2],
standalone: true, standalone: true,
}) })
class App { class App {
} }
const fixture = TestBed.createComponent(App); const fixture = TestBed.createComponent(App);
fixture.detectChanges(); fixture.detectChanges();
const dir1Instance = fixture.debugElement.children[0].injector.get(Dir1); const dir1Instance = fixture.debugElement.children[0].injector.get(Dir1);
const dir2Instance = fixture.debugElement.children[0].injector.get(Dir2); const dir2Instance = fixture.debugElement.children[0].injector.get(Dir2);
expect(dir1Instance.testInputArr()).toEqual(['foo', 'bar']); expect(dir1Instance.testInputArr()).toEqual(['foo', 'bar']);
expect(dir2Instance.testInputArr()).toEqual(['foo', 'bar']); expect(dir2Instance.testInputArr()).toEqual(['foo', 'bar']);
expect(dir1Instance.testInputArr()).toBe(dir2Instance.testInputArr()); expect(dir1Instance.testInputArr()).toBe(dir2Instance.testInputArr());
expect(dir1Instance.testInputObj()).toEqual({foo: 'foo', bar: 'bar'}); expect(dir1Instance.testInputObj()).toEqual({foo: 'foo', bar: 'bar'});
expect(dir2Instance.testInputObj()).toEqual({foo: 'foo', bar: 'bar'}); expect(dir2Instance.testInputObj()).toEqual({foo: 'foo', bar: 'bar'});
expect(dir1Instance.testInputObj()).toBe(dir2Instance.testInputObj()); expect(dir1Instance.testInputObj()).toBe(dir2Instance.testInputObj());
}); });
it('should be able to bind a variable', () => { it('should be able to bind a variable', () => {
@Component({ @Component({
@@ -301,6 +302,56 @@ describe('Signal component inputs', () => {
}); });
describe('to a mix of zone-based and signal-based targets', () => { describe('to a mix of zone-based and signal-based targets', () => {
it('works', () => {}); it('should evaluate expression only once when binding to multiple inputs with the same name',
() => {
@Directive({
selector: '[dirZone]',
standalone: true,
signals: false,
})
class DirZone {
@Input() testInputArr: string[] = [];
@Input() testInputObj = {foo: 'before', bar: 'before'};
}
@Directive({
selector: '[dirSignal]',
standalone: true,
signals: true,
})
class DirSignal {
@Input() testInputArr = input<string[]>({initialValue: []});
@Input()
testInputObj =
input<{foo: string, bar: string}>({initialValue: {foo: 'before', bar: 'before'}});
}
@Component({
signals: true,
template: `
<div dirZone dirSignal
[testInputArr]="['foo', 'bar']"
[testInputObj]="{foo: 'foo', bar: 'bar'}"
></div>`,
imports: [DirZone, DirSignal],
standalone: true,
})
class App {
}
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const dirZoneInstance = fixture.debugElement.children[0].injector.get(DirZone);
const dirSignalInstance = fixture.debugElement.children[0].injector.get(DirSignal);
expect(dirZoneInstance.testInputArr).toEqual(['foo', 'bar']);
expect(dirSignalInstance.testInputArr()).toEqual(['foo', 'bar']);
expect(dirZoneInstance.testInputArr).toBe(dirSignalInstance.testInputArr());
expect(dirZoneInstance.testInputObj).toEqual({foo: 'foo', bar: 'bar'});
expect(dirSignalInstance.testInputObj()).toEqual({foo: 'foo', bar: 'bar'});
expect(dirZoneInstance.testInputObj).toBe(dirSignalInstance.testInputObj());
});
}); });
}); });