Restructure directories + set up tests

.circleci/config.yml

@@ -2,9 +2,11 @@
 #
 # Check https://circleci.com/docs/2.0/language-javascript/ for more details
 #
-version: 2
+version: 2.1
+orbs:
+  cypress: cypress-io/cypress@1.8.0
 jobs:
-  build:
+  unit_test:
     docker:
       # specify the version you desire here
       - image: circleci/node:10.16
@@ -29,4 +31,12 @@ jobs:
           key: v1-dependencies-{{ checksum "package.json" }}
 
       # run tests!
-      - run: yarn test
+      - run: yarn run test:unit
+workflows:
+  unit_and_integration:
+    jobs:
+      - unit_test
+      - cypress/run:
+          yarn: true
+          command: yarn run test:integration
+

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 !/src/node_modules
 package-lock.json
-public/bundle.*
+public/bundle.*
+test/sandbox/public/bundle.*

cypress.json

@@ -0,0 +1,5 @@
+{
+    "baseUrl": "http://localhost:3009",
+    "integrationFolder": "test/integration/tests",
+	"video": false
+}

package.json

@@ -1,11 +1,14 @@
 {
   "name": "florence",
   "version": "0.0.1",
+  "svelte": "src/index.js",
+  "module": "src/index.js",
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "@turf/meta": "^6.0.2",
     "babel-jest": "^24.8.0",
+    "cypress": "^3.4.0",
     "d3-array": "^2.2.0",
     "d3-geo": "^1.11.3",
     "d3-interpolate": "^1.3.2",
@@ -32,18 +35,26 @@
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
     "sirv-cli": "^0.4.0",
-    "svelte": "^3.4.4"
+    "svelte": "^3.6.5",
+    "svero": "^0.5.0"
   },
   "scripts": {
     "build": "rollup -c",
-    "autobuild": "rollup -c -w",
+    "autobuild": "rollup -c test/sandbox/rollup.config.js -w",
+    "autobuild:test": "rollup -c test/integration/testing-app/rollup.config.js -w",
     "dev": "run-p start:dev autobuild",
-    "start": "sirv public",
-    "start:dev": "sirv public --dev",
-    "test": "jest"
+    "dev:test": "run-p start:test autobuild:test",
+    "start": "sirv test/sandbox/public -s",
+    "start:dev": "sirv test/sandbox/public --dev -s",
+    "start:test": "sirv test/integration/testing-app/public --dev -s --port 3009",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open",
+    "test:integration": "run-p --race dev:test cy:run",
+    "test:unit": "jest"
   },
   "jest": {
     "verbose": true,
+    "testMatch": [ "**/*.test.js"],
     "transform": {
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
     },

src/florence/classes/EventManager/index.js → src/classes/EventManager/index.js

@@ -1,22 +1,43 @@
 let handler
 
 export default class EventManager {
-  constructor (domNode) {
-    this._domNode = domNode
-    this._svgPoint = this._domNode.createSVGPoint()
-
+  constructor () {
+    this._mounted = false
     this._clickTracker = new EventTracker(this, 'click')
     this._mousemoveTracker = new EventTracker(this, 'mousemove')
     this._mousedownTracker = new EventTracker(this, 'mousedown')
     this._mouseupTracker = new EventTracker(this, 'mouseup')
+    this._listeners = {}
+  }
+
+  addRootNode (domNode) {
+    this._domNode = domNode
+    this._svgPoint = this._domNode.createSVGPoint()
+    this._mounted = true
+  }
+
+  attachEventListeners () {
+    if (this._mounted) {
+      for (let listenerId in this._listeners) {
+        let { eventName, callback } = this._listeners[listenerId]
+        let tracker = this[getTrackerName(eventName)]
+        tracker.addEventListener(listenerId, callback)
+      }
+    } else {
+      // you should really only call this when mounted
+    }
   }
 
   addEventListener (eventName, listenerId, callback) {
-    let tracker = this[getTrackerName(eventName)]
-    tracker.addEventListener(listenerId, callback)
+    this._listeners[listenerId] = Object.assign({}, { eventName, callback })
+    if (this._mounted) {
+      let tracker = this[getTrackerName(eventName)]
+      tracker.addEventListener(listenerId, callback)
+    }
   }
 
   removeEventListener (eventName, listenerId) {
+    delete this._listeners[listenerId]
     let tracker = this[getTrackerName(eventName)]
     tracker.removeEventListener(listenerId)
   }

src/florence/components/Core/Graphic/Graphic.svelte → src/components/Core/Graphic/Graphic.svelte

@@ -31,16 +31,21 @@
   }
 
   let rootNode
+
+  // set up event and interaction manager
+  let eventManager = new EventManager()
+  EventManagerContext.update(eventManagerContext, eventManager)
 
-  onMount(() => {
-    let eventManager = new EventManager(rootNode)
-    EventManagerContext.update(eventManagerContext, eventManager)
+  let interactionManager = new InteractionManager()
+  interactionManager.setId('graphic')
+  interactionManager.linkEventManager(eventManager)
 
-    let interactionManager = new InteractionManager()
-    interactionManager.setId('graphic')
-    interactionManager.linkEventManager(eventManager)
+  InteractionManagerContext.update(interactionManagerContext, interactionManager)
 
-    InteractionManagerContext.update(interactionManagerContext, interactionManager)
+  onMount(() => {
+    // only on mount can we bind the svg root node and attach actual event listeners
+    eventManager.addRootNode(rootNode)
+    eventManager.attachEventListeners()
   })
 </script>
 

src/florence/components/Core/Section/Section.svelte → src/components/Core/Section/Section.svelte

@@ -6,8 +6,6 @@
 </script>
 
 <script>
-  import { onMount } from 'svelte'
-
   import * as GraphicContext from '../Graphic/GraphicContext'
   import * as SectionContext from './SectionContext'
   import * as CoordinateTransformationContext from '../CoordinateTransformation/CoordinateTransformationContext'
@@ -45,14 +43,13 @@
       newSectionContext, { sectionId, rangeX, rangeY, scaleX, scaleY }
     )
   }
+
+  // set up interaction manager
+  let interactionManager = new InteractionManager()
+  interactionManager.setId(sectionId)
+  interactionManager.linkEventManager($eventManagerContext)
+  InteractionManagerContext.update(interactionManagerContext, interactionManager)
 
-  onMount(() => {
-    let interactionManager = new InteractionManager()
-    interactionManager.setId(sectionId)
-    interactionManager.linkEventManager($eventManagerContext)
-
-    InteractionManagerContext.update(interactionManagerContext, interactionManager)
-  })
 </script>
 
 <g class="section">

src/florence/components/Marks/Point/Point.svelte → src/components/Marks/Point/Point.svelte

@@ -124,6 +124,7 @@
 {#if $graphicContext.output() === 'svg'}
 
   <circle 
+    class="point"
     cx={$tr_screenGeometry.coordinates[0]} 
     cy={$tr_screenGeometry.coordinates[1]} 
     r={$tr_radius} 

src/florence/components/Marks/Point/PointLayer.svelte → src/components/Marks/Point/PointLayer.svelte

@@ -144,6 +144,7 @@
   {#each indexArray as $index ($index)}
 
     <circle
+      class="point"
       cx={$tr_screenGeometryObject[$index].coordinates[0]}
       cy={$tr_screenGeometryObject[$index].coordinates[1]}
       r={$tr_radiusObject[$index]}

src/florence/components/Marks/Polygon/Polygon.svelte → src/components/Marks/Polygon/Polygon.svelte

@@ -132,6 +132,7 @@
 {#if $graphicContext.output() === 'svg'}
 
   <path 
+    class="polygon"
     d={generatePath($tr_screenGeometry)} 
     fill={$tr_fill}
     style={`opacity: ${$tr_opacity}`}

src/florence/components/Marks/Polygon/PolygonLayer.svelte → src/components/Marks/Polygon/PolygonLayer.svelte

@@ -146,6 +146,7 @@
   {#each indexArray as $index ($index)}
 
     <path 
+      class="polygon"
       d={generatePath($tr_screenGeometryObject[$index])} 
       fill={$tr_fillObject[$index]}
       style={`opacity: ${$tr_opacityObject[$index]}`}

src/florence/components/Marks/Rectangle/Rectangle.svelte → src/components/Marks/Rectangle/Rectangle.svelte

@@ -133,6 +133,7 @@
 {#if $graphicContext.output() === 'svg'}
 
   <path 
+    class="rectangle"
     d={generatePath($tr_screenGeometry)} 
     fill={$tr_fill}
     style={`opacity: ${$tr_opacity}`}

src/florence/components/Marks/Rectangle/RectangleLayer.svelte → src/components/Marks/Rectangle/RectangleLayer.svelte

@@ -146,7 +146,8 @@
 
   {#each indexArray as $index ($index)}
 
-    <path 
+    <path
+      class="rectangle" 
       d={generatePath($tr_screenGeometryObject[$index])} 
       fill={$tr_fillObject[$index]}
       style={`opacity: ${$tr_opacityObject[$index]}`}

src/florence/components/Marks/utils/applyCoordinateTransformation/interpolate.js → src/components/Marks/utils/applyCoordinateTransformation/interpolate.js

@@ -1,6 +1,5 @@
 import { interpolateArray } from 'd3-interpolate'
-import pointDistance from '../../../../utils/geometry/pointDistance.js'
-import { pointIntersectsLineSegment } from '../../../../utils/geometry/closestPointOnLine.js'
+import { pointDistance, pointIntersectsLineSegment } from 'geometryUtils'
 
 export function pointArray (points, transformFunc, visibilityTreshold) {
   let interpolatedPoints = []