test: fixes to screenshot test (#362)

src/views/Stopwatch.vue

@@ -17,7 +17,7 @@ div
   hr
 
   div(v-if="loading")
-    span.text-muted.center Loading...
+    span.text-muted.center.aw-loading Loading...
   div.row(v-else)
     div.col-md-12
       h3 Running
@@ -87,15 +87,15 @@ export default {
       return _.groupBy(this.stoppedTimers, e => moment(e.timestamp).format('YYYY-MM-DD'));
     },
   },
-  mounted: function () {
+  mounted: async function () {
     // TODO: List all possible timer buckets
     //this.getBuckets();
 
     // Create default timer bucket
-    this.$aw.ensureBucket(this.bucket_id, 'general.stopwatch', 'unknown');
+    await this.$aw.ensureBucket(this.bucket_id, 'general.stopwatch', 'unknown');
 
     // TODO: Get all timer events
-    this.getEvents();
+    await this.getEvents();
 
     setInterval(() => (this.now = moment()), 1000);
   },

src/views/Timeline.vue

@@ -16,7 +16,7 @@ div
     aw-devonly(reason="Not ready for production, still experimenting")
       aw-calendar(:buckets="buckets")
   div(v-else)
-    h1 Loading...
+    h1.aw-loading Loading...
 </template>
 
 <script>

src/views/settings/LandingPageSettings.vue

@@ -9,7 +9,7 @@ div
         option(:value="'/activity/' + hostname + '/view/'" v-for="hostname in hostnames") Activity ({{hostname}})
         option(value="/timeline") Timeline
       span(v-else)
-        | Loading...
+        .aw-loading Loading...
   small
     | The page to open when opening ActivityWatch, or clicking the logo in the top menu.
 </template>

src/views/settings/Theme.vue

@@ -8,7 +8,7 @@ div
         option(value="light") Light
         option(value="dark") Dark
       span(v-else)
-        | Loading...
+        .aw-loading Loading...
   small
     | Change color theme of the application (you need to change categories colors manually to be suitable with dark mode).
 </template>

src/visualizations/TimelineBarChart.vue

@@ -5,7 +5,7 @@ div(v-if="datasets && datasets.length > 0")
 div.small(v-else-if="datasets === null", style="font-size: 16pt; color: #aaa;")
   | No data
 div.small(v-else, style="font-size: 16pt; color: #aaa;")
-  | Loading...
+  .aw-loading Loading...
 </template>
 
 <script lang="ts">

test/e2e/screenshot.test.js

@@ -15,17 +15,29 @@ async function hide_devonly(t) {
 }
 
 async function waitForLoading(t) {
+  // Waits for all "Loading..." texts to disappear from page.
+  // If it takes longer than 10s, it will fail.
   let $loading;
+  let matches = 1;
+
+  console.log('Waiting for loading to disappear...');
+  const start = new Date();
   do {
-    console.log('Waiting for loading to disappear...');
-    await t.wait(500);
-    $loading = Selector('div', { timeout: 500 }).withText(/Loading[.]{3}/g);
+    $loading = Selector('.aw-loading, text', { timeout: 500 }).withText(/Loading[.]{3}/g);
+
     // Useful for debugging:
-    const matches = await $loading.count;
+    matches = await $loading.count;
     if (matches > 0) {
-      console.log(`Found loading element with contents: ${await $loading.innerText}`);
+      console.log(`Found ${matches} loading element with contents`); //: ${await $loading.innerText}`);
+
+      // If taking >20s, throw an error
+      if (new Date() - start > 20000) {
+        throw new Error('Timeout while waiting for loading to disappear');
+      }
+      await t.wait(500);
     }
-  } while ((await $loading.count) >= 1);
+  } while (matches >= 1);
+
   await t.wait(500); // wait an extra 500ms, just in case a visualization is still rendering
   console.log('Loading is gone!');
 }