Add Cypress test for adding comment

app/components/Button.tsx

@@ -57,7 +57,7 @@ type LinkButtonProps = Pick<
   ButtonProps,
   "variant" | "children" | "className" | "tiny"
 > &
-  Pick<RemixLinkProps, "to">;
+  Pick<RemixLinkProps, "to"> & { "data-cy"?: string };
 
 export function LinkButton({
   variant,
@@ -65,9 +65,14 @@ export function LinkButton({
   tiny,
   className,
   to,
+  "data-cy": testId,
 }: LinkButtonProps) {
   return (
-    <Link className={clsx("button", variant, { tiny }, className)} to={to}>
+    <Link
+      className={clsx("button", variant, { tiny }, className)}
+      to={to}
+      data-cy={testId}
+    >
       {children}
     </Link>
   );

app/entry.client.tsx

@@ -1,4 +1,10 @@
 import { RemixBrowser } from "@remix-run/react";
 import { hydrateRoot } from "react-dom/client";
 
-hydrateRoot(document, <RemixBrowser />);
+// work around for react 18 + cypress problem - https://github.com/remix-run/remix/issues/2570#issuecomment-1099696456
+if (process.env.NODE_ENV === "test") {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  require("react-dom").hydrate(<RemixBrowser />, document);
+} else {
+  hydrateRoot(document, <RemixBrowser />);
+}

app/routes/auth/impersonate.tsx

@@ -4,7 +4,7 @@ import { IMPERSONATED_SESSION_KEY } from "~/core/auth/authenticator.server";
 import { sessionStorage } from "~/core/auth/session.server";
 
 export const action: ActionFunction = async ({ request }) => {
-  if (process.env.NODE_ENV !== "development") return null;
+  if (!["development", "test"].includes(process.env.NODE_ENV)) return null;
 
   const session = await sessionStorage.getSession(
     request.headers.get("Cookie")

app/routes/plus/suggestions.tsx

@@ -88,6 +88,7 @@ export default function PlusSuggestionsPage() {
                     type="radio"
                     checked={tierVisible === tier}
                     onChange={() => setTierVisible(tier)}
+                    data-cy={`plus${tier}-radio`}
                   />
                 </div>
               );
@@ -168,6 +169,7 @@ function SuggestedUser({
             tiny
             variant="outlined"
             to={`comment/${tier}/${suggested.info.id}`}
+            data-cy="comment-button"
           >
             Comment
           </LinkButton>

app/routes/plus/suggestions/comment.$tier.$userId.tsx

@@ -94,7 +94,9 @@ export default function PlusCommentModalPage() {
         </h2>
         <CommentTextarea />
         <div className="plus__modal-buttons">
-          <Button type="submit">Submit</Button>
+          <Button type="submit" data-cy="submit-button">
+            Submit
+          </Button>
           <Button
             onClick={() => navigate(PLUS_SUGGESTIONS_PAGE)}
             variant="minimal-destructive"
@@ -129,6 +131,7 @@ function CommentTextarea() {
         value={value}
         onChange={(e) => setValue(e.target.value)}
         maxLength={PlUS_SUGGESTION_COMMENT_MAX_LENGTH}
+        data-cy="comment-textarea"
       />
     </div>
   );

cypress/integration/plus.spec.ts

@@ -1,3 +1,5 @@
+import { PLUS_SUGGESTIONS_PAGE } from "~/utils/urls";
+
 export {};
 
 describe("Plus suggestions page", () => {
@@ -7,7 +9,20 @@ describe("Plus suggestions page", () => {
 
   it("views suggestions status as non plus member", function () {
     cy.auth(150);
-    cy.visit("/plus");
+    cy.visit(PLUS_SUGGESTIONS_PAGE);
     cy.contains("You are suggested");
   });
+
+  it("adds a comment", () => {
+    cy.auth();
+    cy.visit(PLUS_SUGGESTIONS_PAGE);
+    cy.getCy("plus2-radio").click();
+    cy.getCy("comment-button").first().click();
+
+    cy.url().should("include", "/2/"); // let's check the radio button click did something
+    cy.getCy("comment-textarea").type("Cracked!");
+    cy.getCy("submit-button").click();
+
+    cy.contains("Cracked!");
+  });
 });