180 lines
8.4 KiB
JavaScript
180 lines
8.4 KiB
JavaScript
|
|
describe('EditableText', () => {
|
|
const scripts = ['instrumentation.js', '../shared/common-component-base.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');
|
|
});
|
|
});
|
|
|
|
});
|