Test Case to check if button is enabled after user types in input box.

[pradhanadi]

I have a form in my modal with one input box. Initially if input box is empty, the button is disabled, it gets enabled after user types something in the box.
Form code:

<form #saveBookmarkForm="ngForm" data-testid="addEditBookmarkForm" (submit)="saveBookmarkHandler()">
        <div class="modal-body">
          <div class="form-group">
            <input type="text" name="saveBookmark" autocomplete='off' placeholder="Label name"
              [(ngModel)]="saveBookmarkName" [value]="saveBookmarkName" class="form-control" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-digitalRed1" [disabled]="!saveBookmarkForm.form.valid"
            id="Save">Save</button>
        </div>
      </form>

I need to write a test case in which I need to check if user has typed something in the text box and save button is enabled.

So far I have written this:

let inputTextBox = screen.getByPlaceholderText('Label name');
const saveButton = screen.getByRole('button', { name: /save/i })
expect(saveButton).toBeDisabled();
userEvent.type(inputTextBox, 'area');
expect(inputTextBox).toHaveValue('area');
expect(saveButton).toBeEnabled();

But i get an error: Received element is not enabled

Any kind of help will be appreciated.

[timdeschryver]

Hi, I'm trying to keep the issues strictly for issues.
If you need help, feel free to join our discord server (or discussions).