UI Tests for username change on /settings page.

[petercr]

✨ Codu Pull Request 💻

Fixes #1168 ** Only Part 3.**

Pull Request details

Added UI tests for /settings to:

• tests for input field & types
• tries to submit a bad user name
• checks for error visibility
• resets the form
• changes user name, saves, and checks for update

Any Breaking changes

None

Associated Screenshots

None, but the tests pass 😅 I promise!

[Optional] What gif best describes this PR or how it makes you feel

Like this, only instead of Monday, Wed, Friday it's like start, middle, end 😆

[vercel[bot]]

@petercr is attempting to deploy a commit to the Codú Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

Walkthrough

The changes in this pull request enhance the end-to-end test suite for the authenticated settings page by adding a new test case focused on the username input field. The modifications include updating the import statements and implementing a series of assertions that validate the visibility, attributes, and functionality of the username input, including error handling for invalid inputs and confirmation of valid submissions.

Changes

File	Change Summary
e2e/settings.spec.ts	Updated import statements; added a new test case for username input validation, including checks for visibility, attributes, error messages, and form reset functionality.
app/(app)/settings/_client.tsx	Enhanced toast notifications for success and error handling during settings save operations by adding custom class names.
e2e/setup.ts	Updated bio property in userData with a grammatical error; changed websiteUrl from a relative to an absolute URL.

Assessment against linked issues

Objective	Addressed	Explanation
Add E2E tests for the username field (1168)	✅
Ensure tests are standalone and focused (1168)	✅
Validate input fields against Zod schema (1168)	❌	No explicit validation against Zod schema shown.
Cover edge cases for username input (1168)	✅

Possibly related PRs

• #1061: This PR focuses on fixing and stabilizing end-to-end tests, which may relate to the enhancements made in the main PR for the settings page tests, as both involve improving test coverage and reliability.
• #1085: This PR updates E2E tests, including modifications to the homepage tests, which may share similar testing strategies or structures with the new tests added for the settings page.
• #1125: This PR improves existing E2E tests, which could be relevant as it aims to enhance the overall testing framework, similar to the enhancements made in the main PR for the settings page.
• #1158: This PR adds tests for commenting functionality, which may share testing principles with the username input validation in the settings tests, focusing on user input and feedback.
• #1192: The isolation of the E2E test suite from the seed script may impact how tests are structured, potentially relating to the main PR's enhancements in testing.

Suggested labels

hacktoberfest-accepted, hacktoberfest

Suggested reviewers

• NiallJoeMaher

🐰 In the land of code, where rabbits hop,
A test was added, and we won't stop!
For usernames bright, we check and we see,
Valid or not, they must be error-free!
With each little change, our coverage grows,
Hopping through tests, as the confidence flows! 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between fcd1dbb533031a6c932053c1d9e7d273c63453b3 and c6949d09d41db4c0f44d2329bfe0e05721af1f5c.

📒 Files selected for processing (1)

• e2e/setup.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• e2e/setup.ts

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[NiallJoeMaher]

@JohnAllenTech let me know when this is good to go since you are the overlord of tests.

[petercr]

@JohnAllenTech I made some changes and added the extra tests you had suggested. Tests now cover:

• waiting for toast to show
• waiting for toast to disappear
• full page refresh
• checking new value persists in input field

I did have to change a field in /e2e/setup/setup.ts to add https:// to it. Otherwise you get an error on the form in E2E testing.

I also added new class names to both the toast messages for UI testing.

Thanks

[JohnAllenTech]

@JohnAllenTech I made some changes and added the extra tests you had suggested.

Tests now cover:

• waiting for toast to show

• waiting for toast to disappear

• full page refresh

• checking new value persists in input field

I did have to change a field in /e2e/setup/setup.ts to add https:// to it.

Otherwise you get an error on the form in E2E testing.

I also added new class names to both the toast messages for UI testing.

Thanks

Hey @petercr apologies I was AFK for a few days. I'll take a look at this in a while and reply properly

[NiallJoeMaher]

Tests failing here.

[petercr]

Well crap 😕 that's no good. I will look into this over the weekend (next 2 days) and see if I can figure it out. 👌🏻

I wonder if this has to do with the newsletter sub function? Either way I'm on it 👍🏻

[petercr]

When I run the test locally, they all pass 🤷🏼‍♂️ see pic below. I'm not sure but this may have to do with /server/lib/newsletter.ts.

I added extra code on line 39 to keep from getting the email API errors for the newsletter. You can see some controller errors from posts.sidebarData and the tRPC error for profile.edit.

Here's what I added locally for this:

 if (process.env.ENV === "local" || "development") {
    return true;
  }

But it might be simpler to go with:

 if (process.env.ENV !== "production") {
    return true;
  }

Here is the image of the tests passing.