Extracting custom event creation into a util module

spec/regexper_spec.js

@@ -1,3 +1,4 @@
+import { customEvent } from 'src/js/util.js';
 import Regexper from 'src/js/regexper.js';
 import Parser from 'src/js/parser/javascript.js';
 import Snap from 'snapsvg';
@@ -24,7 +25,7 @@ describe('regexper.js', function() {
   describe('#keypressListener', function() {
 
     beforeEach(function() {
-      this.event = document.createEvent('Event');
+      this.event = customEvent('keypress');
       spyOn(this.event, 'preventDefault');
       spyOn(this.regexper.form, 'dispatchEvent');
     });
@@ -99,7 +100,7 @@ describe('regexper.js', function() {
   describe('#documentKeypressListener', function() {
 
     beforeEach(function() {
-      this.event = document.createEvent('Event');
+      this.event = customEvent('keyup');
       this.regexper.runningParser = jasmine.createSpyObj('parser', ['cancel']);
     });
 
@@ -134,7 +135,7 @@ describe('regexper.js', function() {
   describe('#submitListener', function() {
 
     beforeEach(function() {
-      this.event = document.createEvent('Event');
+      this.event = customEvent('submit');
       spyOn(this.event, 'preventDefault');
 
       this.regexper.field.value = 'example value';
@@ -190,8 +191,7 @@ describe('regexper.js', function() {
   describe('#updatePercentage', function() {
 
     beforeEach(function() {
-      this.event = document.createEvent('Event');
+      this.event = customEvent('updateStatus', { percentage: 0.42 });
-      this.event.detail = { percentage: 0.42 };
     });
 
     it('sets the width of the progress bar', function() {

spec/util_spec.js

@@ -0,0 +1,19 @@
+import { customEvent } from 'src/js/util.js';
+
+describe('util.js', function() {
+
+  describe('customEvent', function() {
+
+    it('sets the event type', function() {
+      var event = customEvent('example');
+      expect(event.type).toEqual('example');
+    });
+
+    it('sets the event detail', function() {
+      var event = customEvent('example', 'detail');
+      expect(event.detail).toEqual('detail');
+    });
+
+  });
+
+});

src/js/main.js

@@ -1,3 +1,4 @@
+import { customEvent } from './util.js';
 import Regexper from './regexper.js';
 
 (function() {
@@ -7,10 +8,7 @@ import Regexper from './regexper.js';
     regexper.bindListeners();
 
     setTimeout(() => {
-      var evt = document.createEvent('Event');
+      window.dispatchEvent(customEvent('hashchange'));
-
-      evt.initEvent('hashchange', true, true);
-      window.dispatchEvent(evt);
     });
   }
 }());

src/js/parser/javascript/node.js

@@ -1,3 +1,4 @@
+import { customEvent } from '../../util.js';
 import _ from 'lodash';
 import Q from 'q';
 
@@ -108,20 +109,15 @@ export default class Node {
   }
 
   doneRender() {
-    var evt;
-
     if (this.state.maxCounter === 0) {
       this.state.maxCounter = this.state.renderCounter;
     }
 
     this.state.renderCounter--;
 
-    evt = document.createEvent('Event');
+    document.body.dispatchEvent(customEvent('updateStatus', {
-    evt.initEvent('updateStatus', true, true);
-    evt.detail = {
       percentage: (this.state.maxCounter - this.state.renderCounter) / this.state.maxCounter
-    };
+    }));
-    document.body.dispatchEvent(evt);
 
     if (this.state.renderCounter === 0) {
       this.state.maxCounter = 0;

src/js/regexper.js

@@ -1,3 +1,4 @@
+import { customEvent } from './util.js';
 import Parser from './parser/javascript.js';
 import Snap from 'snapsvg';
 import Q from 'q';
@@ -20,17 +21,13 @@ export default class Regexper {
   }
 
   keypressListener(event) {
-    var evt;
-
     if (event.shiftKey && event.keyCode === 13) {
       event.returnValue = false;
       if (event.preventDefault) {
         event.preventDefault();
       }
 
-      evt = document.createEvent('Event');
+      this.form.dispatchEvent(customEvent('submit'));
-      evt.initEvent('submit', true, true);
-      this.form.dispatchEvent(evt);
     }
   }
 

src/js/util.js

@@ -0,0 +1,6 @@
+export function customEvent(name, detail) {
+  var evt = document.createEvent('Event');
+  evt.initEvent(name, true, true);
+  evt.detail = detail;
+  return evt;
+}