Skip to main content

ngMocks.touch

ngMocks.touch helps to simulate external touches of a form control. Does not matter whether the declaration of the form control is a mock instance or a real one.

To simulate a touch, we need a debug element the form control belongs to.

Let's assume that we have the next template:

<input data-testid="inputControl" [formControl]="myControl" />

And, we want to simulate a touch of the input.

Then solution may look like that:

// looking for debug element of the input
const el = ngMocks.find(['data-testid', 'inputControl']);

// simulating touch
ngMocks.touch(el);

// asserting
expect(component.myControl.touched).toEqual(true);

or simply with selectors which are supported by ngMocks.find.

ngMocks.touch(['data-testid', 'inputControl']);
ngMocks.touch('input');
ngMocks.touch('[data-testid="inputControl"]');

Mocked signal form bindings​

When FormField is mocked, ngMocks.touch marks its supplied real field touched. Use ngMocks.reveal once to find the host by its field tree:

// Find the host by its supplied field tree.
const field = ngMocks.reveal(['formField', component.f.inputValue]);

// Read the initial state.
expect(component.f.inputValue().touched()).toBe(false);
expect(component.f.inputValue().dirty()).toBe(false);

// Touch the supplied field without changing its value.
ngMocks.touch(field);

// Assert that the field becomes touched and stays pristine.
expect(component.f.inputValue().touched()).toBe(true);
expect(component.f.inputValue().dirty()).toBe(false);

This path calls the field's markAsTouched without dispatching DOM events or invoking an unregistered custom-control callback. A mocked CVA with a registered touch callback continues to use that callback. Touching a pristine field does not introduce an edit, but touching after a pending ngMocks.change can flush it according to Angular's debounce policy, including debounce(path, 'blur').

The mocked binding does not synchronize native values or connect custom-control inputs and outputs. Keep FormField real to test that full connection. See mocking form bindings for the complete component and test example.