Fix most tests. TODO: Fix the rest

frontend/demo/__tests__/demo_iframe_test.tsx

@@ -1,5 +1,5 @@
 let mockResponse: string | Error = "12345";
-// ...
+
 jest.mock("axios", () => {
   return {
     post: jest.fn(() => {
@@ -14,23 +14,40 @@ jest.mock("axios", () => {
 
 import * as React from "react";
 import { shallow } from "enzyme";
-import { DemoIframe, WAITING_ON_API } from "../demo_iframe";
+import { DemoIframe, WAITING_ON_API, EASTER_EGG } from "../demo_iframe";
 import Axios from "axios";
 
 describe("<DemoIframe/>", () => {
-  it("renders OK", (done) => {
+  function stubOutMqtt(instance: DemoIframe) {
+    const mockMqtt: unknown =
+      jest.fn((): Promise<void> => Promise.resolve());
+    instance.connectMqtt =
+      mockMqtt as typeof instance.connectMqtt;
+    return instance;
+  }
+
+  it("renders OK", async (done) => {
     mockResponse = "yep.";
     const el = shallow<DemoIframe>(<DemoIframe />);
     expect(el.text()).toContain("DEMO THE APP");
-    el
-      .instance()
-      .requestAccount()
-      .then(() => {
-        expect(Axios.post).toHaveBeenCalled();
-        el.update();
-        expect(el.state().stage).toContain(WAITING_ON_API);
-        done();
-      });
+
+    await stubOutMqtt(el.instance()).requestAccount();
+
+    expect(Axios.post).toHaveBeenCalled();
+    el.update();
+    expect(el.state().stage).toContain(WAITING_ON_API);
+    done();
+  });
+
+  it("renders errors", async () => {
+    mockResponse = new Error("Nope.");
+    const el = shallow<DemoIframe>(<DemoIframe />);
+
+    await stubOutMqtt(el.instance()).requestAccount();
+
+    expect(Axios.post).toHaveBeenCalled();
+    el.render();
+    expect(el.state().error).toBe(mockResponse);
   });
 
   it("handles MQTT messages", () => {
@@ -40,27 +57,13 @@ describe("<DemoIframe/>", () => {
     expect(location.assign).toHaveBeenCalledWith("/app/designer/plants");
   });
 
-  it("does something 🤫", () => {
+  it("does something 🤫", async () => {
     mockResponse = "OK!";
     const el = shallow<DemoIframe>(<DemoIframe />);
     Math.round = jest.fn(() => 51);
-    el.instance().requestAccount();
+    el.instance().connectApi();
     expect(Axios.post).toHaveBeenCalled();
     el.render();
-    expect(el.text()).toContain("BIRDS AREN'T REAL");
-  });
-
-  it("renders errors", (done) => {
-    mockResponse = new Error("Nope.");
-    const el = shallow<DemoIframe>(<DemoIframe />);
-    el
-      .instance()
-      .requestAccount()
-      .then(() => {
-        expect(Axios.post).toHaveBeenCalled();
-        el.render();
-        expect(el.state().error).toBe(mockResponse);
-        done();
-      });
+    expect(el.text()).toContain(EASTER_EGG);
   });
 });

frontend/demo/demo_iframe.tsx

@@ -21,11 +21,10 @@ const WS_CONFIG = {
 const SECRET = uuid().split("-").join("");
 const MQTT_CHAN = "demos/" + SECRET;
 const HTTP_URL = "/api/demo_account";
-const EASTER_EGG = "BIRDS AREN'T REAL";
+export const EASTER_EGG = "BIRDS AREN'T REAL";
 export const WAITING_ON_API = "Planting your demo garden...";
 
 // APPLICATION CODE ==============================
-
 export class DemoIframe extends React.Component<{}, State> {
   state: State = {
     client: undefined,
@@ -37,15 +36,12 @@ export class DemoIframe extends React.Component<{}, State> {
 
   connectMqtt = (): Promise<MqttClient> => {
     const client = connect(globalConfig.MQTT_WS, WS_CONFIG);
-    this.setState({ stage: WAITING_ON_API });
     return new Promise(resolve => {
-      this.setState({ stage: "Connecting garden hose..." });
       client.on("connect", () => {
-        this.setState({ stage: "Opening seed packet..." });
         this.setState({ client });
         client.on("message", this.handleMessage);
         client.subscribe(MQTT_CHAN, this.setError);
-        resolve(client);
+        resolve();
       });
     });
   }
@@ -53,6 +49,7 @@ export class DemoIframe extends React.Component<{}, State> {
   connectApi = () => {
     const is51 = (Math.round(Math.random() * 100) == 51);
     is51 && this.setState({ stage: EASTER_EGG });
+
     return axios
       .post<string>(HTTP_URL, { secret: SECRET })
       .then(() => this.setState({ stage: WAITING_ON_API }))
@@ -85,7 +82,6 @@ export class DemoIframe extends React.Component<{}, State> {
   no = () => {
     // tslint:disable-next-line:no-null-keyword
     const message = JSON.stringify(this.state.error, null, 2);
-
     return <pre> {message} </pre>;
   }