packages/forms/signals/test/node/api/hidden.spec.ts - main - githubmirror/angular

packages/forms/signals/test/node/api/hidden.spec.ts
158 строк4 KB
brysonbw
feat(forms): allow permanent hidden fields in signal forms
29 июл 2026, 18:39
29 июл 2026, 18:39d5e8b1e
/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */

import {Injector, signal} from '@angular/core';
import {TestBed} from '@angular/core/testing';
import {form, hidden, validate} from '@angular/forms/signals';

describe('hidden', () => {
  it('should initially be false', () => {
    const cat = signal({name: 'Pirojok-the-cat', age: 5});
    const f = form(
      cat,
      (p) => {
        hidden(p, {
          when: ({value}) => {
            return value.name === 'hidden-cat';
          },
        });
      },
      {injector: TestBed.inject(Injector)},
    );

    expect(f().hidden()).toBe(false);
    expect(f.name().hidden()).toBe(false);
  });

  it('returns true when condition is met', () => {
    const cat = signal({name: 'Pirojok-the-cat', age: 5});
    const f = form(
      cat,
      (p) => {
        hidden(p.name, {
          when: ({value}) => {
            return value() === 'hidden-cat';
          },
        });
      },
      {injector: TestBed.inject(Injector)},
    );

    f.name().value.set('hidden-cat');
    expect(f.name().hidden()).toBe(true);
  });

  it('propagates the value down', () => {
    const cat = signal({name: 'Pirojok-the-cat', age: 5});
    const f = form(
      cat,
      (p) => {
        hidden(p, {
          when: ({value}) => {
            return value().name === 'hidden-cat';
          },
        });
      },
      {injector: TestBed.inject(Injector)},
    );

    f.name().value.set('hidden-cat');
    expect(f.name().hidden()).toBe(true);
    expect(f().hidden()).toBe(true);
  });

  it('disables validation for the field', () => {
    const cat = signal({name: 'Pirojok-the-cat', age: 5});
    const f = form(
      cat,
      (p) => {
        hidden(p.name, {
          when: ({value}) => {
            return value() === 'hidden-cat';
          },
        });

        validate(p.name, () => {
          return {kind: 'dog'};
        });
      },
      {injector: TestBed.inject(Injector)},
    );

    expect(f.name().valid()).withContext('Name is initially invalid').toBeFalse();
    expect(f().valid()).withContext('Form is initially invalid').toBeFalse();

    f.name().value.set('hidden-cat');
    expect(f.name().hidden()).toBeTrue();
    expect(f.name().valid()).toBeTrue();
    expect(f().valid()).toBeTrue();

    f.name().value.set('visible-cat');
    expect(f.name().valid()).toBeFalse();
    expect(f().valid()).toBeFalse();
  });

  it('disables touch state propagation', () => {
    const cat = signal({name: 'Pirojok-the-cat', age: 5});
    const f = form(
      cat,
      (p) => {
        hidden(p.name, {
          when: ({value}) => {
            return value() === 'hidden-cat';
          },
        });
      },
      {injector: TestBed.inject(Injector)},
    );

    expect(f.name().touched()).withContext('Name is initially untouched').toBeFalse();
    expect(f().touched()).withContext('Form is initially untouched').toBeFalse();

    f.name().markAsTouched();
    expect(f.name().touched()).toBeTrue();
    expect(f().touched()).toBeTrue();

    f.name().value.set('hidden-cat');

    expect(f.name().touched()).withContext('hidden name is not touched').toBeFalse();
    expect(f().touched())
      .withContext('form with a hidden touched field is not touched')
      .toBeFalse();
  });

  it('supports deprecated function syntax', () => {
    const cat = signal({name: 'Pirojok-the-cat', age: 5});
    const f = form(
      cat,
      (p) => {
        hidden(p.name, ((ctx: any) => ctx.value() === 'hidden-cat') as any);
      },
      {injector: TestBed.inject(Injector)},
    );

    f.name().value.set('hidden-cat');
    expect(f.name().hidden()).toBe(true);
  });

  it('it returns true when configOrLogic is omitted', () => {
    const cat = signal({name: 'Pirojok-the-cat', age: 5});
    const f = form(
      cat,
      (p) => {
        hidden(p.name);
      },
      {injector: TestBed.inject(Injector)},
    );

    expect(f.name().hidden()).withContext('Name is permanently hidden').toBeTrue();

    f.name().value.set('some-other-cat');
    expect(f.name().hidden()).toBeTrue();
  });
});