blob: cfed690d6186f4c24d0f955922e5191fd65bd844 [file] [log] [blame]
describe('EditableText', () => {
const scripts = ['instrumentation.js', 'components/base.js', 'components/editable-text.js'];
it('show the set text', () => {
const context = new BrowsingContext();
let editableText;
return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
const [EditableText] = symbols;
editableText = new EditableText;
context.document.body.appendChild(editableText.element());
editableText.enqueueToRender();
return waitForComponentsToRender(context);
}).then(() => {
expect(editableText.content().textContent).to.not.contain('hello');
editableText.setText('hello');
editableText.enqueueToRender();
return waitForComponentsToRender(context);
}).then(() => {
expect(editableText.content().textContent).to.contain('hello');
});
});
it('go to the editing mode', () => {
const context = new BrowsingContext();
let editableText;
return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
const [EditableText] = symbols;
editableText = new EditableText;
context.document.body.appendChild(editableText.element());
editableText.setText('hello');
editableText.enqueueToRender();
return waitForComponentsToRender(context);
}).then(() => {
expect(editableText.content().querySelector('input').offsetHeight).to.be(0);
expect(editableText.content().textContent).to.contain('hello');
expect(editableText.content().querySelector('a').textContent).to.contain('Edit');
expect(editableText.content().querySelector('a').textContent).to.not.contain('Save');
editableText.content().querySelector('a').click();
return waitForComponentsToRender(context);
}).then(() => {
expect(editableText.content().querySelector('input').offsetHeight).to.not.be(0);
expect(editableText.content().querySelector('a').textContent).to.not.contain('Edit');
expect(editableText.content().querySelector('a').textContent).to.contain('Save');
});
});
it('should dispatch "update" action', () => {
const context = new BrowsingContext();
let editableText;
let updateCount = 0;
return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
const [EditableText] = symbols;
editableText = new EditableText;
context.document.body.appendChild(editableText.element());
editableText.setText('hello');
editableText.enqueueToRender();
editableText.listenToAction('update', () => updateCount++);
return waitForComponentsToRender(context);
}).then(() => {
editableText.content().querySelector('a').click();
return waitForComponentsToRender(context);
}).then(() => {
const input = editableText.content().querySelector('input');
expect(input.offsetHeight).to.not.be(0);
expect(editableText.editedText()).to.be('hello');
input.value = 'world';
expect(editableText.editedText()).to.be('world');
expect(updateCount).to.be(0);
editableText.content().querySelector('a').click();
expect(updateCount).to.be(1);
expect(editableText.editedText()).to.be('world');
expect(editableText.text()).to.be('hello');
});
});
it('should end the editing mode when it loses the focus', () => {
const context = new BrowsingContext();
let editableText;
let updateCount = 0;
return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
const [EditableText] = symbols;
editableText = new EditableText;
context.document.body.appendChild(editableText.element());
editableText.setText('hello');
editableText.enqueueToRender();
editableText.listenToAction('update', () => updateCount++);
return waitForComponentsToRender(context);
}).then(() => {
editableText.content().querySelector('a').click();
return waitForComponentsToRender(context);
}).then(() => {
const input = editableText.content().querySelector('input');
expect(input.offsetHeight).to.not.be(0);
expect(editableText.editedText()).to.be('hello');
input.value = 'world';
expect(updateCount).to.be(0);
const focusableElement = document.createElement('div');
focusableElement.setAttribute('tabindex', 0);
document.body.appendChild(focusableElement);
focusableElement.focus();
return waitForComponentsToRender(context);
}).then(() => {
expect(editableText.content().querySelector('input').offsetHeight).to.be(0);
expect(editableText.text()).to.be('hello');
expect(updateCount).to.be(0);
});
});
it('should not end the editing mode when the "Save" button is focused', () => {
const context = new BrowsingContext();
let editableText;
let updateCount = 0;
return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
const [EditableText] = symbols;
editableText = new EditableText;
context.document.body.appendChild(editableText.element());
editableText.setText('hello');
editableText.enqueueToRender();
editableText.listenToAction('update', () => updateCount++);
return waitForComponentsToRender(context);
}).then(() => {
editableText.content().querySelector('a').click();
return waitForComponentsToRender(context);
}).then(() => {
const input = editableText.content().querySelector('input');
expect(input.offsetHeight).to.not.be(0);
expect(editableText.editedText()).to.be('hello');
input.value = 'world';
expect(updateCount).to.be(0);
editableText.content().querySelector('a').focus();
return waitForComponentsToRender(context);
}).then(() => {
expect(editableText.content().querySelector('input').offsetHeight).to.not.be(0);
editableText.content().querySelector('a').click();
expect(editableText.editedText()).to.be('world');
expect(updateCount).to.be(1);
});
});
it('should dipsatch "update" action when the "Save" button is clicked in Safari', () => {
const context = new BrowsingContext();
let editableText;
let updateCount = 0;
return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
const [EditableText] = symbols;
editableText = new EditableText;
context.document.body.appendChild(editableText.element());
editableText.setText('hello');
editableText.enqueueToRender();
editableText.listenToAction('update', () => updateCount++);
return waitForComponentsToRender(context);
}).then(() => {
editableText.content('action-button').click();
return waitForComponentsToRender(context);
}).then(() => {
const input = editableText.content('text-field');
expect(input.offsetHeight).to.not.be(0);
expect(editableText.editedText()).to.be('hello');
input.value = 'world';
expect(updateCount).to.be(0);
return waitForComponentsToRender(context);
}).then(() => {
editableText.content('action-button').dispatchEvent(new MouseEvent('mousedown'));
return wait(0);
}).then(() => {
editableText.content('text-field').blur();
editableText.content('action-button').dispatchEvent(new MouseEvent('mouseup'));
return waitForComponentsToRender(context);
}).then(() => {
expect(editableText.content('text-field').offsetHeight).to.be(0);
expect(updateCount).to.be(1);
expect(editableText.editedText()).to.be('world');
});
});
});