add tests for Metamaps.Util (#825)

* decouple Util from other Metamaps modules

* first few Util tests

* more Util tests

* remove dead code

* eslint

frontend/src/Metamaps/JIT.js

@@ -990,7 +990,7 @@ const JIT = {
       Visualize.mGraph.plot()
       midpoint.x = JIT.tempNode.pos.getc().x + (JIT.tempNode2.pos.getc().x - JIT.tempNode.pos.getc().x) / 2
       midpoint.y = JIT.tempNode.pos.getc().y + (JIT.tempNode2.pos.getc().y - JIT.tempNode.pos.getc().y) / 2
-      pixelPos = Util.coordsToPixels(midpoint)
+      pixelPos = Util.coordsToPixels(Visualize.mGraph, midpoint)
       $('#new_synapse').css('left', pixelPos.x + 'px')
       $('#new_synapse').css('top', pixelPos.y + 'px')
       Create.newSynapse.open()

frontend/src/Metamaps/PasteInput.js

@@ -2,6 +2,7 @@
 
 import Import from './Import'
 import Util from './Util'
+import Visualize from './Visualize'
 
 const PasteInput = {
   // thanks to https://github.com/kevva/url-regex
@@ -19,7 +20,7 @@ const PasteInput = {
     window.addEventListener("drop", function(e) {
       e = e || window.event;
       e.preventDefault();
-      var coords = Util.pixelsToCoords({ x: e.clientX, y: e.clientY })
+      var coords = Util.pixelsToCoords(Visualize.mGraph, { x: e.clientX, y: e.clientY })
       if (e.dataTransfer.files.length > 0) {
         self.handleFile(e.dataTransfer.files[0], coords)
       }

frontend/src/Metamaps/Realtime/index.js

@@ -278,7 +278,7 @@ let Realtime = {
         x: event.pageX,
         y: event.pageY
       }
-      var coords = Util.pixelsToCoords(pixels)
+      var coords = Util.pixelsToCoords(Visualize.mGraph, pixels)
       self.sendCoords(coords)
     }
     $(document).on('mousemove.map', sendCoords)
@@ -289,7 +289,7 @@ let Realtime = {
           x: e.pageX,
           y: e.pageY
         }
-        var coords = Util.pixelsToCoords(pixels)
+        var coords = Util.pixelsToCoords(Visualize.mGraph, pixels)
         self.sendCoords(coords)
       }
       self.positionPeerIcons()
@@ -448,7 +448,7 @@ let Realtime = {
     var compassDiameter = 56
     var compassArrowSize = 24
 
-    var origPixels = Util.coordsToPixels(mapper.coords)
+    var origPixels = Util.coordsToPixels(Visualize.mGraph, mapper.coords)
     var pixels = self.limitPixelsToScreen(origPixels)
     $('#compass' + id).css({
       left: pixels.x + 'px',

frontend/src/Metamaps/Topic.js

@@ -211,7 +211,7 @@ const Topic = {
         // position the form
         midpoint.x = JIT.tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - JIT.tempNode.pos.getc().x) / 2
         midpoint.y = JIT.tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - JIT.tempNode.pos.getc().y) / 2
-        pixelPos = Util.coordsToPixels(midpoint)
+        pixelPos = Util.coordsToPixels(Visualize.mGraph, midpoint)
         $('#new_synapse').css('left', pixelPos.x + 'px')
         $('#new_synapse').css('top', pixelPos.y + 'px')
         // show the form

frontend/src/Metamaps/Util.js

@@ -2,8 +2,6 @@
 
 import { Parser, HtmlRenderer } from 'commonmark'
 
-import Visualize from './Visualize'
-
 const Util = {
   // helper function to determine how many lines are needed
   // Line Splitter Function
@@ -23,14 +21,15 @@ const Util = {
     }
     return b + s
   },
-  nowDateFormatted: function () {
+
-    var date = new Date(Date.now())
+  nowDateFormatted: function (date = new Date(Date.now())) {
-    var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
+    const month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
-    var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+    const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
-    var year = date.getFullYear()
+    const year = date.getFullYear()
 
     return month + '/' + day + '/' + year
   },
+
   decodeEntities: function (desc) {
     var str, temp = document.createElement('p')
     temp.innerHTML = desc // browser handles the topics
@@ -38,12 +37,15 @@ const Util = {
     temp = null // delete the element
     return str
   }, // decodeEntities
+
   getDistance: function (p1, p2) {
     return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2))
   },
-  coordsToPixels: function (coords) {
+
-    if (Visualize.mGraph) {
+  // Try using Visualize.mGraph
-      var canvas = Visualize.mGraph.canvas,
+  coordsToPixels: function (mGraph, coords) {
+    if (mGraph) {
+      var canvas = mGraph.canvas,
         s = canvas.getSize(),
         p = canvas.getPos(),
         ox = canvas.translateOffsetX,
@@ -62,10 +64,12 @@ const Util = {
       }
     }
   },
-  pixelsToCoords: function (pixels) {
+
+  // Try using Visualize.mGraph
+  pixelsToCoords: function (mGraph, pixels) {
     var coords
-    if (Visualize.mGraph) {
+    if (mGraph) {
-      var canvas = Visualize.mGraph.canvas,
+      var canvas = mGraph.canvas,
         s = canvas.getSize(),
         p = canvas.getPos(),
         ox = canvas.translateOffsetX,
@@ -84,10 +88,13 @@ const Util = {
     }
     return coords
   },
-  getPastelColor: function () {
+  getPastelColor: function ({ rseed, gseed, bseed }) {
-    var r = (Math.round(Math.random() * 127) + 127).toString(16)
+    if (rseed === undefined) rseed = Math.random()
-    var g = (Math.round(Math.random() * 127) + 127).toString(16)
+    if (gseed === undefined) gseed = Math.random()
-    var b = (Math.round(Math.random() * 127) + 127).toString(16)
+    if (bseed === undefined) bseed = Math.random()
+    var r = (Math.round(rseed * 127) + 127).toString(16)
+    var g = (Math.round(gseed * 127) + 127).toString(16)
+    var b = (Math.round(bseed * 127) + 127).toString(16)
     return Util.colorLuminance('#' + r + g + b, -0.4)
   },
   // darkens a hex value by 'lum' percentage
@@ -109,21 +116,6 @@ const Util = {
 
     return rgb
   },
-  generateOptionsList: function (data) {
-    var newlist = ''
-    for (var i = 0; i < data.length; i++) {
-      newlist = newlist + '<option value="' + data[i]['id'] + '">' + data[i]['1'][1] + '</option>'
-    }
-    return newlist
-  },
-  checkURLisImage: function (url) {
-    // when the page reloads the following regular expression will be screwed up
-    // please replace it with this one before you save: /*backslashhere*.(jpeg|jpg|gif|png)$/
-    return (url.match(/\.(jpeg|jpg|gif|png)$/) != null)
-  },
-  checkURLisYoutubeVideo: function (url) {
-    return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null)
-  },
   openLink: function(url){
     var win = (url !== "") ? window.open(url, '_blank') : "empty";
     

frontend/test/Metamaps.Util.spec.js

@@ -0,0 +1,128 @@
+/* global describe, it */
+
+import chai from 'chai'
+
+import Util from '../src/Metamaps/Util'
+
+const { expect } = chai
+
+describe('Metamaps.Util.js', function () {
+  describe('splitLine', function () {
+    it('splits on words', function () {
+      expect(Util.splitLine('test test test', 10))
+        .to.equal('test test\ntest')
+    })
+    // TODO this test seems like it's incorrect behaviour
+    it('splits mid-word if need be', function () {
+      expect(Util.splitLine('test test', 2))
+        .to.equal('te\nt\nte\nt')
+    })
+    it('splits words over 30 chars', function () {
+      expect(Util.splitLine('suprainterpostantidisestablishmentarianism', 30))
+        .to.equal('suprainterpostantidisestablish\nentarianism')
+    })
+  })
+  describe('nowDateFormatted', function () {
+    it.skip('TODO need `Date`')
+  })
+  describe('decodeEntities', function () {
+    it.skip('TODO need `document`')
+  })
+  describe('getDistance', function () {
+    it('(0,0) -> (0,0) = 0', function () {
+      expect(Util.getDistance({ x: 0, y: 0 }, { x: 0, y: 0 }))
+        .to.equal(0)
+    })
+    it('(-5,0) -> (5,0) = 10', function () {
+      expect(Util.getDistance({ x: -5, y: 0 }, { x: 5, y: 0 }))
+        .to.equal(10)
+    })
+    it('(0,0) -> (5,7) = 8.6023', function () {
+      expect(Util.getDistance({ x: 0, y: 0 }, { x: 5, y: 7 }).toFixed(4))
+        .to.equal('8.6023')
+    })
+  })
+  describe('coordsToPixels', function () {
+    it('returns 0,0 for null canvas', function () {
+      expect(Util.coordsToPixels(null).x).to.equal(0)
+      expect(Util.coordsToPixels(null).y).to.equal(0)
+    })
+    it.skip('TODO need initialized mGraph to test further')
+  })
+  describe('pixelsToCoords', function () {
+    it('returns 0,0 for null canvas', function () {
+      expect(Util.pixelsToCoords(null).x).to.equal(0)
+      expect(Util.pixelsToCoords(null).y).to.equal(0)
+    })
+    it.skip('TODO need initialized mGraph to test further')
+  })
+  describe('getPastelColor', function () {
+    it('1 => fefefe', function () {
+      expect(Util.getPastelColor({ rseed: 1, gseed: 1, bseed: 1 }))
+        .to.equal(Util.colorLuminance('#fefefe', -0.4))
+    })
+    it('0 => 7f7f7f', function () {
+      expect(Util.getPastelColor({ rseed: 0, gseed: 0, bseed: 0 }))
+        .to.equal(Util.colorLuminance('#7f7f7f', -0.4))
+    })
+  })
+  describe('colorLuminance', function () {
+    describe('-0.4 lum', function () {
+      it('white => ?', function () {
+        expect(Util.colorLuminance('#ffffff', -0.4)).to.equal('#999999')
+      })
+      it('black => ?', function () {
+        expect(Util.colorLuminance('#000000', -0.4)).to.equal('#000000')
+      })
+      it('7f7f7f => ?', function () {
+        expect(Util.colorLuminance('#7f7f7f', -0.4)).to.equal('#4c4c4c')
+      })
+    })
+
+    describe('other lum values', function () {
+      it('-1', function () {
+        expect(Util.colorLuminance('#7f7f7f', -1)).to.equal('#000000')
+      })
+      it('-0.5', function () {
+        expect(Util.colorLuminance('#7f7f7f', -0.5)).to.equal('#404040')
+      })
+      it('0', function () {
+        expect(Util.colorLuminance('#7f7f7f', 0)).to.equal('#7f7f7f')
+      })
+      it('0.5', function () {
+        expect(Util.colorLuminance('#7f7f7f', 0.5)).to.equal('#bfbfbf')
+      })
+      it('1', function () {
+        expect(Util.colorLuminance('#7f7f7f', 1)).to.equal('#fefefe')
+      })
+    })
+  })
+  describe('openLink', function () {
+    it.skip('TODO need `window`')
+  })
+  describe('mdToHTML', function () {
+    it('filters xss', function () {
+      const md = '<script>alert("xss");</script>'
+      const html = '<!-- raw HTML omitted -->'
+      expect(Util.mdToHTML(md).trim()).to.equal(html)
+    })
+
+    it('bold and italics', function () {
+      const md = '**Bold** *Italics*'
+      const html = '<p><strong>Bold</strong> <em>Italics</em></p>'
+      expect(Util.mdToHTML(md).trim()).to.equal(html)
+    })
+
+    it('links and images', function () {
+      const md = '[Link](https://metamaps.cc) ![Image](https://example.org/image.png)'
+      const html = '<p><a href="https://metamaps.cc">Link</a> <img src="https://example.org/image.png" alt="Image" /></p>'
+      expect(Util.mdToHTML(md).trim()).to.equal(html)
+    })
+  })
+  describe('logCanvasAttributes', function () {
+    it.skip('TODO need a canvas')
+  })
+  describe('resizeCanvas', function () {
+    it.skip('TODO need a canvas')
+  })
+})

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "webpack",
     "build:watch": "webpack --watch",
-    "test": "mocha --compilers js:babel-core/register frontend/test || (echo 'Run `npm install` to setup testing' && false)"
+    "test": "mocha --compilers js:babel-core/register frontend/test"
   },
   "repository": {
     "type": "git",