Wordpress/tests/qunit/editor/plugins/importcss.js

(function() {
	var menuCtrl;

	module("tinymce.plugins.ImportCSS", {
		setupModule: function() {
			QUnit.stop();

			tinymce.init({
				selector: "textarea",
				add_unload_trigger: false,
				skin: false,
				plugins: 'importcss',
				init_instance_callback: function(ed) {
					window.editor = ed;
					QUnit.start();
				}
			});
		},

		teardown: function() {
			if (menuCtrl) {
				menuCtrl.remove();
				menuCtrl = null;
			}

			editor.contentCSS = [];
			delete editor.settings.importcss_file_filter;
			delete editor.settings.importcss_merge_classes;
			delete editor.settings.importcss_append;
			delete editor.settings.importcss_selector_filter;
			delete editor.settings.importcss_groups;
			delete editor.settings.importcss_exclusive;
			delete editor.settings.importcss_selector_converter;
		}
	});

	function fireFormatsMenuEvent(styleSheets, items) {
		menuCtrl = tinymce.ui.Factory.create('menu', {
			items: items
		}).renderTo(document.getElementById('view'));

		return editor.fire('renderFormatsMenu', {
			control: menuCtrl,
			doc: {
				styleSheets: styleSheets
			}
		});
	}

	function getMenuItemFormat(item) {
		return editor.formatter.get(item.settings.format)[0];
	}

	test("Import content_css files", function() {
		editor.contentCSS.push("test1.css");
		editor.contentCSS.push("test2.css");

		var evt = fireFormatsMenuEvent([
			{
				href: 'test1.css',
				cssRules: [
					{selectorText: '.a'},
					{selectorText: 'p.b'},
					{selectorText: 'img.c'}
				]
			},

			{href: 'test2.css', cssRules: [{selectorText: '.d'}]},
			{href: 'test3.css',	cssRules: [{selectorText: '.e'}]}
		]);

		equal(evt.control.items().length, 4);

		equal(evt.control.items()[0].text(), 'a');
		equal(getMenuItemFormat(evt.control.items()[0]).classes, 'a');

		equal(evt.control.items()[1].text(), 'p.b');
		equal(getMenuItemFormat(evt.control.items()[1]).block, 'p');
		equal(getMenuItemFormat(evt.control.items()[1]).classes, 'b');

		equal(evt.control.items()[2].text(), 'img.c');
		equal(getMenuItemFormat(evt.control.items()[2]).selector, 'img');
		equal(getMenuItemFormat(evt.control.items()[2]).classes, 'c');

		equal(evt.control.items()[3].text(), 'd');
	});

	test("Import custom importcss_merge_classes: false", function() {
		editor.contentCSS.push("test.css");
		editor.settings.importcss_merge_classes = false;

		var evt = fireFormatsMenuEvent([
			{href: 'test.css', cssRules: [{selectorText: '.a'}]}
		]);

		equal(evt.control.items().length, 1);
		deepEqual(getMenuItemFormat(evt.control.items()[0]).attributes, {"class": "a"});
	});

	test("Import custom importcss_append: true", function() {
		editor.contentCSS.push("test.css");
		editor.settings.importcss_append = true;

		var evt = fireFormatsMenuEvent([
			{href: 'test.css', cssRules: [{selectorText: '.b'}]}
		], {text: 'a'});

		equal(evt.control.items().length, 2);
		equal(evt.control.items()[0].text(), 'a');
		equal(evt.control.items()[1].text(), 'b');
	});

	test("Import custom importcss_selector_filter (string)", function() {
		editor.contentCSS.push("test1.css");
		editor.settings.importcss_selector_filter = ".a";

		var evt = fireFormatsMenuEvent([
			{href: 'test1.css', cssRules: [
				{selectorText: '.a'},
				{selectorText: '.b'}
			]}
		]);

		equal(evt.control.items().length, 1);
		equal(evt.control.items()[0].text(), 'a');
	});

	test("Import custom importcss_selector_filter (function)", function() {
		editor.contentCSS.push("test1.css");
		editor.settings.importcss_selector_filter = function(selector) {
			return selector === ".a";
		};

		var evt = fireFormatsMenuEvent([
			{href: 'test1.css', cssRules: [
				{selectorText: '.a'},
				{selectorText: '.b'}
			]}
		]);

		equal(evt.control.items().length, 1);
		equal(evt.control.items()[0].text(), 'a');
	});

	test("Import custom importcss_selector_filter (regexp)", function() {
		editor.contentCSS.push("test1.css");
		editor.settings.importcss_selector_filter = /a/;

		var evt = fireFormatsMenuEvent([
			{href: 'test1.css', cssRules: [
				{selectorText: '.a'},
				{selectorText: '.b'}
			]}
		]);

		equal(evt.control.items().length, 1);
		equal(evt.control.items()[0].text(), 'a');
	});

	test("Import custom importcss_groups", function() {
		editor.contentCSS.push("test1.css");
		editor.settings.importcss_groups = [
			{title: 'g1', filter: /a/},
			{title: 'g2', filter: /b/},
			{title: 'g3'}
		];

		var evt = fireFormatsMenuEvent([
			{href: 'test1.css', cssRules: [
				{selectorText: '.a'},
				{selectorText: '.b'},
				{selectorText: '.c'}
			]}
		]);

		equal(evt.control.items().length, 3);
		equal(evt.control.items()[0].text(), 'g1');
		equal(evt.control.items()[0].settings.menu[0].text, 'a');
		equal(evt.control.items()[1].text(), 'g2');
		equal(evt.control.items()[1].settings.menu[0].text, 'b');
		equal(evt.control.items()[2].text(), 'g3');
		equal(evt.control.items()[2].settings.menu[0].text, 'c');
	});

	test("Import custom importcss_file_filter (string)", function() {
		editor.contentCSS.push("test1.css");
		editor.settings.importcss_file_filter = "test2.css";

		var evt = fireFormatsMenuEvent([
			{href: 'test1.css', cssRules: [{selectorText: '.a'}]},
			{href: 'test2.css', cssRules: [{selectorText: '.b'}]}
		]);

		equal(evt.control.items().length, 1);
		equal(evt.control.items()[0].text(), 'b');
	});

	test("Import custom importcss_file_filter (function)", function() {
		editor.contentCSS.push("test1.css");
		editor.settings.importcss_file_filter = function(href) {
			return href === "test2.css";
		};

		var evt = fireFormatsMenuEvent([
			{href: 'test1.css', cssRules: [{selectorText: '.a'}]},
			{href: 'test2.css', cssRules: [{selectorText: '.b'}]}
		]);

		equal(evt.control.items().length, 1);
		equal(evt.control.items()[0].text(), 'b');
	});

	test("Import custom importcss_file_filter (regexp)", function() {
		editor.contentCSS.push("test1.css");
		editor.settings.importcss_file_filter = /test2\.css/;

		var evt = fireFormatsMenuEvent([
			{href: 'test1.css', cssRules: [{selectorText: '.a'}]},
			{href: 'test2.css', cssRules: [{selectorText: '.b'}]}
		]);

		equal(evt.control.items().length, 1);
		equal(evt.control.items()[0].text(), 'b');
	});

	test("Import custom importcss_selector_converter", function() {
		editor.settings.importcss_groups = [
			{title: 'g1', filter: /\.a/, custom: 'A'},
			{title: 'g2', filter: /\.b/, custom: 'B'},
			{title: 'g3', custom: 'C'}
		];

		editor.contentCSS.push("test1.css");
		editor.settings.importcss_selector_converter = function (selector, group) {
			return {
				title: selector + group.custom,
				inline: 'span'
			};
		};

		var evt = fireFormatsMenuEvent([
			{href: 'test1.css', cssRules: [
				{selectorText: '.a'},
				{selectorText: '.b'},
				{selectorText: '.c'}
			]}
		]);

		var items = evt.control.items();
		equal(items.length, 3);
		equal(items[0].text(), 'g1');
		equal(items[0].settings.menu[0].text, '.aA');
		equal(items[1].text(), 'g2');
		equal(items[1].settings.menu[0].text, '.bB');
		equal(items[2].text(), 'g3');
		equal(items[2].settings.menu[0].text, '.cC');
	});

	test("Import custom group selector_converter", function() {
		var constant = function (format) {
			return function () {
				return format;
			};
		};

		var formatA = {
			title: 'my format a',
			selector: 'p'
		};

		var formatB = {
			title: 'my format b',
			selector: 'h1'
		};

		editor.settings.importcss_groups = [
			{title: 'g1', filter: /\.a/, selector_converter: constant(formatA)},
			{title: 'g2', filter: /\.b/, selector_converter: constant(formatB)},
			{title: 'g3', custom: 'C'}
		];

		editor.contentCSS.push("test1.css");

		var evt = fireFormatsMenuEvent([
			{href: 'test1.css', cssRules: [
				{selectorText: '.a'},
				{selectorText: '.b'},
				{selectorText: '.c'}
			]}
		]);

		var items = evt.control.items();
		equal(items.length, 3);
		equal(items[0].text(), 'g1');
		equal(items[0].settings.menu[0].text, 'my format a');
		equal(items[1].text(), 'g2');
		equal(items[1].settings.menu[0].text, 'my format b');
		equal(items[2].text(), 'g3');
		equal(items[2].settings.menu[0].text, 'c');
	});

	test("Import custom importcss_exclusive: true", function() {
		editor.settings.importcss_exclusive = true;
		editor.settings.importcss_groups = [
			{title: 'g1'},
			{title: 'g2'}
		];

		editor.contentCSS.push("test1.css");
		var evt = fireFormatsMenuEvent([
			{href: 'test1.css', cssRules: [
				{selectorText: '.a'},
				{selectorText: '.b'},
				{selectorText: '.c'}
			]}
		]);

		var items = evt.control.items();
		equal(items.length, 1);
		equal(items[0].text(), 'g1');
		equal(items[0].settings.menu[0].text, 'a');
		equal(items[0].settings.menu[1].text, 'b');
	});

	test("Import custom importcss_exclusive: false", function() {
		editor.settings.importcss_exclusive = false;
		editor.settings.importcss_groups = [
			{title: 'g1'},
			{title: 'g2'}
		];

		editor.contentCSS.push("test1.css");
		var evt = fireFormatsMenuEvent([
			{href: 'test1.css', cssRules: [
				{selectorText: '.a'},
				{selectorText: '.b'},
				{selectorText: '.c'}
			]}
		]);

		var items = evt.control.items();
		equal(items.length, 2);
		equal(items[0].text(), 'g1');
		equal(items[0].settings.menu[0].text, 'a');
		equal(items[0].settings.menu[1].text, 'b');
		equal(items[1].text(), 'g2');
		equal(items[1].settings.menu[0].text, 'a');
		equal(items[1].settings.menu[1].text, 'b');
	});
})();