2018-03-08 20:38:23 +00:00
|
|
|
import { createThumbnail, createThumbnailElement } from '../../../src/ui/thumbnail';
|
|
|
|
|
2018-03-19 19:39:41 +00:00
|
|
|
const $ = jQuery;
|
2018-03-08 20:38:23 +00:00
|
|
|
|
|
|
|
QUnit.module( 'ext.popups#thumbnail', {
|
2018-03-14 22:04:59 +00:00
|
|
|
beforeEach() {
|
2018-03-14 23:50:09 +00:00
|
|
|
$.bracketedDevicePixelRatio = () => 1;
|
2018-03-08 20:38:23 +00:00
|
|
|
},
|
2018-03-14 22:04:59 +00:00
|
|
|
afterEach() {
|
2018-03-08 20:38:23 +00:00
|
|
|
$.bracketedDevicePixelRatio = null;
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
QUnit.test( 'createThumbnail - tall image', ( assert ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const devicePixelRatio = $.bracketedDevicePixelRatio(),
|
2018-03-08 20:38:23 +00:00
|
|
|
rawThumbnail = {
|
|
|
|
source: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/President_Barack_Obama.jpg/409px-President_Barack_Obama.jpg',
|
|
|
|
width: 409,
|
|
|
|
height: 512
|
|
|
|
},
|
|
|
|
thumbnail = createThumbnail( rawThumbnail );
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.isTall,
|
|
|
|
true,
|
|
|
|
'Thumbnail is tall.'
|
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.width,
|
|
|
|
thumbnail.width / devicePixelRatio,
|
|
|
|
'Thumbnail width is correct.'
|
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.height,
|
|
|
|
thumbnail.height / devicePixelRatio,
|
|
|
|
'Thumbnail height is correct.'
|
|
|
|
);
|
|
|
|
} );
|
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
QUnit.test( 'createThumbnail - tall image element', ( assert ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const cases = [
|
|
|
|
{
|
|
|
|
width: 200,
|
|
|
|
height: 300,
|
|
|
|
expectedX: 203 - 200,
|
|
|
|
expectedY: ( 300 - 250 ) / -2,
|
|
|
|
expectedSVGWidth: 203,
|
|
|
|
expectedSVGHeight: 250,
|
|
|
|
message: 'Width smaller than the predefined width (203).'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
width: 250,
|
|
|
|
height: 300,
|
|
|
|
expectedX: ( 250 - 203 ) / -2,
|
|
|
|
expectedY: ( 300 - 250 ) / -2,
|
|
|
|
expectedSVGWidth: 203,
|
|
|
|
expectedSVGHeight: 250,
|
|
|
|
message: 'Width bigger than the predefined width (203).'
|
|
|
|
}
|
|
|
|
];
|
2018-03-08 20:38:23 +00:00
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
cases.forEach( ( case_ ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const thumbnail = createThumbnail( {
|
2018-03-08 20:38:23 +00:00
|
|
|
source: 'https://image.url',
|
|
|
|
width: case_.width,
|
|
|
|
height: case_.height
|
|
|
|
} );
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.find( 'image' ).attr( 'x' ),
|
|
|
|
case_.expectedX,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image element x coordinate is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.find( 'image' ).attr( 'y' ),
|
|
|
|
case_.expectedY,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image element y coordinate is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.find( 'image' ).attr( 'width' ),
|
|
|
|
case_.width,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image element width is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.find( 'image' ).attr( 'height' ),
|
|
|
|
case_.height,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image element height is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.attr( 'width' ),
|
|
|
|
case_.expectedSVGWidth,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image SVG width is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.attr( 'height' ),
|
|
|
|
case_.expectedSVGHeight,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image SVG height is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
} );
|
|
|
|
} );
|
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
QUnit.test( 'createThumbnail - landscape image', ( assert ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const devicePixelRatio = $.bracketedDevicePixelRatio(),
|
2018-03-08 20:38:23 +00:00
|
|
|
rawThumbnail = {
|
|
|
|
source: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/President_Barack_Obama.jpg/500px-President_Barack_Obama.jpg',
|
|
|
|
width: 500,
|
|
|
|
height: 400
|
|
|
|
},
|
|
|
|
thumbnail = createThumbnail( rawThumbnail );
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.isTall,
|
|
|
|
false,
|
|
|
|
'Thumbnail is not tall.'
|
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.width,
|
|
|
|
thumbnail.width / devicePixelRatio,
|
|
|
|
'Thumbnail width is correct.'
|
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.height,
|
|
|
|
thumbnail.height / devicePixelRatio,
|
|
|
|
'Thumbnail height is correct.'
|
|
|
|
);
|
|
|
|
} );
|
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
QUnit.test( 'createThumbnail - landscape image element', ( assert ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const cases = [
|
|
|
|
{
|
|
|
|
width: 400,
|
|
|
|
height: 150,
|
|
|
|
expectedX: 0,
|
|
|
|
expectedY: 0,
|
2018-04-16 18:56:58 +00:00
|
|
|
expectedSVGWidth: 320,
|
2018-03-19 19:39:41 +00:00
|
|
|
expectedSVGHeight: 150,
|
|
|
|
message: 'Height smaller than the predefined height (200).'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
width: 400,
|
|
|
|
height: 250,
|
|
|
|
expectedX: 0,
|
|
|
|
expectedY: ( 250 - 200 ) / -2,
|
2018-04-16 18:56:58 +00:00
|
|
|
expectedSVGWidth: 320,
|
2018-03-19 19:39:41 +00:00
|
|
|
expectedSVGHeight: 200,
|
|
|
|
message: 'Height bigger than the predefined height (200).'
|
|
|
|
}
|
|
|
|
];
|
2018-03-08 20:38:23 +00:00
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
cases.forEach( ( case_ ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const thumbnail = createThumbnail( {
|
2018-03-08 20:38:23 +00:00
|
|
|
source: 'https://image.url',
|
|
|
|
width: case_.width,
|
|
|
|
height: case_.height
|
|
|
|
} );
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.find( 'image' ).attr( 'x' ),
|
|
|
|
case_.expectedX,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image x coordinate is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.find( 'image' ).attr( 'y' ),
|
|
|
|
case_.expectedY,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image y coordinate is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.find( 'image' ).attr( 'width' ),
|
|
|
|
case_.width,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image element width is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.find( 'image' ).attr( 'height' ),
|
|
|
|
case_.height,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image element height is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.attr( 'width' ),
|
|
|
|
case_.expectedSVGWidth,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image SVG width is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
thumbnail.el.attr( 'height' ),
|
|
|
|
case_.expectedSVGHeight,
|
2018-03-20 17:01:18 +00:00
|
|
|
`Image SVG height is correct. ${ case_.message }`
|
2018-03-08 20:38:23 +00:00
|
|
|
);
|
|
|
|
} );
|
|
|
|
} );
|
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
QUnit.test( 'createThumbnail - no raw thumbnail', ( assert ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const thumbnail = createThumbnail( null );
|
2018-03-08 20:38:23 +00:00
|
|
|
|
|
|
|
assert.equal( thumbnail, null, 'No thumbnail.' );
|
|
|
|
} );
|
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
QUnit.test( 'createThumbnail - small wide image', ( assert ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const rawThumbnail = {
|
2018-03-08 20:38:23 +00:00
|
|
|
source: 'https://landscape-image.jpg',
|
|
|
|
width: 299,
|
|
|
|
height: 298
|
|
|
|
},
|
|
|
|
thumbnail = createThumbnail( rawThumbnail );
|
|
|
|
|
|
|
|
assert.equal( thumbnail, null, 'No thumbnail.' );
|
|
|
|
} );
|
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
QUnit.test( 'createThumbnail - small tall image', ( assert ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const rawThumbnail = {
|
2018-03-08 20:38:23 +00:00
|
|
|
source: 'https://tall-image.jpg',
|
|
|
|
width: 248,
|
|
|
|
height: 249
|
|
|
|
},
|
|
|
|
thumbnail = createThumbnail( rawThumbnail );
|
|
|
|
|
|
|
|
assert.equal( thumbnail, null, 'No thumbnail.' );
|
|
|
|
} );
|
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
QUnit.test( 'createThumbnail - insecure URL', ( assert ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const cases = [
|
|
|
|
'https://tall-ima\\ge.jpg',
|
|
|
|
'https://tall-ima\'ge.jpg',
|
|
|
|
'https://tall-ima"ge.jpg'
|
|
|
|
];
|
2018-03-08 20:38:23 +00:00
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
cases.forEach( ( case_ ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const thumbnail = createThumbnail( {
|
2018-03-08 20:38:23 +00:00
|
|
|
source: case_,
|
|
|
|
width: 500,
|
|
|
|
height: 400
|
|
|
|
} );
|
|
|
|
|
|
|
|
assert.equal( thumbnail, null, 'No thumbnail.' );
|
|
|
|
} );
|
|
|
|
} );
|
|
|
|
|
2018-03-14 23:50:09 +00:00
|
|
|
QUnit.test( 'createThumbnailElement', ( assert ) => {
|
2018-03-19 19:39:41 +00:00
|
|
|
const className = 'thumb-class',
|
2018-03-08 20:38:23 +00:00
|
|
|
url = 'https://thumbnail.url',
|
|
|
|
x = 25,
|
|
|
|
y = 50,
|
|
|
|
thumbnailWidth = 200,
|
|
|
|
thumbnailHeight = 250,
|
|
|
|
width = 500,
|
|
|
|
height = 300,
|
|
|
|
clipPath = 'mwe-popups-mask',
|
|
|
|
$thumbnail = createThumbnailElement(
|
|
|
|
className, url, x, y, thumbnailWidth, thumbnailHeight,
|
|
|
|
width, height, clipPath );
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
$thumbnail.html(),
|
2018-04-11 20:40:20 +00:00
|
|
|
'<image href="https://thumbnail.url" class="thumb-class" x="25" y="50" width="200" height="250"></image>',
|
2018-03-08 20:38:23 +00:00
|
|
|
'Thumbnail HTML is correct.'
|
|
|
|
);
|
|
|
|
assert.equal(
|
|
|
|
$thumbnail.attr( 'xmlns' ),
|
|
|
|
'http://www.w3.org/2000/svg',
|
|
|
|
'SVG namespace is correct.'
|
|
|
|
);
|
|
|
|
assert.equal( $thumbnail.attr( 'height' ), height, 'SVG height is correct.' );
|
|
|
|
assert.equal( $thumbnail.attr( 'width' ), width, 'SVG width is correct.' );
|
|
|
|
} );
|