Give/Home Test Coverage (#1624)

* SYS-2631 Testing the right panel

* SYS-2631 testing the home directory

* SYS-2631 testing AddSavedPayment

* rebased and fixed tests

imports/pages/give/home/Layout.js

@@ -6,7 +6,7 @@ import Activity from "./Activity";
 import Schedules from "./Schedules";
 import SavedPayments from "./SavedPayments";
 
-const ACTIVITY_QUERY = gql`
+export const ACTIVITY_QUERY = gql`
   query GivingDashboard($filters: [String]!) {
     scheduledTransactions(cache: false) {
       id

imports/pages/give/home/RightPanel.js

@@ -1,5 +1,5 @@
 
-// flow
+// @flow
 
 import moment from "moment";
 
@@ -12,16 +12,21 @@ import withData from "./givingSummaryEnhancer";
 import YTDGraph from "./YTDMetrics";
 import Progress from "./FundBreakdown";
 
-const start = moment().year();
+export const start = moment().year();
 
-const YEARS = [{ value: start, label: start }];
+export const YEARS = [{ value: start, label: start }];
 
 for (const i of Array(9).keys()) {
   YEARS.push({ value: start - (i + 1), label: start - (i + 1) });
 }
 
+type IRightPanel = {
+  loading: boolean,
+  data: Object,
+  changeYear: Function,
+};
 
-export default withData(({ loading, data, changeYear }) => (
+export const RightPanel = ({ loading, data, changeYear }: IRightPanel) => (
   <div className="scrollable locked-ends locked-sides background--primary soft-double-sides soft-double-top">
     {/* spacer */}
     <div className="push-double-top display-inline-block soft-double-ends soft-double-right one-whole">
@@ -69,5 +74,6 @@ export default withData(({ loading, data, changeYear }) => (
       )}
     </div>
   </div>
-));
+);
 
+export default withData(RightPanel);

imports/pages/give/home/__tests__/GivingSummary.js

@@ -1,7 +1,7 @@
 
 import { GivingSummary, Display } from "../GivingSummary";
-import { mount } from "enzyme";
-import { mountToJson } from "enzyme-to-json";
+import { shallow, mount } from "enzyme";
+import { shallowToJson, mountToJson } from "enzyme-to-json";
 
 //mocked because already tested
 jest.mock("./../../../../components/cards/cards.YearToDate.js", () => () => <div /> );
@@ -38,8 +38,12 @@ describe("GivingSummary", () => {
     expect(mountToJson(component)).toMatchSnapshot();
   });
   it("should render nothing if the breakpoints don't match", () => {
-    const component = mount(<GivingSummary breakpoints={["lap-and-up"]} />);
-    expect(mountToJson(component)).toMatchSnapshot();
+    const component = shallow(<GivingSummary breakpoints={["lap-and-up"]} />);
+    expect(shallowToJson(component)).toMatchSnapshot();
+  });
+  it("should render if the breakpoints don't match", () => {
+    const component = shallow(<GivingSummary breakpoints={["lap"]} />);
+    expect(shallowToJson(component)).toMatchSnapshot();
   });
   it("should pass correct props to graph with data", () => {
     const component = mount(generateComponent({data: data}));

imports/pages/give/home/__tests__/Layout.js

@@ -0,0 +1,11 @@
+
+import { ACTIVITY_QUERY } from "../Layout";
+import { mount } from "enzyme";
+import { mountToJson } from "enzyme-to-json";
+
+describe("giving homepage layout", () => {
+
+  it("should have a consistent data shape", () => {
+    expect(ACTIVITY_QUERY).toMatchSnapshot();
+  });
+});

imports/pages/give/home/__tests__/RightPanel.js

@@ -0,0 +1,67 @@
+import { mount } from "enzyme";
+import { mountToJson } from "enzyme-to-json";
+import { reset, startBuffering } from "aphrodite/lib/inject";
+
+import { RightPanel, start, YEARS } from "../RightPanel";
+
+jest.mock("../YTDMetrics", () => jest.fn(() => <div id="YTDMetrics" />));
+
+const mockData = {
+  accounts: {
+    'General Fund': 66,
+    'Christmas Offering': 0,
+    'Step Up Fund': 0
+  },
+  total: 66,
+  chartData: [
+    { month: 'January', amount: 0, tick: 'J' },
+    { month: 'February', amount: 11, tick: 'F' },
+    { month: 'March', amount: 0, tick: 'M' },
+    { month: 'April', amount: 9, tick: 'A' },
+    { month: 'May', amount: 18, tick: 'M' },
+    { month: 'June', amount: 7, tick: 'J' },
+    { month: 'July', amount: 6, tick: 'J' },
+    { month: 'August', amount: 5, tick: 'A' },
+    { month: 'September', amount: 4, tick: 'S' },
+    { month: 'October', amount: 3, tick: 'O' },
+    { month: 'November', amount: 2, tick: 'N' },
+    { month: 'December', amount: 1, tick: 'D' }
+  ]
+};
+
+describe("RightPanel Layout", () => {
+
+  beforeEach(() => {
+    reset();
+    startBuffering();
+  });
+
+  afterEach(() => {
+    reset();
+  });
+
+  const generateComponent = (additionalProps) =>
+    <RightPanel
+      {...additionalProps}
+      data={mockData}
+      changeYear={() => jest.fn()}
+    />;
+
+  it("should be the current year", () => {
+    expect(start).toBe(new Date().getFullYear())
+  });
+
+  it("should provide an array of 10 years", () => {
+    expect(YEARS.length).toBe(10);
+  });
+
+  it("should render a loading state", () => {
+    const tree = mount(generateComponent({ loading: true }));
+    expect(mountToJson(tree)).toMatchSnapshot();
+  });
+
+  it("should render with data", () => {
+    const tree = mount(generateComponent({ loading: false }));
+    expect(mountToJson(tree)).toMatchSnapshot();
+  });
+});

imports/pages/give/home/__tests__/SavedPayments.js

@@ -29,6 +29,22 @@ describe ("Saved Payments List", () => {
     expect(mountToJson(component)).toMatchSnapshot();
   });
 
+  it ("should render a loading state", () => {
+    const mockLoadingData = {
+      loading: true,
+    };
+
+    const component = mount(<SavedPaymentsList payments={mockLoadingData} />);
+    expect(mountToJson(component)).toMatchSnapshot();
+  });
+
+  it("should render without saved payments", () => {
+    const mockEmptyData = { };
+
+    const component = mount(<SavedPaymentsList payments={mockEmptyData} />);
+    expect(mountToJson(component)).toMatchSnapshot();
+  });
+
   it ("should render properly with data", () => {
     const component = mount(generateComponent());
     expect(mountToJson(component)).toMatchSnapshot();

imports/pages/give/home/__tests__/__snapshots__/GivingSummary.js.snap

@@ -161,13 +161,8 @@ exports[`GivingSummary should pass correct props to graph with data 1`] = `
 </Display>
 `;
 
-exports[`GivingSummary should render nothing if the breakpoints don't match 1`] = `
-<GivingSummary
-  breakpoints={
-    Array [
-      "lap-and-up",
-    ]
-  } />
-`;
+exports[`GivingSummary should render if the breakpoints don't match 1`] = `<MeteorDataContainer />`;
+
+exports[`GivingSummary should render nothing if the breakpoints don't match 1`] = `null`;
 
 exports[`GivingSummary should render with minimal props 1`] = `<Display />`;