DEV: Make smoke tests more reliable

test/smoke_test.js

@@ -16,8 +16,8 @@ const path = require("path");
 
 (async () => {
   const browser = await puppeteer.launch({
-    // when debugging localy setting headless to "false" can be very helpful
-    headless: true,
+    // when debugging localy setting the SHOW_BROWSER env variable can be very helpful
+    headless: process.env.SHOW_BROWSER === undefined,
     args: ["--disable-local-storage", "--no-sandbox"]
   });
   const page = await browser.newPage();
@@ -209,17 +209,19 @@ const path = require("path");
     });
 
     await exec("upload modal is open", () => {
-      let promise = page.waitForSelector("#filename-input", { visible: true });
+      return page.waitForSelector("#filename-input", { visible: true });
+    });
 
-      promise.then(() => {
-        return page.click(".d-modal-cancel");
+    await exec("upload modal closes", () => {
+      let promise = page.click(".d-modal-cancel");
+
+      promise = promise.then(() => {
+        return page.waitForSelector("#filename-input", { hidden: true });
       });
 
       return promise;
     });
 
-    await page.waitFor(1000);
-
     await exec("submit the topic", () => {
       return page.click(".submit-panel .create");
     });
@@ -250,78 +252,98 @@ const path = require("path");
       );
     });
 
-    await page.waitFor(5000);
+    await exec("submit the reply", () => {
+      let promise = page.click("#reply-control .create");
 
-    await exec("submit the topic", () => {
-      return page.click("#reply-control .create");
+      promise = promise.then(() => {
+        return page.waitForSelector("#reply-control.closed", {
+          visible: false
+        });
+      });
+
+      return promise;
     });
 
-    await assert(
-      "reply is created",
-      () => {
-        let promise = page.waitForSelector(".topic-post");
+    await assert("reply is created", () => {
+      let promise = page.waitForSelector(
+        ".topic-post:not(.staged) #post_2 .cooked",
+        {
+          visible: true
+        }
+      );
 
-        promise = promise.then(() => {
-          return page.evaluate(() => {
-            return document.querySelectorAll(".topic-post").length;
-          });
-        });
+      promise = promise.then(() => {
+        return page.waitForFunction(
+          "document.querySelector('#post_2 .cooked').innerText.includes('I can even write a reply')"
+        );
+      });
 
-        return promise;
-      },
-      output => {
-        return output === 2;
-      }
-    );
+      return promise;
+    });
 
-    await page.waitFor(1000);
+    await exec("wait a little bit", () => {
+      return page.waitFor(5000);
+    });
 
     await exec("open composer to edit first post", () => {
-      return page.click(".post-controls:first-of-type .edit");
+      let promise = page.evaluate(() => {
+        window.scrollTo(0, 0);
+      });
+
+      promise = promise.then(() => {
+        return page.click("#post_1 .post-controls .edit");
+      });
+
+      promise = promise.then(() => {
+        return page.waitForSelector("#reply-control .d-editor-input", {
+          visible: true
+        });
+      });
+
+      return promise;
     });
 
     await exec("update post raw in composer", () => {
-      let promise = page.waitForSelector("#reply-control .d-editor-input", {
-        visible: true
-      });
-
-      promise = promise.then(() => page.waitFor(5000));
+      let promise = page.waitFor(5000);
 
       promise = promise.then(() => {
-        const post = `I edited this post`;
-        return page.type("#reply-control .d-editor-input", post);
+        return page.type(
+          "#reply-control .d-editor-input",
+          "\n\nI edited this post"
+        );
       });
 
       return promise;
     });
 
     await exec("submit the edit", () => {
-      return page.click("#reply-control .create");
-    });
+      let promise = page.click("#reply-control .create");
 
-    await assert(
-      "reply is created",
-      () => {
-        let promise = page.waitForSelector("#reply-control.closed", {
+      promise = promise.then(() => {
+        return page.waitForSelector("#reply-control.closed", {
           visible: false
         });
+      });
 
-        promise = promise.then(() => {
-          return page.waitForSelector("#post_1", { visible: true });
-        });
+      return promise;
+    });
 
-        promise = promise.then(() => {
-          return page.evaluate(() => {
-            return document.querySelector("#post_1 .cooked").textContent;
-          });
-        });
+    await assert("edit is successful", () => {
+      let promise = page.waitForSelector(
+        ".topic-post:not(.staged) #post_1 .cooked",
+        {
+          visible: true
+        }
+      );
 
-        return promise;
-      },
-      output => {
-        return output.includes(`I edited this post`);
-      }
-    );
+      promise = promise.then(() => {
+        return page.waitForFunction(
+          "document.querySelector('#post_1 .cooked').innerText.includes('I edited this post')"
+        );
+      });
+
+      return promise;
+    });
   }
 
   await exec("close browser", () => {