Wait for cached files to load

* Fixed start screen to wait for cache to be loaded prior to
  starting CwC
* Maded various database functions async to support waiting for
  database operations to complete
* Fixed cache.update(), returned promise now waits for all async
  calls within function
* Made cache.loadFiles and cache.addFile async

Author: adamcarheden

src/cache/cache.js

@@ -73,60 +73,66 @@ cwc.Cache.prototype.prepare = async function() {
 /**
  * @param {!string|number} version
  */
-cwc.Cache.prototype.update = function(version) {
+cwc.Cache.prototype.update = async function(version) {
   if (version && this.version <= version) {
     this.log_.info('No updates needed', version, '>=', this.version);
     return;
   }
 
   this.log_.info('Updating Cache to version', this.version);
-  this.database_.clear();
+  await this.database_.clear();
 
+  let promises = [];
   this.log_.info('Loading external frameworks ...');
-  this.loadFiles(cwc.framework.External);
+  promises.push(this.loadFiles(cwc.framework.External));
 
   this.log_.info('Loading internal frameworks ...');
-  this.loadFiles(cwc.framework.Internal);
+  promises.push(this.loadFiles(cwc.framework.Internal));
 
   this.log_.info('Loading Style Sheets ...');
-  this.loadFiles(cwc.framework.StyleSheet);
+  promises.push(this.loadFiles(cwc.framework.StyleSheet));
 
-  this.database_.add('__version__', this.version);
+  promises.push(this.database_.add('__version__', this.version));
+
+  await Promise.all(promises);
 };
 
 
 /**
  * Loads files into cache.
  * @param {!Object} files
  */
-cwc.Cache.prototype.loadFiles = function(files) {
+cwc.Cache.prototype.loadFiles = async function(files) {
+  let promises = [];
   for (let file of Object.keys(files)) {
     if (goog.isString(files[file])) {
-      cwc.utils.Resources.getUriAsText('..' + files[file]).then((content) => {
-        this.addFile(files[file], content);
-      });
+        promises.push(cwc.utils.Resources.getUriAsText('..' + files[file])
+          .then((content) => {
+            return this.addFile(files[file], content);
+          }));
     } else {
       for (let subFile of Object.keys(files[file])) {
-        cwc.utils.Resources.getUriAsText('..' + files[file][subFile]).then(
-          (content) => {
-            this.addFile(files[file][subFile], content);
-        });
+        promises.push(cwc.utils.Resources.getUriAsText('..' +
+          files[file][subFile]).then((content) => {
+            return this.addFile(files[file][subFile], content);
+          }));
       }
     }
   }
+  await Promise.all(promises);
 };
 
 
 /**
  * @param {string!} name
  * @param {string!} content
  */
-cwc.Cache.prototype.addFile = function(name, content) {
+cwc.Cache.prototype.addFile = async function(name, content) {
   if (!content) {
     this.log_.error('Received empty content for', name);
     return;
   }
-  this.database_.add(name, content);
+  await this.database_.add(name, content);
 };
 
 

src/ui/builder.js

@@ -282,7 +282,7 @@ cwc.ui.Builder.prototype.decorateUI = function() {
       this.setProgressFunc('Prepare account support ...', this.prepareAccount);
     }
     this.setProgressFunc('Loading select screen ...', this.showSelectScreen);
-    this.setProgressFunc('Loading cache ...', this.loadCache).then(() => {
+    let startCwC = () => {
       // Done.
       this.setProgress('Starting Coding with Chrome', 100);
       this.loaded = true;
@@ -292,6 +292,12 @@ cwc.ui.Builder.prototype.decorateUI = function() {
       this.events_.clear();
       this.loadingScreen_.hideSecondsAfterStart(3000);
       resolve();
+    };
+    this.setProgressFunc('Loading cache ...', this.loadCache).then(() => {
+      startCwC();
+    }).catch((error) => {
+      this.log_.error('Failed to load cache', error);
+      startCwC();
     });
   });
 };

src/utils/database.js

@@ -108,11 +108,18 @@ cwc.utils.Database.prototype.open = function(config = this.config_) {
  * @param {string} name
  * @param {!string|number} content
  * @param {string=} group
+ * @async
  */
-cwc.utils.Database.prototype.add = function(name, content, group) {
-  this.open().then(() => {
+cwc.utils.Database.prototype.add = async function(name, content, group) {
+  await this.open();
+  await new Promise((resolve, reject) => {
     this.log_.info('Add', name, group ? ' in group ' + group : '');
-    this.getObjectStore_(group)['add'](content, name);
+    let addRequest = this.getObjectStore_(group)['add'](content, name);
+    addRequest.onsuccess = resolve;
+    addRequest.onerror = () => {
+      this.log_.error('Failed to add', name, 'to group', group);
+      reject();
+    };
   });
 };
 
@@ -121,16 +128,24 @@ cwc.utils.Database.prototype.add = function(name, content, group) {
  * Updates given record, or inserts a new record if not already exist.
  * @param {string=} group
  */
-cwc.utils.Database.prototype.clear = function(
+cwc.utils.Database.prototype.clear = async function(
     group = this.defaultObjectStore_) {
-  this.open().then(() => {
-    if (this.existObjectStore_(group)) {
-      this.log_.info('Clear group', group);
-      this.getObjectStore_(group)['clear']();
-    } else {
-      this.log_.warn('ObjectStore', group, 'does not exists!');
-    }
-  });
+  await this.open();
+  if (this.existObjectStore_(group)) {
+    this.log_.info('Clear group', group);
+    let clearRequest = this.getObjectStore_(group)['clear']();
+    await new Promise((resolve) => {
+      clearRequest.onsuccess = () => {
+        resolve();
+      };
+      clearRequest.onerror = () => {
+        this.log_.warn('Failed to clear database');
+        resolve();
+      };
+    });
+  } else {
+    this.log_.warn('ObjectStore', group, 'does not exists!');
+  }
 };
 
 
@@ -163,14 +178,16 @@ cwc.utils.Database.prototype.get = function(name, group) {
   if (!name) {
     this.log_.error('Invalid name', name, '!');
   }
-  return new Promise((resolve, reject) => {
-    let result = this.getObjectStoreReadOnly_(group)['get'](name);
-    result['onsuccess'] = (e) => {
-      resolve(e.target.result);
-    };
-    result['onerror'] = (e) => {
-      reject(e);
-    };
+  return this.open().then(() => {
+    return new Promise((resolve, reject) => {
+      let result = this.getObjectStoreReadOnly_(group)['get'](name);
+      result['onsuccess'] = (e) => {
+        resolve(e.target.result);
+      };
+      result['onerror'] = (e) => {
+        reject(e);
+      };
+    });
   });
 };
 

test/unit_tests/cache/cache_test.js

@@ -0,0 +1,49 @@
+/**
+ * @fileoverview Cache tests.
+ *
+ * @license Copyright 2018 The Coding with Chrome Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @author [email protected] (Adam Carheden)
+ */
+goog.require('cwc.Cache');
+goog.require('cwc.utils.Helper');
+
+describe('Cache', function() {
+  let helper;
+  beforeAll(function() {
+    helper = new cwc.utils.Helper();
+  });
+
+  let cache;
+  beforeEach(function() {
+    cache = new cwc.Cache(helper);
+  });
+
+  it('prepare', function() {
+    expect(typeof cache).toEqual('object');
+  });
+
+  it('addFile', async function(done) {
+    let name = 'hello.txt';
+    let content = 'Hello, World!';
+    await cache.addFile(name, content);
+    expect(await cache.getFile(name)).toEqual(content);
+    done();
+  });
+
+  afterEach(function() {
+    cache = undefined;
+  });
+});