glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

add tests for Metamaps.Util (#825)

Browse source 
* decouple Util from other Metamaps modules

* first few Util tests

* more Util tests

* remove dead code

* eslint
This commit is contained in:
Devin Howard 2016-10-25 12:28:51 +08:00 committed by GitHub
parent 5163794698
commit 47bca5907e
7 changed files with 160 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/Metamaps/JIT.js
View file

@ -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()

3
frontend/src/Metamaps/PasteInput.js
View file

@ -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)
}

6
frontend/src/Metamaps/Realtime/index.js
View file

@ -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',

2
frontend/src/Metamaps/Topic.js
View file

@ -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

56
frontend/src/Metamaps/Util.js
View file

@ -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())
var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
var year = date.getFullYear()
nowDateFormatted: function (date = new Date(Date.now())) {
const month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
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) {
var canvas = Visualize.mGraph.canvas,
// Try using Visualize.mGraph
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) {
var canvas = Visualize.mGraph.canvas,
if (mGraph) {
var canvas = mGraph.canvas,
s = canvas.getSize(),
p = canvas.getPos(),
ox = canvas.translateOffsetX,
@ -84,10 +88,13 @@ const Util = {
}
return coords
},
getPastelColor: function () {
var r = (Math.round(Math.random() * 127) + 127).toString(16)
var g = (Math.round(Math.random() * 127) + 127).toString(16)
var b = (Math.round(Math.random() * 127) + 127).toString(16)
getPastelColor: function ({ rseed, gseed, bseed }) {
if (rseed === undefined) rseed = Math.random()
if (gseed === undefined) gseed = Math.random()
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";

128
frontend/test/Metamaps.Util.spec.js Normal file
View file

@ -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')
})
})

2
package.json
View file

@ -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",