0

In my Angular app, I have a simple reactive form that uses ng-select as one required inputs.

I also have a "Save" button that is enabled only when the form is valid.

Everything works fine.

I want to write a simple test case to make sure that the Save button is NOT enabled whenever the ng-select control has no value.

This is what I was able to do:

it('should not allow to save without a selected item', () => {
  component.form.get('myNgSelectControl').setValue('some-value');
  component.form.updateValueAndValidity();
  fixture.detectChanges();
  expect(page.saveButton.disabled).toBe(false);

  component.form.get('myNgSelectControl').setValue(null);
  component.form.updateValueAndValidity();
  fixture.detectChanges();
  expect(page.saveButton.disabled).toBe(true);
});

however I would like to build this test differently, I would like to simulate more the higher-level workflow: instead of manually setting the value to the form's control, I would like to do something like:

"type value xxx in the ng-select"

"select item xxx from the drop-down menu"

( do the assertion that the Save button is now enabled )

"clear the selection by clicking on the 'X' of ng-select"

( do the assertion that the Save button is now disabled )

how can I accomplish this?

Community
  • 1
  • 1
Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
  • it looks like you are testing ngSelect in the new approach, IMHO, this should not be the concern of your unit tests. – ABOS Jan 04 '19 at 11:11
  • what do you mean by "new approach"? I would like to test ng-select in a form just like I would test any other standard input or select field (without manually setting the control value via `component.form.get('myControl')` – Francesco Borzi Jan 04 '19 at 11:31

0 Answers0