creta/test/test_creta_toolbar.js

var visual_editor_div;
var visual_editor_content;
var first_div;

function initial_values(){
	visual_editor_div = document.getElementById('visual-editor');
	visual_editor_content = visual_editor_div.getElementsByClassName('visual-editor')[0];
	let clean_button = visual_editor_div.getElementsByClassName('clean')[0];
	clean_button.click();
	first_div = visual_editor_content.firstChild;
}

QUnit.module('creta_toolbar', function() {

	QUnit.test('clean editor', function(assert) {
	
		initial_values();
		first_div.innerText = "Lorem Ipsum";
		let clean_button = visual_editor_div.getElementsByClassName('clean')[0];
		assert.equal(visual_editor.get_text(), "<div>Lorem Ipsum</div>");
		clean_button.click();
		assert.equal(visual_editor.get_text(), "");
		
	});
	
	QUnit.test('headings', function(assert) {
	
		initial_values();
		first_div.innerText = "Lorem Ipsum";
		let heading_select = visual_editor_div.getElementsByClassName('heading_toolbar')[0];
		heading_select.selectedIndex = 1;
		heading_select.dispatchEvent(new Event('click'));
		assert.equal(visual_editor.get_text(), "<h1>Lorem Ipsum</h1>");
		
		heading_select.selectedIndex = 2;
		heading_select.dispatchEvent(new Event('click'));
		assert.equal(visual_editor.get_text(), "<h2>Lorem Ipsum</h2>");
		
		heading_select.selectedIndex = 3;
		heading_select.dispatchEvent(new Event('click'));
		assert.equal(visual_editor.get_text(), "<h3>Lorem Ipsum</h3>");
		
	});
	
	QUnit.test('list item', function(assert) {
	
		initial_values();
		first_div.innerText = "Lorem Ipsum";
		let list_button = visual_editor_div.getElementsByClassName('list_toolbar')[0];
		list_button.click();
		assert.equal(visual_editor.get_text(), 
			"<div>Lorem Ipsum</div>\n<div>\n    <ul>\n        <li></li>\n    </ul>\n</div>");
	
	});
	
	QUnit.test('link', function(assert) {
	
		initial_values();
		first_div.innerText = "Lorem Ipsum";
		let selection = window.getSelection();
		let range = document.createRange();


		range.selectNodeContents(first_div);
		selection.removeAllRanges();
		selection.addRange(range);
		let link_button = visual_editor_div.getElementsByClassName('link_toolbar')[0];
		link_button.click();
		
		visual_editor_div.getElementsByClassName('link_input')[0].value = "url";
		
		let accept_button = visual_editor_div.getElementsByClassName('accept_link')[0];
		accept_button.click();
		
		assert.equal(visual_editor.get_text(), 
			"<div><a href=\"https://url\">Lorem Ipsum</a></div>");
	});
	
	QUnit.test('table', function(assert) {
	
		initial_values();
		first_div.innerText = "Lorem Ipsum";
		
		let link_button = visual_editor_div.getElementsByClassName('table_toolbar')[0];
		link_button.click();
		
		visual_editor_div.getElementsByClassName('w')[0].value = "2";
		visual_editor_div.getElementsByClassName('h')[0].value = "2";
		
		let accept_button = visual_editor_div.getElementsByClassName('accept_table')[0];
		accept_button.click();
		
		assert.equal(visual_editor.get_text(), 
			"<div>Lorem Ipsum</div>\n<table style=\"border: 1px solid black;\">\n    <tbody>\n        <tr>\n            <td style=\"border: 1px solid black;\"></td>\n            <td style=\"border: 1px solid black;\"></td>\n        </tr>\n        <tr>\n            <td style=\"border: 1px solid black;\"></td>\n            <td style=\"border: 1px solid black;\"></td>\n        </tr>\n    </tbody>\n</table>\n<div></div>");
	});
	
	QUnit.test('block', function(assert) {
	
		initial_values();
		first_div.innerText = "Lorem Ipsum";
		let selection = window.getSelection();
		let range = document.createRange();


		range.selectNodeContents(first_div);
		selection.removeAllRanges();
		selection.addRange(range);
		let block_button = visual_editor_div.getElementsByClassName('block_toolbar')[0];
		block_button.click();
		
		visual_editor_div.getElementsByClassName('block_input')[0].value = "block_class";
		
		let accept_button = visual_editor_div.getElementsByClassName('accept_block')[0];
		accept_button.click();
		
		assert.equal(visual_editor.get_text(), 
			"<div><div class=\"block_class\">Lorem Ipsum</div></div>");
	});
	
	QUnit.test('metatag', function(assert) {
	
		initial_values();
		first_div.innerText = "Lorem Ipsum";
		let selection = window.getSelection();
		let range = document.createRange();

		range.selectNodeContents(first_div);
		selection.removeAllRanges();
		selection.addRange(range);
		let code_button = visual_editor_div.getElementsByClassName('code_toolbar')[0];
		code_button.click();
		
		assert.equal(visual_editor.get_text(), 
			"<div><code>Lorem Ipsum</code></div>");
	});
	
	QUnit.test('embed', function(assert) {
	
		initial_values();
		first_div.innerText = "Lorem Ipsum";
		let selection = window.getSelection();
		let range = document.createRange();
		
		range.selectNodeContents(first_div);
		selection.removeAllRanges();
		selection.addRange(range);
		let embed_button = visual_editor_div.getElementsByClassName('embed_toolbar')[0];
		embed_button.click();
		
		assert.equal(visual_editor.get_text(), 
			"<div class=\"embed\">Lorem Ipsum</div>");
	});
	
	QUnit.test('save', function(assert) {
	
		initial_values();
		first_div.innerText = "Lorem Ipsum";
		let save_button = visual_editor_div.getElementsByClassName('save_toolbar')[0];
		save_button.click();
		let has_local_storage = false;
		try{
			let value = localStorage.getItem("visual-editor");
			has_local_storage = true;
			assert.equal(visual_editor_content.innerHTML, value);
		}catch(e){}
		
		assert.ok(has_local_storage);
	});
	
	QUnit.test('load', function(assert) {
	
		initial_values();
		let load_button = visual_editor_div.getElementsByClassName('load_toolbar')[0];
		load_button.click();
		let has_local_storage = false;
		try{
			let value = localStorage.getItem("visual-editor");
			has_local_storage = true;
			assert.equal(visual_editor_content.innerHTML, value);
		}catch(e){}
		
		assert.ok(has_local_storage);
		
	});


  });