1

I need to test if a button is conditionally enabled after text inputs are filled out.

Right now simply checking to see if they are disabled works with the following:

expect(screen.getByTestId('select-service-btn').closest('button')).toBeDisabled();

But I want to check if they get enabled after input values are filled out.

This is what I currently have.

it('Should test to see if a button gets enabled when forms are filled out', () => {
    const firstInput = screen.getByTestId('firstName-input');
    const lastInput = screen.getByTestId('lastName-input');
    const emailInput = screen.getByTestId('email-input');

    expect(screen.getByTestId('select-service-btn').closest('button')).toBeDisabled();

    fireEvent.change(firstInput, {
      target: { value: 'test content' },
    });

    fireEvent.change(lastInput, {
      target: { value: 'test content' },
    });

    fireEvent.change(emailInput, {
      target: { value: 'test content' },
    });

    expect(screen.getByTestId('select-service-btn').closest('button')).not.toBeDisabled();
})

I want to say this would check to see if a button is disabled, mimic filling out the necessary inputs, and then check to see if the button changed from disabled to enabled. But the test fails.

Hyrule64
  • 11
  • 2
  • 1
    UPDATE: This was fixed. My mistake was that the text data put into the input didn't match the regex we had for the inputs. We didn't allow for the first and last name to have spaces, and the email I put in wasn't an email. Woops! – Hyrule64 Jun 04 '21 at 19:49

0 Answers0