Archive Issue

__test__/containers/CampaignList.test.js

@@ -3,14 +3,31 @@
  */
 import React from "react";
 import { mount } from "enzyme";
-import { AdminCampaignList } from "../../src/containers/AdminCampaignList";
-import { TIMEZONE_SORT } from "../../src/components/AdminCampaignList/SortBy";
+import { act } from "react-dom/test-utils";
+import {
+  render,
+  screen,
+  waitFor,
+  cleanup
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { StyleSheetTestUtils } from "aphrodite";
 
+import { AdminCampaignList } from "../../src/containers/AdminCampaignList";
+
+// https://github.com/Khan/aphrodite/issues/62#issuecomment-267026726
+beforeEach(() => {
+  StyleSheetTestUtils.suppressStyleInjection();
+});
+afterEach(() => {
+  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
+  cleanup();
+});
+
 describe("CampaignList", () => {
   const params = {
     adminPerms: true,
-    organizationId: 77
+    organizationId: "77"
   };
 
   const mutations = {
@@ -110,19 +127,21 @@ describe("CampaignList", () => {
 
   describe("Campaign list sorting", () => {
     const campaignWithCreator = {
-      id: 1,
+      id: "1",
+      title: "test",
       creator: {
         displayName: "Lorem Ipsum"
       },
       completionStats: {},
       organization: {
         id: 1
-      }
+      },
+      timezone: "US/Eastern"
     };
 
     const data = {
       organization: {
-        id: 1,
+        id: "1",
         cacheable: 2,
         campaigns: {
           campaigns: [campaignWithCreator],
@@ -132,26 +151,58 @@ describe("CampaignList", () => {
             total: 1
           }
         }
-      }
+      },
+      refetch: () => {}
     };
 
-    test("Timezone column is displayed when timezone is current sort", () => {
+    test("Timezone column is displayed when timezone is current sort", async () => {
       StyleSheetTestUtils.suppressStyleInjection();
-      const wrapper = mount(
-        <AdminCampaignList data={data} mutations={mutations} params={params} />
-      );
-      wrapper.setState({
-        sortBy: TIMEZONE_SORT.value
+      act(() => {
+        render(
+          <AdminCampaignList
+            data={data}
+            mutations={mutations}
+            params={params}
+          />
+        );
+      });
+
+      act(() => {
+        userEvent.click(
+          screen.getByRole("button", { name: /sort: created, newest/i }),
+          { skipHover: true }
+        );
       });
-      expect(wrapper.containsMatchingElement("Timezone")).toBeTruthy();
+
+      act(() => {
+        userEvent.click(
+          screen.getByRole("option", { name: /sort: timezone/i }),
+          { skipHover: true }
+        );
+      });
+
+      await waitFor(() =>
+        expect(
+          screen.getByRole("columnheader", { name: /timezone/i })
+        ).toBeTruthy()
+      );
     });
 
     test("Timezone column is hidden when it isn't the current sort", () => {
       StyleSheetTestUtils.suppressStyleInjection();
-      const wrapper = mount(
-        <AdminCampaignList data={data} mutations={mutations} params={params} />
-      );
-      expect(wrapper.containsMatchingElement("Timezone")).toBeFalsy();
+      act(() => {
+        render(
+          <AdminCampaignList
+            data={data}
+            mutations={mutations}
+            params={params}
+          />
+        );
+      });
+      const timezoneButton = screen.queryByText("columnheader", {
+        name: /timezone/i
+      });
+      expect(timezoneButton).toBeNull();
     });
   });
 });

package.json

@@ -182,6 +182,9 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.24.7",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^12.1.5",
     "babel-jest": "^29.3.1",
     "babel-preset-es2017": "^6.24.1",
     "cypress": "^13.11.0",