From 34e9ada4d87d3d84f8e395f545283ce88c976db7 Mon Sep 17 00:00:00 2001 From: Tira Odhner Date: Fri, 17 Nov 2017 12:58:01 -0500 Subject: [PATCH] Add a test for orbiting the camera --- .gitignore | 2 +- .npmignore | 8 ++-- demo.js | 51 ++++++++++++++++++++++++ package.json | 8 +++- test.js | 50 ------------------------ tests/three-orbit-controls-test.js | 62 ++++++++++++++++++++++++++++++ 6 files changed, 124 insertions(+), 57 deletions(-) create mode 100644 demo.js delete mode 100644 test.js create mode 100644 tests/three-orbit-controls-test.js diff --git a/.gitignore b/.gitignore index 9541c46..ec342ca 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ -bower_components node_modules *.log .DS_Store bundle.js +.idea/ diff --git a/.npmignore b/.npmignore index fa7b008..30dd983 100644 --- a/.npmignore +++ b/.npmignore @@ -1,9 +1,7 @@ -bower_components node_modules *.log .DS_Store bundle.js -test -test.js -demo/ -bower.json \ No newline at end of file +demo.js +tests/ +.idea/ diff --git a/demo.js b/demo.js new file mode 100644 index 0000000..e1b8ada --- /dev/null +++ b/demo.js @@ -0,0 +1,51 @@ +var createApp = require('canvas-testbed') + +var THREE = require('three') +var OrbitControls = require('./')(THREE) + +createApp(render, start, { + context: 'webgl', + onResize: resize +}) + +var renderer, + scene, + camera, + controls + +function start(gl, width, height) { + renderer = new THREE.WebGLRenderer({ + canvas: gl.canvas + }) + renderer.setClearColor(0x000000, 1.0) + + scene = new THREE.Scene() + + // camera = new THREE.OrthographicCamera( 1 / - 2, 1 / 2, 1 / 2, 1 / - 2, 1, 1000 ) + // camera.position.set(0, 0, -1) + + camera = new THREE.PerspectiveCamera(50, width / height, 1, 1000) + camera.position.set(0, 1, -3) + camera.lookAt(new THREE.Vector3()) + + controls = new OrbitControls(camera) + + var geo = new THREE.BoxGeometry(1, 1, 1) + var mat = new THREE.MeshBasicMaterial({ wireframe: true, color: 0xffffff }) + var box = new THREE.Mesh(geo, mat) + scene.add(box) +} + +function render(gl, width, height) { + renderer.render(scene, camera) +} + +function resize(width, height) { + if (renderer) { + renderer.setViewport(0, 0, width, height) + camera.aspect = width / height + camera.updateProjectionMatrix() + } else { + return + } +} diff --git a/package.json b/package.json index 18cbd20..910f6bb 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,18 @@ "devDependencies": { "browserify": "^8.1.1", "canvas-testbed": "^1.0.3", + "chai": "^4.1.2", + "jsdom": "^11.3.0", + "mocha": "^4.0.1", "scriptjs": "^2.5.7", + "sinon": "^4.1.2", + "sinon-chai": "^2.14.0", "three": "^0.82.1", "wzrd": "^1.2.1" }, "scripts": { - "start": "wzrd test.js" + "start": "wzrd demo.js", + "test": "mocha ./tests{,/**/}**test.js --recursive" }, "keywords": [ "orbit", diff --git a/test.js b/test.js deleted file mode 100644 index 6e77468..0000000 --- a/test.js +++ /dev/null @@ -1,50 +0,0 @@ -var createApp = require('canvas-testbed') - -var THREE = require('three') -var OrbitControls = require('./')(THREE) - -createApp(render, start, { - context: 'webgl', - onResize: resize -}) - -var renderer, - scene, - camera, - controls - -function start(gl, width, height) { - renderer = new THREE.WebGLRenderer({ - canvas: gl.canvas - }) - renderer.setClearColor(0x000000, 1.0) - - scene = new THREE.Scene() - - // camera = new THREE.OrthographicCamera( 1 / - 2, 1 / 2, 1 / 2, 1 / - 2, 1, 1000 ) - // camera.position.set(0, 0, -1) - - camera = new THREE.PerspectiveCamera(50, width/height, 1, 1000) - camera.position.set(0, 1, -3) - camera.lookAt(new THREE.Vector3()) - - controls = new OrbitControls(camera) - - var geo = new THREE.BoxGeometry(1,1,1) - var mat = new THREE.MeshBasicMaterial({ wireframe: true, color: 0xffffff }) - var box = new THREE.Mesh(geo, mat) - scene.add(box) -} - -function render(gl, width, height) { - renderer.render(scene, camera) -} - -function resize(width, height) { - if (!renderer) - return - - renderer.setViewport(0, 0, width, height) - camera.aspect = width/height - camera.updateProjectionMatrix() -} diff --git a/tests/three-orbit-controls-test.js b/tests/three-orbit-controls-test.js new file mode 100644 index 0000000..8f269fd --- /dev/null +++ b/tests/three-orbit-controls-test.js @@ -0,0 +1,62 @@ +var expect = require('chai').expect; +var THREE = require('three'); +var OrbitControls = require('../index')(THREE); +var JSDOM = require('jsdom').JSDOM; + +var window = new JSDOM('

Hello world

').window; +global.window = window; +global.document = window.document; +var MouseEvent = window.MouseEvent; + +function defineProperty(object, propertyName, propertyValue) { + Object.defineProperty(object, propertyName, { + get: function () { + return propertyValue; + }, + enumerable: true, + configurable: true + }); +} + +describe("three-orbit-controls", function () { + describe("after depressing the orbit button", function () { + var orbitControls, camera, domElement; + beforeEach(function () { + domElement = window.document.createElement('div'); + defineProperty(domElement, 'clientWidth', 100); + defineProperty(domElement, 'clientHeight', 100); + document.body.appendChild(domElement); + + camera = new THREE.PerspectiveCamera(50, 1000, 1000); + camera.position.x = -100; + orbitControls = new OrbitControls(camera, domElement); + + var mouseDown = + new MouseEvent('mousedown', { + button: orbitControls.mouseButtons.ORBIT, + clientX: 0, + clientY: 0 + }); + domElement.dispatchEvent(mouseDown); + }); + + afterEach(function () { + document.body.removeChild(domElement); + }); + + describe("moving the mouse downwards", function () { + var mouseMove; + beforeEach(function () { + mouseMove = new MouseEvent('mousemove', { + clientX: 0, + clientY: 10 + }); + }); + + it("moves the camera upwards", function () { + document.dispatchEvent(mouseMove); + expect(camera.position.y).to.be.greaterThan(10); + }) + }); + }); +}); \ No newline at end of file