Rerun Octo-Linker when blobs are expanded (OctoLinker#505)

This is a possible implementation for OctoLinker#453, we observe the DOM, if any new `.blob-expanded` nodes are added, then the extension is rerun. As far as testing goes, I will wait for feedback, I added a single test that clickes the specific `.js-expand` element and then tries to process a single line from it. ### Checklist: - [ ] If this PR is a new feature, please provide at least one example link - [x] Make sure all of the significant new logic is covered by tests
DrawTrustDraw · Aug 29, 2018 · 9ed3ebc · 9ed3ebc
1 parent 38dd5c8
commit 9ed3ebc
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/e2e/automated.test.js b/e2e/automated.test.js
@@ -69,4 +69,19 @@ describe('End to End tests', () => {
       });
     });
   });
+
+  describe('expanded blob', () => {
+    it('should resolve after appending new blobs', async () => {
+      const url =
+        'https://github.com/OctoLinker/OctoLinker/pull/451/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2';
+      const selector = '[data-line-number="45"] + td .octolinker-link';
+      const expandSelector = '[data-right-range="44-55"]';
+
+      await page.goto(url);
+
+      await page.click(expandSelector);
+
+      await page.waitForSelector(selector);
+    });
+  });
 });
diff --git a/packages/core/octo-linker.js b/packages/core/octo-linker.js
@@ -65,12 +65,23 @@ async function run(self) {
   clickHandler(matches);
 }
 
+function observeExpand(self) {
+  const observer = new MutationObserver(() => {
+    run(self);
+  });
+
+  for (const el of document.querySelectorAll('.diff-table tbody')) {
+    observer.observe(el, { childList: true });
+  }
+}
+
 export default class OctoLinkerCore {
   constructor(options) {
     initialize(this, options);
   }
 
   init() {
     injection(run.bind(null, this));
+    observeExpand(this);
   }
 }