fix more tests

[skip ci]
Couchers-org · Nov 14, 2021 · 436a162 · 436a162
1 parent 584238e
commit 436a162
Show file tree

Hide file tree

Showing 15 changed files with 36 additions and 35 deletions.
diff --git a/app/web/components/Button/Button.test.tsx b/app/web/components/Button/Button.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import wrapper from "test/hookWrapper";
 
@@ -18,6 +18,8 @@ it("should try to log the error to Sentry if one is thrown when the button is cl
 
   userEvent.click(await screen.findByRole("button", { name: "Test button" }));
 
-  expect(testKit.reports()).toHaveLength(1);
-  expect(testKit.reports()[0]).toHaveProperty("error.message", "oops");
+  await waitFor(() => {
+    expect(testKit.reports()).toHaveLength(1);
+    expect(testKit.reports()[0]).toHaveProperty("error.message", "oops");
+  });
 });
diff --git a/app/web/components/ImageInput/ImageInput.tsx b/app/web/components/ImageInput/ImageInput.tsx
@@ -23,7 +23,6 @@ import { service } from "service";
 import { ImageInputValues } from "service/api";
 
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from "./constants";
-import imagePlaceholder from "./imagePlaceholder.svg";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -197,7 +196,7 @@ export function ImageInput(props: AvatarInputProps | RectImgInputProps) {
               className={classNames(classes.image, className, {
                 [classes.imageGrow]: props.grow,
               })}
-              src={imageUrl ?? imagePlaceholder}
+              src={imageUrl ?? "/img/imagePlaceholder.svg"}
               style={{ objectFit: !imageUrl ? "contain" : undefined }}
               alt={props.alt}
               width={props.width ?? DEFAULT_WIDTH}

diff --git a/app/web/features/auth/AuthProvider.tsx b/app/web/features/auth/AuthProvider.tsx
@@ -20,26 +20,26 @@ function useAppContext<T>(context: Context<T | null>) {
 export default function AuthProvider({ children }: { children: ReactNode }) {
   const store = useAuthStore();
 
-  const push = useRouter().push;
+  const router = useRouter();
 
   useEffect(() => {
     setUnauthenticatedErrorHandler(async (e: GrpcError) => {
       // the backend will return "Permission denied" if you're just jailed, and "Unauthorized" otherwise
       if (e.message === JAILED_ERROR_MESSAGE) {
         await store.authActions.updateJailStatus();
-        push(jailRoute);
+        router.push(jailRoute);
       } else {
         // completely logged out
         await store.authActions.logout();
         store.authActions.authError(YOU_WERE_LOGGED_OUT);
-        push(loginRoute);
+        router.push(loginRoute);
       }
     });
 
     return () => {
       setUnauthenticatedErrorHandler(async () => {});
     };
-  }, [push, store.authActions]);
+  }, [store.authActions, router]);
 
   return <AuthContext.Provider value={store}>{children}</AuthContext.Provider>;
 }

diff --git a/app/web/features/communities/CommunityPage/PlaceCard.tsx b/app/web/features/communities/CommunityPage/PlaceCard.tsx
@@ -14,8 +14,6 @@ import { routeToPlace } from "routes";
 import makeStyles from "utils/makeStyles";
 import stripMarkdown from "utils/stripMarkdown";
 
-import placeImagePlaceholder from "./placeImagePlaceholder.svg";
-
 const useStyles = makeStyles((theme) => ({
   image: {
     backgroundColor: theme.palette.grey[200],
@@ -70,7 +68,11 @@ export default function PlaceCard({
         <a>
           <CardActionArea>
             <CardMedia
-              src={place.photoUrl ? place.photoUrl : placeImagePlaceholder}
+              src={
+                place.photoUrl
+                  ? place.photoUrl
+                  : "/img/placeImagePlaceholder.svg"
+              }
               className={classes.image}
               component="img"
             />

diff --git a/app/web/features/communities/events/EventCard.tsx b/app/web/features/communities/events/EventCard.tsx
@@ -20,7 +20,6 @@ import stripMarkdown from "utils/stripMarkdown";
 
 import { getAttendeesCount, ONLINE } from "../constants";
 import { details, VIEW_DETAILS_FOR_LINK } from "./constants";
-import eventImagePlaceholder from "./eventImagePlaceholder.svg";
 
 const useStyles = makeStyles<Theme, { eventImageSrc: string }>((theme) => ({
   root: {
@@ -34,7 +33,7 @@ const useStyles = makeStyles<Theme, { eventImageSrc: string }>((theme) => ({
     height: 80,
     backgroundImage: ({ eventImageSrc }) => `url(${eventImageSrc})`,
     backgroundSize: ({ eventImageSrc }) =>
-      eventImageSrc === eventImagePlaceholder ? "contain" : "cover",
+      eventImageSrc === "/img/eventImagePlaceholder.svg" ? "contain" : "cover",
     [theme.breakpoints.up("sm")]: {
       height: 100,
     },
@@ -125,7 +124,7 @@ export interface EventCardProps {
 
 export default function EventCard({ event, className }: EventCardProps) {
   const classes = useStyles({
-    eventImageSrc: event.photoUrl || eventImagePlaceholder,
+    eventImageSrc: event.photoUrl || "/img/eventImagePlaceholder.svg",
   });
 
   const startTime = dayjs(timestamp2Date(event.startTime!));
@@ -144,7 +143,7 @@ export default function EventCard({ event, className }: EventCardProps) {
       <Link href={routeToEvent(event.eventId, event.slug)}>
         <a>
           <CardMedia
-            src={event.photoUrl || eventImagePlaceholder}
+            src={event.photoUrl || "/img/eventImagePlaceholder.svg"}
             className={classes.image}
           >
             {event.onlineInformation && (

diff --git a/app/web/features/communities/events/EventForm.test.tsx b/app/web/features/communities/events/EventForm.test.tsx
@@ -98,7 +98,7 @@ describe("Event form", () => {
     expect(screen.getByRole("button", { name: CREATE })).toBeVisible();
     expect(
       screen.getByRole("img", { name: EVENT_IMAGE_INPUT_ALT })
-    ).toHaveAttribute("src", "imagePlaceholder.svg");
+    ).toHaveAttribute("src", "/img/imagePlaceholder.svg");
   });
 
   it("renders the form correctly when passed an event", async () => {
@@ -134,7 +134,7 @@ describe("Event form", () => {
 
     expect(
       await screen.findByRole("img", { name: EVENT_IMAGE_INPUT_ALT })
-    ).toHaveAttribute("src", "imagePlaceholder.svg");
+    ).toHaveAttribute("src", "/img/imagePlaceholder.svg");
   });
 
   it("should hide the location field when the virtual event checkbox is ticked", async () => {

diff --git a/app/web/features/communities/events/EventPage.tsx b/app/web/features/communities/events/EventPage.tsx
@@ -39,7 +39,6 @@ import {
   VIRTUAL_EVENT,
 } from "./constants";
 import EventAttendees from "./EventAttendees";
-import eventImagePlaceholder from "./eventImagePlaceholder.svg";
 import EventOrganizers from "./EventOrganizers";
 import { useEvent } from "./hooks";
 
@@ -52,7 +51,9 @@ export const useEventPageStyles = makeStyles<Theme, { eventImageSrc: string }>(
       },
       width: "100%",
       objectFit: ({ eventImageSrc }) =>
-        eventImageSrc === eventImagePlaceholder ? "contain" : "cover",
+        eventImageSrc === "/img/eventImagePlaceholder.svg"
+          ? "contain"
+          : "cover",
       marginBlockStart: theme.spacing(2),
     },
     header: {
@@ -195,7 +196,7 @@ export default function EventPage({
   }, [event, eventSlug, router]);
 
   const classes = useEventPageStyles({
-    eventImageSrc: event?.photoUrl || eventImagePlaceholder,
+    eventImageSrc: event?.photoUrl || "/img/eventImagePlaceholder.svg",
   });
 
   return !isValidEventId ? (
@@ -215,7 +216,7 @@ export default function EventPage({
           <>
             <img
               className={classes.eventCoverPhoto}
-              src={event.photoUrl || eventImagePlaceholder}
+              src={event.photoUrl || "/img/eventImagePlaceholder.svg"}
               alt=""
             />
             <div className={classes.header}>

diff --git a/app/web/features/communities/events/EventsList.test.tsx b/app/web/features/communities/events/EventsList.test.tsx
@@ -77,7 +77,7 @@ describe("Events list", () => {
     userEvent.click(screen.getByRole("button", { name: CREATE_AN_EVENT }));
 
     await waitFor(() => {
-      expect(mockRouter.pathname).toBe(routeToNewEvent(1));
+      expect(mockRouter.asPath).toBe(routeToNewEvent(2));
     });
   });
 

diff --git a/app/web/features/communities/events/EventsPage.test.tsx b/app/web/features/communities/events/EventsPage.test.tsx
@@ -78,7 +78,7 @@ describe("Events page", () => {
     userEvent.click(screen.getByRole("button", { name: CREATE_AN_EVENT }));
 
     await waitFor(() => {
-      expect(mockRouter.pathname).toBe(routeToNewEvent(1));
+      expect(mockRouter.asPath).toBe(routeToNewEvent());
     });
   });
 

diff --git a/app/web/features/communities/events/LongEventCard.test.tsx b/app/web/features/communities/events/LongEventCard.test.tsx
@@ -72,6 +72,6 @@ describe("Long event card", () => {
 
     const eventImage = await screen.findByRole("img", { name: "" });
     expect(eventImage).toBeVisible();
-    expect(eventImage).toHaveAttribute("src", "eventImagePlaceholder.svg");
+    expect(eventImage).toHaveAttribute("src", "/img/eventImagePlaceholder.svg");
   });
 });
diff --git a/app/web/features/communities/events/LongEventCard.tsx b/app/web/features/communities/events/LongEventCard.tsx
@@ -16,7 +16,6 @@ import makeStyles from "utils/makeStyles";
 
 import { getAttendeesCount, ONLINE } from "../constants";
 import getContentSummary from "../getContentSummary";
-import eventImagePlaceholder from "./eventImagePlaceholder.svg";
 
 const useStyles = makeStyles<Theme, { eventImageSrc: string }>((theme) => ({
   overviewRoot: {
@@ -60,7 +59,7 @@ const useStyles = makeStyles<Theme, { eventImageSrc: string }>((theme) => ({
   },
   image: {
     objectFit: ({ eventImageSrc }) =>
-      eventImageSrc === eventImagePlaceholder ? "contain" : "cover",
+      eventImageSrc === "/img/eventImagePlaceholder.svg" ? "contain" : "cover",
     height: 80,
     [theme.breakpoints.up("md")]: {
       height: 120,
@@ -83,7 +82,7 @@ export interface LongEventCardProps {
 
 export default function LongEventCard({ event }: LongEventCardProps) {
   const classes = useStyles({
-    eventImageSrc: event.photoUrl || eventImagePlaceholder,
+    eventImageSrc: event.photoUrl || "/img/eventImagePlaceholder.svg",
   });
   const theme = useTheme();
   const isBelowLg = useMediaQuery(theme.breakpoints.down("md"));
@@ -132,7 +131,7 @@ export default function LongEventCard({ event }: LongEventCardProps) {
           <img
             alt=""
             className={classes.image}
-            src={event.photoUrl || eventImagePlaceholder}
+            src={event.photoUrl || "/img/eventImagePlaceholder.svg"}
           />
         </a>
       </Link>

diff --git a/...munities/events/eventImagePlaceholder.svg → app/web/public/img/eventImagePlaceholder.svg b/...munities/events/eventImagePlaceholder.svg → app/web/public/img/eventImagePlaceholder.svg
diff --git a/...omponents/ImageInput/imagePlaceholder.svg → app/web/public/img/imagePlaceholder.svg b/...omponents/ImageInput/imagePlaceholder.svg → app/web/public/img/imagePlaceholder.svg
diff --git a/...s/CommunityPage/placeImagePlaceholder.svg → app/web/public/img/placeImagePlaceholder.svg b/...s/CommunityPage/placeImagePlaceholder.svg → app/web/public/img/placeImagePlaceholder.svg
diff --git a/app/web/test/setupTests.ts b/app/web/test/setupTests.ts
@@ -4,7 +4,7 @@
 // learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom/extend-expect";
 
-// import * as Sentry from "@sentry/nextjs";
+import * as Sentry from "@sentry/nextjs";
 import mediaQuery from "css-mediaquery";
 import sentryTestkit from "sentry-testkit";
 
@@ -37,11 +37,10 @@ const { testkit, sentryTransport } = sentryTestkit();
 global.testKit = testkit;
 
 beforeAll(() => {
-  /// TODO: Fix sentry in tests
-  // Sentry.init({
-  //   dsn: "https://[email protected]/0",
-  //   transport: sentryTransport,
-  // });
+  Sentry.init({
+    dsn: "https://[email protected]/0",
+    transport: sentryTransport,
+  });
 });
 
 beforeEach(() => testkit.reset());