Cleaning up ensure refresh()

Author: jung-kim

.mochaclicktest.json

@@ -1,5 +1,5 @@
 {
-  "spec": "clicktests/spec.branches.js",
+  "spec": "clicktests/spec.*.js",
   "file": "./source/utils/logger.js",
   "timeout": 20000,
   "bail": true,

clicktests/environment.js

@@ -191,9 +191,6 @@ class Environment {
       file: filename,
       path: repoPath,
     });
-    if (this.page) {
-      await this.ensureRefresh();
-    }
   }
 
   // browser helpers
@@ -284,16 +281,18 @@ class Environment {
   async commit(commitMessage) {
     await this.waitForElementVisible('.files .file .btn-default');
     await this.insert('.staging input.form-control', commitMessage);
+    const postCommitProm = this.setApiListener('/commit', 'POST');
     await this.click('.commit-btn');
-    await this.ensureRefresh();
+    await postCommitProm;
     await this.waitForElementHidden('.files .file .btn-default');
   }
 
   async _createRef(type, name) {
     await this.click('.current ~ .new-ref button.showBranchingForm');
     await this.insert('.ref-icons.new-ref.editing input', name);
+    const createRefProm = type === 'branch' ? this.setApiListener('/branches', 'POST') : this.setApiListener('/tags', 'POST')
     await this.click(`.new-ref ${type === 'branch' ? '.btn-primary' : '.btn-default'}`);
-    await this.ensureRefresh();
+    await createRefProm;
     await this.waitForElementVisible(`.ref.${type}[data-ta-name="${name}"]`);
   }
   createTag(name) {
@@ -314,22 +313,73 @@ class Environment {
       /* ignore */
     }
     await this.waitForElementHidden(`[data-ta-action="${action}"]:not([style*="display: none"])`);
-    await this.ensureRefresh();
+    await this.ensureRedraw();
   }
 
-  async refAction(ref, local, action) {
+  async _refAction(ref, local, action, validateFunc) {
+    if (!this[`_${action}ResponseWatcher`]) {
+      this.page.on('response', async (response) => {
+        const url = response.url();
+        const method = response.request().method();
+
+        if (validateFunc(url, method)) {
+          this.page.evaluate(`ungit._${action}Response = true`);
+        }
+      });
+      this[`_${action}ResponseWatcher`] = true;
+    }
     await this.clickOnNode(`.branch[data-ta-name="${ref}"][data-ta-local="${local}"]`);
     await this.click(`[data-ta-action="${action}"]:not([style*="display: none"]) .dropmask`);
-    await this.ensureRefresh();
     await this._verifyRefAction(action);
+    await this.page.waitForFunction(`ungit._${action}Response`, { polling: 250 });
+    await this.page.evaluate(`ungit._${action}Response = undefined`);
+  }
+
+  async pushRefAction(ref, local) {
+    await this._refAction(ref, local, 'push', (url, method) => {
+      if (method !== 'POST') {
+        return false;
+      }
+      if (url.indexOf('/push') === -1 && url.indexOf('/tags') === -1 && url.indexOf('/branches') === -1) {
+        return false;
+      }
+      return true;
+    });
+  }
+
+  async rebaseRefAction(ref, local) {
+    await this._refAction(ref, local, 'rebase', (url, method) => {
+      return method === 'POST' && url.indexOf('/rebase') >= -1;
+    });
+  }
+
+  async mergeRefAction(ref, local) {
+    await this._refAction(ref, local, 'merge', (url, method) => {
+      return method === 'POST' && url.indexOf('/merge') >= -1;
+    });
   }
+
   async moveRef(ref, targetNodeCommitTitle) {
     await this.clickOnNode(`.branch[data-ta-name="${ref}"]`);
+    if (!this._isMoveResponseWatcherSet) {
+      this.page.on('response', async (response) => {
+        const url = response.url();
+        if (response.request().method() !== 'POST') {
+          return;
+        }
+        if (url.indexOf('/reset') === -1 && url.indexOf('/tags') === -1 && url.indexOf('/branches') === -1) {
+          return;
+        }
+        this.page.evaluate(`ungit._moveEventResponded = true`)
+      });
+      this._isMoveResponseWatcherSet = true;
+    }
     await this.click(
       `[data-ta-node-title="${targetNodeCommitTitle}"] [data-ta-action="move"]:not([style*="display: none"]) .dropmask`
     );
-    await this.ensureRefresh();
     await this._verifyRefAction('move');
+    await this.page.waitForFunction(`ungit._moveEventResponded`);
+    await this.page.evaluate('ungit._moveEventResponded = undefined');
   }
 
   // Stop program event propagation.
@@ -365,6 +415,21 @@ class Environment {
     });
   }
 
+  async ensureRedraw() {
+    if (!this._gitlogResposneWatcher) {
+      this.page.on('response', async (response) => {
+        if (response.url().indexOf('/gitlog') > 0 && response.request().method() === 'GET') {
+          this.page.evaluate('ungit._gitlogResponse = true');
+        }
+      });
+      this._gitlogResposneWatcher = true;
+    }
+    await this.page.evaluate(`ungit._gitlogResponse = undefined`);
+    await this.triggerProgramEvents();
+    await this.page.waitForFunction(`ungit._gitlogResponse`, { polling: 250 });
+    await this.page.waitForFunction(`ungit.__app.content().repository().graph._isLoadNodesFromApiRunning === false`, { polling: 250 });
+  }
+
   // ensure UI refresh is triggered with the latest information at the time of the call.
   async ensureRefresh() {
     logger.info('ensure refresh...');
@@ -421,15 +486,15 @@ class Environment {
   // to true. Use for detect if an API call was made and responded.
   setApiListener(apiPart, method, bodyMatcher = () => true) {
     const randomVariable = `ungit._${Math.floor(Math.random() * 500000)}`;
-    this.page.evaluate(`${randomVariable} = undefined`);
     this.page.on('response', async (response) => {
       if (response.url().indexOf(apiPart) > -1 && response.request().method() === method) {
         if (bodyMatcher(await response.json())) {
           // reponse body matcher is matched, set the value to true
           this.page.evaluate(`${randomVariable} = true`);
         }
       }
-    });
-    return this.page.waitForFunction(`${randomVariable} === true`);
+    }, { polling: 250 });
+    return this.page.waitForFunction(`${randomVariable} === true`)
+      .then(() => this.page.evaluate(`${randomVariable} = undefined`));
   }
 }

clicktests/spec.generic.js

@@ -174,8 +174,8 @@ describe('[GENERIC]', () => {
     await environment.ensureRefresh();
   });
 
-  it('Rebase', () => {
-    return environment.refAction('testbranch', true, 'rebase');
+  it('Rebase', async () => {
+    await environment.rebaseRefAction('testbranch', true);
   });
 
   it('Checkout master with double click', async () => {
@@ -189,8 +189,8 @@ describe('[GENERIC]', () => {
     await environment.ensureRefresh();
   });
 
-  it('Merge', () => {
-    return environment.refAction('testbranch', true, 'merge');
+  it('Merge', async () => {
+    await environment.mergeRefAction('testbranch', true);
   });
 
   it('Revert merge', async () => {

clicktests/spec.remotes.js

@@ -86,13 +86,13 @@ describe('[REMOTES]', () => {
 
   it('Should be possible to create and push a branch', async () => {
     await environment.createBranch('branchinclone');
-    await environment.refAction('branchinclone', true, 'push');
+    await environment.pushRefAction('branchinclone', true);
     await environment.waitForElementVisible('[data-ta-name="origin/branchinclone"]');
   });
 
   it('Should be possible to force push a branch', async () => {
     await environment.moveRef('branchinclone', 'Init Commit 0');
-    await environment.refAction('branchinclone', true, 'push');
+    await environment.pushRefAction('branchinclone', true);
     await environment.waitForElementHidden('[data-ta-action="push"]:not([style*="display: none"])');
   });
 

components/graph/graph.js

@@ -14,6 +14,7 @@ components.register('graph', (args) => new GraphViewModel(args.server, args.repo
 class GraphViewModel extends ComponentRoot {
   constructor(server, repoPath) {
     super();
+    this._isLoadNodesFromApiRunning = false;
     this._markIdeologicalStamp = 0;
     this.repoPath = repoPath;
     this.limit = ko.observable(numberOfNodesPerLoad);
@@ -109,6 +110,7 @@ class GraphViewModel extends ComponentRoot {
   }
 
   async loadNodesFromApi() {
+    this._isLoadNodesFromApiRunning = true;
     ungit.logger.debug('graph.loadNodesFromApi() triggered');
     const nodeSize = this.nodes().length;
     const edges = [];
@@ -148,6 +150,7 @@ class GraphViewModel extends ComponentRoot {
       if (window.innerHeight - this.graphHeight() > 0 && nodeSize != this.nodes().length) {
         this.scrolledToEnd();
       }
+      this._isLoadNodesFromApiRunning = false;
       ungit.logger.debug('graph.loadNodesFromApi() finished');
     }
   }