E2E test - /settings page - Multiple issues available

[John-Paul-Larkin]

Context

We need to ensure that our core application features and user flows are fully covered by end-to-end (E2E) tests. We are using Playwright for these tests, and the workflow framework for E2E testing is already in place.

If you navigate to the e2e folder in the root of the project, you'll find that @JohnAllenTech has written numerous tests for the article page. These tests have been grouped into two categories: authenticated and unauthenticated. Please ensure that this pattern is followed when adding new tests.

Expected Behavior

Below is a list of possible tests for the /settings page. These are suggested tests generated with the help of ChatGPT, meant to provide a starting point. You should use your discretion to refine these tests and account for relevant edge cases. Ensure that tests for each input field align with the current Zod validation schema.

Additionally, feel free to propose other valid tests that might apply specifically to the functionality of the settings page.

Tests should be standalone and focus on a single purpose, ensuring each test verifies only one specific behavior or functionality.

Test should be added to e2e/settings.spec.ts

Please leave a comment specifying the tests you plan to write, so others don't duplicate the same efforts.
All PRs are accepted for Hacktoberfest.

Note: For this page, the unauthenticated test is only necessary to verify that the user is correctly redirected to the /get-started page.

Note: As multiple people may contribute to this issue, please ensure you pull the latest changes from the upstream and resolve any conflicts. Sync the upstream

Tests

1. Profile Picture Upload
   Test: Upload a valid profile picture (JPG, PNG, or GIF).
   Scenario: Simulate selecting an image file, uploading it, and verifying that it is displayed correctly in the UI.
   Edge Case: Test for an invalid file format (e.g., PDF, BMP) and ensure proper error messaging.
2. Full Name Update
   Test: Update the full name field and save the changes.
   Scenario: Input a new name, click "Save Changes", and verify that the new name is updated and persisted across sessions.
   Edge Case: Test for maximum length or invalid characters, if there are any validation rules.
3. Username Update
   Test: Update the username field and save the changes.
   Scenario: Input a new username, click "Save Changes", and verify that the username is reflected across the platform.
   Edge Case: Ensure that no two users can have the same username and that errors are displayed for duplicates.
4. Bio Field Update
   Test: Update the bio field with valid text.
   Scenario: Input a bio within the character limit, save, and verify that it updates correctly.
   Edge Case: Try entering more than 200 characters and verify that an error is displayed or that it prevents submission.
5. Location Update
   Test: Change the location and save the changes.
   Scenario: Input a new location (e.g., text or emoji), save, and verify the location is updated.
6. Website URL Update
   Test: Enter a valid website URL.
   Scenario: Add a valid URL, save, and ensure the link displays properly.
   Edge Case: Test for invalid URLs (e.g., no protocol) and verify error handling.
7. Email Verification
   Test: Verify email change process.
   Scenario: Enter a new email in the "Update Email" field, click "Send Verification Email", and ensure that a verification email is sent.
   Edge Case: Test for invalid email formats and ensure the system rejects them with appropriate error messages.
8. Notification Preferences
   Test: Toggle notification settings (Allow notifications, Weekly Newsletter).
   Scenario: Toggle these switches, save changes, and verify that the settings persist after reload or login.
   Edge Case: Ensure settings are correctly toggled and do not change without user input.
9. Form Reset
   Test: Reset the form.
   Scenario: Change several fields, click "Reset", and verify that all fields revert to their original state.
10. Save Changes
    Test: Save changes to all fields.
    Scenario: Modify multiple fields (profile picture, name, username, etc.), click "Save Changes", and verify that all updates are correctly applied and saved.
11. Validation & Error Handling
    Test: Input invalid data (e.g., empty required fields, incorrect email format).
    Scenario: Attempt to save with invalid input and verify appropriate validation messages are displayed.
12. Accessibility
    Test: Verify the page's accessibility (e.g., via keyboard navigation and screen readers).
    Scenario: Ensure that all fields can be navigated with the keyboard and that screen readers can access field labels correctly.

Screenshots

[petercr]

Hello I would be happy to jump on writing any one of these tests for you.
I guess I will start by jumping on the first one: 1. Profile Picture Upload

I'll let you know if I come across any questions, but it seems pretty straight forward. 👍🏻

[John-Paul-Larkin]

Awesome. Thanks @petercr