Add tests for the time series chart and fix bugs I found along the way
[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     it('show the set text', () => {
6         const context = new BrowsingContext();
7         let editableText;
8         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
9             const [EditableText] = symbols;
10             editableText = new EditableText;
11             context.document.body.appendChild(editableText.element());
12             editableText.enqueueToRender();
13             return waitForComponentsToRender(context);
14         }).then(() => {
15             expect(editableText.content().textContent).to.not.contain('hello');
16             editableText.setText('hello');
17             editableText.enqueueToRender();
18             return waitForComponentsToRender(context);
19         }).then(() => {
20             expect(editableText.content().textContent).to.contain('hello');
21         });
22     });
23
24     it('go to the editing mode', () => {
25         const context = new BrowsingContext();
26         let editableText;
27         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
28             const [EditableText] = symbols;
29             editableText = new EditableText;
30             context.document.body.appendChild(editableText.element());
31             editableText.setText('hello');
32             editableText.enqueueToRender();
33             return waitForComponentsToRender(context);
34         }).then(() => {
35             expect(editableText.content().querySelector('input').offsetHeight).to.be(0);
36             expect(editableText.content().textContent).to.contain('hello');
37             expect(editableText.content().querySelector('a').textContent).to.contain('Edit');
38             expect(editableText.content().querySelector('a').textContent).to.not.contain('Save');
39             editableText.content().querySelector('a').click();
40             return waitForComponentsToRender(context);
41         }).then(() => {
42             expect(editableText.content().querySelector('input').offsetHeight).to.not.be(0);
43             expect(editableText.content().querySelector('a').textContent).to.not.contain('Edit');
44             expect(editableText.content().querySelector('a').textContent).to.contain('Save');
45         });
46     });
47
48     it('should dispatch "update" action', () => {
49         const context = new BrowsingContext();
50         let editableText;
51         let updateCount = 0;
52         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
53             const [EditableText] = symbols;
54             editableText = new EditableText;
55             context.document.body.appendChild(editableText.element());
56             editableText.setText('hello');
57             editableText.enqueueToRender();
58             editableText.listenToAction('update', () => updateCount++);
59             return waitForComponentsToRender(context);
60         }).then(() => {
61             editableText.content().querySelector('a').click();
62             return waitForComponentsToRender(context);
63         }).then(() => {
64             const input = editableText.content().querySelector('input');
65             expect(input.offsetHeight).to.not.be(0);
66             expect(editableText.editedText()).to.be('hello');
67             input.value = 'world';
68             expect(editableText.editedText()).to.be('world');
69             expect(updateCount).to.be(0);
70             editableText.content().querySelector('a').click();
71             expect(updateCount).to.be(1);
72             expect(editableText.editedText()).to.be('world');
73             expect(editableText.text()).to.be('hello');
74         });
75     });
76
77     it('should end the editing mode when it loses the focus', () => {
78         const context = new BrowsingContext();
79         let editableText;
80         let updateCount = 0;
81         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
82             const [EditableText] = symbols;
83             editableText = new EditableText;
84             context.document.body.appendChild(editableText.element());
85             editableText.setText('hello');
86             editableText.enqueueToRender();
87             editableText.listenToAction('update', () => updateCount++);
88             return waitForComponentsToRender(context);
89         }).then(() => {
90             editableText.content().querySelector('a').click();
91             return waitForComponentsToRender(context);
92         }).then(() => {
93             const input = editableText.content().querySelector('input');
94             expect(input.offsetHeight).to.not.be(0);
95             expect(editableText.editedText()).to.be('hello');
96             input.value = 'world';
97             expect(updateCount).to.be(0);
98
99             const focusableElement = document.createElement('div');
100             focusableElement.setAttribute('tabindex', 0);
101             document.body.appendChild(focusableElement);
102             focusableElement.focus();
103
104             return waitForComponentsToRender(context);
105         }).then(() => {
106             expect(editableText.content().querySelector('input').offsetHeight).to.be(0);
107             expect(editableText.text()).to.be('hello');
108             expect(updateCount).to.be(0);
109         });
110     });
111
112     it('should not end the editing mode when the "Save" button is focused', () => {
113         const context = new BrowsingContext();
114         let editableText;
115         let updateCount = 0;
116         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
117             const [EditableText] = symbols;
118             editableText = new EditableText;
119             context.document.body.appendChild(editableText.element());
120             editableText.setText('hello');
121             editableText.enqueueToRender();
122             editableText.listenToAction('update', () => updateCount++);
123             return waitForComponentsToRender(context);
124         }).then(() => {
125             editableText.content().querySelector('a').click();
126             return waitForComponentsToRender(context);
127         }).then(() => {
128             const input = editableText.content().querySelector('input');
129             expect(input.offsetHeight).to.not.be(0);
130             expect(editableText.editedText()).to.be('hello');
131             input.value = 'world';
132             expect(updateCount).to.be(0);
133             editableText.content().querySelector('a').focus();
134             return waitForComponentsToRender(context);
135         }).then(() => {
136             expect(editableText.content().querySelector('input').offsetHeight).to.not.be(0);
137             editableText.content().querySelector('a').click();
138             expect(editableText.editedText()).to.be('world');
139             expect(updateCount).to.be(1);
140         });
141     });
142
143     it('should dipsatch "update" action when the "Save" button is clicked in Safari', () => {
144         const context = new BrowsingContext();
145         let editableText;
146         let updateCount = 0;
147         return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
148             const [EditableText] = symbols;
149             editableText = new EditableText;
150             context.document.body.appendChild(editableText.element());
151             editableText.setText('hello');
152             editableText.enqueueToRender();
153             editableText.listenToAction('update', () => updateCount++);
154             return waitForComponentsToRender(context);
155         }).then(() => {
156             editableText.content('action-button').click();
157             return waitForComponentsToRender(context);
158         }).then(() => {
159             const input = editableText.content('text-field');
160             expect(input.offsetHeight).to.not.be(0);
161             expect(editableText.editedText()).to.be('hello');
162             input.value = 'world';
163             expect(updateCount).to.be(0);
164             return waitForComponentsToRender(context);
165         }).then(() => {
166             editableText.content('action-button').dispatchEvent(new MouseEvent('mousedown'));
167             return wait(0);
168         }).then(() => {
169             editableText.content('text-field').blur();
170             editableText.content('action-button').dispatchEvent(new MouseEvent('mouseup'));
171             return waitForComponentsToRender(context);
172         }).then(() => {
173             expect(editableText.content('text-field').offsetHeight).to.be(0);
174             expect(updateCount).to.be(1);
175             expect(editableText.editedText()).to.be('world');
176         });
177     });
178
179 });