Skip to content

Commit

Permalink
Merge pull request #2735 from alexgibson/update-platform-image-helper…
Browse files Browse the repository at this point in the history 
…-tests

Update Mozilla.ImageHelper JS tests
  • Loading branch information
@pmac
pmac committed Feb 13, 2015
2 parents db30f21 + 5184b79 commit fa436fa
Showing 1 changed file with 108 additions and 72 deletions.
180 changes: 108 additions & 72 deletions media/js/test/spec/mozilla-image-helper.js
View file
Expand Up @@ -8,144 +8,180 @@ describe('mozilla-image-helper.js', function() {

describe('Mozilla.ImageHelper.initPlatformImages', function() {

var stub;
var $img;

beforeEach(function () {
var tpl = '<img class="platform-img js" src=""' +
'data-processed="false"' +
'data-src-windows="browser-windows.png"' +
'data-src-windows-high-res="browser-windows-high-res.png"' +
'data-src-mac="browser-mac.png"' +
'data-src-mac-high-res="browser-mac-high-res.png"' +
'data-src-linux="browser-linux.png"' +
'data-src-linux-high-res="browser-linux-high-res.png"' +
'data-src-android="browser-android.png"' +
'data-src-android-high-res="browser-android-high-res.png"' +
'data-src-ios="browser-ios.png"' +
'data-src-ios-high-res="browser-ios-high-res.png">';

stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi').returns(false);
window.site = {
platform: 'other'
};
$('<img class="platform-img js" data-processed="false" data-src="browser.png" data-additional-platforms="android ios">').appendTo('body');
$img = $(tpl);
$img.appendTo($('body'));
});

afterEach(function(){
Mozilla.ImageHelper.isHighDpi.restore();
window.site.platform = null;
$('.platform-img').remove();
$img.remove();
});

it('should display default image for Windows', function() {
it('should display Windows platform image', function() {
window.site.platform = 'windows';
Mozilla.ImageHelper.initPlatformImages();
expect($('.platform-img').attr('src')).toEqual('browser.png');
expect($('.platform-img').hasClass('windows')).toBeTruthy();
expect($img.attr('src')).toEqual('browser-windows.png');
expect($img.hasClass('windows')).toBeTruthy();
});

it('should display Mac platform image', function() {
window.site.platform = 'osx';
Mozilla.ImageHelper.initPlatformImages();
expect($('.platform-img').attr('src')).toEqual('browser-mac.png');
expect($('.platform-img').hasClass('osx')).toBeTruthy();
expect($img.attr('src')).toEqual('browser-mac.png');
expect($img.hasClass('osx')).toBeTruthy();
});

it('should display Linux platform image', function() {
window.site.platform = 'linux';
Mozilla.ImageHelper.initPlatformImages();
expect($('.platform-img').attr('src')).toEqual('browser-linux.png');
expect($('.platform-img').hasClass('linux')).toBeTruthy();
expect($img.attr('src')).toEqual('browser-linux.png');
expect($img.hasClass('linux')).toBeTruthy();
});

it('should display iOS platform image', function() {
window.site.platform = 'ios';
Mozilla.ImageHelper.initPlatformImages();
expect($('.platform-img').attr('src')).toEqual('browser-ios.png');
expect($('.platform-img').hasClass('ios')).toBeTruthy();
expect($img.attr('src')).toEqual('browser-ios.png');
expect($img.hasClass('ios')).toBeTruthy();
});

it('should display Android platform image', function() {
window.site.platform = 'android';
Mozilla.ImageHelper.initPlatformImages();
expect($('.platform-img').attr('src')).toEqual('browser-android.png');
expect($('.platform-img').hasClass('android')).toBeTruthy();
expect($img.attr('src')).toEqual('browser-android.png');
expect($img.hasClass('android')).toBeTruthy();
});

it('should flag that image src has been processed', function () {
var $img = $('.platform-img');
it('should flag when a platform image been processed', function () {
window.site.platform = 'windows';
expect($img.attr('data-processed')).toEqual('false');
Mozilla.ImageHelper.initPlatformImages();
expect($img.attr('data-processed')).toEqual('true');
});

describe('high-res platform images', function () {

var stub;

beforeEach(function () {
window.site = {
platform: 'other'
};
$('<img id="high-res-img" class="platform-img js" data-processed="false" data-high-res="true" data-src="browser.png" data-additional-platforms="android ios">').appendTo('body');
});

afterEach(function(){
Mozilla.ImageHelper.isHighDpi.restore();
window.site.platform = null;
$('#high-res-img').remove();
});

it('should update image url for high-res devices', function () {
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi', function () {
return true;
});
window.site.platform = 'osx';
Mozilla.ImageHelper.initPlatformImages();
expect($('#high-res-img').attr('src')).toEqual('browser-mac-high-res.png');
expect($('#high-res-img').hasClass('osx')).toBeTruthy();
});

it('should not update image url for low-res devices', function () {
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi', function () {
return false;
});
window.site.platform = 'osx';
Mozilla.ImageHelper.initPlatformImages();
expect($('#high-res-img').attr('src')).toEqual('browser-mac.png');
expect($('#high-res-img').hasClass('osx')).toBeTruthy();
});
it('should fall back to Windows if no appropriate platform image is found', function () {
var tpl = '<img class="platform-img js" src=""' +
'data-processed="false"' +
'data-src-windows="browser-windows.png"' +
'data-src-windows-high-res="browser-windows-high-res.png"' +
'data-src-mac="browser-mac.png"' +
'data-src-mac-high-res="browser-mac-high-res.png">';
$img.remove();
$img = $(tpl);
$img.appendTo($('body'));
window.site.platform = 'linux';
Mozilla.ImageHelper.initPlatformImages();
expect($img.attr('src')).toEqual('browser-windows.png');
expect($img.hasClass('linux')).toBeTruthy();
});
});

describe('High Resolution Platform Images', function () {

var stub;
var $img;

beforeEach(function () {
var tpl = '<img class="platform-img js" src=""' +
'data-high-res="true"' +
'data-processed="false"' +
'data-src-windows="browser-windows.png"' +
'data-src-windows-high-res="browser-windows-high-res.png"' +
'data-src-mac="browser-mac.png"' +
'data-src-mac-high-res="browser-mac-high-res.png">';
window.site = {
platform: 'windows'
};
$img = $(tpl);
$img.appendTo($('body'));
});

afterEach(function(){
Mozilla.ImageHelper.isHighDpi.restore();
window.site.platform = null;
$img.remove();
});

it('should update platform image url for high resolution devices', function () {
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi').returns(true);
window.site.platform = 'osx';
Mozilla.ImageHelper.initPlatformImages();
expect($img.attr('src')).toEqual('browser-mac-high-res.png');
expect($img.hasClass('osx')).toBeTruthy();
});

it('should not update platform image url for low resolution devices', function () {
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi').returns(false);
window.site.platform = 'osx';
Mozilla.ImageHelper.initPlatformImages();
expect($img.attr('src')).toEqual('browser-mac.png');
expect($img.hasClass('osx')).toBeTruthy();
});
});

describe('Mozilla.ImageHelper.initHighResImages', function() {

var stub;
var $img;

beforeEach(function () {
$('<img id="high-res-img" class="js" data-processed="false" data-src="browser.png" data-high-res="true">').appendTo('body');
var tpl = '<img class="js" src=""' +
'data-high-res="true"' +
'data-processed="false"' +
'data-src="low-res.png"' +
'data-high-res-src="high-res.png">';
$img = $(tpl);
$img.appendTo('body');
});

afterEach(function(){
Mozilla.ImageHelper.isHighDpi.restore();
$('#high-res-img').remove();
$img.remove();
});

it('should update image url for high-res devices', function() {
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi', function () {
return true;
});
it('should update image url for high resolution devices', function() {
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi').returns(true);
Mozilla.ImageHelper.initHighResImages();
expect($('#high-res-img').attr('src')).toEqual('browser-high-res.png');
expect($img.attr('src')).toEqual('high-res.png');
});

it('should not update image url for low-res devices', function () {
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi', function () {
return false;
});
it('should not update image url for low resolution devices', function () {
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi').returns(false);
Mozilla.ImageHelper.initHighResImages();
expect($('#high-res-img').attr('src')).toEqual('browser.png');
expect($img.attr('src')).toEqual('low-res.png');
});

it('should flag that image src has been processed', function () {
var $img = $('#high-res-img');
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi', function () {
return true;
});
it('should flag when an image has been processed', function () {
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi').returns(true);
expect($img.attr('data-processed')).toEqual('false');
Mozilla.ImageHelper.initHighResImages();
expect($img.attr('data-processed')).toEqual('true');
});

it('should not change the src of an image that is already processed', function () {
var $img = $('#high-res-img');
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi', function () {
return true;
});
stub = sinon.stub(Mozilla.ImageHelper, 'isHighDpi').returns(true);
$img.attr('src', 'foo.png');
$img.attr('data-processed', 'true');
Mozilla.ImageHelper.initHighResImages();
Expand Down

0 comments on commit fa436fa

Please sign in to comment.