add automatic e2e tests

dist/xhook.js

@@ -1,5 +1,6 @@
 // XHook - v1.4.3 - https://github.com/jpillora/xhook
 // Jaime Pillora <dev@jpillora.com> - MIT Copyright 2017
+(function(undefined) {
 var AFTER, BEFORE, COMMON_EVENTS, EventEmitter, FETCH, FIRE, FormData, NativeFetch, NativeFormData, NativeXMLHttp, OFF, ON, READY_STATE, UPLOAD_EVENTS, WINDOW, XHookFetchRequest, XHookFormData, XHookHttpRequest, XMLHTTP, convertHeaders, depricatedProp, document, fakeEvent, mergeObjects, msie, proxyEvents, slice, useragent, xhook, _base,
   __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
@@ -667,3 +668,5 @@ if (typeof define === "function" && define.amd) {
 } else {
   (this.exports || this).xhook = xhook;
 }
+
+}.call(this));

example/events.html

@@ -48,4 +48,4 @@ <h5>native events</h5>
 xhook.disable();
 test("native");
 
-</script>
+</script>

example/ie-8-9-cors-polyfill.html

@@ -88,7 +88,7 @@ <h4>Usage Guide</h4>
 
 //vanilla calls
 var xhr1 = new XMLHttpRequest();
-xhr1.open('GET', 'http://echo.jpillora.com/cors-test');
+xhr1.open('GET', 'http://echo.jpillora.com/`cors-test`');
 xhr1.onreadystatechange = function() {
   document.getElementById('one').innerHTML = xhr1.responseText;
 }
@@ -107,4 +107,4 @@ <h4>Usage Guide</h4>
   document.getElementById('two').innerHTML = xhr2.responseText;
 }
 xhr2.send();
-</script>
+</script>

example/progress-download-fake.html

@@ -13,7 +13,8 @@ <h5>download progress events</h5>
   request.xhr.dispatchEvent('progress', { loaded: loaded, total: 100 });
 
   function tick() {
-    loaded += Math.round(8+Math.random()*8);
+    // randomization negated in favor of consistent tests
+    loaded += 13; //Math.round(8+Math.random()*8);
     loaded = Math.min(loaded, 100);
     request.xhr.dispatchEvent('progress', { loaded: loaded, total: 100 });
     if(loaded < 100)
@@ -38,8 +39,8 @@ <h5>download progress events</h5>
   append(Math.round((e.loaded/e.total)*100));
 }
 
-//will not 
+//will not
 xhr.open('GET', 'example1.txt');
 
 xhr.send();
-</script>
+</script>

example/track-errors.html

@@ -7,10 +7,13 @@ <h5>Errors:</h5>
 
 <script type="text/javascript">
 
+var requestCounter = 1;
+
 //read response
 xhook.after(function(request, response) {
   if(response.status !== 200)
-    $("pre").append("Non-200 error code detected: " + response.status + ' ');
+    $("pre").append('(' + requestCounter + ') ' + "Non-200 error code detected: " + response.status + '\r\n');
+    requestCounter++;
 });
 
 $.get('exampleX.txt');

package.json

@@ -4,11 +4,16 @@
   "description": "Easily intercept and modify XHR request and response",
   "browser": "dist/xhook.js",
   "main": "dist/xhook.js",
+  "scripts": {
+    "start": "grunt-source --server=3000",
+    "test": "testcafe chrome:headless tests",
+    "test:all": "testcafe all tests"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/jpillora/xhook"
   },
-   "keywords": [
+  "keywords": [
     "xhr",
     "ajax",
     "intercept",
@@ -29,5 +34,11 @@
       "email": "daniel@gasienica.ch"
     }
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "testcafe": "^0.16.2"
+  },
+  "dependencies": {
+    "testcafe-browser-provider-saucelabs": "^1.3.0"
+  }
 }

tests/add-event-listener.js

@@ -0,0 +1,11 @@
+import { Selector } from 'testcafe';
+
+fixture `Add Event Listeners`
+  .page `http://localhost:3000/#add-event-listener`;
+
+test('Should add event listeners to XHR', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#one').innerText).eql('thzs zs thz szcznd tzxt fzlz zxzmplz (zxzmplz2.txt)')
+    .expect(Selector('#status').innerText).eql('loaded!!!');
+});

tests/angular.js

@@ -0,0 +1,16 @@
+import { Selector } from 'testcafe';
+
+fixture `Angular`
+  .page `http://localhost:3000/#angular`;
+
+test('example 1 response should not be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#one').innerText).eql('this is the first text file example (example1.txt)');
+});
+
+test('example 2 response should be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#two').innerText).eql('thzs zs thz szcznd tzxt fzlz zxzmplz (zxzmplz2.txt)');
+});

tests/case-insensitive-headers.js

@@ -0,0 +1,20 @@
+import { Selector } from 'testcafe';
+
+fixture `Case Insensitive Headers`
+  .page `http://localhost:3000/#case-insensitive-headers`;
+
+test('response should include all header variations', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#result-1').innerText).contains('conTENT-type: text/plain; charset=UTF-8')
+    .expect(Selector('#result-1').innerText).contains('CONTENt-TYPe: text/plain; charset=UTF-8')
+    .expect(Selector('#result-1').innerText).contains('Content-Type: text/plain; charset=UTF-8');
+});
+
+test('response should include all values for foo-bar header', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#result-2').innerText).contains('"foO-BAR": "42, 21"');
+});
+
+

tests/events.js

@@ -0,0 +1,23 @@
+import { Selector } from 'testcafe';
+
+fixture `Events`
+  .page `http://localhost:3000/#events`;
+
+test('should complete with xhook events', async t => {
+  const xhookResult = Selector('#xhook');
+
+  await t
+    .switchToIframe('iframe')
+    .wait(3000) // compensate for a real 3s delay from the echo server
+    .expect(xhookResult.innerText).contains('[before start]...\n' +
+      '[before end]\n' +
+      'readystatechange (2)\n' +
+      'readystatechange (3)\n' +
+      'progress (3)\n' +
+      'readystatechange (3)\n' +
+      'readystatechange (4)\n' +
+      'load (4)\n' +
+      ' => 200\n')
+    .expect(xhookResult.innerText).contains('loadend (4)');
+});
+

tests/fake-download-events.js

@@ -0,0 +1,33 @@
+import { Selector } from 'testcafe';
+
+fixture `Fake download events`
+  .page `http://localhost:3000/#progress-download-fake`;
+
+test('should complete with fake download events', async t => {
+  const result = Selector('#events');
+
+  await t
+    .switchToIframe('iframe')
+    .expect(result.innerText).eql('readyState 1\n' +
+      '0\n' +
+      'readyState 2\n' +
+      'readyState 3\n' +
+      '13\n' +
+      'readyState 3\n' +
+      '26\n' +
+      'readyState 3\n' +
+      '39\n' +
+      'readyState 3\n' +
+      '52\n' +
+      'readyState 3\n' +
+      '65\n' +
+      'readyState 3\n' +
+      '78\n' +
+      'readyState 3\n' +
+      '91\n' +
+      'readyState 3\n' +
+      '100\n' +
+      'readyState 3\n' +
+      'readyState 4\n');
+});
+

tests/fake-response.js

@@ -0,0 +1,16 @@
+import { Selector } from 'testcafe';
+
+fixture `Fake Response`
+  .page `http://localhost:3000/#fake-response`;
+
+test('XHR content should be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#res').innerText).eql('this is the third text file example (example3.txt)');
+});
+
+test('fetch content should be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#fetch_res').innerText).eql('this is the third text file example (example3.txt)');
+});

tests/fetch-web-worker.js

@@ -0,0 +1,16 @@
+import { Selector } from 'testcafe';
+
+fixture `Fetch WebWorker`
+  .page `http://localhost:3000/#fetch-webworker`;
+
+test('example 1 response should not be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#one').innerText).eql('this is the first text file example (example1.txt)');
+});
+
+test('example 2 response should be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#two').innerText).eql('thzs zs thz szcznd tzxt fzlz zxzmplz (zxzmplz2.txt)');
+});

tests/fetch.js

@@ -0,0 +1,16 @@
+import { Selector } from 'testcafe';
+
+fixture `Fetch`
+  .page `http://localhost:3000/#vanilla-fetch`;
+
+test('example 1 response should not be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#one').innerText).eql('this is the first text file example (example1.txt)');
+});
+
+test('example 2 response should be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#two').innerText).eql('thzs zs thz szcznd tzxt fzlz zxzmplz (zxzmplz2.txt)');
+});

tests/jquery.js

@@ -0,0 +1,16 @@
+import { Selector } from 'testcafe';
+
+fixture `jQuery`
+  .page `http://localhost:3000/#jquery`;
+
+test('example 1 response should not be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#one').innerText).eql('this is the first text file example (example1.txt)');
+});
+
+test('example 2 response should be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#two').innerText).eql('thzs zs thz szcznd tzxt fzlz zxzmplz (zxzmplz2.txt)');
+});

tests/modify-headers.js

@@ -0,0 +1,10 @@
+import { Selector } from 'testcafe';
+
+fixture `Modify Headers`
+  .page `http://localhost:3000/#modify-headers`;
+
+test('response should include Foo Header', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#res').innerText).contains('foo:\tBar');
+});

tests/modify-method-url.js

@@ -0,0 +1,16 @@
+import { Selector } from 'testcafe';
+
+fixture `Modify Method Url`
+  .page `http://localhost:3000/#modify-method-url`;
+
+test('XHR should get example2.txt content', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#one').innerText).eql('this is the second text file example (example2.txt)');
+});
+
+test('Fetch should get example2.txt content', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#fetch_one').innerText).eql('this is the second text file example (example2.txt)');
+});

tests/real-download-events.js

@@ -0,0 +1,21 @@
+import { Selector } from 'testcafe';
+
+fixture `Real download events`
+  .page `http://localhost:3000/#progress-download-real`;
+
+test('should complete with real download events', async t => {
+  const result = Selector('#events');
+
+  await t
+    .switchToIframe('iframe')
+    .expect(result.innerText).contains('readyState 1\n' +
+      'hooked xhr though left untouched!\n' +
+      'readyState 2\n' +
+      'readyState 3\n')
+    .expect(result.innerText).contains(
+      'readyState 3\n' +
+      '100\n' +
+      'readyState 3\n' +
+      'readyState 4\n');
+});
+

tests/real-upload-events.js

@@ -0,0 +1,21 @@
+import { Selector } from 'testcafe';
+
+fixture `Real upload events`
+  .page `http://localhost:3000/#progress-upload-real`;
+
+test('should complete with real upload events', async t => {
+  const result = Selector('#events');
+
+  await t
+    .switchToIframe('iframe')
+    .expect(result.innerText).eql('readyState 1\n' +
+      'sending #288889 chars\n' +
+      'hooked xhr though left untouched!\n' +
+      'upload started\n' +
+      '100\n' +
+      'upload complete\n' +
+      'readyState 2\n' +
+      'readyState 3\n' +
+      'readyState 4\n');
+});
+

tests/track-errors.js

@@ -0,0 +1,13 @@
+import { Selector } from 'testcafe';
+
+fixture `Track Errors`
+  .page `http://localhost:3000/#track-errors`;
+
+test('Should detect XHR & fetch errors', async t => {
+  const result = Selector('pre');
+
+  await t
+    .switchToIframe('iframe')
+    .expect(result.innerText).contains('(1) Non-200 error code detected: 404')
+    .expect(result.innerText).contains('(2) Non-200 error code detected: 404');
+});

tests/vanilla.js

@@ -0,0 +1,16 @@
+import { Selector } from 'testcafe';
+
+fixture `Vanilla`
+  .page `http://localhost:3000/#vanilla`;
+
+test('example 1 response should not be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#one').innerText).eql('this is the first text file example (example1.txt)');
+});
+
+test('example 2 response should be modified', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#two').innerText).eql('thzs zs thz szcznd tzxt fzlz zxzmplz (zxzmplz2.txt)');
+});

tests/xhr-reuse.js

@@ -0,0 +1,16 @@
+import { Selector } from 'testcafe';
+
+fixture `XHR Reuse`
+  .page `http://localhost:3000/#xhr-reuse`;
+
+test('example 1 should return example1.txt', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#one').innerText).eql('this is the first text file example (example1.txt)');
+});
+
+test('example 2 should return example2.txt', async t => {
+  await t
+    .switchToIframe('iframe')
+    .expect(Selector('#two').innerText).eql('this is the second text file example (example2.txt)');
+});