Link npm dependecies in Pull Request (#488)

* Add indicator to distinguish between full and diff blobs * Add getter for blobs * Add ability to fetch full blob * Add ability to fetch parent blob * Allow to set global flag when building RegExp * Update jest so I can use toHaveBeenNthCalledWith * Fix "localStorage is not available for opaque origins" error by defining a testUrl * Call linker insert callback to apply links to parent blob as well * Fetch raw blob for current and parent file to support linking in PR diff view for json files * Tweak plugins * Add coverage folder to eslint ignore * Add E2E tests for diff view
OctoLinker · Aug 10, 2018 · 8b109ff · 8b109ff
1 parent 69a64ba
commit 8b109ff
Show file tree

Hide file tree

Showing 23 changed files with 691 additions and 372 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,4 @@
 dist/
 packages/**/node_modules
-e2e/fixtures/
+e2e/fixtures/
+coverage/
diff --git a/_jestsetup.js b/_jestsetup.js
@@ -1,8 +1,11 @@
 import fs from 'fs';
 import path from 'path';
+import fetchMock from 'jest-fetch-mock';
 
 jest.mock('path');
 
+global.fetch = fetchMock;
+
 global.chrome = {};
 global.chrome.runtime = {
   sendMessage: jest.fn(),

diff --git a/e2e/automated.test.js b/e2e/automated.test.js
@@ -1,8 +1,7 @@
 const fixtures = require('./fixtures.json'); // eslint-disable-line import/no-unresolved
+const diffFixtures = require('./diff-fixtures.json'); // eslint-disable-line import/no-unresolved
 
-async function executeTest(url, lineNumber, targetUrl) {
-  const selector = `#LC${lineNumber} .octolinker-link`;
-
+async function executeTest(url, targetUrl, selector) {
   await page.goto(url);
 
   await page.waitForSelector(selector);
@@ -17,9 +16,27 @@ async function executeTest(url, lineNumber, targetUrl) {
 }
 
 describe('End to End tests', () => {
-  fixtures.forEach(({ url, content, lineNumber, targetUrl }) => {
-    it(`resolves ${content} to ${targetUrl}`, async () => {
-      await executeTest(url, lineNumber, targetUrl);
+  describe('single blob', () => {
+    fixtures.forEach(({ url, content, lineNumber, targetUrl }) => {
+      it(`resolves ${content} to ${targetUrl}`, async () => {
+        await executeTest(url, targetUrl, `#LC${lineNumber} .octolinker-link`);
+      });
+    });
+  });
+
+  describe('diff view', () => {
+    diffFixtures.forEach(({ url, targetUrl }) => {
+      it(
+        `resolves ${url} to ${targetUrl}`,
+        async () => {
+          await executeTest(
+            url,
+            targetUrl,
+            '.selected-line.blob-code .octolinker-link',
+          );
+        },
+        10000,
+      );
     });
   });
 });
diff --git a/e2e/diff-fixtures.json b/e2e/diff-fixtures.json
@@ -0,0 +1,10 @@
+[
+  {
+    "url": "https://github.com/OctoLinker/OctoLinker/commit/b97dfbfdbf3dee5f4836426e6dac6d6f473461db?diff=split#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R24",
+    "targetUrl": "https://github.com/eslint/eslint"
+  },
+  {
+    "url": "https://github.com/OctoLinker/OctoLinker/commit/b97dfbfdbf3dee5f4836426e6dac6d6f473461db?diff=split#diff-b9cfc7f2cdf78a7f4b91a753d10865a2L23",
+    "targetUrl": "https://github.com/eslint/eslint"
+  }
+]
diff --git a/e2e/generate-fixtures-json.js b/e2e/generate-fixtures-json.js
@@ -67,8 +67,6 @@ function findTests(contents) {
   const contents = await readContent(files);
   const out = findTests(contents);
 
-  console.log(out); // eslint-disable-line
-
   fs.writeFileSync(
     path.join(__dirname, 'fixtures.json'),
     JSON.stringify(out, null, ' '),

diff --git a/jest.config.js b/jest.config.js
@@ -4,6 +4,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.css$': '<rootDir>/__mocks__/styleMock.js',
   },
+  testURL: 'http://localhost/',
   coverageDirectory: './coverage/',
   collectCoverage: true,
 };
diff --git a/package.json b/package.json
@@ -41,7 +41,8 @@
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-prettier": "^2.3.1",
     "eslint-plugin-react": "^7.4.0",
-    "jest": "^22.0.6",
+    "jest": "^23.4.2",
+    "jest-fetch-mock": "^1.6.5",
     "jest-puppeteer": "^3.2.1",
     "json": "^9.0.4",
     "json-loader": "^0.5.7",

diff --git a/packages/blob-reader/__snapshots__/test.js.snap b/packages/blob-reader/__snapshots__/test.js.snap
@@ -28,6 +28,52 @@ Object {
 }
 `;
 
+exports[`blob-reader blob fetchBlob fetch raw blob and update blob.lines property 1`] = `
+Array [
+  Object {
+    "lineNumber": 1,
+    "value": "// Most popular rabbit names",
+  },
+  Object {
+    "lineNumber": 2,
+    "value": "",
+  },
+  Object {
+    "lineNumber": 3,
+    "value": "Thumper",
+  },
+  Object {
+    "lineNumber": 4,
+    "value": "Daisy",
+  },
+]
+`;
+
+exports[`blob-reader diff fetchParentBlob fetch raw blob and update blob.lines property 1`] = `
+Array [
+  Object {
+    "lineNumber": 1,
+    "value": "// Most popular rabbit names",
+  },
+  Object {
+    "lineNumber": 2,
+    "value": "",
+  },
+  Object {
+    "lineNumber": 3,
+    "value": "Thumper",
+  },
+  Object {
+    "lineNumber": 4,
+    "value": "Daisy",
+  },
+  Object {
+    "lineNumber": 5,
+    "value": "Lily",
+  },
+]
+`;
+
 exports[`blob-reader diff split 1st line 1`] = `
 Object {
   "lineNumber": 1,

diff --git a/packages/blob-reader/blob.js b/packages/blob-reader/blob.js
@@ -1,10 +1,24 @@
-import { getPath, readLines } from './helper';
+import ghParse from 'github-url-parse';
+import { getPath, readLines, getParentSha } from './helper';
+
+async function fetchRaw({ user, repo, branch, path }) {
+  const response = await fetch(
+    `https://raw.githubusercontent.com/${user}/${repo}/${branch}/${path}`,
+  );
+
+  const raw = await response.text();
+  return raw
+    .split('\n')
+    .map((value, lineNumber) => ({ value, lineNumber: lineNumber + 1 }));
+}
 
 export default class Blob {
   constructor(el) {
     this.el = el;
     this.path = getPath(el);
     this.lines = readLines(el);
+    this.isDiff =
+      this.lines.filter(line => line.addition || line.deletion).length > 0;
   }
 
   toString() {
@@ -18,4 +32,19 @@ export default class Blob {
       return {};
     }
   }
+
+  async fetchBlob() {
+    const { user, repo, branch, path } = ghParse(
+      `https://github.com${this.path}`,
+    );
+    this.lines = await fetchRaw({ user, repo, branch, path });
+  }
+
+  async fetchParentBlob() {
+    const { user, repo, path } = ghParse(`https://github.com${this.path}`);
+    const branch = getParentSha();
+
+    this.parent = new Blob(this.el);
+    this.parent.lines = await fetchRaw({ user, repo, branch, path });
+  }
 }
diff --git a/packages/blob-reader/helper.js b/packages/blob-reader/helper.js
@@ -27,6 +27,11 @@ function isGist() {
   return !!document.querySelector('#gist-pjax-container');
 }
 
+function getParentSha() {
+  const el = document.querySelector('.sha-block .sha[data-hotkey]');
+  return el ? el.textContent : null;
+}
+
 function getPath(el) {
   // When current page is a diff view get path from "View" button
   let ret = $('.file-actions a', el.parentElement.parentElement)
@@ -153,4 +158,4 @@ function readLines(el) {
     .filter(line => !!line);
 }
 
-export { getPath, getBlobWrapper, readLines };
+export { getPath, getBlobWrapper, readLines, getParentSha };
diff --git a/packages/blob-reader/index.js b/packages/blob-reader/index.js
@@ -12,7 +12,7 @@ export default class BlobReader {
     return this;
   }
 
-  forEach(fn) {
-    this._blobs.forEach(fn);
+  getBlobs() {
+    return this._blobs;
   }
 }
diff --git a/packages/blob-reader/package.json b/packages/blob-reader/package.json
@@ -6,6 +6,7 @@
   "license": "MIT",
   "main": "./index.js",
   "dependencies": {
+    "github-url-parse": "^0.1.0",
     "jquery": "^3.2.1"
   }
 }
diff --git a/packages/blob-reader/test.js b/packages/blob-reader/test.js
@@ -1,8 +1,10 @@
 import BlobReader from './index.js';
+import Blob from './blob.js';
 
 describe('blob-reader', () => {
   afterEach(() => {
     fixture.cleanup();
+    fetch.resetMocks();
   });
 
   describe('returned values object', () => {
@@ -13,7 +15,7 @@ describe('blob-reader', () => {
         '/packages/blob-reader/fixtures/github.com/blob/89f13651df126efdb4f1e3ae40183c9fdccdb4d3.html',
       );
       const reader = new BlobReader();
-      [blob] = reader.read()._blobs;
+      [blob] = reader.read().getBlobs();
     });
 
     describe('contains blob path', () => {
@@ -29,7 +31,7 @@ describe('blob-reader', () => {
         );
         const reader = new BlobReader();
 
-        expect(reader.read()._blobs[0].path).toBe(
+        expect(reader.read().getBlobs()[0].path).toBe(
           '/OctoLinker/testrepo/blob/9981d1a99ef8fff1f569c2ae24b136d5a0275132/sourcereader/popular-cat-names.js',
         );
       });
@@ -40,7 +42,7 @@ describe('blob-reader', () => {
         );
         const reader = new BlobReader();
 
-        expect(reader.read()._blobs[0].path).toBe(
+        expect(reader.read().getBlobs()[0].path).toBe(
           '/OctoLinker/testrepo/blob/64dc9c25b3e09d1d9af437e09d968d08ad5ec903/sourcereader/popular-cat-names.js',
         );
       });
@@ -51,7 +53,7 @@ describe('blob-reader', () => {
         );
         const reader = new BlobReader();
 
-        expect(reader.read()._blobs[1].path).toBe(
+        expect(reader.read().getBlobs()[1].path).toBe(
           '/OctoLinker/testrepo/blob/cc14b0ce8b94b7044f8c5d2d7af656270330bca2/sourcereader/popular-rabbit-names.js',
         );
       });
@@ -98,7 +100,7 @@ describe('blob-reader', () => {
         '/packages/blob-reader/fixtures/github.com/blob/89f13651df126efdb4f1e3ae40183c9fdccdb4d3.html',
       );
       const reader = new BlobReader();
-      [blob] = reader.read()._blobs;
+      [blob] = reader.read().getBlobs();
     });
 
     it('contains four lines', () => {
@@ -113,7 +115,7 @@ describe('blob-reader', () => {
     });
 
     it('sets isDiff indicator to false', () => {
-      expect(blob.isDiff).toBeFalsy();
+      expect(blob.isDiff).toBe(false);
     });
 
     it('1st line', () => {
@@ -131,6 +133,19 @@ describe('blob-reader', () => {
     it('4th line', () => {
       expect(blob.lines[3]).toMatchSnapshot();
     });
+
+    describe('fetchBlob', () => {
+      it('fetch raw blob and update blob.lines property', async () => {
+        fetch.mockResponse(`// Most popular rabbit names\n\nThumper\nDaisy`);
+
+        await blob.fetchBlob();
+        expect(fetch.mock.calls[0][0]).toBe(
+          'https://raw.githubusercontent.com/OctoLinker/testrepo/89f13651df126efdb4f1e3ae40183c9fdccdb4d3/sourcereader/popular-rabbit-names.js',
+        );
+
+        expect(blob.lines).toMatchSnapshot();
+      });
+    });
   });
 
   describe('diff', () => {
@@ -145,6 +160,10 @@ describe('blob-reader', () => {
         [blob] = reader.read()._blobs;
       });
 
+      it('sets isDiff indicator to true', () => {
+        expect(blob.isDiff).toBe(true);
+      });
+
       it('1st line', () => {
         expect(blob.lines[0]).toMatchSnapshot();
       });
@@ -166,7 +185,11 @@ describe('blob-reader', () => {
           '/packages/blob-reader/fixtures/github.com/commit/b0775a93ea27ee381858ddd9fa2bb953d5b74acb_unified.html',
         );
         const reader = new BlobReader();
-        [blob] = reader.read()._blobs;
+        [blob] = reader.read().getBlobs();
+      });
+
+      it('sets isDiff indicator to true', () => {
+        expect(blob.isDiff).toBe(true);
       });
 
       it('contains four lines', () => {
@@ -185,6 +208,32 @@ describe('blob-reader', () => {
         expect(blob.lines[5]).toMatchSnapshot();
       });
     });
+
+    describe('fetchParentBlob', () => {
+      let blob;
+
+      beforeEach(() => {
+        fixture.load(
+          '/packages/blob-reader/fixtures/github.com/commit/b0775a93ea27ee381858ddd9fa2bb953d5b74acb_unified.html',
+        );
+        const reader = new BlobReader();
+        [blob] = reader.read().getBlobs();
+      });
+
+      it('fetch raw blob and update blob.lines property', async () => {
+        fetch.mockResponse(
+          `// Most popular rabbit names\n\nThumper\nDaisy\nLily`,
+        );
+
+        await blob.fetchParentBlob();
+
+        expect(fetch.mock.calls[0][0]).toBe(
+          'https://raw.githubusercontent.com/OctoLinker/testrepo/37d5cdd/sourcereader/popular-rabbit-names.js',
+        );
+        expect(blob.parent).toBeInstanceOf(Blob);
+        expect(blob.parent.lines).toMatchSnapshot();
+      });
+    });
   });
 
   describe('gist', () => {
@@ -195,7 +244,7 @@ describe('blob-reader', () => {
         '/packages/blob-reader/fixtures/github.com/gist/113827963013e98c6196db51cd889c39.html',
       );
       const reader = new BlobReader();
-      [blob] = reader.read()._blobs;
+      [blob] = reader.read().getBlobs();
     });
 
     it('contains blob path', () => {
@@ -209,7 +258,7 @@ describe('blob-reader', () => {
     beforeEach(() => {
       fixture.load('/packages/blob-reader/fixtures/github.com/issue/code.html');
       const reader = new BlobReader();
-      [blob] = reader.read()._blobs;
+      [blob] = reader.read().getBlobs();
     });
 
     it('contains blob root element', () => {