Tests: Add tests for checking validations on Register form

anitab-org / anitab-forms-web

AnitaB Forms (web), an application to process smaller 4-week or full day programs to contribute to open source projects. Similar to GSoC, Outreachy, or RGSoC. This is the web app.

GNU General Public License v3.0

42 stars 78 forks source link

Tests: Add tests for checking validations on Register form #175

Closed jennypoon closed 2 years ago

jennypoon commented 2 years ago

Description

Add tests to check input validations and button ui on Register form

Fixes #173

Note: if the email or username field is empty, the button is disabled so no validation UI can be provided if the user cannot press the Register button. I added 3 tests to show that the button is disabled if those fields are empty, as well as a test to show it's enabled when all fields are filled.

Type of Change:

Code: Added data-testid to input and button components
Quality Assurance: Added testing for Register Component

How Has This Been Tested?

Run npm test on the CLI - all tests should pass

Checklist:

[x] My PR follows the style guidelines of this project
[x] I have performed a self-review of my own code or materials

Code/Quality Assurance Only

[x] My changes generate no new warnings
[x] New and existing unit tests pass locally with my changes

jennypoon commented 2 years ago

@jennypoon Great work 👍 There are few tests which I think can be added:

Mock the Axios and test for the condition where a username is already registered.

Successful Registration message check.

On toggling the Password eye icon it should show or hide the password.

I'm pretty new to testing. Could you provide some guidance on how I can mock the postRegister axios request and then check to see if there's a success message on the Register component?

codesankalp commented 2 years ago

@jennypoon Great work +1 There are few tests which I think can be added:

Mock the Axios and test for the condition where a username is already registered.

Successful Registration message check.

On toggling the Password eye icon it should show or hide the password.

I'm pretty new to testing. Could you provide some guidance on how I can mock the postRegister axios request and then check to see if there's a success message on the Register component?

@jennypoon You can mock the Axios request, see this for reference: https://jestjs.io/docs/mock-functions#mocking-modules after this, all the other things are the same i.e. mock the implementation of Axios, submit the form, and expect that a successful response is being returned.

jennypoon commented 2 years ago

PR have been added to include the suggested tests.

isabelcosta commented 2 years ago

@Aaishpra thank you for testing this 🙏🏾 really really appreciate it

isabelcosta commented 2 years ago

Great work @jennypoon 👏🏾 🙌🏾