I have searched, but I cannot find an example of how to use ngModel
in a Cypress Component Test, nor can I find an explanation of why this is not recommended. The component I am attempting to test does implement ControlValueAccessor
and it seems like a good test case to ensure that it interacts properly with ngModel
, however when I attempt to add ngModel
to componentProperties
I receive the error message:
Object literal may only specify known properties, and ‘ngModel’ does not exist in type…
I understand that this essentially means that ngModel
is not a property of my component, however I do not see another way to add ngModel
and supply a value.
For context, the component I am attempting to test is a button bar component. It accepts an array of options and renders each option as a button. The ngModel
value is the value of the selected option. I want to ensure that when I pass in an option to ngModel
that the appropriate button becomes selected. Additionally, I want to ensure that when I click on one of the buttons, the appropriate value is emitted from ngModelChange
.
Below is my simple example:
it('Interacts properly with ngModel', () => {
cy.mount(ButtonBarComponent, {
componentProperties: {
options: ['Option 1', 'Option 2', 'Option 3'],
ngModel: 'Option 1', // <-- Does not work
ngModelChange: createOutputSpy("ngModelChangeSpy") // <-- Does not work
}
});
});
I would expect that I could pass values into ngModel
and have the component UI updated to reflect this. Also, I would expect to be able to watch for changes caused by UI interaction via ngModelChange
. Neither of these work.