Stage main 14.1.1

README.md

@@ -10,37 +10,34 @@ On November 19th, 2023, the repo Spoke was transferred from MoveOn to State Voic
 
 The latest version can be found here: [Release Notes](https://github.com/StateVoicesNational/Spoke/blob/main/docs/RELEASE_NOTES.md)
 
-
-
 ## Setting up Spoke
 
-
-The easiest way to get started is with Heroku.  You can also learn about Spoke through the [texter](https://youtu.be/EqE1UDvKGco) and [admin](https://youtu.be/PTMykMX8gII) video demos or in the explanation on [how to decide if Spoke is right for you.](docs/EXPLANATION_DECIDING_ON_SPOKE.md)
+The easiest way to get started is with Heroku. You can also learn about Spoke through the [texter](https://youtu.be/EqE1UDvKGco) and [admin](https://youtu.be/PTMykMX8gII) video demos or in the explanation on [how to decide if Spoke is right for you.](docs/EXPLANATION_DECIDING_ON_SPOKE.md)
 
 For developers, please see our recommendations for [deploying locally for development](docs/HOWTO_DEVELOPMENT_LOCAL_SETUP.md).
 
 Want to know more?
 [Click here to visit the Spoke Documentation microsite!](https://statevoicesnational.github.io/Spoke/)
 
-
 ### Quick Start with Heroku
-This version of Spoke suitable for testing and, potentially, for small campaigns. This won't cost any money and will not support production(aka large-scale) usage. It's a great way to practice deploying Spoke or see it in action.  
 
-<a href="https://heroku.com/deploy?template=https://github.com/StateVoicesNational/Spoke/tree/v14.1.0">
+This version of Spoke suitable for testing and, potentially, for small campaigns. This won't cost any money and will not support production(aka large-scale) usage. It's a great way to practice deploying Spoke or see it in action.
+
+<a href="https://heroku.com/deploy?template=https://github.com/StateVoicesNational/Spoke/tree/v14.1.1">
+
   <img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy">
 </a>
 
 Follow up instructions located [here](docs/HOWTO_HEROKU_DEPLOY.md).
 
-
-**NOTE:** You can upgrade this deployment later for use in a production setting, but keep in mind you will need to migrate data from any prior campaigns.  Thus it is best to upgrade before you start any live campaigns.  This will cost ~$75 ($25 dyno + $50 postgres) a month and should be suitable for production level usage for most organizations. We recommend that if you plan to use Spoke at scale that you use [this link to deploy with a production infrastructure from the start!](https://heroku.com/deploy?template=https://github.com/StateVoicesNational/Spoke/tree/heroku-button-paid)
-
+**NOTE:** You can upgrade this deployment later for use in a production setting, but keep in mind you will need to migrate data from any prior campaigns. Thus it is best to upgrade before you start any live campaigns. This will cost ~$75 ($25 dyno + \$50 postgres) a month and should be suitable for production level usage for most organizations. We recommend that if you plan to use Spoke at scale that you use [this link to deploy with a production infrastructure from the start!](https://heroku.com/deploy?template=https://github.com/StateVoicesNational/Spoke/tree/heroku-button-paid)
 
 ### Other Options for Production Use
 
 You can also [deploy on AWS Lambda.](docs/HOWTO_DEPLOYING_AWS_LAMBDA.md) which is a lot cheaper than Heroku at scale, but requires considerably more technical knowledge to deploy and maintain. We recommend this option for large scale campaigns with tech resources.
 
 Additional guidance:
+
 - [Choosing a set-up for production](docs/EXPLANATION_CHOOSE_A_SETUP.md)
 - [How to hire someone to install Spoke](docs/HOWTO_HIRE_SOMEONE_TO_INSTALL_SPOKE.md)
 - [Option for minimalist deployment](docs/HOWTO_MINIMALIST_DEPLOY.md)

__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();
     });
   });
 });