test('serializes mobiledoc to `mobiledocVersion`', function(assert) {
assert.expect(2);
let text = 'Howdy';
this.set('mobiledoc', simpleMobileDoc(text));
this.set('serializeVersion', '0.2.0');
let version;
this.on('on-change', (mobiledoc) => {
version = mobiledoc.version;
});
this.render(hbs`
{{#mobiledoc-editor mobiledoc=mobiledoc serializeVersion=serializeVersion on-change=(action 'on-change') as |editor|}}
<button {{action editor.toggleMarkup 'strong'}}>Bold</button>
{{/mobiledoc-editor}}
`);
let textNode = this.$(`p:contains(${text})`)[0].firstChild;
selectRange(textNode, 0, textNode, text.length);
this.$('button').click();
assert.equal(version, '0.2.0', 'serializes to the passed serializeVersion (0.2.0)');
this.set('serializeVersion', '0.3.0');
version = null;
textNode = this.$(`p strong:contains(${text})`)[0].firstChild;
selectRange(textNode, 0, textNode, text.length);
this.$('button').click();
assert.equal(version, '0.3.0', 'serializes to the passed serializeVersion (0.3.0)');
});
test('it exposes "toggleSection" which toggles the section type and fires `on-change`', function(assert) {
assert.expect(6);
let onChangeCount = 0;
let text = 'Howdy';
this.set('mobiledoc', simpleMobileDoc(text));
this.on('on-change', () => onChangeCount++);
this.render(hbs`
{{#mobiledoc-editor mobiledoc=mobiledoc on-change=(action 'on-change') as |editor|}}
<button {{action editor.toggleSection 'h2'}}>H2</button>
{{/mobiledoc-editor}}
`);
const textNode = this.$(`p:contains(${text})`)[0].firstChild;
selectRange(textNode, 0, textNode, text.length);
assert.ok(!this.$('h2').length, 'precond - no h2');
assert.equal(onChangeCount, 0, 'precond - no on-change');
this.$('button').click();
assert.equal(onChangeCount, 1, 'fires on-change');
assert.ok(!!this.$('h2:contains(Howdy)').length, 'Changes to h2 tag');
onChangeCount = 0;
this.$('button').click();
assert.equal(onChangeCount, 1, 'fires on-change again');
assert.ok(!this.$('h2').length, 'toggles h2 tag off again');
});
test('toolbar has list insertion button', function(assert) {
let text = 'abc';
this.set('mobiledoc', simpleMobileDoc(text));
this.render(hbs`
{{#mobiledoc-editor mobiledoc=mobiledoc as |editor|}}
{{#mobiledoc-toolbar editor=editor}}
{{/mobiledoc-toolbar}}
{{/mobiledoc-editor}}
`);
const textNode = this.$(`p:contains(${text})`)[0].firstChild;
selectRange(textNode, 0, textNode, text.length);
const button = this.$(`button[title=List]`);
assert.ok(button.length, 'has list toolbar button');
button.click();
assert.ok(this.$(`ul li:contains(${text})`).length, 'list-ifies text');
});
test('it bolds the text and fires `on-change`', function(assert) {
assert.expect(2);
let text = 'Howdy';
this.set('mobiledoc', simpleMobileDoc(text));
this.on('on-change', (mobiledoc) => {
assert.ok(!!mobiledoc, 'change event fired with mobiledoc');
});
this.render(hbs`
{{#mobiledoc-editor mobiledoc=mobiledoc on-change=(action 'on-change') as |editor|}}
<button {{action editor.toggleMarkup 'strong'}}>Bold</button>
{{/mobiledoc-editor}}
`);
let textNode = this.$(`p:contains(${text})`)[0].firstChild;
selectRange(textNode, 0, textNode, text.length);
this.$('button').click();
assert.ok(
!!this.$('strong:contains(Howdy)').length,
'Bold tag contains text'
);
});
test('toolbar buttons can be active', function(assert) {
let text = 'abc';
this.set('mobiledoc', simpleMobileDoc(text));
this.render(hbs`
{{#mobiledoc-editor mobiledoc=mobiledoc as |editor|}}
{{#mobiledoc-toolbar editor=editor}}
{{/mobiledoc-toolbar}}
{{/mobiledoc-editor}}
`);
const textNode = this.$(`p:contains(${text})`)[0].firstChild;
selectRange(textNode, 0, textNode, text.length);
const button = this.$(`button[title=Heading]`);
assert.ok(button.length, 'has heading toolbar button');
button.click();
assert.ok(this.$(`h1:contains(${text})`).length, 'heading-ifies text');
assert.ok(button.hasClass('active'), 'heading button is active');
button.click();
assert.ok(!this.$(`h1`).length, 'heading is gone');
assert.ok(!button.hasClass('active'), 'heading button is no longer active');
});