mediawiki-extensions-Multim.../tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
Gergő Tisza 3bddd3fcb7 Open license deed in new tab
Not convinced this is a good thing (file description page still
opens in same window so it is somewhat inconsistent) but suddenly
leaving the lightbox to show the deed feels like a very unintuitive
behavior to me.

Change-Id: I2cca3e4241fd1bb2848c11cf425aa75aad8c4a30
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/472
2014-04-22 00:21:11 +00:00

310 lines
12 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

( function ( mw, $ ) {
var thingsShouldBeEmptied = [
'$license',
'$title',
'$credit',
'$username',
'$location',
'$repo',
'$datetime'
],
thingsShouldHaveEmptyClass = [
'$license',
'$credit',
'$usernameLi',
'$locationLi',
'$repoLi',
'$datetimeLi',
'$progress'
];
QUnit.module( 'mmv.ui.metadataPanel', QUnit.newMwEnvironment() );
QUnit.test( 'The panel is emptied properly when necessary', thingsShouldBeEmptied.length + thingsShouldHaveEmptyClass.length + 2, function ( assert ) {
var i,
$qf = $( '#qunit-fixture' ),
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) );
panel.empty();
for ( i = 0; i < thingsShouldBeEmptied.length; i++ ) {
assert.strictEqual( panel[thingsShouldBeEmptied[i]].text(), '', 'We successfully emptied the ' + thingsShouldBeEmptied[i] + ' element' );
}
for ( i = 0; i < thingsShouldHaveEmptyClass.length; i++ ) {
assert.strictEqual( panel[thingsShouldHaveEmptyClass[i]].hasClass( 'empty' ), true, 'We successfully applied the empty class to the ' + thingsShouldHaveEmptyClass[i] + ' element' );
}
assert.ok( !panel.$dragIcon.hasClass( 'pointing-down' ), 'We successfully reset the chevron' );
assert.ok( !panel.$container.hasClass( 'invite' ), 'We successfully reset the invite' );
} );
QUnit.test( 'Setting repository information in the UI works as expected', 3, function ( assert ) {
var $qf = $( '#qunit-fixture' ),
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) ),
repoInfo = new mw.mmv.model.Repo( 'Example Wiki' );
panel.setRepoDisplay( repoInfo );
assert.strictEqual( panel.$repo.text(), 'Learn more on Example Wiki', 'Text set to something useful for remote wiki - if this fails it might be because of localisation' );
repoInfo = new mw.mmv.model.Repo();
panel.setRepoDisplay( repoInfo );
assert.strictEqual( panel.$repo.text(), 'Learn more on ' + mw.config.get( 'wgSiteName' ), 'Text set to something useful for local wiki - if this fails it might be because of localisation' );
panel.setFilePageLink( 'https://commons.wikimedia.org/wiki/File:Foobar.jpg' );
assert.strictEqual( panel.$repo.prop( 'href' ), 'https://commons.wikimedia.org/wiki/File:Foobar.jpg', 'The file link was set successfully.' );
} );
QUnit.test( 'Setting location information works as expected', 6, function ( assert ) {
var $qf = $( '#qunit-fixture' ),
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) ),
fileName = 'Foobar.jpg',
latitude = 12.3456789,
longitude = 98.7654321,
imageData = {
latitude: latitude,
longitude: longitude,
hasCoords: function() { return true; },
title: mw.Title.newFromText( 'File:Foobar.jpg' )
};
panel.setLocationData( imageData );
assert.strictEqual(
panel.$location.text(),
'Location: 12° 20 44.44″ N, 98° 45 55.56″ E',
'Location text is set as expected - if this fails it may be due to i18n issues.'
);
assert.strictEqual(
panel.$location.prop( 'href' ),
'http://tools.wmflabs.org/geohack/geohack.php?pagename=File:' + fileName + '&params=' + latitude + '_N_' + longitude + '_E_&language=en',
'Location URL is set as expected'
);
latitude = -latitude;
longitude = -longitude;
imageData.latitude = latitude;
imageData.longitude = longitude;
panel.setLocationData( imageData );
assert.strictEqual(
panel.$location.text(),
'Location: 12° 20 44.44″ S, 98° 45 55.56″ W',
'Location text is set as expected - if this fails it may be due to i18n issues.'
);
assert.strictEqual(
panel.$location.prop( 'href' ),
'http://tools.wmflabs.org/geohack/geohack.php?pagename=File:' + fileName + '&params=' + ( - latitude) + '_S_' + ( - longitude ) + '_W_&language=en',
'Location URL is set as expected'
);
latitude = 0;
longitude = 0;
imageData.latitude = latitude;
imageData.longitude = longitude;
panel.setLocationData( imageData );
assert.strictEqual(
panel.$location.text(),
'Location: 0° 0 0″ N, 0° 0 0″ E',
'Location text is set as expected - if this fails it may be due to i18n issues.'
);
assert.strictEqual(
panel.$location.prop( 'href' ),
'http://tools.wmflabs.org/geohack/geohack.php?pagename=File:' + fileName + '&params=' + latitude + '_N_' + longitude + '_E_&language=en',
'Location URL is set as expected'
);
} );
QUnit.test( 'Setting image information works as expected', 16, function ( assert ) {
var gender,
$qf = $( '#qunit-fixture' ),
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) ),
title = 'Foo bar',
image = {
filePageTitle : mw.Title.newFromText( 'File:' + title + '.jpg' )
},
imageData = {
title: image.filePageTitle,
url: 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg',
descriptionUrl: 'https://commons.wikimedia.org/wiki/File:Foobar.jpg',
hasCoords: function() { return false; }
},
repoData = {
getArticlePath : function() { return 'Foo'; },
isCommons: function() { return false; }
},
localUsage = {},
globalUsage = {},
oldMoment = window.moment;
/*window.moment = function( date ) {
// This has no effect for now, since writing this test revealed that our moment.js
// doesn't have any language configuration
return oldMoment( date ).lang( 'fr' );
};*/
panel.setImageInfo( image, imageData, repoData, localUsage, globalUsage, gender );
assert.strictEqual( panel.$title.text(), title, 'Title is correctly set' );
assert.ok( panel.$credit.hasClass( 'empty' ), 'Credit is empty' );
assert.strictEqual( panel.$license.prop( 'href' ), imageData.descriptionUrl,
'User is directed to file page for license information' );
assert.ok( !panel.$license.prop( 'target' ), 'License information opens in same window' );
assert.ok( panel.$usernameLi.hasClass( 'empty' ), 'Username is empty' );
assert.ok( panel.$datetimeLi.hasClass( 'empty' ), 'Date/Time is empty' );
assert.ok( panel.$locationLi.hasClass( 'empty' ), 'Location is empty' );
imageData.creationDateTime = '2013-08-26T14:41:02Z';
imageData.uploadDateTime = '2013-08-25T14:41:02Z';
imageData.source = '<b>Lost</b><a href="foo">Bar</a>';
imageData.author = 'Bob';
imageData.license = new mw.mmv.model.License( 'CC-BY-2.0', 'cc-by-2.0',
'Creative Commons Attribution - Share Alike 2.0',
'http://creativecommons.org/licenses/by-sa/2.0/' );
gender = 'female';
imageData.lastUploader = 'Ursula';
panel.setImageInfo( image, imageData, repoData, localUsage, globalUsage, gender );
assert.strictEqual( panel.$title.text(), title, 'Title is correctly set' );
assert.ok( !panel.$credit.hasClass( 'empty' ), 'Credit is not empty' );
assert.ok( !panel.$datetimeLi.hasClass( 'empty' ), 'Date/Time is not empty' );
assert.strictEqual( panel.creditField.$element.html(), '<span class="mw-mmv-author">' + imageData.author + '</span> - <span class="mw-mmv-source">Lost<a href=\"foo\">Bar</a></span>', 'Source and author are correctly set' );
assert.ok( panel.$datetime.text().indexOf( 'August 26 2013' ) > 0, 'Correct date is displayed' );
assert.strictEqual( panel.$license.text(), 'CC BY 2.0', 'License is correctly set' );
assert.ok( panel.$license.prop( 'target' ), 'License information opens in new window' );
assert.ok( panel.$username.text().indexOf( imageData.lastUploader ) > 0, 'Correct username is displayed' );
imageData.creationDateTime = undefined;
panel.setImageInfo( image, imageData, repoData, localUsage, globalUsage, gender );
assert.ok( panel.$datetime.text().indexOf( 'August 25 2013' ) > 0, 'Correct date is displayed' );
window.moment = oldMoment;
} );
QUnit.test( 'Setting permission information works as expected', 1, function ( assert ) {
var $qf = $( '#qunit-fixture' ),
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) );
panel.setPermission( 'Look at me, I am a permission!' );
assert.ok( panel.$permissionLink.is( ':visible' ) );
} );
QUnit.test( 'Date formatting', 1, function ( assert ) {
var $qf = $( '#qunit-fixture' ),
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) ),
date1 = 'Garbage',
promise = panel.formatDate( date1 );
QUnit.stop();
promise.then( function ( result ) {
assert.strictEqual( result, date1, 'Invalid date is correctly ignored' );
QUnit.start();
} );
} );
QUnit.test( 'Progress bar', 10, function ( assert ) {
var $qf = $( '#qunit-fixture' ),
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) ),
oldAnimate = $.fn.animate;
assert.ok( panel.$progress.hasClass( 'empty' ), 'Progress bar is hidden' );
assert.strictEqual( panel.$percent.width(), 0, 'Progress bar\'s indicator is at 0' );
$.fn.animate = function ( target ) {
$( this ).css( target );
assert.strictEqual( target.width, '50%', 'Animation should go to 50%' );
};
panel.percent( 50 );
assert.ok( !panel.$progress.hasClass( 'empty' ), 'Progress bar is visible' );
assert.strictEqual( panel.$percent.width(), $qf.width() / 2, 'Progress bar\'s indicator is at half' );
$.fn.animate = function () {
assert.ok( false, 'Going to 0% should not animate' );
};
panel.percent( 0 );
assert.ok( panel.$progress.hasClass( 'empty' ), 'Progress bar is hidden' );
assert.strictEqual( panel.$percent.width(), 0, 'Progress bar\'s indicator is at 0' );
$.fn.animate = function ( target, duration, transition, callback ) {
$( this ).css( target );
assert.strictEqual( target.width, '100%', 'Animation should go to 100%' );
if ( callback !== undefined ) {
callback();
}
};
panel.percent( 100 );
assert.ok( panel.$progress.hasClass( 'empty' ), 'Progress bar is hidden' );
assert.strictEqual( panel.$percent.width(), 0, 'Progress bar\'s indicator is at 0' );
$.fn.animate = oldAnimate;
} );
QUnit.test( 'Metadata div is only animated once', 6, function ( assert ) {
localStorage.removeItem( 'mmv.hasOpenedMetadata' );
var $qf = $( '#qunit-fixture' ),
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) );
panel.animateMetadataOnce();
assert.ok( panel.hasAnimatedMetadata,
'The first call to animateMetadataOnce set hasAnimatedMetadata to true' );
assert.ok( !$qf.hasClass( 'invited' ),
'After the first call to animateMetadataOnce led to an animation' );
assert.ok( $qf.hasClass( 'invite' ),
'The first call to animateMetadataOnce led to an animation' );
$qf.removeClass( 'invite' );
panel.animateMetadataOnce();
assert.strictEqual( panel.hasAnimatedMetadata, true, 'The second call to animateMetadataOnce did not change the value of hasAnimatedMetadata' );
assert.ok( $qf.hasClass( 'invited' ),
'After the second call to animateMetadataOnce the div is shown right away' );
assert.ok( !$qf.hasClass( 'invite' ),
'The second call to animateMetadataOnce did not lead to an animation' );
$qf.removeClass( 'invited' );
} );
QUnit.test( 'Repo icon', 4, function ( assert ) {
var $qf = $( '#qunit-fixture' ),
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) ),
favIcon = 'http://foo.com/bar',
repoData = {
favIcon: favIcon,
getArticlePath : function() { return 'Foo'; },
isCommons: function() { return false; }
};
panel.setRepoDisplay( repoData );
assert.ok( panel.$repoLi.css( 'background-image' ).indexOf( favIcon ) !== -1, 'Repo favicon is correctly applied' );
assert.ok( !panel.$repoLi.hasClass( 'commons' ), 'Repo does not have commons class' );
repoData.isCommons = function() { return true; };
panel.setRepoDisplay( repoData );
assert.ok( panel.$repoLi.css( 'background-image' ).indexOf( 'data:image/svg+xml' ) !== -1, 'Repo favicon is correctly replaced by svg for Commons' );
assert.ok( panel.$repoLi.hasClass( 'commons' ), 'Repo has commons class' );
} );
}( mediaWiki, jQuery ) );