suite('views/viewfinder', function() { 'use strict'; var SENSOR_ANGLE = 90; suiteSetup(function(done) { var self = this; requirejs(['views/viewfinder'], function(ViewfinderView) { self.ViewfinderView = ViewfinderView; done(); }); }); setup(function() { this.viewfinder = new this.ViewfinderView(); this.viewfinder.width = 300; this.viewfinder.height = 500; }); suite('ViewfinderView#updatePreview()', function() { setup(function() { sinon.stub(this.viewfinder, 'updatePreviewMetrics'); }); test('Should prefer this.scaleType if defined', function() { var preview = { width: 1600, height: 900 }; var scaleType; this.viewfinder.scaleType = 'fit'; this.viewfinder.updatePreview(preview, SENSOR_ANGLE); scaleType = this.viewfinder.updatePreviewMetrics.args[0][3]; assert.equal(scaleType, 'fit'); this.viewfinder.scaleType = 'foobar'; this.viewfinder.updatePreview(preview, SENSOR_ANGLE); scaleType = this.viewfinder.updatePreviewMetrics.args[1][3]; assert.equal(scaleType, 'foobar'); }); test('Should choose \'fill\' scaleType if preview aspect > container aspect', function() { var scaleType; this.viewfinder.scaleType = undefined; this.viewfinder.updatePreview({ width: 1600, height: 900 }, SENSOR_ANGLE); scaleType = this.viewfinder.updatePreviewMetrics.args[0][3]; assert.equal(scaleType, 'fill'); this.viewfinder.updatePreview({ width: 400, height: 300 }, SENSOR_ANGLE); scaleType = this.viewfinder.updatePreviewMetrics.args[1][3]; assert.equal(scaleType, 'fit'); }); test('Should add negative scale style if `mirror` argument is true', function() { var preview = { width: 1600, height: 900 }; this.viewfinder.updatePreview(preview, SENSOR_ANGLE, true); assert.isTrue(this.viewfinder.els.videoContainer.style.transform.indexOf('scale(-1') === -1); this.viewfinder.updatePreview(preview, SENSOR_ANGLE, false); assert.isFalse(this.viewfinder.els.videoContainer.style.transform.indexOf('scale(-1') !== -1); }); }); suite('ViewfinderView#updatePreviewMetrics()', function() { setup(function() { this.viewfinder.container = { width: this.viewfinder.height, height: this.viewfinder.width }; this.container = this.viewfinder.container; }); test('Should set a \'scale-type\' attribute', function() { var previewSize = { width: 400, height: 300 }; this.viewfinder.updatePreviewMetrics(previewSize, SENSOR_ANGLE, false, 'fill'); assert.equal(this.viewfinder.el.getAttribute('scale-type'), 'fill'); this.viewfinder.updatePreviewMetrics(previewSize, SENSOR_ANGLE, false, 'fit'); assert.equal(this.viewfinder.el.getAttribute('scale-type'), 'fit'); }); suite('\'fill\'', function() { test('Should match frame width to container width when preview aspect > container aspect', function() { var previewSize = { width: 1600, height: 900 }; // Run test-case this.viewfinder.updatePreviewMetrics(previewSize, SENSOR_ANGLE, false, 'fill'); // Frame var frame = { width: parseInt(this.viewfinder.els.frame.style.width, 10), height: parseInt(this.viewfinder.els.frame.style.height, 10) }; // Video container var video = { width: parseInt(this.viewfinder.els.videoContainer.style.width, 10), height: parseInt(this.viewfinder.els.videoContainer.style.height, 10) }; assert.equal(frame.width, this.container.height); assert.ok(frame.height > this.container.width); assert.equal(video.height, this.container.height); assert.ok(video.width > this.container.width); }); test('Should match frame height to container height when preview aspect < container aspect', function() { var previewSize = { width: 400, height: 300 }; // Run test-case this.viewfinder.updatePreviewMetrics(previewSize, SENSOR_ANGLE, false, 'fill'); var frame = { width: parseInt(this.viewfinder.els.frame.style.width, 10), height: parseInt(this.viewfinder.els.frame.style.height, 10) }; var video = { width: parseInt(this.viewfinder.els.videoContainer.style.width, 10), height: parseInt(this.viewfinder.els.videoContainer.style.height, 10) }; assert.ok(frame.width > this.container.height); assert.equal(frame.height, this.container.width); assert.ok(video.height > this.container.height); assert.equal(video.width, this.container.width); }); }); suite('\'fit\'', function() { test('Should match frame height to container height when preview aspect > container aspect', function() { var previewSize = { width: 1600, height: 900 }; // Run test-case this.viewfinder.updatePreviewMetrics(previewSize, SENSOR_ANGLE, false, 'fit'); var frame = { width: parseInt(this.viewfinder.els.frame.style.width, 10), height: parseInt(this.viewfinder.els.frame.style.height, 10) }; var video = { width: parseInt(this.viewfinder.els.videoContainer.style.width, 10), height: parseInt(this.viewfinder.els.videoContainer.style.height, 10) }; assert.equal(frame.height, this.container.width); assert.ok(frame.width < this.container.height); assert.equal(video.width, this.container.width); assert.ok(video.height < this.container.height); }); test('Should match frame width to container width when preview aspect < container aspect', function() { var previewSize = { width: 400, height: 300 }; // Run test-case this.viewfinder.updatePreviewMetrics(previewSize, SENSOR_ANGLE, false, 'fit'); var frame = { width: parseInt(this.viewfinder.els.frame.style.width, 10), height: parseInt(this.viewfinder.els.frame.style.height, 10) }; var video = { width: parseInt(this.viewfinder.els.videoContainer.style.width, 10), height: parseInt(this.viewfinder.els.videoContainer.style.height, 10) }; // Check width is equal and height is shorter assert.equal(frame.width, this.container.height); assert.ok(frame.height < this.container.width); // Check container width is shorter and container height is equal assert.ok(video.width < this.container.width); assert.equal(video.height, this.container.height); }); }); }); });