Initial badges E2E tests

app/permissions.ts

@@ -11,12 +11,15 @@ import type { ManagersByBadgeId } from "./db/models/badges.server";
 export function canPerformAdminActions(user?: Pick<User, "discordId">) {
   if (["development", "test"].includes(process.env.NODE_ENV)) return true;
 
-  if (!user) return false;
-  return user.discordId === ADMIN_DISCORD_ID;
+  return isAdmin(user);
+}
+
+function isAdmin(user?: Pick<User, "discordId">) {
+  return user?.discordId === ADMIN_DISCORD_ID;
 }
 
 function adminOverride(user?: Pick<User, "discordId">) {
-  if (canPerformAdminActions(user)) {
+  if (isAdmin(user)) {
     return () => true;
   }
 

app/routes/badges.tsx

@@ -33,6 +33,7 @@ export default function BadgesPageLayout() {
               className="badges__nav-link"
               key={badge.id}
               to={String(badge.id)}
+              data-cy="badge-nav-link"
             >
               <Badge badge={badge} size={64} isAnimated={false} />
             </NavLink>

app/routes/badges/$id.tsx

@@ -49,7 +49,7 @@ export default function BadgeDetailsPage() {
       <Badge badge={badge} isAnimated size={200} />
       <div className="badges__explanation">{badgeExplanationText(badge)}</div>
       {canEditBadgeOwners({ user, managers: data.managers }) ? (
-        <LinkButton to="edit" variant="outlined" tiny>
+        <LinkButton to="edit" variant="outlined" tiny data-cy="edit-button">
           Edit
         </LinkButton>
       ) : null}

app/routes/u.$identifier/index.tsx

@@ -129,7 +129,7 @@ function BadgeContainer(props: { badges: UserPageLoaderData["badges"] }) {
   };
 
   return (
-    <div>
+    <div data-cy="badge-container">
       <div
         className={clsx("u__badges", {
           "justify-center": smallBadges.length === 0,
@@ -139,7 +139,11 @@ function BadgeContainer(props: { badges: UserPageLoaderData["badges"] }) {
         {smallBadges.length > 0 ? (
           <div className="u__small-badges">
             {smallBadges.map((badge) => (
-              <div key={badge.id} className="u__small-badge-container">
+              <div
+                key={badge.id}
+                className="u__small-badge-container"
+                data-cy="small-badge"
+              >
                 <Badge
                   badge={badge}
                   onClick={() => setBadgeFirst(badge)}
@@ -154,7 +158,7 @@ function BadgeContainer(props: { badges: UserPageLoaderData["badges"] }) {
           </div>
         ) : null}
       </div>
-      <div className="u__badge-explanation">
+      <div className="u__badge-explanation" data-cy="badge-explanation">
         {badgeExplanationText(bigBadge)}
       </div>
     </div>

cypress/e2e/badges.cy.ts

@@ -0,0 +1,17 @@
+import { BADGES_PAGE } from "~/utils/urls";
+
+export {};
+
+describe("Plus suggestions page", () => {
+  beforeEach(() => {
+    cy.seed();
+  });
+
+  it("browses the badges not logged in", function () {
+    cy.visit(BADGES_PAGE);
+
+    cy.getCy("badge-nav-link").first().click();
+    cy.contains("Awarded for winning");
+    cy.getCy("edit-button").should("not.exist");
+  });
+});

cypress/e2e/user.cy.ts

@@ -46,4 +46,19 @@ describe("User page", () => {
     cy.contains("Finland").should("not.exist");
     cy.contains(bio).should("not.exist");
   });
+
+  it("changes big badge in badge container", () => {
+    cy.visit("/u/79237403620945920");
+
+    cy.getCy("small-badge").first().click();
+
+    cy.getCy("badge-explanation")
+      .invoke("text")
+      .then((previousText) => {
+        cy.getCy("small-badge").first().click();
+        cy.getCy("badge-explanation")
+          .invoke("text")
+          .should("not.equal", previousText);
+      });
+  });
 });