diff --git a/__test__/containers/CampaignList.test.js b/__test__/containers/CampaignList.test.js
index a81702f13..e150af421 100644
--- a/__test__/containers/CampaignList.test.js
+++ b/__test__/containers/CampaignList.test.js
@@ -3,14 +3,25 @@
*/
import React from "react";
import { mount } from "enzyme";
+import { render, screen, waitForElementToBeRemoved, waitFor, cleanup } from "@testing-library/react";
+import userEvent from "@testing-library/user-event"
import { AdminCampaignList } from "../../src/containers/AdminCampaignList";
-import { TIMEZONE_SORT } from "../../src/components/AdminCampaignList/SortBy";
import { StyleSheetTestUtils } from "aphrodite";
+import { act } from 'react-dom/test-utils';
+
+// 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 +121,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 +145,46 @@ 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(
-
- );
- wrapper.setState({
- sortBy: TIMEZONE_SORT.value
- });
- expect(wrapper.containsMatchingElement("Timezone")).toBeTruthy();
+ act(() => {
+ render(
+
+ );
+ })
+
+ act(() => {
+ userEvent.click(
+ screen.getByRole(
+ 'button',
+ {name: /sort: created, newest/i}
+ ), { skipHover: true });
+ })
+
+ 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(
-
- );
- expect(wrapper.containsMatchingElement("Timezone")).toBeFalsy();
+ act(() => {
+ render(
+
+ );
+ })
+ const timezoneButton = screen.queryByText('columnheader', { name: /timezone/i });
+ expect(timezoneButton).toBeNull();
});
});
});