From 525cd250b52b3dd468ff42fac1efead206c1377d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 8 Sep 2018 21:28:19 +0100
Subject: [PATCH] fix(tests): use async for fetches instead of setTimeout

---
 .../Components/SilenceModal/LabelNameInput.js | 18 +++--
 .../SilenceModal/LabelNameInput.test.js       | 69 +++++++++----------
 2 files changed, 47 insertions(+), 40 deletions(-)

diff --git a/ui/src/Components/SilenceModal/LabelNameInput.js b/ui/src/Components/SilenceModal/LabelNameInput.js
index cb55c1a30..bedb21361 100644
--- a/ui/src/Components/SilenceModal/LabelNameInput.js
+++ b/ui/src/Components/SilenceModal/LabelNameInput.js
@@ -18,7 +18,9 @@ const LabelNameInput = observer(
     populateNameSuggestions = action(() => {
       const { matcher } = this.props;
 
-      fetch(FormatUnseeBackendURI(`labelNames.json`))
+      this.nameSuggestionsFetch = fetch(
+        FormatUnseeBackendURI(`labelNames.json`)
+      )
         .then(
           result => result.json(),
           err => {
@@ -31,13 +33,18 @@ const LabelNameInput = observer(
             value: value
           }));
         })
-        .catch(err => console.error(err.message));
+        .catch(err => {
+          console.error(err.message);
+          matcher.suggestions.names = [];
+        });
     });
 
     populateValueSuggestions = action(() => {
       const { matcher } = this.props;
 
-      fetch(FormatUnseeBackendURI(`labelValues.json?name=${matcher.name}`))
+      this.valueSuggestionsFetch = fetch(
+        FormatUnseeBackendURI(`labelValues.json?name=${matcher.name}`)
+      )
         .then(
           result => result.json(),
           err => {
@@ -50,7 +57,10 @@ const LabelNameInput = observer(
             value: value
           }));
         })
-        .catch(err => console.error(err.message));
+        .catch(err => {
+          console.error(err.message);
+          matcher.suggestions.values = [];
+        });
     });
 
     onChange = action((newValue, actionMeta) => {
diff --git a/ui/src/Components/SilenceModal/LabelNameInput.test.js b/ui/src/Components/SilenceModal/LabelNameInput.test.js
index 1e54994d5..857de24b1 100644
--- a/ui/src/Components/SilenceModal/LabelNameInput.test.js
+++ b/ui/src/Components/SilenceModal/LabelNameInput.test.js
@@ -79,55 +79,52 @@ describe("<LabelNameInput />", () => {
     expect(matcher.name).toBe("job");
   });
 
-  it("populates suggestions on mount", done => {
+  it("populates suggestions on mount", async () => {
     fetch
       .once(JSON.stringify(["name1", "name2", "name3"]))
       .once(JSON.stringify(["value1", "value2", "value3"]));
-    ShallowLabelNameInput(true);
-    // use timeout since mount will call fetch
-    setTimeout(() => {
-      expect(matcher.suggestions.names).toHaveLength(3);
-      for (let i = 0; i < 3; i++) {
-        expect(matcher.suggestions.names[i]).toMatchObject(
-          MatcherValueToObject(`name${i + 1}`)
-        );
-        expect(matcher.suggestions.values[i]).toMatchObject(
-          MatcherValueToObject(`value${i + 1}`)
-        );
-      }
-      done();
-    }, 100);
+    const tree = ShallowLabelNameInput(true);
+    const instance = tree.instance();
+    await expect(instance.nameSuggestionsFetch).resolves.toBeUndefined();
+    await expect(instance.valueSuggestionsFetch).resolves.toBeUndefined();
+    expect(matcher.suggestions.names).toHaveLength(3);
+    for (let i = 0; i < 3; i++) {
+      expect(matcher.suggestions.names[i]).toMatchObject(
+        MatcherValueToObject(`name${i + 1}`)
+      );
+      expect(matcher.suggestions.values[i]).toMatchObject(
+        MatcherValueToObject(`value${i + 1}`)
+      );
+    }
   });
 
-  it("handles fetch errors when populating suggestions", done => {
+  it("handles fetch errors when populating suggestions", async () => {
     fetch.mockReject("error");
-    ShallowLabelNameInput(true);
-    // use timeout since mount will call fetch
-    setTimeout(() => {
-      expect(matcher.suggestions.names).toHaveLength(0);
-      done();
-    }, 100);
+    const tree = ShallowLabelNameInput(true);
+    const instance = tree.instance();
+    await expect(instance.nameSuggestionsFetch).resolves.toBeUndefined();
+    await expect(instance.valueSuggestionsFetch).resolves.toBeUndefined();
+    expect(matcher.suggestions.names).toHaveLength(0);
   });
 
-  it("handles invalid JSON when populating suggestions", done => {
+  it("handles invalid JSON when populating suggestions", async () => {
     jest.spyOn(console, "error").mockImplementation(() => {});
     fetch.mockResponse("this is not JSON");
-    ShallowLabelNameInput(true);
-    // use timeout since mount will call fetch
-    setTimeout(() => {
-      expect(matcher.suggestions.names).toHaveLength(0);
-      done();
-    }, 100);
+    const tree = ShallowLabelNameInput(true);
+    const instance = tree.instance();
+    await expect(instance.nameSuggestionsFetch).resolves.toBeUndefined();
+    await expect(instance.valueSuggestionsFetch).resolves.toBeUndefined();
+    expect(matcher.suggestions.names).toHaveLength(0);
+    expect(matcher.suggestions.values).toHaveLength(0);
   });
 
-  it("suggestions are emptied on failed fetch", done => {
+  it("suggestions are emptied on failed fetch", async () => {
     fetch.mockReject(new Error("fake error message"));
-    ShallowLabelNameInput(true);
-    // use timeout since mount will call fetch
-    setTimeout(() => {
-      expect(matcher.suggestions.names).toHaveLength(0);
-      done();
-    }, 100);
+    const tree = ShallowLabelNameInput(true);
+    const instance = tree.instance();
+    await expect(instance.nameSuggestionsFetch).resolves.toBeUndefined();
+    await expect(instance.valueSuggestionsFetch).resolves.toBeUndefined();
+    expect(matcher.suggestions.names).toHaveLength(0);
   });
 
   it("doesn't fetch suggestions if value is changed to empty string", () => {