Add integration tests (OctoLinker#477)

* Basic setup to run e2e tests on CI * Run e2e test against github.com/OctoLinker/e2e/ * Scrape e2e repo for urls * Run e2e tests * Get fixtures from e2e repo * Remove not longer needed package node-fetch * Add e2e fixtures * Generate fixtures resource file * Add E2E readme file
danielarantes · Jul 18, 2018 · aba7a01 · aba7a01
1 parent ae7071c
commit aba7a01
Show file tree

Hide file tree

Showing 17 changed files with 446 additions and 20 deletions.
diff --git a/.appveyor.yml b/.appveyor.yml
@@ -22,10 +22,11 @@ test_script:
   - node --version
   - npm --version
   # Make sure build works on Windows
-  - npm run package
+  - yarn package
   # run tests
   - set PHANTOMJS_BIN=C:\ProgramData\chocolatey\bin\phantomjs.exe
-  - appveyor-retry call npm test
+  - appveyor-retry call yarn test
+  - appveyor-retry call yarn e2e
 
 # Don't actually build.
 build: off
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 dist/
 packages/**/node_modules
+e2e/fixtures/
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@ lerna-debug.log
 
 dist/
 out/
+e2e/fixtures.json
diff --git a/.travis.yml b/.travis.yml
@@ -20,9 +20,10 @@ before_install:
 before_script:
   - git diff --exit-code # make sure that yarn.lock didn't change
   - ./packages/blob-reader/scripts/update-fixtures.sh
-  - npm run package
+  - yarn package
 script:
-  - travis_retry npm test
+  - travis_retry yarn test
+  - yarn e2e
 deploy:
   - provider: releases
     api_key: "$GH_DEPLOY"
@@ -32,7 +33,7 @@ deploy:
     on:
       tags: true
   - provider: script
-    script: npm run release
+    script: yarn release
     skip_cleanup: true
     on:
       branch: master

diff --git a/e2e/.eslintrc.js b/e2e/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  globals: {
+    page: true
+  }
+}
diff --git a/e2e/README.md b/e2e/README.md
@@ -0,0 +1,68 @@
+# OctoLinker E2E Tests
+
+## What is E2E Testing?
+
+E2E stand for End to End testing and the following lines explains it the best which I have copied from [Protractor](https://docs.angularjs.org/guide/e2e-testing);
+
+> As applications grow in size and complexity, it becomes unrealistic to rely on manual testing to verify the correctness of new features, catch bugs and notice regressions. Unit tests are the first line of defense for catching bugs, but sometimes issues come up with integration between components which can't be captured in a unit test. End-to-end tests are made to find these problems.
+
+### How we do E2E tests
+
+We're using [Puppeteer](https://github.com/GoogleChrome/puppeteer) which allows us to spin up a Chrome instance which then loads the OctoLinker extension. Once Chrome has started we can navigate to any website which is github.com in our case. In this directory we also have a folder called [fixtures](https://github.com/OctoLinker/OctoLinker/tree/master/e2e/fixtures) which contains all our dummy files which we use for testing. 
+
+If you open one of those files, you will see a special annotation which we use to specify that the next line should resolve to the given target. 
+
+```js
+// When the target is an external url
+// @OctoLinkerResolve(https://nodejs.org/api/fs.html)
+require('fs')
+
+// When the target is a relative file
+// @OctoLinkerResolve(<root>/path/to/foo.js)
+require('./foo.js')
+```
+
+The annotation is language agnostic so you can also use it for ruby or any other language. 
+
+```ruby
+# @OctoLinkerResolve(https://rubygems.org/gems/rake)
+require 'rake'
+```
+
+It's also working within json files.
+
+```js
+{
+  "dependencies": {
+    "//": "@OctoLinkerResolve(https://github.com/lodash/lodash)",
+    "lodash": "^1.2.3"
+  }
+}
+```
+
+## How do we know 
+
+Before we invoke [jest](https://github.com/facebook/jest), we scan the fixtures folder for those annotation and write a file named `fixtures.json` on the disk. This json file then gets loaded by our actual test file (https://github.com/OctoLinker/OctoLinker/blob/master/e2e/automated.test.js) to scaffold those tests on-the-fly. 
+
+
+```js
+[
+ {
+  "url": "https://github.com/OctoLinker/OctoLinker/blob/master/e2e/fixtures/javascript/nodejs/gentle-resonance-3436.js",
+  "content": "require('./proud-tooth-7361');",
+  "targetUrl": "/javascript/nodejs/proud-tooth-7361.js",
+  "lineNumber": 2
+ },
+ {
+  "url": "https://github.com/OctoLinker/OctoLinker/blob/master/e2e/fixtures/javascript/npm/package.json",
+  "content": "\"underscore\": \"1.2.3\"",
+  "targetUrl": "https://github.com/jashkenas/underscore",
+  "lineNumber": 8
+ },
+ ...
+]
+```
+
+## Contribution
+
+We made this process super simple. Just create files within `e2e/fixtures` and make sure the annotation target is set correctly, that's all. If you have a minute or two we would really appreciate a PullReqeust from you.
diff --git a/e2e/automated.test.js b/e2e/automated.test.js
@@ -0,0 +1,25 @@
+const fixtures = require('./fixtures.json'); // eslint-disable-line import/no-unresolved
+
+async function executeTest(url, lineNumber, targetUrl) {
+  const selector = `#LC${lineNumber} .octolinker-link`;
+
+  await page.goto(url);
+
+  await page.waitForSelector(selector);
+
+  await Promise.all([
+    page.waitForNavigation(),
+    // page.click(selector), for some reason page.click is not working
+    page.$eval(selector, el => el.click()),
+  ]);
+
+  await expect(page.url()).toEqual(expect.stringMatching(targetUrl));
+}
+
+describe('End to End tests', () => {
+  fixtures.forEach(({ url, content, lineNumber, targetUrl }) => {
+    it(`resolves ${content} to ${targetUrl}`, async () => {
+      await executeTest(url, lineNumber, targetUrl);
+    });
+  });
+});
diff --git a/e2e/fixtures/javascript/nodejs/gentle-resonance-3436.js b/e2e/fixtures/javascript/nodejs/gentle-resonance-3436.js
@@ -0,0 +1,2 @@
+// @OctoLinkerResolve(<root>/javascript/nodejs/proud-tooth-7361.js)
+require('./proud-tooth-7361');
diff --git a/e2e/fixtures/javascript/nodejs/index.js b/e2e/fixtures/javascript/nodejs/index.js
@@ -0,0 +1,11 @@
+// @OctoLinkerResolve(<root>/javascript/nodejs/gentle-resonance-3436.js)
+require('./gentle-resonance-3436.js');
+
+// @OctoLinkerResolve(<root>/javascript/nodejs/proud-tooth-7361.js)
+require('./proud-tooth-7361');
+
+// @OctoLinkerResolve(https://nodejs.org/api/fs.html)
+require('fs');
+
+// @OctoLinkerResolve(https://github.com/lodash/lodash)
+require('lodash');
diff --git a/e2e/fixtures/javascript/nodejs/proud-tooth-7361.js b/e2e/fixtures/javascript/nodejs/proud-tooth-7361.js
@@ -0,0 +1,2 @@
+// @OctoLinkerResolve(<root>/javascript/nodejs/index.js)
+require('.');
diff --git a/e2e/fixtures/javascript/npm/package.json b/e2e/fixtures/javascript/npm/package.json
@@ -0,0 +1,10 @@
+{
+    "dependencies": {
+        "//": "@OctoLinkerResolve(https://github.com/lodash/lodash)",
+        "lodash": "^1.2.3"
+    },
+    "devDependencies": {
+        "//": "@OctoLinkerResolve(https://github.com/jashkenas/underscore)",
+        "underscore": "1.2.3"
+    }
+}
diff --git a/e2e/generate-fixtures-json.js b/e2e/generate-fixtures-json.js
@@ -0,0 +1,76 @@
+const fs = require('fs');
+const path = require('path');
+const util = require('util');
+const recursive = require('recursive-readdir');
+const async = require('async');
+
+// This will generate a json file which is consumed by automated.test.js in the following format.
+// Checkout out https://github.com/OctoLinker/OctoLinker/blob/master/e2e/README.md for details.
+//
+// [
+//    {
+//     "url": "https://github.com/OctoLinker/OctoLinker/blob/master/e2e/fixtures/javascript/nodejs/gentle-resonance-3436.js",
+//     "content": "require('./proud-tooth-7361');",
+//     "targetUrl": "/javascript/nodejs/proud-tooth-7361.js",
+//     "lineNumber": 2
+//    },
+//    ...
+// ]
+
+const repoSlug =
+  process.env.TRAVIS_PULL_REQUEST_SLUG || 'OctoLinker/OctoLinker';
+const branch = process.env.TRAVIS_PULL_REQUEST_BRANCH || 'master';
+const fixturesRoot = `https://github.com/${repoSlug}/blob/${branch}/e2e`;
+
+async function readContent(files) {
+  const readFile = util.promisify(fs.readFile);
+  const mapLimit = util.promisify(async.mapLimit);
+
+  return mapLimit(files, 10, async file => {
+    const content = await readFile(file, 'utf8');
+
+    return {
+      file,
+      content,
+    };
+  });
+}
+
+function findTests(contents) {
+  return contents.reduce((memo, { file, content }) => {
+    const lines = content.split('\n');
+
+    lines.forEach((line, index) => {
+      if (line.includes('@OctoLinkerResolve')) {
+        const lineNumber = index + 2;
+        const targetUrl = line
+          .match(/@OctoLinkerResolve\((.*?)\)/)[1]
+          .replace('<root>', '');
+
+        const filePath = file.replace(__dirname, '');
+
+        memo.push({
+          url: `${fixturesRoot}${filePath}`,
+          content: lines[index + 1].trim(),
+          targetUrl,
+          lineNumber,
+        });
+      }
+    });
+
+    return memo;
+  }, []);
+}
+
+(async function init() {
+  const files = await recursive(path.join(__dirname, 'fixtures'));
+  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/e2e/jest-e2e.config.js b/e2e/jest-e2e.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'jest-puppeteer',
+  testMatch: ['<rootDir>/**/?(*.)test?(s).js'],
+};
diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js
@@ -0,0 +1,15 @@
+const path = require('path');
+
+const extPath = path.join(__dirname, './dist');
+
+module.exports = {
+  launch: {
+    dumpio: true,
+    headless: false,
+    args: [
+      '--no-sandbox',
+      `--disable-extensions-except=${extPath}`,
+      `--load-extension=${extPath}`,
+    ],
+  },
+};
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  testPathIgnorePatterns: ['<rootDir>/e2e/'],
+  setupFiles: ['<rootDir>/_jestsetup.js'],
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/__mocks__/styleMock.js',
+  },
+};
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "lint": "eslint .",
     "pretest": "yarn lint",
     "test": "jest",
+    "e2e": "node ./e2e/generate-fixtures-json.js && jest --config=e2e/jest-e2e.config.js",
     "postinstall": "yarn lerna bootstrap",
     "test:watch": "jest --watch",
     "version": "json -I -f assets/manifest.json -e \"this.version='`json -f package.json version`'\" && git add assets/manifest.json",
@@ -20,15 +21,8 @@
     "firefox-open": "yarn build && yarn firefox-launch --",
     "firefox-launch": "web-ext run --source-dir dist --pref startup.homepage_welcome_url=https://github.com/OctoLinker/OctoLinker/blob/master/package.json"
   },
-  "jest": {
-    "moduleNameMapper": {
-      "\\.css$": "<rootDir>/__mocks__/styleMock.js"
-    },
-    "setupFiles": [
-      "./_jestsetup.js"
-    ]
-  },
   "devDependencies": {
+    "async": "^2.6.1",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -47,12 +41,15 @@
     "eslint-plugin-prettier": "^2.3.1",
     "eslint-plugin-react": "^7.4.0",
     "jest": "^22.0.6",
+    "jest-puppeteer": "^3.2.1",
     "json": "^9.0.4",
     "json-loader": "^0.5.7",
     "lerna": "^2.7.0",
     "mkdirp": "^0.5.1",
     "npm-run-all": "^4.1.1",
     "prettier": "^1.7.4",
+    "puppeteer": "^1.5.0",
+    "recursive-readdir": "^2.2.2",
     "sinon": "^4.0.1",
     "style-loader": "^0.19.0",
     "web-ext": "^2.0.0",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,4 @@ lerna-debug.log

		dist/
		out/
		e2e/fixtures.json
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// @OctoLinkerResolve(<root>/javascript/nodejs/proud-tooth-7361.js)
		require('./proud-tooth-7361');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// @OctoLinkerResolve(<root>/javascript/nodejs/index.js)
		require('.');