diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 47a0f9fdf..26e21e828 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -57,7 +57,7 @@ type LinkButtonProps = Pick< ButtonProps, "variant" | "children" | "className" | "tiny" > & - Pick; + Pick & { "data-cy"?: string }; export function LinkButton({ variant, @@ -65,9 +65,14 @@ export function LinkButton({ tiny, className, to, + "data-cy": testId, }: LinkButtonProps) { return ( - + {children} ); diff --git a/app/entry.client.tsx b/app/entry.client.tsx index ffef95f66..d6e2dd62d 100644 --- a/app/entry.client.tsx +++ b/app/entry.client.tsx @@ -1,4 +1,10 @@ import { RemixBrowser } from "@remix-run/react"; import { hydrateRoot } from "react-dom/client"; -hydrateRoot(document, ); +// 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(, document); +} else { + hydrateRoot(document, ); +} diff --git a/app/routes/auth/impersonate.tsx b/app/routes/auth/impersonate.tsx index de3117796..ba2fc2a02 100644 --- a/app/routes/auth/impersonate.tsx +++ b/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") diff --git a/app/routes/plus/suggestions.tsx b/app/routes/plus/suggestions.tsx index 98a6a7bde..86c1b8348 100644 --- a/app/routes/plus/suggestions.tsx +++ b/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`} /> ); @@ -168,6 +169,7 @@ function SuggestedUser({ tiny variant="outlined" to={`comment/${tier}/${suggested.info.id}`} + data-cy="comment-button" > Comment diff --git a/app/routes/plus/suggestions/comment.$tier.$userId.tsx b/app/routes/plus/suggestions/comment.$tier.$userId.tsx index b54a7d287..ba003577d 100644 --- a/app/routes/plus/suggestions/comment.$tier.$userId.tsx +++ b/app/routes/plus/suggestions/comment.$tier.$userId.tsx @@ -94,7 +94,9 @@ export default function PlusCommentModalPage() {
- +
); diff --git a/cypress/integration/plus.spec.ts b/cypress/integration/plus.spec.ts index 2fe9c9a36..6f899e924 100644 --- a/cypress/integration/plus.spec.ts +++ b/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!"); + }); });