From ec59a687f118d3811ef8fe46951c7f2aff3fcfe6 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Sat, 17 Mar 2018 12:06:42 -0700 Subject: [PATCH 1/7] finish Util.spec.js --- frontend/src/Metamaps/Util.js | 40 ++++---- frontend/test/Metamaps/Util.spec.js | 140 ++++++++++++++++++++++++++-- 2 files changed, 149 insertions(+), 31 deletions(-) diff --git a/frontend/src/Metamaps/Util.js b/frontend/src/Metamaps/Util.js index 2bc49159..4a53fc7c 100644 --- a/frontend/src/Metamaps/Util.js +++ b/frontend/src/Metamaps/Util.js @@ -39,36 +39,30 @@ const Util = { }, decodeEntities: function(desc) { - let temp = document.createElement('p') - temp.innerHTML = desc // browser handles the topics - let str = temp.textContent || temp.innerText - temp = null // delete the element + let paragraph = document.createElement('p') + paragraph.innerHTML = desc // browser handles the topics + let str = paragraph.textContent || paragraph.innerText + paragraph = 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)) }, - // Try using Visualize.mGraph coordsToPixels: function(mGraph, coords) { - if (mGraph) { - const canvas = mGraph.canvas - const s = canvas.getSize() - const p = canvas.getPos() - const ox = canvas.translateOffsetX - const oy = canvas.translateOffsetY - const sx = canvas.scaleOffsetX - const sy = canvas.scaleOffsetY - return { - x: (coords.x / (1 / sx)) + p.x + s.width / 2 + ox, - y: (coords.y / (1 / sy)) + p.y + s.height / 2 + oy - } - } else { - return { - x: 0, - y: 0 - } + if (!mGraph) return { x: 0, y: 0 } + + const canvas = mGraph.canvas + const s = canvas.getSize() + const p = canvas.getPos() + const ox = canvas.translateOffsetX + const oy = canvas.translateOffsetY + const sx = canvas.scaleOffsetX + const sy = canvas.scaleOffsetY + return { + x: (coords.x / (1 / sx)) + p.x + s.width / 2 + ox, + y: (coords.y / (1 / sy)) + p.y + s.height / 2 + oy } }, diff --git a/frontend/test/Metamaps/Util.spec.js b/frontend/test/Metamaps/Util.spec.js index 3cfe05d8..67abe1fd 100644 --- a/frontend/test/Metamaps/Util.spec.js +++ b/frontend/test/Metamaps/Util.spec.js @@ -1,9 +1,12 @@ -/* global describe, it */ +/* global describe, it, afterEach */ import { expect } from 'chai' +import sinon from 'sinon' import Util from '../../src/Metamaps/Util' +const sandbox = sinon.sandbox.create() + describe('Metamaps.Util.js', function() { describe('splitLine', function() { it('splits on words', function() { @@ -21,10 +24,42 @@ describe('Metamaps.Util.js', function() { }) }) describe('nowDateFormatted', function() { - it.skip('TODO need `Date`') + function assertNowDateFormatted(expected, { month, day, year }) { + const date = { + getDate: () => day, + getMonth: () => month - 1, // 0 to 11 + getFullYear: () => year + } + expect(Util.nowDateFormatted(date)).to.equal(expected) + } + it('formats dates with one digit properly', function() { + assertNowDateFormatted('01/01/2000', { month: 1, day: 1, year: 2000 }) + }) + it('formats dates with two digits properly', function() { + assertNowDateFormatted('10/10/2000', { month: 10, day: 10, year: 2000 }) + }) }) describe('decodeEntities', function() { - it.skip('TODO need `document`') + function assertDecodeEntities(expected, { textContent, innerText, desc }) { + const paragraph = { textContent, innerText } + sandbox.stub(document, "createElement").withArgs('p').returns(paragraph) + + const actual = Util.decodeEntities(desc) + + expect(actual).to.equal(expected) + expect(paragraph.innerHTML).to.equal(desc) + } + afterEach(function() { + sandbox.restore() + }) + it('returns textContent if available', function() { + assertDecodeEntities('textContent', + { textContent: 'textContent', innerText: 'innerText', desc: 'desc' }) + }) + it('otherwise returns innerText', function() { + assertDecodeEntities('innerText', + { innerText: 'innerText', desc: 'desc' }) + }) }) describe('getDistance', function() { it('(0,0) -> (0,0) = 0', function() { @@ -41,18 +76,72 @@ describe('Metamaps.Util.js', function() { }) }) describe('coordsToPixels', function() { + function assertCoordsToPixels(expectedX, expectedY, + x, y, sx, sy, px, py, width, height, ox, oy) { + const mGraph = { + canvas: { + getSize: () => ({ width, height }), + getPos: () => ({ x: px, y: py }), + translateOffsetX: ox, translateOffsetY: oy, + scaleOffsetX: sx, scaleOffsetY: sy + } + } + const coords = { x, y } + const actual = Util.coordsToPixels(mGraph, coords) + expect(actual.x).to.equal(expectedX) + expect(actual.y).to.equal(expectedY) + } + + 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') + it('does the correct calculation', function() { + assertCoordsToPixels(0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0) + assertCoordsToPixels(1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0) + assertCoordsToPixels(2, 1, 1, 1, 2, 1, 0, 0, 0, 0, 0, 0) + assertCoordsToPixels(2, 2, 1, 1, 2, 2, 0, 0, 0, 0, 0, 0) + assertCoordsToPixels(3, 2, 1, 1, 2, 2, 1, 0, 0, 0, 0, 0) + assertCoordsToPixels(3, 3, 1, 1, 2, 2, 1, 1, 0, 0, 0, 0) + assertCoordsToPixels(4, 3, 1, 1, 2, 2, 1, 1, 2, 0, 0, 0) + assertCoordsToPixels(4, 4, 1, 1, 2, 2, 1, 1, 2, 2, 0, 0) + assertCoordsToPixels(9, 4, 1, 1, 2, 2, 1, 1, 2, 2, 5, 0) + assertCoordsToPixels(9, 9, 1, 1, 2, 2, 1, 1, 2, 2, 5, 5) + }) }) describe('pixelsToCoords', function() { + function assertPixelsToCoords(expectedX, expectedY, + x, y, px, py, width, height, ox, oy, sx, sy) { + const mGraph = { + canvas: { + getSize: () => ({ width, height }), + getPos: () => ({ x: px, y: py }), + translateOffsetX: ox, translateOffsetY: oy, + scaleOffsetX: sx, scaleOffsetY: sy + } + } + const coords = { x, y } + const actual = Util.pixelsToCoords(mGraph, coords) + expect(actual.x).to.equal(expectedX) + expect(actual.y).to.equal(expectedY) + } 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') + it('does the correct calculation', function() { + assertPixelsToCoords(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1) + assertPixelsToCoords(5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 1, 1) + assertPixelsToCoords(4, 5, 5, 5, 1, 0, 0, 0, 0, 0, 1, 1) + assertPixelsToCoords(4, 4, 5, 5, 1, 1, 0, 0, 0, 0, 1, 1) + assertPixelsToCoords(3, 4, 5, 5, 1, 1, 2, 0, 0, 0, 1, 1) + assertPixelsToCoords(3, 3, 5, 5, 1, 1, 2, 2, 0, 0, 1, 1) + assertPixelsToCoords(2, 3, 5, 5, 1, 1, 2, 2, 1, 0, 1, 1) + assertPixelsToCoords(2, 2, 5, 5, 1, 1, 2, 2, 1, 1, 1, 1) + assertPixelsToCoords(4, 2, 5, 5, 1, 1, 2, 2, 1, 1, 0.5, 1) + assertPixelsToCoords(4, 4, 5, 5, 1, 1, 2, 2, 1, 1, 0.5, 0.5) + }) }) describe('getPastelColor', function() { it('1 => fefefe', function() { @@ -96,7 +185,27 @@ describe('Metamaps.Util.js', function() { }) }) describe('openLink', function() { - it.skip('TODO need `window`') + function stubWindow({ popupsAllowed }) { + const open = sandbox.stub(window, "open").returns(popupsAllowed) + const alert = sandbox.stub(window, "alert") + return { open, alert } + } + afterEach(function() { + sandbox.restore() + }) + it('blank url returns true', function() { + expect(Util.openLink('')).to.equal(true) + }) + it('popus allowed returns true', function() { + stubWindow({ popupsAllowed: true }) + expect(Util.openLink('https://www.google.ca')).to.equal(true) + }) + it('popups blocked shows alert', function() { + const { alert } = stubWindow({ popupsAllowed: false }) + expect(Util.openLink('https://www.google.ca')).to.equal(false) + expect(alert.calledWith('Please allow popups in order to open the link')) + .to.equal(true) + }) }) describe('mdToHTML', function() { it('filters xss', function() { @@ -124,9 +233,24 @@ describe('Metamaps.Util.js', function() { }) }) describe('logCanvasAttributes', function() { - it.skip('TODO need a canvas') + it('returns correct canvas attributes', function() { + const canvas = { + scaleOffsetX: 1, scaleOffsetY: 2, + canvases: [{ size: { width: 3, height: 4 } }] + } + sinon.stub(Util, "pixelsToCoords").returnsArg(1) + + const actual = Util.logCanvasAttributes(canvas) + + expect(actual.scaleX).to.equal(1) + expect(actual.scaleY).to.equal(2) + + // stub will return the x/y coords passed to pixelsToCoords + expect(actual.centreCoords.x).to.equal(3 / 2) + expect(actual.centreCoords.y).to.equal(4 / 2) + }) }) describe('resizeCanvas', function() { - it.skip('TODO need a canvas') + it.skip('TODO') }) }) From 0614ab78b5874dc8d58fd94231a041dfc1646de3 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Sat, 17 Mar 2018 12:50:35 -0700 Subject: [PATCH 2/7] code climate --- frontend/test/Metamaps/Util.spec.js | 88 ++++++++++++++++++----------- 1 file changed, 56 insertions(+), 32 deletions(-) diff --git a/frontend/test/Metamaps/Util.spec.js b/frontend/test/Metamaps/Util.spec.js index 67abe1fd..3866a1ea 100644 --- a/frontend/test/Metamaps/Util.spec.js +++ b/frontend/test/Metamaps/Util.spec.js @@ -42,7 +42,7 @@ describe('Metamaps.Util.js', function() { describe('decodeEntities', function() { function assertDecodeEntities(expected, { textContent, innerText, desc }) { const paragraph = { textContent, innerText } - sandbox.stub(document, "createElement").withArgs('p').returns(paragraph) + sandbox.stub(document, 'createElement').withArgs('p').returns(paragraph) const actual = Util.decodeEntities(desc) @@ -77,13 +77,15 @@ describe('Metamaps.Util.js', function() { }) describe('coordsToPixels', function() { function assertCoordsToPixels(expectedX, expectedY, - x, y, sx, sy, px, py, width, height, ox, oy) { + { x, y, sx, sy, px, py, width, height, ox, oy }) { const mGraph = { canvas: { getSize: () => ({ width, height }), getPos: () => ({ x: px, y: py }), - translateOffsetX: ox, translateOffsetY: oy, - scaleOffsetX: sx, scaleOffsetY: sy + translateOffsetX: ox, + translateOffsetY: oy, + scaleOffsetX: sx, + scaleOffsetY: sy } } const coords = { x, y } @@ -92,33 +94,44 @@ describe('Metamaps.Util.js', function() { expect(actual.y).to.equal(expectedY) } - 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('does the correct calculation', function() { - assertCoordsToPixels(0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0) - assertCoordsToPixels(1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0) - assertCoordsToPixels(2, 1, 1, 1, 2, 1, 0, 0, 0, 0, 0, 0) - assertCoordsToPixels(2, 2, 1, 1, 2, 2, 0, 0, 0, 0, 0, 0) - assertCoordsToPixels(3, 2, 1, 1, 2, 2, 1, 0, 0, 0, 0, 0) - assertCoordsToPixels(3, 3, 1, 1, 2, 2, 1, 1, 0, 0, 0, 0) - assertCoordsToPixels(4, 3, 1, 1, 2, 2, 1, 1, 2, 0, 0, 0) - assertCoordsToPixels(4, 4, 1, 1, 2, 2, 1, 1, 2, 2, 0, 0) - assertCoordsToPixels(9, 4, 1, 1, 2, 2, 1, 1, 2, 2, 5, 0) - assertCoordsToPixels(9, 9, 1, 1, 2, 2, 1, 1, 2, 2, 5, 5) + assertCoordsToPixels(0, 0, + { x: 0, y: 0, sx: 1, sy: 1, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) + assertCoordsToPixels(1, 1, + { x: 1, y: 1, sx: 1, sy: 1, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) + assertCoordsToPixels(2, 1, + { x: 1, y: 1, sx: 2, sy: 1, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) + assertCoordsToPixels(2, 2, + { x: 1, y: 1, sx: 2, sy: 2, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) + assertCoordsToPixels(3, 2, + { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) + assertCoordsToPixels(3, 3, + { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 0, height: 0, ox: 0, oy: 0 }) + assertCoordsToPixels(4, 3, + { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 0, ox: 0, oy: 0 }) + assertCoordsToPixels(4, 4, + { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 2, ox: 0, oy: 0 }) + assertCoordsToPixels(9, 4, + { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 2, ox: 5, oy: 0 }) + assertCoordsToPixels(9, 9, + { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 2, ox: 5, oy: 5 }) }) }) describe('pixelsToCoords', function() { function assertPixelsToCoords(expectedX, expectedY, - x, y, px, py, width, height, ox, oy, sx, sy) { + { x, y, px, py, width, height, ox, oy, sx, sy }) { const mGraph = { canvas: { getSize: () => ({ width, height }), getPos: () => ({ x: px, y: py }), - translateOffsetX: ox, translateOffsetY: oy, - scaleOffsetX: sx, scaleOffsetY: sy + translateOffsetX: ox, + translateOffsetY: oy, + scaleOffsetX: sx, + scaleOffsetY: sy } } const coords = { x, y } @@ -131,16 +144,26 @@ describe('Metamaps.Util.js', function() { expect(Util.pixelsToCoords(null, {}).y).to.equal(0) }) it('does the correct calculation', function() { - assertPixelsToCoords(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1) - assertPixelsToCoords(5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 1, 1) - assertPixelsToCoords(4, 5, 5, 5, 1, 0, 0, 0, 0, 0, 1, 1) - assertPixelsToCoords(4, 4, 5, 5, 1, 1, 0, 0, 0, 0, 1, 1) - assertPixelsToCoords(3, 4, 5, 5, 1, 1, 2, 0, 0, 0, 1, 1) - assertPixelsToCoords(3, 3, 5, 5, 1, 1, 2, 2, 0, 0, 1, 1) - assertPixelsToCoords(2, 3, 5, 5, 1, 1, 2, 2, 1, 0, 1, 1) - assertPixelsToCoords(2, 2, 5, 5, 1, 1, 2, 2, 1, 1, 1, 1) - assertPixelsToCoords(4, 2, 5, 5, 1, 1, 2, 2, 1, 1, 0.5, 1) - assertPixelsToCoords(4, 4, 5, 5, 1, 1, 2, 2, 1, 1, 0.5, 0.5) + assertPixelsToCoords(0, 0, + { x: 0, y: 0, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) + assertPixelsToCoords(5, 5, + { x: 5, y: 5, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) + assertPixelsToCoords(4, 5, + { x: 5, y: 5, px: 1, py: 0, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) + assertPixelsToCoords(4, 4, + { x: 5, y: 5, px: 1, py: 1, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) + assertPixelsToCoords(3, 4, + { x: 5, y: 5, px: 1, py: 1, width: 2, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) + assertPixelsToCoords(3, 3, + { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 0, oy: 0, sx: 1, sy: 1 }) + assertPixelsToCoords(2, 3, + { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 0, sx: 1, sy: 1 }) + assertPixelsToCoords(2, 2, + { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 1, sx: 1, sy: 1 }) + assertPixelsToCoords(4, 2, + { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 1, sx: 0.5, sy: 1 }) + assertPixelsToCoords(4, 4, + { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 1, sx: 0.5, sy: 0.5 }) }) }) describe('getPastelColor', function() { @@ -186,8 +209,8 @@ describe('Metamaps.Util.js', function() { }) describe('openLink', function() { function stubWindow({ popupsAllowed }) { - const open = sandbox.stub(window, "open").returns(popupsAllowed) - const alert = sandbox.stub(window, "alert") + const open = sandbox.stub(window, 'open').returns(popupsAllowed) + const alert = sandbox.stub(window, 'alert') return { open, alert } } afterEach(function() { @@ -235,10 +258,11 @@ describe('Metamaps.Util.js', function() { describe('logCanvasAttributes', function() { it('returns correct canvas attributes', function() { const canvas = { - scaleOffsetX: 1, scaleOffsetY: 2, + scaleOffsetX: 1, + scaleOffsetY: 2, canvases: [{ size: { width: 3, height: 4 } }] } - sinon.stub(Util, "pixelsToCoords").returnsArg(1) + sinon.stub(Util, 'pixelsToCoords').returnsArg(1) const actual = Util.logCanvasAttributes(canvas) From 81b47e613ee012ae41ee2da4e958af949ad6d9e1 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Sat, 17 Mar 2018 13:15:48 -0700 Subject: [PATCH 3/7] almost passing --- frontend/src/Metamaps/Listeners.js | 2 +- frontend/src/Metamaps/Util.js | 2 +- frontend/test/Metamaps/Util.spec.js | 30 ++++++++++++++++++++++++++++- 3 files changed, 31 insertions(+), 3 deletions(-) diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index a5dc630f..363ec48b 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -141,7 +141,7 @@ const Listeners = { }) $(window).resize(function() { if (Visualize && Visualize.mGraph) { - Util.resizeCanvas(Visualize.mGraph.canvas) + Util.resizeCanvas(Visualize.mGraph.canvas, $) } if (Active.Map && Realtime.inConversation) Realtime.positionVideos() diff --git a/frontend/src/Metamaps/Util.js b/frontend/src/Metamaps/Util.js index 4a53fc7c..1ffdeb23 100644 --- a/frontend/src/Metamaps/Util.js +++ b/frontend/src/Metamaps/Util.js @@ -158,7 +158,7 @@ const Util = { centreCoords: Util.pixelsToCoords(fakeMgraph, { x: canvas.canvases[0].size.width / 2, y: canvas.canvases[0].size.height / 2 }) } }, - resizeCanvas: function(canvas) { + resizeCanvas: function(canvas, $ = window.$) { // Store the current canvas attributes, i.e. scale and map-coordinate at the centre of the user's screen const oldAttr = Util.logCanvasAttributes(canvas) diff --git a/frontend/test/Metamaps/Util.spec.js b/frontend/test/Metamaps/Util.spec.js index 3866a1ea..c35b6606 100644 --- a/frontend/test/Metamaps/Util.spec.js +++ b/frontend/test/Metamaps/Util.spec.js @@ -275,6 +275,34 @@ describe('Metamaps.Util.js', function() { }) }) describe('resizeCanvas', function() { - it.skip('TODO') + it('resizes, scales, and translates canvas', function() { + const oldAttr = { + scaleX: 1, + scaleY: 2, + centreCoords: { x: 3, y: 4 } + } + const newAttr = { + centreCoords: { x: 5, y: 6 } + } + const canvas = { + resize: sinon.spy(), + scale: sinon.spy(), + translate: sinon.spy() + } + sinon.stub(Util, 'logCanvasAttributes').withArgs(canvas) + .onFirstCall().returns(oldAttr) + .onSecondCall().returns(newAttr) + const jQueryStub = sinon.stub().returns({ + width: () => 7, + height: () => 8 + }) + + Util.resizeCanvas(canvas, jQueryStub) + + expect(canvas.resize.calledWith(7, 8)).to.equal(true) + expect(canvas.scale.calledWith(1, 2)) + .to.equal(true) + expect(canvas.scale.calledWith(5 - 3, 6 - 4)).to.equal(true) + }) }) }) From 51b689d8b486fe24b6137b3bb26789ac60ce880e Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Sun, 18 Mar 2018 10:45:41 -0700 Subject: [PATCH 4/7] fix codeclimate --- frontend/src/Metamaps/Util.js | 2 -- frontend/test/Metamaps/Util.spec.js | 40 ++++++++++++++--------------- 2 files changed, 20 insertions(+), 22 deletions(-) diff --git a/frontend/src/Metamaps/Util.js b/frontend/src/Metamaps/Util.js index 1ffdeb23..e4ebb921 100644 --- a/frontend/src/Metamaps/Util.js +++ b/frontend/src/Metamaps/Util.js @@ -1,5 +1,3 @@ -/* global $ */ - import { Parser, HtmlRenderer, Node } from 'commonmark' import { emojiIndex } from 'emoji-mart' import { escapeRegExp } from 'lodash' diff --git a/frontend/test/Metamaps/Util.spec.js b/frontend/test/Metamaps/Util.spec.js index c35b6606..fb944684 100644 --- a/frontend/test/Metamaps/Util.spec.js +++ b/frontend/test/Metamaps/Util.spec.js @@ -99,25 +99,25 @@ describe('Metamaps.Util.js', function() { expect(Util.coordsToPixels(null, {}).y).to.equal(0) }) it('does the correct calculation', function() { - assertCoordsToPixels(0, 0, + assertCoordsToPixels(0, 0, { x: 0, y: 0, sx: 1, sy: 1, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(1, 1, + assertCoordsToPixels(1, 1, { x: 1, y: 1, sx: 1, sy: 1, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(2, 1, + assertCoordsToPixels(2, 1, { x: 1, y: 1, sx: 2, sy: 1, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(2, 2, + assertCoordsToPixels(2, 2, { x: 1, y: 1, sx: 2, sy: 2, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(3, 2, + assertCoordsToPixels(3, 2, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(3, 3, + assertCoordsToPixels(3, 3, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(4, 3, + assertCoordsToPixels(4, 3, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(4, 4, + assertCoordsToPixels(4, 4, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 2, ox: 0, oy: 0 }) - assertCoordsToPixels(9, 4, + assertCoordsToPixels(9, 4, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 2, ox: 5, oy: 0 }) - assertCoordsToPixels(9, 9, + assertCoordsToPixels(9, 9, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 2, ox: 5, oy: 5 }) }) }) @@ -144,25 +144,25 @@ describe('Metamaps.Util.js', function() { expect(Util.pixelsToCoords(null, {}).y).to.equal(0) }) it('does the correct calculation', function() { - assertPixelsToCoords(0, 0, + assertPixelsToCoords(0, 0, { x: 0, y: 0, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(5, 5, + assertPixelsToCoords(5, 5, { x: 5, y: 5, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(4, 5, + assertPixelsToCoords(4, 5, { x: 5, y: 5, px: 1, py: 0, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(4, 4, + assertPixelsToCoords(4, 4, { x: 5, y: 5, px: 1, py: 1, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(3, 4, + assertPixelsToCoords(3, 4, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(3, 3, + assertPixelsToCoords(3, 3, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(2, 3, + assertPixelsToCoords(2, 3, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(2, 2, + assertPixelsToCoords(2, 2, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 1, sx: 1, sy: 1 }) - assertPixelsToCoords(4, 2, + assertPixelsToCoords(4, 2, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 1, sx: 0.5, sy: 1 }) - assertPixelsToCoords(4, 4, + assertPixelsToCoords(4, 4, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 1, sx: 0.5, sy: 0.5 }) }) }) From d684838e4a2d7facfbb1653b4d65a3973d07c187 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Mon, 19 Mar 2018 08:33:57 -0700 Subject: [PATCH 5/7] reuse duplicated code --- frontend/test/Metamaps/Util.spec.js | 63 +++++++++++++++++++---------- 1 file changed, 42 insertions(+), 21 deletions(-) diff --git a/frontend/test/Metamaps/Util.spec.js b/frontend/test/Metamaps/Util.spec.js index fb944684..85542dbf 100644 --- a/frontend/test/Metamaps/Util.spec.js +++ b/frontend/test/Metamaps/Util.spec.js @@ -4,9 +4,23 @@ import { expect } from 'chai' import sinon from 'sinon' import Util from '../../src/Metamaps/Util' +import * as EmojiMart from 'emoji-mart' const sandbox = sinon.sandbox.create() +function mockMGraph({ x, y, sx, sy, px, py, width, height, ox, oy }) { + return { + canvas: { + getSize: () => ({ width, height }), + getPos: () => ({ x: px, y: py }), + translateOffsetX: ox, + translateOffsetY: oy, + scaleOffsetX: sx, + scaleOffsetY: sy + } + } +} + describe('Metamaps.Util.js', function() { describe('splitLine', function() { it('splits on words', function() { @@ -78,16 +92,9 @@ describe('Metamaps.Util.js', function() { describe('coordsToPixels', function() { function assertCoordsToPixels(expectedX, expectedY, { x, y, sx, sy, px, py, width, height, ox, oy }) { - const mGraph = { - canvas: { - getSize: () => ({ width, height }), - getPos: () => ({ x: px, y: py }), - translateOffsetX: ox, - translateOffsetY: oy, - scaleOffsetX: sx, - scaleOffsetY: sy - } - } + const mGraph = mockMGraph({ + x, y, sx, sy, px, py, width, height, ox, oy + }){ const coords = { x, y } const actual = Util.coordsToPixels(mGraph, coords) expect(actual.x).to.equal(expectedX) @@ -124,17 +131,9 @@ describe('Metamaps.Util.js', function() { describe('pixelsToCoords', function() { function assertPixelsToCoords(expectedX, expectedY, { x, y, px, py, width, height, ox, oy, sx, sy }) { - const mGraph = { - canvas: { - getSize: () => ({ width, height }), - getPos: () => ({ x: px, y: py }), - translateOffsetX: ox, - translateOffsetY: oy, - scaleOffsetX: sx, - scaleOffsetY: sy - } - } - const coords = { x, y } + const mGraph = mockMGraph({ + x, y, sx, sy, px, py, width, height, ox, oy + }){ const actual = Util.pixelsToCoords(mGraph, coords) expect(actual.x).to.equal(expectedX) expect(actual.y).to.equal(expectedY) @@ -304,5 +303,27 @@ describe('Metamaps.Util.js', function() { .to.equal(true) expect(canvas.scale.calledWith(5 - 3, 6 - 4)).to.equal(true) }) + }), + describe('emoji', function() { + EmojiMart.emojiIndex = { + emojis: { + emoji1: { native: '__EMOJI1__', colons: ':emoji1:' }, + emoji2: { native: '__EMOJI2__', colons: ':emoji2:' } + } + } + const withEmojiText = 'test __EMOJI1__ test __EMOJI2__ test'; + const noEmojiText = 'test :emoji1: test :emoji2: test'; + const emoticonsText = 'test :) test :( test' + const emoticonsReplacedText = 'test __EMOJI1__ test __EMOJI2__ test' + it('removeEmoji replaces emoji with text', function() { + expect(Util.removeEmoji(withEmojiText)).to.equal(noEmojiText) + }) + it('addEmoji replaces text with emoji', function() { + expect(Util.addEmoji(noEmojiText)).to.equal(withEmojiText) + }) + it.skip('addEmoji replaces emoticons with emoji', function() { + expect(Util.addEmoji(emoticonsText, { emoticons: true })) + .to.equal(emoticonsReplacedText) + }) }) }) From 2a2e13de54e753f512bc6ff811219307a81b0960 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Tue, 20 Mar 2018 20:05:36 -0700 Subject: [PATCH 6/7] fix existing Util tests, leaving one more test to write --- frontend/test/Metamaps/Util.spec.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/frontend/test/Metamaps/Util.spec.js b/frontend/test/Metamaps/Util.spec.js index 85542dbf..361e12b0 100644 --- a/frontend/test/Metamaps/Util.spec.js +++ b/frontend/test/Metamaps/Util.spec.js @@ -94,7 +94,7 @@ describe('Metamaps.Util.js', function() { { x, y, sx, sy, px, py, width, height, ox, oy }) { const mGraph = mockMGraph({ x, y, sx, sy, px, py, width, height, ox, oy - }){ + }) const coords = { x, y } const actual = Util.coordsToPixels(mGraph, coords) expect(actual.x).to.equal(expectedX) @@ -133,7 +133,8 @@ describe('Metamaps.Util.js', function() { { x, y, px, py, width, height, ox, oy, sx, sy }) { const mGraph = mockMGraph({ x, y, sx, sy, px, py, width, height, ox, oy - }){ + }) + const coords = { x, y } const actual = Util.pixelsToCoords(mGraph, coords) expect(actual.x).to.equal(expectedX) expect(actual.y).to.equal(expectedY) @@ -298,10 +299,14 @@ describe('Metamaps.Util.js', function() { Util.resizeCanvas(canvas, jQueryStub) - expect(canvas.resize.calledWith(7, 8)).to.equal(true) - expect(canvas.scale.calledWith(1, 2)) + debugger + expect(canvas.resize.calledWith(7, 8), 'resize not called') + .to.equal(true) + expect(canvas.scale.calledWith(1, 2), 'scale not called') + .to.equal(true) + expect(canvas.translate.calledWith(5 - 3, 6 - 4), + 'translate not called') .to.equal(true) - expect(canvas.scale.calledWith(5 - 3, 6 - 4)).to.equal(true) }) }), describe('emoji', function() { @@ -309,6 +314,10 @@ describe('Metamaps.Util.js', function() { emojis: { emoji1: { native: '__EMOJI1__', colons: ':emoji1:' }, emoji2: { native: '__EMOJI2__', colons: ':emoji2:' } + }, + emoticons: { + ':)': 'emoji1', + ':(': 'emoji2' } } const withEmojiText = 'test __EMOJI1__ test __EMOJI2__ test'; @@ -319,9 +328,9 @@ describe('Metamaps.Util.js', function() { expect(Util.removeEmoji(withEmojiText)).to.equal(noEmojiText) }) it('addEmoji replaces text with emoji', function() { - expect(Util.addEmoji(noEmojiText)).to.equal(withEmojiText) + expect(Util.addEmoji(noEmojiText, { emoticons: false })).to.equal(withEmojiText) }) - it.skip('addEmoji replaces emoticons with emoji', function() { + it('addEmoji replaces emoticons with emoji', function() { expect(Util.addEmoji(emoticonsText, { emoticons: true })) .to.equal(emoticonsReplacedText) }) From b89fdf3b0a26fb36bf5239f606fd82938c388552 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Tue, 20 Mar 2018 20:13:34 -0700 Subject: [PATCH 7/7] reuse duplicated code --- frontend/test/Metamaps/Util.spec.js | 101 ++++++++++++---------------- 1 file changed, 44 insertions(+), 57 deletions(-) diff --git a/frontend/test/Metamaps/Util.spec.js b/frontend/test/Metamaps/Util.spec.js index 361e12b0..6dd242a0 100644 --- a/frontend/test/Metamaps/Util.spec.js +++ b/frontend/test/Metamaps/Util.spec.js @@ -8,19 +8,6 @@ import * as EmojiMart from 'emoji-mart' const sandbox = sinon.sandbox.create() -function mockMGraph({ x, y, sx, sy, px, py, width, height, ox, oy }) { - return { - canvas: { - getSize: () => ({ width, height }), - getPos: () => ({ x: px, y: py }), - translateOffsetX: ox, - translateOffsetY: oy, - scaleOffsetX: sx, - scaleOffsetY: sy - } - } -} - describe('Metamaps.Util.js', function() { describe('splitLine', function() { it('splits on words', function() { @@ -89,80 +76,81 @@ describe('Metamaps.Util.js', function() { .to.equal('8.6023') }) }) - describe('coordsToPixels', function() { - function assertCoordsToPixels(expectedX, expectedY, + describe('coords/pixels conversions', function() { + function mockMGraph({ x, y, sx, sy, px, py, width, height, ox, oy }) { + return { + canvas: { + getSize: () => ({ width, height }), + getPos: () => ({ x: px, y: py }), + translateOffsetX: ox, + translateOffsetY: oy, + scaleOffsetX: sx, + scaleOffsetY: sy + } + } + } + + function assertConversion(testFunction, expectedX, expectedY, { x, y, sx, sy, px, py, width, height, ox, oy }) { const mGraph = mockMGraph({ x, y, sx, sy, px, py, width, height, ox, oy }) const coords = { x, y } - const actual = Util.coordsToPixels(mGraph, coords) + const actual = testFunction(mGraph, coords) expect(actual.x).to.equal(expectedX) expect(actual.y).to.equal(expectedY) } - it('returns 0,0 for null canvas', function() { + it('coordsToPixels returns 0,0 for null canvas', function() { expect(Util.coordsToPixels(null, {}).x).to.equal(0) expect(Util.coordsToPixels(null, {}).y).to.equal(0) }) - it('does the correct calculation', function() { - assertCoordsToPixels(0, 0, + it('coordsToPixels', function() { + assertConversion(Util.coordsToPixels, 0, 0, { x: 0, y: 0, sx: 1, sy: 1, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(1, 1, + assertConversion(Util.coordsToPixels, 1, 1, { x: 1, y: 1, sx: 1, sy: 1, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(2, 1, + assertConversion(Util.coordsToPixels, 2, 1, { x: 1, y: 1, sx: 2, sy: 1, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(2, 2, + assertConversion(Util.coordsToPixels, 2, 2, { x: 1, y: 1, sx: 2, sy: 2, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(3, 2, + assertConversion(Util.coordsToPixels, 3, 2, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 0, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(3, 3, + assertConversion(Util.coordsToPixels, 3, 3, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 0, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(4, 3, + assertConversion(Util.coordsToPixels, 4, 3, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 0, ox: 0, oy: 0 }) - assertCoordsToPixels(4, 4, + assertConversion(Util.coordsToPixels, 4, 4, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 2, ox: 0, oy: 0 }) - assertCoordsToPixels(9, 4, + assertConversion(Util.coordsToPixels, 9, 4, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 2, ox: 5, oy: 0 }) - assertCoordsToPixels(9, 9, + assertConversion(Util.coordsToPixels, 9, 9, { x: 1, y: 1, sx: 2, sy: 2, px: 1, py: 1, width: 2, height: 2, ox: 5, oy: 5 }) }) - }) - describe('pixelsToCoords', function() { - function assertPixelsToCoords(expectedX, expectedY, - { x, y, px, py, width, height, ox, oy, sx, sy }) { - const mGraph = mockMGraph({ - x, y, sx, sy, px, py, width, height, ox, oy - }) - const coords = { x, y } - const actual = Util.pixelsToCoords(mGraph, coords) - expect(actual.x).to.equal(expectedX) - expect(actual.y).to.equal(expectedY) - } - it('returns 0,0 for null canvas', function() { + it('pixelsToCoords returns 0,0 for null canvas', function() { expect(Util.pixelsToCoords(null, {}).x).to.equal(0) expect(Util.pixelsToCoords(null, {}).y).to.equal(0) }) - it('does the correct calculation', function() { - assertPixelsToCoords(0, 0, + it('pixelsToCoords', function() { + assertConversion(Util.pixelsToCoords, 0, 0, { x: 0, y: 0, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(5, 5, + assertConversion(Util.pixelsToCoords, 5, 5, { x: 5, y: 5, px: 0, py: 0, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(4, 5, + assertConversion(Util.pixelsToCoords, 4, 5, { x: 5, y: 5, px: 1, py: 0, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(4, 4, + assertConversion(Util.pixelsToCoords, 4, 4, { x: 5, y: 5, px: 1, py: 1, width: 0, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(3, 4, + assertConversion(Util.pixelsToCoords, 3, 4, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 0, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(3, 3, + assertConversion(Util.pixelsToCoords, 3, 3, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 0, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(2, 3, + assertConversion(Util.pixelsToCoords, 2, 3, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 0, sx: 1, sy: 1 }) - assertPixelsToCoords(2, 2, + assertConversion(Util.pixelsToCoords, 2, 2, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 1, sx: 1, sy: 1 }) - assertPixelsToCoords(4, 2, + assertConversion(Util.pixelsToCoords, 4, 2, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 1, sx: 0.5, sy: 1 }) - assertPixelsToCoords(4, 4, + assertConversion(Util.pixelsToCoords, 4, 4, { x: 5, y: 5, px: 1, py: 1, width: 2, height: 2, ox: 1, oy: 1, sx: 0.5, sy: 0.5 }) }) }) @@ -299,7 +287,6 @@ describe('Metamaps.Util.js', function() { Util.resizeCanvas(canvas, jQueryStub) - debugger expect(canvas.resize.calledWith(7, 8), 'resize not called') .to.equal(true) expect(canvas.scale.calledWith(1, 2), 'scale not called') @@ -308,20 +295,20 @@ describe('Metamaps.Util.js', function() { 'translate not called') .to.equal(true) }) - }), + }) describe('emoji', function() { EmojiMart.emojiIndex = { emojis: { emoji1: { native: '__EMOJI1__', colons: ':emoji1:' }, emoji2: { native: '__EMOJI2__', colons: ':emoji2:' } - }, + }, emoticons: { ':)': 'emoji1', ':(': 'emoji2' } } - const withEmojiText = 'test __EMOJI1__ test __EMOJI2__ test'; - const noEmojiText = 'test :emoji1: test :emoji2: test'; + const withEmojiText = 'test __EMOJI1__ test __EMOJI2__ test' + const noEmojiText = 'test :emoji1: test :emoji2: test' const emoticonsText = 'test :) test :( test' const emoticonsReplacedText = 'test __EMOJI1__ test __EMOJI2__ test' it('removeEmoji replaces emoji with text', function() {