Added tests for selecting camera; related to #128

karma-integration.conf.js

@@ -24,6 +24,7 @@ module.exports = function(config) {
             resolve: {
                 modules: [
                     path.resolve('./src/input/'),
+                    path.resolve('./src/common/'),
                     'node_modules'
                 ]
             },

karma.conf.js

@@ -29,6 +29,7 @@ module.exports = function(config) {
             resolve: {
                 modules: [
                     path.resolve('./src/input/'),
+                    path.resolve('./test/mocks/'),
                     'node_modules'
                 ]
             },

src/common/mediaDevices.js

@@ -0,0 +1,17 @@
+
+export function enumerateDevices() {
+    if (navigator.mediaDevices
+            && typeof navigator.mediaDevices.enumerateDevices === 'function') {
+        return navigator.mediaDevices.enumerateDevices();
+    }
+    return Promise.reject(new Error('enumerateDevices is not defined'));
+};
+
+export function getUserMedia(constraints) {
+    if (navigator.mediaDevices
+            && typeof navigator.mediaDevices.getUserMedia === 'function') {
+        return navigator.mediaDevices
+            .getUserMedia(constraints);
+    }
+    return Promise.reject(new Error('getUserMedia is not defined'));
+}

src/input/camera_access.js

@@ -1,4 +1,5 @@
 import {omit, pick} from 'lodash';
+import {getUserMedia, enumerateDevices} from 'mediaDevices';
 
 const facingMatching = {
     "user": /front/i,
@@ -37,24 +38,19 @@ function waitForVideo(video) {
  * @param {Object} video
  */
 function initCamera(video, constraints) {
-    if (navigator.mediaDevices
+    return getUserMedia(constraints)
-            && typeof navigator.mediaDevices.getUserMedia === 'function') {
+    .then((stream) => {
-        return navigator.mediaDevices
+        return new Promise((resolve) => {
-            .getUserMedia(constraints)
+            streamRef = stream;
-            .then((stream) => {
+            video.setAttribute("autoplay", 'true');
-                return new Promise((resolve) => {
+            video.srcObject = stream;
-                    streamRef = stream;
+            video.addEventListener('loadedmetadata', () => {
-                    video.setAttribute("autoplay", 'true');
+                video.play();
-                    video.srcObject = stream;
+                resolve();
-                    video.addEventListener('loadedmetadata', () => {
+            });
-                        video.play();
+        });
-                        resolve();
+    })
-                    });
+    .then(waitForVideo.bind(null, video));
-                });
-            })
-            .then(waitForVideo.bind(null, video));
-    }
-    return Promise.reject(new Error('getUserMedia is not defined'));
 }
 
 function deprecatedConstraints(videoConstraints) {
@@ -80,7 +76,7 @@ function pickDevice(constraints) {
     if (!facingMatch) {
         return Promise.resolve(constraints);
     }
-    return navigator.mediaDevices.enumerateDevices()
+    return enumerateDevices()
     .then(devices => {
         const selectedDeviceId = devices
             .filter(device => device.kind === 'videoinput' && facingMatch.test(device.label))
@@ -98,7 +94,7 @@ function pickDevice(constraints) {
     });
 }
 
-function pickConstraints(videoConstraints) {
+export function pickConstraints(videoConstraints) {
     const normalizedConstraints = {
         audio: false,
         video: deprecatedConstraints(videoConstraints)

test/mocks/mediaDevices.js

@@ -0,0 +1,36 @@
+
+let devices = [],
+    stream,
+    _constraints,
+    _supported = true;
+
+export function enumerateDevices() {
+    console.log("enumerateDevices!!!!");
+    return Promise.resolve(devices);
+};
+
+export function getUserMedia(constraints) {
+    console.log("getUserMedia!!!!");
+    _constraints = constraints;
+    if (_supported) {
+        return Promise.resolve(stream);
+    }
+    return Promise.reject(new Error("das"));
+}
+
+export function setDevices(newDevices) {
+    devices = [...newDevices];
+}
+
+export function setStream(newStream) {
+    stream = newStream;
+}
+
+export function getConstraints() {
+    return _constraints;
+}
+
+export function setSupported(supported) {
+    console.log("Supported: " + supported);
+    _supported = supported;
+}

test/spec/camera_access.spec.js

@@ -1,147 +1,172 @@
-import CameraAccess from '../../src/input/camera_access';
+import CameraAccess, {pickConstraints} from '../../src/input/camera_access';
+import {setDevices, setStream, getConstraints, setSupported} from 'mediaDevices';
 
 var originalURL,
     originalMediaStreamTrack,
     video,
-    stream;
+    stream,
-
+    devices = [];
-beforeEach(function() {
-    var tracks = [{
-        stop: function() {}
-    }];
-
-    originalURL = window.URL;
-    originalMediaStreamTrack = window.MediaStreamTrack;
-    window.MediaStreamTrack = {};
-    window.URL = {
-        createObjectURL(stream) {
-            return stream;
-        }
-    };
-
-    stream = {
-        getVideoTracks: function() {
-            return tracks;
-        }
-    };
-    sinon.spy(tracks[0], "stop");
-
-    video = {
-        srcObject: null,
-        addEventListener: function() {},
-        removeEventListener: function() {},
-        setAttribute: sinon.spy(),
-        play: function() {},
-        videoWidth: 320,
-        videoHeight: 480
-    };
-    sinon.stub(video, "addEventListener", function(event, cb) {
-        cb();
-    });
-    sinon.stub(video, "play");
-});
 
-afterEach(function() {
+describe("camera_access", () => {
-    window.URL = originalURL;
-    window.MediaStreamTrack = originalMediaStreamTrack;
-});
-
-describe('success', function() {
     beforeEach(function() {
-        sinon.stub(navigator.mediaDevices, "getUserMedia", function(constraints) {
+        var tracks = [{
-            return Promise.resolve(stream);
+            stop: function() {}
+        }];
+
+        originalURL = window.URL;
+        originalMediaStreamTrack = window.MediaStreamTrack;
+        window.MediaStreamTrack = {};
+        window.URL = {
+            createObjectURL(stream) {
+                return stream;
+            }
+        };
+
+        stream = {
+            getVideoTracks: function() {
+                return tracks;
+            }
+        };
+        setStream(stream);
+        sinon.spy(tracks[0], "stop");
+
+        video = {
+            srcObject: null,
+            addEventListener: function() {},
+            removeEventListener: function() {},
+            setAttribute: sinon.spy(),
+            play: function() {},
+            videoWidth: 320,
+            videoHeight: 480
+        };
+        sinon.stub(video, "addEventListener", function(event, cb) {
+            cb();
         });
+        sinon.stub(video, "play");
     });
 
     afterEach(function() {
-        navigator.mediaDevices.getUserMedia.restore();
+        window.URL = originalURL;
+        window.MediaStreamTrack = originalMediaStreamTrack;
     });
-    describe('request', function () {
-        it('should request the camera', function (done) {
-            CameraAccess.request(video, {})
-            .then(function () {
-                expect(navigator.mediaDevices.getUserMedia.calledOnce).to.equal(true);
-                expect(video.srcObject).to.deep.equal(stream);
-                done();
-            })
-        });
 
-        it("should allow deprecated constraints to be used", (done) => {
+    describe('success', function() {
-            CameraAccess.request(video, {
+        describe('request', function () {
-                width: 320,
+            it('should request the camera', function (done) {
-                height: 240,
+                CameraAccess.request(video, {})
-                facing: "user",
+                .then(function () {
-                minAspectRatio: 2,
+                    expect(video.srcObject).to.deep.equal(stream);
-                maxAspectRatio: 100
+                    done();
-            })
+                })
-            .then(function () {
+            });
-                const call = navigator.mediaDevices.getUserMedia.getCall(0),
+
-                    args = call.args;
+            it("should allow deprecated constraints to be used", (done) => {
-                expect(call).to.be.defined;
+                CameraAccess.request(video, {
-                expect(args[0].video.width).to.equal(320);
+                    width: 320,
-                expect(args[0].video.height).to.equal(240);
+                    height: 240,
-                expect(args[0].video.facingMode).to.equal("user");
+                    facing: "user",
-                expect(args[0].video.aspectRatio).to.equal(2);
+                    minAspectRatio: 2,
-                expect(args[0].video.facing).not.to.be.defined;
+                    maxAspectRatio: 100
-                expect(args[0].video.minAspectRatio).not.to.be.defined;
+                })
-                expect(args[0].video.maxAspectRatio).not.to.be.defined;
+                .then(function () {
-                done();
+                    const constraints = getConstraints();
-            })
+                    expect(constraints.video.width).to.equal(320);
+                    expect(constraints.video.height).to.equal(240);
+                    expect(constraints.video.facingMode).to.equal("user");
+                    expect(constraints.video.aspectRatio).to.equal(2);
+                    expect(constraints.video.facing).not.to.be.defined;
+                    expect(constraints.video.minAspectRatio).not.to.be.defined;
+                    expect(constraints.video.maxAspectRatio).not.to.be.defined;
+                    done();
+                })
+            });
         });
-    });
 
-    describe('release', function () {
+        describe('release', function () {
-        it('should release the camera', function (done) {
+            it('should release the camera', function (done) {
-            CameraAccess.request(video, {})
+                CameraAccess.request(video, {})
-            .then(function () {
+                .then(function () {
-                expect(video.srcObject).to.deep.equal(stream);
+                    expect(video.srcObject).to.deep.equal(stream);
-                CameraAccess.release();
+                    CameraAccess.release();
-                expect(video.srcObject.getVideoTracks()).to.have.length(1);
+                    expect(video.srcObject.getVideoTracks()).to.have.length(1);
-                expect(video.srcObject.getVideoTracks()[0].stop.calledOnce).to.equal(true);
+                    expect(video.srcObject.getVideoTracks()[0].stop.calledOnce).to.equal(true);
-                done();
+                    done();
+                });
             });
         });
     });
-});
 
-describe('failure', function() {
+    describe('failure', function() {
-    describe("permission denied", function(){
+        beforeEach(() => {
-        beforeEach(function() {
+            setSupported(false);
-            sinon.stub(navigator.mediaDevices, "getUserMedia", function(constraints, success, failure) {
-                return Promise.reject(new Error());
-            });
         });
 
-        afterEach(function() {
+        afterEach(() => {
-            navigator.mediaDevices.getUserMedia.restore();
+            setSupported(true);
         });
 
-        it('should throw if getUserMedia not available', function(done) {
+        describe("permission denied", function(){
-            CameraAccess.request(video, {})
+            it('should throw if getUserMedia not available', function(done) {
-            .catch(function (err) {
+                CameraAccess.request(video, {})
-                expect(err).to.be.defined;
+                .catch(function (err) {
-                done();
+                    expect(err).to.be.defined;
+                    done();
+                });
             });
         });
-    });
 
-    describe("not available", function(){
+        describe("not available", function(){
-        var originalGetUserMedia;
+            var originalGetUserMedia;
 
-        beforeEach(function() {
+            it('should throw if getUserMedia not available', function(done) {
-            originalGetUserMedia = navigator.mediaDevices.getUserMedia;
+                CameraAccess.request(video, {})
-            navigator.mediaDevices.getUserMedia = undefined;
+                .catch((err) => {
+                    expect(err).to.be.defined;
+                    done();
+                });
+            });
         });
 
-        afterEach(function() {
+        describe("pickConstraints", () => {
-            navigator.mediaDevices.getUserMedia = originalGetUserMedia;
+            it("should return the given constraints if no facingMode is defined", (done) => {
-        });
+                const givenConstraints = {width: 180};
+                return pickConstraints(givenConstraints).then((actualConstraints) => {
+                    expect(actualConstraints.video).to.deep.equal(givenConstraints);
+                    done();
+                })
+                .catch((err) => {
+                    expect(err).to.equal(null);
+                    console.log(err);
+                    done();
+                });
+            });
+
+            it("should return the given constraints if deviceId is defined", (done) => {
+                const givenConstraints = {width: 180, deviceId: "4343"};
+                return pickConstraints(givenConstraints).then((actualConstraints) => {
+                    expect(actualConstraints.video).to.deep.equal(givenConstraints);
+                    done();
+                })
+                .catch((err) => {
+                    expect(err).to.equal(null);
+                    console.log(err);
+                    done();
+                });
+            });
 
-        it('should throw if getUserMedia not available', function(done) {
+            it("should set deviceId if facingMode is set to environment", (done) => {
-            CameraAccess.request(video, {})
+                setDevices([{deviceId: "front", kind: "videoinput", label: "front Facing"},
-            .catch((err) => {
+                    {deviceId: "back", label: "back Facing", kind: "videoinput"}]);
-                expect(err).to.be.defined;
+                const givenConstraints = {width: 180, facingMode: "environment"};
-                done();
+                return pickConstraints(givenConstraints).then((actualConstraints) => {
+                    expect(actualConstraints.video).to.deep.equal({width: 180, deviceId: "back"});
+                    done();
+                })
+                .catch((err) => {
+                    console.log(err);
+                    expect(err).to.equal(null);
+                    done();
+                });
             });
         });
     });

test/spec/result_collector.spec.js

@@ -5,99 +5,102 @@ var canvasMock,
     imageSize,
     config;
 
-beforeEach(function() {
-    imageSize = {x: 320, y: 240};
-    config = {
-        capture: true,
-        capacity: 20,
-        blacklist: [{code: "3574660239843", format: "ean_13"}],
-        filter: function() {
-            return true;
-        }
-    };
-    canvasMock = {
-        getContext: function() {
-            return {};
-        },
-        toDataURL: sinon.spy(),
-        width: 0,
-        height: 0
-    };
-    sinon.stub(document, "createElement", function(type) {
-        if (type === "canvas") {
-            return canvasMock;
-        }
-    });
-});
-
-afterEach(function() {
-    document.createElement.restore();
-});
-
-
-describe('create', function () {
-    it("should return a new collector", function() {
-        ResultCollector.create(config);
-        expect(document.createElement.calledOnce).to.be.equal(true);
-        expect(document.createElement.getCall(0).args[0]).to.equal("canvas");
-    });
-});
 
-describe('addResult', function() {
+describe("resultCollector", () => {
     beforeEach(function() {
-        sinon.stub(ImageDebug, "drawImage", function() {});
+        imageSize = {x: 320, y: 240};
+        config = {
+            capture: true,
+            capacity: 20,
+            blacklist: [{code: "3574660239843", format: "ean_13"}],
+            filter: function() {
+                return true;
+            }
+        };
+        canvasMock = {
+            getContext: function() {
+                return {};
+            },
+            toDataURL: sinon.spy(),
+            width: 0,
+            height: 0
+        };
+        sinon.stub(document, "createElement", function(type) {
+            if (type === "canvas") {
+                return canvasMock;
+            }
+        });
     });
 
     afterEach(function() {
-        ImageDebug.drawImage.restore();
+        document.createElement.restore();
     });
 
-    it("should not add result if capacity is full", function(){
+
-        config.capacity = 1;
+    describe('create', function () {
-        var collector = ResultCollector.create(config);
+        it("should return a new collector", function() {
-        collector.addResult([], imageSize, {});
+            ResultCollector.create(config);
-        collector.addResult([], imageSize, {});
+            expect(document.createElement.calledOnce).to.be.equal(true);
-        collector.addResult([], imageSize, {});
+            expect(document.createElement.getCall(0).args[0]).to.equal("canvas");
-        expect(collector.getResults()).to.have.length(1);
+        });
     });
 
-    it("should only add results which match constraints", function(){
+    describe('addResult', function() {
-        var collector = ResultCollector.create(config),
+        beforeEach(function() {
-            results;
+            sinon.stub(ImageDebug, "drawImage", function() {});
+        });
+
+        afterEach(function() {
+            ImageDebug.drawImage.restore();
+        });
+
+        it("should not add result if capacity is full", function(){
+            config.capacity = 1;
+            var collector = ResultCollector.create(config);
+            collector.addResult([], imageSize, {});
+            collector.addResult([], imageSize, {});
+            collector.addResult([], imageSize, {});
+            expect(collector.getResults()).to.have.length(1);
+        });
 
-        collector.addResult([], imageSize, {code: "423423443", format: "ean_13"});
+        it("should only add results which match constraints", function(){
-        collector.addResult([], imageSize, {code: "3574660239843", format: "ean_13"});
+            var collector = ResultCollector.create(config),
-        collector.addResult([], imageSize, {code: "3574660239843", format: "code_128"});
+                results;
 
-        results = collector.getResults();
+            collector.addResult([], imageSize, {code: "423423443", format: "ean_13"});
-        expect(results).to.have.length(2);
+            collector.addResult([], imageSize, {code: "3574660239843", format: "ean_13"});
+            collector.addResult([], imageSize, {code: "3574660239843", format: "code_128"});
 
-        results.forEach(function(result) {
+            results = collector.getResults();
-            expect(result).not.to.deep.equal(config.blacklist[0]);
+            expect(results).to.have.length(2);
+
+            results.forEach(function(result) {
+                expect(result).not.to.deep.equal(config.blacklist[0]);
+            });
         });
-    });
 
-    it("should add result if no filter is set", function() {
+        it("should add result if no filter is set", function() {
-        delete config.filter;
+            delete config.filter;
-        var collector = ResultCollector.create(config);
+            var collector = ResultCollector.create(config);
 
-        collector.addResult([], imageSize, {code: "423423443", format: "ean_13"});
+            collector.addResult([], imageSize, {code: "423423443", format: "ean_13"});
-        expect(collector.getResults()).to.have.length(1);
+            expect(collector.getResults()).to.have.length(1);
-    });
+        });
 
-    it("should not add results if filter returns false", function() {
+        it("should not add results if filter returns false", function() {
-        config.filter = () => (false);
+            config.filter = () => (false);
-        var collector = ResultCollector.create(config);
+            var collector = ResultCollector.create(config);
 
-        collector.addResult([], imageSize, {code: "423423443", format: "ean_13"});
+            collector.addResult([], imageSize, {code: "423423443", format: "ean_13"});
-        expect(collector.getResults()).to.have.length(0);
+            expect(collector.getResults()).to.have.length(0);
-    });
+        });
 
-    it("should add result if no blacklist is set", function() {
+        it("should add result if no blacklist is set", function() {
-        delete config.blacklist;
+            delete config.blacklist;
-        var collector = ResultCollector.create(config);
+            var collector = ResultCollector.create(config);
 
-        collector.addResult([], imageSize, {code: "3574660239843", format: "ean_13"});
+            collector.addResult([], imageSize, {code: "3574660239843", format: "ean_13"});
-        expect(collector.getResults()).to.have.length(1);
+            expect(collector.getResults()).to.have.length(1);
+        });
     });
-});
+})

webpack.config.js

@@ -17,6 +17,7 @@ module.exports = {
     resolve: {
         modules: [
             path.resolve('./src/input/'),
+            path.resolve('./src/common/'),
             'node_modules'
         ]
     },

webpack.node.config.js

@@ -6,6 +6,7 @@ module.exports = require('./webpack.config.js');
 module.exports.resolve = {
     modules: [
         path.resolve('./lib/'),
+        path.resolve('./src/common/'),
         'node_modules'
     ]
 };