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

Gruntfile.js

@@ -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')

tests/phpunit/tests/image/header.php

@@ -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 );
+	}
+
+}

tests/qunit/fixtures/customize-header.js

@@ -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'
+	}
+};

tests/qunit/index.html

@@ -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>
-
+  <script src="vendor/sinon.js"></script>
-  <!-- Tested files -->
+  <script src="vendor/sinon-qunit.js"></script>
-  <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>
-
 </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>

tests/qunit/wp-admin/js/customize-header.js

@@ -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);
+	});
+});