Add PHP and JS unit tests for custom headers.

props mcsf, ehg.
see #21785.


git-svn-id: https://develop.svn.wordpress.org/trunk@27847 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Nacin 2014-03-29 10:05:22 +00:00
parent d8a3ebc173
commit e3171a42a3
7 changed files with 316 additions and 11 deletions

View File

@ -191,7 +191,7 @@ module.exports = function(grunt) {
tests: {
src: [
'tests/qunit/**/*.js',
'!tests/qunit/vendor/qunit.js',
'!tests/qunit/vendor/*',
'!tests/qunit/editor/**'
],
options: grunt.file.readJSON('tests/qunit/.jshintrc')

View File

@ -0,0 +1,145 @@
<?php
require_once( ABSPATH . 'wp-admin/custom-header.php');
/**
* @group image
* @group header
*/
class Tests_Image_Header extends WP_UnitTestCase {
var $custom_image_header;
function setUp() {
parent::setUp();
$this->custom_image_header = new Custom_Image_Header( '__return_null' );
}
function test_header_image_has_correct_dimensions_with_max_width() {
global $_wp_theme_features;
$_wp_theme_features['custom-header'][0]['max-width'] = 1600;
$_wp_theme_features['custom-header'][0]['width'] = 1200;
$_wp_theme_features['custom-header'][0]['height'] = 230;
$_wp_theme_features['custom-header'][0]['flex-width'] = false;
$_wp_theme_features['custom-header'][0]['flex-height'] = false;
$dimensions = $this->custom_image_header->get_header_dimensions( array(
'width' => 1600,
'height' => 1200,
) );
$this->assertEquals( $dimensions['dst_width'], 1200);
$this->assertEquals( $dimensions['dst_height'], 230);
}
function test_header_image_has_correct_dimensions_with_fixed() {
global $_wp_theme_features;
unset( $_wp_theme_features['custom-header'][0]['max-width'] );
$_wp_theme_features['custom-header'][0]['width'] = 1200;
$_wp_theme_features['custom-header'][0]['height'] = 230;
$_wp_theme_features['custom-header'][0]['flex-width'] = false;
$_wp_theme_features['custom-header'][0]['flex-height'] = false;
$dimensions = $this->custom_image_header->get_header_dimensions( array(
'width' => 1600,
'height' => 1200,
) );
$this->assertEquals( $dimensions['dst_width'], 1200);
$this->assertEquals( $dimensions['dst_height'], 230);
}
function test_header_image_has_correct_dimensions_with_flex_height() {
global $_wp_theme_features;
unset( $_wp_theme_features['custom-header'][0]['max-width'] );
$_wp_theme_features['custom-header'][0]['width'] = 1200;
$_wp_theme_features['custom-header'][0]['height'] = 230;
$_wp_theme_features['custom-header'][0]['flex-width'] = false;
$_wp_theme_features['custom-header'][0]['flex-height'] = true;
$dimensions = $this->custom_image_header->get_header_dimensions( array(
'width' => 1600,
'height' => 1200,
) );
$this->assertEquals( $dimensions['dst_width'], 1200);
$this->assertEquals( $dimensions['dst_height'], 900);
}
function test_header_image_has_correct_dimensions_with_flex_width() {
global $_wp_theme_features;
unset( $_wp_theme_features['custom-header'][0]['max-width'] );
$_wp_theme_features['custom-header'][0]['width'] = 1200;
$_wp_theme_features['custom-header'][0]['height'] = 230;
$_wp_theme_features['custom-header'][0]['flex-width'] = true;
$_wp_theme_features['custom-header'][0]['flex-height'] = false;
$dimensions = $this->custom_image_header->get_header_dimensions( array(
'width' => 1600,
'height' => 1200,
) );
$this->assertEquals( $dimensions['dst_width'], 1500); // max width
$this->assertEquals( $dimensions['dst_height'], 230);
}
function test_header_image_has_correct_dimensions_with_flex_width_and_height() {
global $_wp_theme_features;
$_wp_theme_features['custom-header'][0]['max-width'] = 1800;
$_wp_theme_features['custom-header'][0]['width'] = 1200;
$_wp_theme_features['custom-header'][0]['height'] = 230;
$_wp_theme_features['custom-header'][0]['flex-width'] = true;
$_wp_theme_features['custom-header'][0]['flex-height'] = true;
$dimensions = $this->custom_image_header->get_header_dimensions( array(
'width' => 1600,
'height' => 1200,
) );
$this->assertEquals( $dimensions['dst_width'], 1600);
$this->assertEquals( $dimensions['dst_height'], 1200);
}
function test_create_attachment_object() {
global $custom_image_header;
$id = wp_insert_attachment( array(
'post_status' => 'publish',
'post_title' => 'foo.png',
'post_type' => 'post',
'guid' => 'http://localhost/foo.png'
) );
$cropped = 'http://localhost/foo-cropped.png';
$object = $this->custom_image_header->create_attachment_object( $cropped, $id );
$this->assertEquals( $object['post_title'], 'foo-cropped.png' );
$this->assertEquals( $object['guid'], $cropped );
$this->assertEquals( $object['context'], 'custom-header' );
$this->assertEquals( $object['post_mime_type'], 'image/jpeg' );
$this->assertEquals( $object['post_content'], $cropped );
}
function test_insert_cropped_attachment() {
global $custom_image_header;
$id = wp_insert_attachment( array(
'post_status' => 'publish',
'post_title' => 'foo.png',
'post_type' => 'post',
'guid' => 'http://localhost/foo.png'
) );
$cropped = 'http://localhost/foo-cropped.png';
$object = $this->custom_image_header->create_attachment_object( $cropped, $id );
$cropped_id = $this->custom_image_header->insert_attachment( $object, $cropped );
$this->assertInternalType( 'int', $cropped_id );
$this->assertGreaterThan( 0, $cropped_id );
}
}

View File

@ -0,0 +1,46 @@
window.wp = window.wp || {};
window.wp.customize = window.wp.customize || { get: function(){} };
window._wpCustomizeHeader = {};
window._wpCustomizeHeader.uploads = {
'cropped-abstract_00601126.jpg': {
'attachment_id': 1,
'url': 'http://dev.local/2013/11/cropped-abstract_00601126.jpg',
'thumbnail_url': 'http://dev.local/2013/11/cropped-abstract_00601126.jpg',
'width': 1600,
'height': 230,
'timestamp': 1385045565
},
'cropped-cropped-miniature-golden-retriever-puppies-for-sale01127.jpg': {
'attachment_id': 2,
'url': 'http://dev.local/2013/11/cropped-cropped-miniature-golden-retriever-puppies-for-sale01127.jpg',
'thumbnail_url': 'http://dev.local/2013/11/cropped-cropped-miniature-golden-retriever-puppies-for-sale01127.jpg',
'width': 1600,
'height': 230,
'timestamp': 1385045566
},
'cropped-tumblr_m20paq9cjn1qbkdcro1_5003.png': {
'attachment_id': 3,
'url': 'http://dev.local/2013/11/cropped-tumblr_m20paq9cjn1qbkdcro1_5003.png',
'thumbnail_url': 'http://dev.local/2013/11/cropped-tumblr_m20paq9cjn1qbkdcro1_5003.png',
'width': 1600,
'height': 230,
'timestamp': 1385045567
}
};
window._wpCustomizeHeader.defaults = {
'circle': {
'url': 'https://dev.local/wp-content/themes/pub/twentythirteen/images/headers/circle.png',
'thumbnail_url': 'https://dev.local/wp-content/themes/pub/twentythirteen/images/headers/circle-thumbnail.png',
'description': 'Circle'
},
'diamond': {
'url': 'https://dev.local/wp-content/themes/pub/twentythirteen/images/headers/diamond.png',
'thumbnail_url': 'https://dev.local/wp-content/themes/pub/twentythirteen/images/headers/diamond-thumbnail.png',
'description': 'Diamond'
},
'star': {
'url': 'https://dev.local/wp-content/themes/pub/twentythirteen/images/headers/star.png',
'thumbnail_url': 'https://dev.local/wp-content/themes/pub/twentythirteen/images/headers/star-thumbnail.png',
'description': 'Star'
}
};

View File

@ -6,20 +6,14 @@
<!-- Dependencies -->
<script src="../../src/wp-includes/js/jquery/jquery.js"></script>
<script src="../../src/wp-includes/js/underscore.min.js"></script>
<script src="../../src/wp-includes/js/backbone.min.js"></script>
<script src="../../src/wp-includes/js/zxcvbn.min.js"></script>
<!-- QUnit -->
<link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" />
<script src="vendor/qunit.js"></script>
<!-- Tested files -->
<script src="../../src/wp-admin/js/password-strength-meter.js"></script>
<script src="../../src/wp-includes/js/shortcode.js"></script>
<!-- Unit tests -->
<script src="wp-admin/js/password-strength-meter.js"></script>
<script src="wp-includes/js/shortcode.js"></script>
<script src="vendor/sinon.js"></script>
<script src="vendor/sinon-qunit.js"></script>
</head>
<body>
<div>
@ -27,8 +21,20 @@
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>
<div id="qunit-fixture">
<script src="fixtures/customize-header.js"></script>
</div>
<p><a href="editor">TinyMCE tests</a></p>
<!-- Tested files -->
<script src="../../src/wp-admin/js/password-strength-meter.js"></script>
<script src="../../src/wp-includes/js/customize-models.js"></script>
<script src="../../src/wp-includes/js/shortcode.js"></script>
<!-- Unit tests -->
<script src="wp-admin/js/password-strength-meter.js"></script>
<script src="wp-admin/js/customize-header.js"></script>
<script src="wp-includes/js/shortcode.js"></script>
</div>
</body>
</html>

View File

@ -0,0 +1,108 @@
/* global wp, sinon */
jQuery( function() {
module('Custom Header: ChoiceList', {
setup: function() {
wp.customize.HeaderTool.currentHeader = new wp.customize.HeaderTool.ImageModel();
this.apiStub = sinon.stub(wp.customize, 'get').returns('foo');
this.choiceList = new wp.customize.HeaderTool.ChoiceList();
},
teardown: function() {
this.apiStub.restore();
}
});
test('should parse _wpCustomizeHeader.uploads into itself', function() {
equal(this.choiceList.length, 4);
});
test('should sort by newest first', function() {
equal(this.choiceList.at(2).get('header').attachment_id, 1);
equal(this.choiceList.first().get('header').attachment_id, 3);
});
module('Custom Header: DefaultsList', {
setup: function() {
wp.customize.HeaderTool.currentHeader = new wp.customize.HeaderTool.ImageModel();
this.apiStub = sinon.stub(wp.customize, 'get').returns('foo');
this.choiceList = new wp.customize.HeaderTool.DefaultsList();
},
teardown: function() {
this.apiStub.restore();
}
});
test('it should parse _wpCustomizeHeader.defaults into itself', function() {
equal(this.choiceList.length, 4);
});
test('it parses the default image names', function() {
equal(this.choiceList.first().get('header').defaultName, 'circle');
equal(this.choiceList.at(2).get('header').defaultName, 'star');
});
module('Custom Header: HeaderImage shouldBeCropped()', {
setup: function() {
wp.customize.HeaderTool.currentHeader = new wp.customize.HeaderTool.ImageModel();
this.model = new wp.customize.HeaderTool.ImageModel();
this.model.set({
themeWidth: 1000,
themeHeight: 200
});
}
});
test('should not be cropped when the theme does not support flex width or height and the image has the same dimensions of the theme image', function() {
this.model.set({
themeFlexWidth: false,
themeFlexHeight: false,
imageWidth: 1000,
imageHeight: 200
});
equal(this.model.shouldBeCropped(), false);
});
test('should be cropped when the image has the same dimensions of the theme image', function() {
this.model.set({
themeFlexWidth: false,
themeFlexHeight: false,
imageWidth: 2000,
imageHeight: 400
});
equal(this.model.shouldBeCropped(), true);
});
test('should not be cropped when the theme only supports flex width and the image has the same height as the theme image', function() {
this.model.set({
themeFlexWidth: true,
themeFlexHeight: false,
imageWidth: 4000,
imageHeight: 200
});
equal(this.model.shouldBeCropped(), false);
});
test('should not be cropped when the theme only supports flex height and the image has the same width as the theme image', function() {
this.model.set({
themeFlexWidth: false,
themeFlexHeight: true,
imageWidth: 1000,
imageHeight: 600
});
equal(this.model.shouldBeCropped(), false);
});
test('should not be cropped when the theme supports flex height AND width', function() {
this.model.set({
themeFlexWidth: true,
themeFlexHeight: true,
imageWidth: 10000,
imageHeight: 8600
});
equal(this.model.shouldBeCropped(), false);
});
});