98c0588427705bafd40324045f0e685231e4b494
[WebKit-https.git] / Websites / perf.webkit.org / browser-tests / editable-text-tests.js
1
2 describe('EditableText', () => {
3     const scripts = ['instrumentation.js', 'components/base.js', 'components/editable-text.js'];
4
5     function waitToRender(context)
6     {
7         if (!context._dummyComponent) {
8             const ComponentBase = context.symbols.ComponentBase;
9             context._dummyComponent = class SomeComponent extends ComponentBase {
10                 constructor(resolve)
11                 {
12                     super();
13                     this._resolve = resolve;
14                 }
15                 render() { setTimeout(this._resolve, 0); }
16             }
17             ComponentBase.defineElement('dummy-component', context._dummyComponent);
18         }
19         return new Promise((resolve) => {
20             const instance = new context._dummyComponent(resolve);
21             context.document.body.appendChild(instance.element());
22             instance.enqueueToRender();
23         });
24     }
25
26     it('show the set text', () => {
27         const context = new BrowsingContext();
28         let editableText;
29         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
30             const [EditableText] = symbols;
31             editableText = new EditableText;
32             context.document.body.appendChild(editableText.element());
33             editableText.enqueueToRender();
34             return waitForComponentsToRender(context);
35         }).then(() => {
36             expect(editableText.content().textContent).to.not.contain('hello');
37             editableText.setText('hello');
38             editableText.enqueueToRender();
39             return waitForComponentsToRender(context);
40         }).then(() => {
41             expect(editableText.content().textContent).to.contain('hello');
42         });
43     });
44
45     it('go to the editing mode', () => {
46         const context = new BrowsingContext();
47         let editableText;
48         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
49             const [EditableText] = symbols;
50             editableText = new EditableText;
51             context.document.body.appendChild(editableText.element());
52             editableText.setText('hello');
53             editableText.enqueueToRender();
54             return waitForComponentsToRender(context);
55         }).then(() => {
56             expect(editableText.content().querySelector('input').offsetHeight).to.be(0);
57             expect(editableText.content().textContent).to.contain('hello');
58             expect(editableText.content().querySelector('a').textContent).to.contain('Edit');
59             expect(editableText.content().querySelector('a').textContent).to.not.contain('Save');
60             editableText.content().querySelector('a').click();
61             return waitForComponentsToRender(context);
62         }).then(() => {
63             expect(editableText.content().querySelector('input').offsetHeight).to.not.be(0);
64             expect(editableText.content().querySelector('a').textContent).to.not.contain('Edit');
65             expect(editableText.content().querySelector('a').textContent).to.contain('Save');
66         });
67     });
68
69     it('should dispatch "update" action', () => {
70         const context = new BrowsingContext();
71         let editableText;
72         let updateCount = 0;
73         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
74             const [EditableText] = symbols;
75             editableText = new EditableText;
76             context.document.body.appendChild(editableText.element());
77             editableText.setText('hello');
78             editableText.enqueueToRender();
79             editableText.listenToAction('update', () => updateCount++);
80             return waitForComponentsToRender(context);
81         }).then(() => {
82             editableText.content().querySelector('a').click();
83             return waitForComponentsToRender(context);
84         }).then(() => {
85             const input = editableText.content().querySelector('input');
86             expect(input.offsetHeight).to.not.be(0);
87             expect(editableText.editedText()).to.be('hello');
88             input.value = 'world';
89             expect(editableText.editedText()).to.be('world');
90             expect(updateCount).to.be(0);
91             editableText.content().querySelector('a').click();
92             expect(updateCount).to.be(1);
93             expect(editableText.editedText()).to.be('world');
94             expect(editableText.text()).to.be('hello');
95         });
96     });
97
98     it('should end the editing mode when it loses the focus', () => {
99         const context = new BrowsingContext();
100         let editableText;
101         let updateCount = 0;
102         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
103             const [EditableText] = symbols;
104             editableText = new EditableText;
105             context.document.body.appendChild(editableText.element());
106             editableText.setText('hello');
107             editableText.enqueueToRender();
108             editableText.listenToAction('update', () => updateCount++);
109             return waitForComponentsToRender(context);
110         }).then(() => {
111             editableText.content().querySelector('a').click();
112             return waitForComponentsToRender(context);
113         }).then(() => {
114             const input = editableText.content().querySelector('input');
115             expect(input.offsetHeight).to.not.be(0);
116             expect(editableText.editedText()).to.be('hello');
117             input.value = 'world';
118             expect(updateCount).to.be(0);
119
120             const focusableElement = document.createElement('div');
121             focusableElement.setAttribute('tabindex', 0);
122             document.body.appendChild(focusableElement);
123             focusableElement.focus();
124
125             return waitForComponentsToRender(context);
126         }).then(() => {
127             expect(editableText.content().querySelector('input').offsetHeight).to.be(0);
128             expect(editableText.text()).to.be('hello');
129             expect(updateCount).to.be(0);
130         });
131     });
132
133     it('should not end the editing mode when the "Save" button is focused', () => {
134         const context = new BrowsingContext();
135         let editableText;
136         let updateCount = 0;
137         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
138             const [EditableText] = symbols;
139             editableText = new EditableText;
140             context.document.body.appendChild(editableText.element());
141             editableText.setText('hello');
142             editableText.enqueueToRender();
143             editableText.listenToAction('update', () => updateCount++);
144             return waitForComponentsToRender(context);
145         }).then(() => {
146             editableText.content().querySelector('a').click();
147             return waitForComponentsToRender(context);
148         }).then(() => {
149             const input = editableText.content().querySelector('input');
150             expect(input.offsetHeight).to.not.be(0);
151             expect(editableText.editedText()).to.be('hello');
152             input.value = 'world';
153             expect(updateCount).to.be(0);
154             editableText.content().querySelector('a').focus();
155             return waitForComponentsToRender(context);
156         }).then(() => {
157             expect(editableText.content().querySelector('input').offsetHeight).to.not.be(0);
158             editableText.content().querySelector('a').click();
159             expect(editableText.editedText()).to.be('world');
160             expect(updateCount).to.be(1);
161         });
162     });
163
164     it('should dipsatch "update" action when the "Save" button is clicked in Safari', () => {
165         const context = new BrowsingContext();
166         let editableText;
167         let updateCount = 0;
168         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
169             const [EditableText] = symbols;
170             editableText = new EditableText;
171             context.document.body.appendChild(editableText.element());
172             editableText.setText('hello');
173             editableText.enqueueToRender();
174             editableText.listenToAction('update', () => updateCount++);
175             return waitForComponentsToRender(context);
176         }).then(() => {
177             editableText.content('action-button').click();
178             return waitForComponentsToRender(context);
179         }).then(() => {
180             const input = editableText.content('text-field');
181             expect(input.offsetHeight).to.not.be(0);
182             expect(editableText.editedText()).to.be('hello');
183             input.value = 'world';
184             expect(updateCount).to.be(0);
185             return waitForComponentsToRender(context);
186         }).then(() => {
187             editableText.content('action-button').dispatchEvent(new MouseEvent('mousedown'));
188             return new Promise((resolve) => setTimeout(resolve, 0));
189         }).then(() => {
190             editableText.content('text-field').blur();
191             editableText.content('action-button').dispatchEvent(new MouseEvent('mouseup'));
192             return waitForComponentsToRender(context);
193         }).then(() => {
194             expect(editableText.content('text-field').offsetHeight).to.be(0);
195             expect(updateCount).to.be(1);
196             expect(editableText.editedText()).to.be('world');
197         });
198     });
199
200 });