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

[petercr]

Hey @John-Paul-Larkin I'm having a little trouble with this, mostly because even when I'm logged in I get the error:
app-index.js:33 TRPCClientError: Could not load credentials from any providers at TRPCClientError.from (TRPCClientError-38f9a32a.mjs:33:20) at eval (httpBatchLink-d0f9eac9.mjs:198:105)

I also get the toast message Could not load credentials from any provider.
Which makes it kind of hard to test a feature that doesn't seem to be working 😅 at least locally on my machine.

Any ideas on how to solve this problem?
Thanks 😃

[John-Paul-Larkin]

Hey @petercr
There is an issue with the image upload functionality. I believe PR #1155 is a fix for this.

In the meantime, would you be ok with writing tests for anything apart from the the Profile Picture Upload?

PS. You will also get an error

Email API not configured
at TRPCClientError.from

This is due to missing env variables. You can overcome this by adding

const ENV = process.env.NODE_ENV;
if (ENV === "development") {
return true;
}

To the isUserSubscribedToNewsletter function on line 43.
As outlined in issue #786

[petercr]

Awesome, because I couldn't figure out what exactly I was doing wrong 😓
Me: but I didn't even run the tests yet 😢 how did I break it??

I also received the Email API not configured error when I went to change another field on the page.

I will move on to testing the Full Name change and update of that, hopefully that will go better 🤞
Thanks

[petercr]

So I did get to change a couple of fields in the form and get it to save.
But when I go to run the test, I end up with most of them failing. 😬
It seems to stem from module @tiptap/html not resolving on the route ./app/(app)/articles/[slug]/page.tsx
You can manually do this by navigating to /articles and then clicking on any article's link to load it.

And once you hit that error the whole app crashes out for me.
Even if you go back localhost:3000 and do a manual refresh it is still 💀

Any advice?
Here's the screen I get:

[John-Paul-Larkin]

Try to run npm Install. I think you are just missing the package.

[petercr]

I did try a fresh npm install on both WSL2 Ubuntu and Windows. That didn't fix the problem 😢
But I did end up finding and fixing the problem! 🎉

The issue with the unresolved module has to do with /app/articles/app/page.tsx import and use in that file.
So when you went to click on an article's link, the whole app just crashed.
Plus typescript was throwing up multiple errors on the file.

So I ended up fixing the issue and push a PR with the changes. PR #1179
It seems to have fixed the issue, so testing should be working now along with the local version of the app in development.

If you do use that PR, any chance you can add a Hacktoberfest label to it? 😉
Thanks