tiny plant panel refactor
This commit is contained in:
parent
faf756ca3c
commit
333cd6a4f4
|
@ -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)");
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue