Fix cause of flakiness in `observeElementSize` test

 - Wait for a specific event, the observer callback being called, when
   possible. This avoids a possible issue where
   `ResizeObserver`/`MutationObserver` callbacks would not be delivered
   within the fixed time
 - Fix a typo in the name of the test file

Original issue report: https://hypothes-is.slack.com/archives/C1M8NH76X/p1574692275043700

src/sidebar/util/test/observer-element-size-test.js → src/sidebar/util/test/observe-element-size-test.js

@@ -2,9 +2,28 @@
 
 const observeElementSize = require('../observe-element-size');
 
+/**
+ * Wait for a condition to become true.
+ *
+ * @param {() => boolean} callback
+ */
+function waitFor(callback) {
+  return new Promise(resolve => {
+    const timer = setInterval(() => {
+      if (callback()) {
+        clearInterval(timer);
+        resolve();
+      }
+    }, 0);
+  });
+}
+
 /**
  * Give MutationObserver, ResizeObserver etc. a chance to deliver their
  * notifications.
+ *
+ * This waits for a fixed amount of time. If you can wait for a specific event
+ * using `waitFor`, you should do so.
  */
 function waitForObservations() {
   return new Promise(resolve => setTimeout(resolve, 1));
@@ -40,8 +59,7 @@ describe('observeElementSize', () => {
       startObserving();
 
       content.innerHTML = '<p>different content</p>';
-      await waitForObservations();
-      assert.called(sizeChanged);
+      await waitFor(() => sizeChanged.called);
 
       stopObserving();
       sizeChanged.reset();
@@ -84,8 +102,7 @@ describe('observeElementSize', () => {
         // Change the content height, which is not directly observed.
         content.style.minHeight = '500px';
         triggerCheck();
-        await waitForObservations();
-        assert.called(sizeChanged);
+        await waitFor(() => sizeChanged.called);
 
         sizeChanged.reset();
         stopObserving();