read sensor button cleanup

frontend/controls/sensors/__tests__/sensor_list_test.tsx

@@ -1,9 +1,5 @@
-const mockDevice = {
-  readPin: jest.fn(() => { return Promise.resolve(); })
-};
-jest.mock("../../../device", () => ({
-  getDevice: () => (mockDevice)
-}));
+const mockDevice = { readPin: jest.fn(() => Promise.resolve()) };
+jest.mock("../../../device", () => ({ getDevice: () => mockDevice }));
 
 import * as React from "react";
 import { mount } from "enzyme";
@@ -61,23 +57,23 @@ describe("<SensorList/>", function () {
       pin_mode
     });
 
-  it("reads pins", () => {
+  it("reads sensors", () => {
     const wrapper = mount(<SensorList {...fakeProps()} />);
-    const toggle = wrapper.find("button");
-    toggle.first().simulate("click");
+    const readSensorBtn = wrapper.find("button");
+    readSensorBtn.first().simulate("click");
     expect(mockDevice.readPin).toHaveBeenCalledWith(expectedPayload(51, 1));
-    toggle.last().simulate("click");
+    readSensorBtn.last().simulate("click");
     expect(mockDevice.readPin).toHaveBeenLastCalledWith(expectedPayload(50, 0));
     expect(mockDevice.readPin).toHaveBeenCalledTimes(2);
   });
 
-  it("pins toggles are disabled", () => {
+  it("sensor reading is disabled", () => {
     const p = fakeProps();
     p.disabled = true;
     const wrapper = mount(<SensorList {...p} />);
-    const toggle = wrapper.find("button");
-    toggle.first().simulate("click");
-    toggle.last().simulate("click");
+    const readSensorBtn = wrapper.find("button");
+    readSensorBtn.first().simulate("click");
+    readSensorBtn.last().simulate("click");
     expect(mockDevice.readPin).not.toHaveBeenCalled();
   });
 });

frontend/controls/sensors/sensor_list.tsx

@@ -13,27 +13,35 @@ interface SensorReadingDisplayProps {
   mode: number;
 }
 
+interface CalcStyleProps {
+  value: number;
+  mode: number;
+}
+
+const calcIndicatorStyle = ({ value, mode }: CalcStyleProps) => ({
+  left: `calc(${
+    (mode
+      ? value / 1024 * 0.95 // analog
+      : value / 2) // digital
+    * 100}%)`,
+  width: `${mode ? 5 : 50}%`
+});
+
+const calcValueStyle = ({ value, mode }: CalcStyleProps) => ({
+  marginLeft: `${mode
+    ? `${value > 500 ? -3.5 : 1.5}rem` // analog
+    : "7rem"}`, // digital
+  color: `${mode ? "" : "white"}`
+});
+
 const SensorReadingDisplay =
   ({ label, value, mode }: SensorReadingDisplayProps) => {
     const moistureSensor = label.toLowerCase().includes("moisture") ?
       "moisture-sensor" : "";
     return <div className={`sensor-reading-display ${moistureSensor}`}>
       {isNumber(value) && value >= 0 &&
-        <div className="indicator"
-          style={{
-            left: `calc(${
-              (mode
-                ? value / 1024 * 0.95 // analog
-                : value / 2) // digital
-              * 100}%)`,
-            width: `${mode ? 5 : 50}%`
-          }}>
-          <span style={{
-            marginLeft: `${mode
-              ? `${value > 500 ? -3.5 : 1.5}rem`
-              : "7rem"}`,
-            color: `${mode ? "" : "white"}`
-          }}>
+        <div className="indicator" style={calcIndicatorStyle({ value, mode })}>
+          <span style={calcValueStyle({ value, mode })}>
             {value}
           </span>
         </div>}
@@ -42,11 +50,11 @@ const SensorReadingDisplay =
 
 export const SensorList = (props: SensorListProps) =>
   <div className="sensor-list">
-    {sortResourcesById(props.sensors).map(p => {
-      const { label, mode, pin } = p.body;
+    {sortResourcesById(props.sensors).map(sensor => {
+      const { label, mode, pin } = sensor.body;
       const pinNumber = (isNumber(pin) && isFinite(pin)) ? pin : -1;
       const value = (props.pins[pinNumber] || { value: undefined }).value;
-      return <Row key={p.uuid + p.body.id}>
+      return <Row key={sensor.uuid}>
         <Col xs={3}>
           <label>{label}</label>
         </Col>
@@ -57,15 +65,31 @@ export const SensorList = (props: SensorListProps) =>
           <SensorReadingDisplay label={label} value={value} mode={mode} />
         </Col>
         <Col xs={2}>
-          <button
-            className={"fb-button gray"}
-            disabled={props.disabled}
-            title={t(`read ${label} sensor`)}
-            onClick={() =>
-              readPin(pinNumber, `pin${pin}`, mode as ALLOWED_PIN_MODES)}>
-            {t("read sensor")}
-          </button>
+          <ReadSensorButton
+            disabled={!!props.disabled}
+            sensorLabel={label}
+            pinNumber={pinNumber}
+            mode={mode} />
         </Col>
       </Row>;
     })}
   </div>;
+
+interface ReadSensorButtonProps {
+  disabled: boolean;
+  sensorLabel: string;
+  pinNumber: number;
+  mode: number;
+}
+
+const ReadSensorButton = (props: ReadSensorButtonProps) => {
+  const { disabled, sensorLabel, pinNumber, mode } = props;
+  return <button
+    className={"fb-button gray"}
+    disabled={disabled}
+    title={t(`read ${sensorLabel} sensor`)}
+    onClick={() =>
+      readPin(pinNumber, `pin${pinNumber}`, mode as ALLOWED_PIN_MODES)}>
+    {t("read sensor")}
+  </button>;
+};

frontend/devices/__tests__/actions_test.ts

@@ -11,6 +11,7 @@ const mockDevice = {
   execSequence: jest.fn(() => Promise.resolve()),
   resetMCU: jest.fn(() => Promise.resolve()),
   togglePin: jest.fn(() => Promise.resolve()),
+  readPin: jest.fn(() => Promise.resolve()),
   home: jest.fn(() => Promise.resolve()),
   sync: jest.fn(() => Promise.resolve()),
   readStatus: jest.fn(() => Promise.resolve()),
@@ -236,6 +237,16 @@ describe("pinToggle()", function () {
   });
 });
 
+describe("readPin()", function () {
+  it("calls readPin", async () => {
+    await actions.readPin(1, "label", 0);
+    expect(mockDevice.readPin).toHaveBeenCalledWith({
+      pin_number: 1, label: "label", pin_mode: 0,
+    });
+    expect(success).not.toHaveBeenCalled();
+  });
+});
+
 describe("homeAll()", function () {
   it("calls home", async () => {
     await actions.homeAll(100);

frontend/devices/actions.ts

@@ -326,7 +326,9 @@ export function pinToggle(pin_number: number) {
     .then(noop, commandErr(noun));
 }
 
-export function readPin(pin_number: number, label: string, pin_mode: ALLOWED_PIN_MODES) {
+export function readPin(
+  pin_number: number, label: string, pin_mode: ALLOWED_PIN_MODES
+) {
   const noun = "Read pin";
   return getDevice()
     .readPin({ pin_number, label, pin_mode })