display on/off for peripheral toggles

src/controls/__tests__/toggle_button_test.tsx

@@ -9,10 +9,48 @@ describe("<ToggleButton/>", function () {
 
   it("calls toggle action", () => {
     const toggle = jest.fn();
-    let node = mount(<ToggleButton
+    let toggleButton = mount(<ToggleButton
       toggleValue={0}
       toggleAction={() => toggle()} />);
-    node.simulate("click");
+    toggleButton.simulate("click");
     expect(toggle.mock.calls.length).toEqual(1);
   });
+
+  it("displays no", () => {
+    let toggleButton = mount(<ToggleButton
+      toggleValue={0}
+      toggleAction={jest.fn()} />);
+    expect(toggleButton.text()).toBe("no");
+  });
+
+  it("displays yes", () => {
+    let toggleButton = mount(<ToggleButton
+      toggleValue={1}
+      toggleAction={jest.fn()} />);
+    expect(toggleButton.text()).toBe("yes");
+  });
+
+  it("displays off", () => {
+    let toggleButton = mount(<ToggleButton
+      toggleValue={0}
+      toggleAction={jest.fn()}
+      noYes={false} />);
+    expect(toggleButton.text()).toEqual("off");
+  });
+
+  it("displays on", () => {
+    let toggleButton = mount(<ToggleButton
+      toggleValue={1}
+      toggleAction={jest.fn()}
+      noYes={false} />);
+    expect(toggleButton.text()).toEqual("on");
+  });
+
+  it("displays 🚫", () => {
+    let toggleButton = mount(<ToggleButton
+      toggleValue={undefined}
+      toggleAction={jest.fn()}
+      noYes={false} />);
+    expect(toggleButton.text()).toEqual("🚫");
+  });
 });

src/controls/interfaces.ts

@@ -92,4 +92,5 @@ export interface ToggleButtonProps {
   toggleAction: () => void;
   toggleValue: number | string | undefined;
   disabled?: boolean | undefined;
+  noYes?: boolean;
 }

src/controls/peripherals/__tests__/peripheral_list_test.tsx

@@ -46,29 +46,32 @@ describe("<PeripheralList/>", function () {
     },
     2: {
       mode: 0,
-      value: 1
+      value: 0
     }
   };
 
   it("renders a list of peripherals, in sorted order", function () {
-    let node = <PeripheralList dispatch={() => { }}
+    let wrapper = mount(<PeripheralList dispatch={() => { }}
       peripherals={peripherals}
-      pins={pins} />;
-    let labels = mount(node).find("label");
+      pins={pins} />);
+    let labels = wrapper.find("label");
+    let buttons = wrapper.find("button");
     let first = labels.first();
     expect(first.text()).toBeTruthy();
     expect(first.text()).toEqual("GPIO 2");
+    expect(buttons.first().text()).toEqual("off");
     let last = labels.last();
     expect(last.text()).toBeTruthy();
     expect(last.text()).toEqual("GPIO 13 - LED");
+    expect(buttons.last().text()).toEqual("on");
   });
 
   it("toggles pins", () => {
     let { mock } = devices.current.togglePin as jest.Mock<{}>;
-    let node = <PeripheralList dispatch={() => { }}
+    let wrapper = mount(<PeripheralList dispatch={() => { }}
       peripherals={peripherals}
-      pins={pins} />;
-    let toggle = mount(node).find("ToggleButton");
+      pins={pins} />);
+    let toggle = wrapper.find("ToggleButton");
     toggle.first().simulate("click");
     expect(mock.calls.length).toEqual(1);
     expect(mock.calls[0][0].pin_number).toEqual(2);

src/controls/peripherals/peripheral_list.tsx

@@ -20,9 +20,10 @@ export function PeripheralList(props: PeripheralListProps) {
         <Col xs={4}>
           <ToggleButton
             toggleValue={value}
-            toggleAction={() => p.body.pin && pinToggle(p.body.pin)} />
+            toggleAction={() => p.body.pin && pinToggle(p.body.pin)}
+            noYes={false} />
         </Col>
-      </Row>
+      </Row>;
     })}
-  </div>
-};
+  </div>;
+}

src/controls/toggle_button.tsx

@@ -1,16 +1,20 @@
 import * as React from "react";
-import * as i18next from "i18next";
+import { t } from "i18next";
 import { ToggleButtonProps } from "./interfaces";
+import { isUndefined } from "util";
 
 export class ToggleButton extends React.Component<ToggleButtonProps, {}> {
   caption() {
+    let useNoYes = isUndefined(this.props.noYes) ? true : this.props.noYes;
+    let noOff = useNoYes ? t("no") : t("off");
+    let yesOn = useNoYes ? t("yes") : t("on");
     let captions: { [s: string]: string | undefined } = {
-      "0": i18next.t("no"),
-      "false": i18next.t("no"),
-      "off": i18next.t("no"),
-      "1": i18next.t("yes"),
-      "true": i18next.t("yes"),
-      "on": i18next.t("yes"),
+      "0": noOff,
+      "false": noOff,
+      "off": noOff,
+      "1": yesOn,
+      "true": yesOn,
+      "on": yesOn,
       "undefined": "🚫",
       "-1": "🚫"
     };