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

leomoty · stefanbuck · commit 9ed3ebced394 · 2018-08-29T06:35:00.000+02:00
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
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);
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -65,12 +65,23 @@ async function run(self) {`
`65`	`65`	`clickHandler(matches);`
`66`	`66`	`}`
`67`	`67`
	`68`	`+function observeExpand(self) {`
	`69`	`+ const observer = new MutationObserver(() => {`
	`70`	`+ run(self);`
	`71`	`+ });`
	`72`	`+`
	`73`	`+ for (const el of document.querySelectorAll('.diff-table tbody')) {`
	`74`	`+ observer.observe(el, { childList: true });`
	`75`	`+ }`
	`76`	`+}`
	`77`	`+`
`68`	`78`	`export default class OctoLinkerCore {`
`69`	`79`	`constructor(options) {`
`70`	`80`	`initialize(this, options);`
`71`	`81`	`}`
`72`	`82`
`73`	`83`	`init() {`
`74`	`84`	`injection(run.bind(null, this));`
	`85`	`+ observeExpand(this);`
`75`	`86`	`}`
`76`	`87`	`}`