tiny plant panel refactor

webpack/farm_designer/plants/__tests__/plant_panel_test.tsx

@@ -1,5 +1,12 @@
+const mockHistory = jest.fn();
+jest.mock("../../../history", () => ({
+  history: {
+    push: mockHistory
+  }
+}));
+
 import * as React from "react";
-import { PlantPanel, PlantPanelProps } from "../plant_panel";
+import { PlantPanel, PlantPanelProps, EditPlantStatus, EditPlantStatusProps } from "../plant_panel";
 import { shallow } from "enzyme";
 import { FormattedPlantInfo } from "../map_state_to_props";
 
@@ -43,9 +50,38 @@ describe("<PlantPanel/>", () => {
     expect(p.onDestroy).toHaveBeenCalledWith("Plant.0.0");
   });
 
+  it("renders", () => {
+    const wrapper = shallow(<PlantPanel info={info} />);
+    const txt = wrapper.text().toLowerCase();
+    expect(txt).toContain("1 days old");
+    expect(txt).toContain("(12, 34)");
+  });
+
+  it("enters select mode", () => {
+    const wrapper = shallow(<PlantPanel info={info} />);
+    const btn = wrapper.find("button").last();
+    btn.simulate("click");
+    expect(btn.text()).toEqual("Delete multiple");
+    expect(mockHistory).toHaveBeenCalledWith("/app/designer/plants/select");
+  });
+});
+
+describe("<EditPlantStatus />", () => {
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+
+  const fakeProps = (): EditPlantStatusProps => {
+    return {
+      uuid: "Plant.0.0",
+      plantStatus: "planned",
+      updatePlant: jest.fn(),
+    };
+  };
+
   it("changes stage to planted", () => {
     const p = fakeProps();
-    const wrapper = shallow(<PlantPanel {...p} />);
+    const wrapper = shallow(<EditPlantStatus {...p} />);
     wrapper.find("FBSelect").simulate("change", { value: "planted" });
     expect(p.updatePlant).toHaveBeenCalledWith("Plant.0.0", {
       plant_stage: "planted",
@@ -55,18 +91,11 @@ describe("<PlantPanel/>", () => {
 
   it("changes stage to planned", () => {
     const p = fakeProps();
-    const wrapper = shallow(<PlantPanel {...p} />);
+    const wrapper = shallow(<EditPlantStatus {...p} />);
     wrapper.find("FBSelect").simulate("change", { value: "planned" });
     expect(p.updatePlant).toHaveBeenCalledWith("Plant.0.0", {
       plant_stage: "planned",
       planted_at: undefined
     });
   });
-
-  it("renders", () => {
-    const wrapper = shallow(<PlantPanel info={info} />);
-    const txt = wrapper.text().toLowerCase();
-    expect(txt).toContain("1 days old");
-    expect(txt).toContain("(12, 34)");
-  });
 });

webpack/farm_designer/plants/plant_panel.tsx

@@ -37,6 +37,31 @@ export const PLANT_STAGES_DDI = {
   },
 };
 
+export interface EditPlantStatusProps {
+  plantStatus: PlantStage,
+  updatePlant(uuid: string, update: PlantOptions): void;
+  uuid: string;
+}
+
+export function EditPlantStatus(props: EditPlantStatusProps) {
+  const { plantStatus, updatePlant, uuid } = props;
+  return <FBSelect
+    list={PLANT_STAGES}
+    selectedItem={PLANT_STAGES_DDI[plantStatus]}
+    onChange={e => {
+      const plant_stage = e.value as PlantStage;
+      const update: PlantOptions = { plant_stage };
+      switch (plant_stage) {
+        case "planned":
+          update.planted_at = undefined;
+          break;
+        case "planted":
+          update.planted_at = moment().toISOString();
+      }
+      updatePlant(uuid, update);
+    }} />;
+}
+
 export function PlantPanel({ info, onDestroy, updatePlant }: PlantPanelProps) {
   const { name, slug, plantedAt, daysOld, uuid, plantStatus } = info;
   let { x, y } = info;
@@ -96,21 +121,10 @@ export function PlantPanel({ info, onDestroy, updatePlant }: PlantPanelProps) {
         </b>
         <span>
           {updatePlant
-            ? <FBSelect
-              list={PLANT_STAGES}
-              selectedItem={PLANT_STAGES_DDI[plantStatus]}
-              onChange={e => {
-                const plant_stage = e.value as PlantStage;
-                const update: PlantOptions = { plant_stage };
-                switch (plant_stage) {
-                  case "planned":
-                    update.planted_at = undefined;
-                    break;
-                  case "planted":
-                    update.planted_at = moment().toISOString();
-                }
-                updatePlant(uuid, update);
-              }} />
+            ? <EditPlantStatus
+              uuid={uuid}
+              plantStatus={plantStatus}
+              updatePlant={updatePlant} />
             : plantStatus}
         </span>
       </li>