Repository: angular/angular
File: packages/forms/signals/test/web/field_directive.spec.ts (TypeScript)

Code before:
      const controlA = component.controls()[0].nativeElement;
      const controlB = component.controls()[1].nativeElement;
      expect(controlA.value).toBe('a');
      expect(controlB.value).toBe('b');
      expect(controlA.name).toBe('root.0.x');
      expect(controlB.name).toBe('root.1.x');
      expect(controlB.compareDocumentPosition(controlA))
        .withContext('controlA should precede controlB')
        .toEqual(Node.DOCUMENT_POSITION_PRECEDING);

      act(() => component.f().value.update((items) => [items[1], items[0]]));

      // @for should not recreate views when swapped.
      expect(controlA.isConnected).toBeTrue();
      expect(controlB.isConnected).toBeTrue();

      // Controls should have same value.
      expect(controlA.value).toBe('a');
      expect(controlB.value).toBe('b');

      // Controls names should have updated.
      expect(controlA.name).toBe('root.1.x');
      expect(controlB.name).toBe('root.0.x');

      expect(controlB.compareDocumentPosition(controlA))
        .withContext('controlB should follow controlA')
        .toEqual(Node.DOCUMENT_POSITION_FOLLOWING);
    });

    it('should track child arrays in an array by index', () => {
      @Component({
        imports: [Field],
        template: `
            @for (item of f; track item) {
              <input #control [field]="item[0]">
            }
          `,
      })
      class TestCmp {
        readonly f = form(signal([['a'], ['b']]), {name: 'root'});
        readonly controls = viewChildren<ElementRef<HTMLInputElement>>('control');
      }

      const fixture = act(() => TestBed.createComponent(TestCmp));
      const component = fixture.componentInstance;
      const control0 = component.controls()[0].nativeElement;
      const control1 = component.controls()[1].nativeElement;
      expect(control0.value).toBe('a');
      expect(control1.value).toBe('b');
      expect(control0.name).toBe('root.0.0');
      expect(control1.name).toBe('root.1.0');

Review comment (suggestion):
```suggestion
        .withContext('controlA should follow controlB')
```

Code after:
      const controlA = component.controls()[0].nativeElement;
      const controlB = component.controls()[1].nativeElement;
      expect(controlA.value).toBe('a');
      expect(controlB.value).toBe('b');
      expect(controlA.name).toBe('root.0.x');
      expect(controlB.name).toBe('root.1.x');
      expect(controlB.compareDocumentPosition(controlA))
        .withContext('controlA should precede controlB')
        .toEqual(Node.DOCUMENT_POSITION_PRECEDING);

      act(() => component.f().value.update((items) => [items[1], items[0]]));

      // @for should not recreate views when swapped.
      expect(controlA.isConnected).toBeTrue();
      expect(controlB.isConnected).toBeTrue();

      // Controls should have same value.
      expect(controlA.value).toBe('a');
      expect(controlB.value).toBe('b');

      // Controls names should have updated.
      expect(controlA.name).toBe('root.1.x');
      expect(controlB.name).toBe('root.0.x');

      expect(controlB.compareDocumentPosition(controlA))
        .withContext('controlA should follow controlB')
        .toEqual(Node.DOCUMENT_POSITION_FOLLOWING);
    });

    it('should track child arrays in an array by index', () => {
      @Component({
        imports: [Field],
        template: `
            @for (item of f; track item) {
              <input #control [field]="item[0]">
            }
          `,
      })
      class TestCmp {
        readonly f = form(signal([['a'], ['b']]), {name: 'root'});
        readonly controls = viewChildren<ElementRef<HTMLInputElement>>('control');
      }

      const fixture = act(() => TestBed.createComponent(TestCmp));
      const component = fixture.componentInstance;
      const control0 = component.controls()[0].nativeElement;
      const control1 = component.controls()[1].nativeElement;
      expect(control0.value).toBe('a');
      expect(control1.value).toBe('b');
      expect(control0.name).toBe('root.0.0');
      expect(control1.name).toBe('root.1.0');