Skip to content
This repository was archived by the owner on May 5, 2021. It is now read-only.

Commit 487156a

Browse files
Zyntondmo-odoo
Zynton
authored and
dmo-odoo
committed
[FIX] Toolbar: adapt tests to new behavior when no range
1 parent 716754f commit 487156a

File tree

1 file changed

+53
-37
lines changed

1 file changed

+53
-37
lines changed

‎packages/plugin-toolbar/test/toolbar.test.ts‎

Lines changed: 53 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ describe('Toolbar', async () => {
9595
'<jw-toolbar><jw-group><span class="label">label</span></jw-group></jw-toolbar>',
9696
);
9797
});
98-
it('should display the bold button in the toolbar form "actionables" zone', async () => {
98+
it('should display the bold button in the toolbar from "actionables" zone', async () => {
9999
editor.load(Bold);
100100
editor.load(DomLayout, {
101101
components: [
@@ -119,8 +119,8 @@ describe('Toolbar', async () => {
119119
expect(toolbar?.outerHTML.replace(/[\s\n]+/g, ' ')).to.equal(
120120
[
121121
'<jw-toolbar>',
122-
'<jw-button name="removeFormat" title="Remove format" class="fa fa-eraser fa-fw" aria-pressed="false"></jw-button>',
123-
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false"></jw-button>',
122+
'<jw-button name="removeFormat" title="Remove format" class="fa fa-eraser fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
123+
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
124124
'</jw-toolbar>',
125125
].join(''),
126126
);
@@ -157,7 +157,7 @@ describe('Toolbar', async () => {
157157
expect(toolbar?.outerHTML.replace(/[\s\n]+/g, ' ')).to.equal(
158158
[
159159
'<jw-toolbar>',
160-
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false"></jw-button>',
160+
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
161161
'</jw-toolbar>',
162162
].join(''),
163163
);
@@ -171,7 +171,7 @@ describe('Toolbar', async () => {
171171
[
172172
'<jw-toolbar>',
173173
'<jw-group>',
174-
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false"></jw-button>',
174+
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
175175
'</jw-group>',
176176
'</jw-toolbar>',
177177
].join(''),
@@ -199,13 +199,15 @@ describe('Toolbar', async () => {
199199
editor.configure(Toolbar, { layout: [[['BoldButton']]] });
200200
await editor.start();
201201
const toolbar = container.querySelector('jw-toolbar');
202+
// TODO: ensure the group also disappears when all its components
203+
// are display none.
202204
expect(toolbar?.outerHTML.replace(/[\s\n]+/g, ' ')).to.equal(
203205
[
204206
'<jw-toolbar>',
205207
'<jw-group>',
206-
'<select>',
208+
'<select style="display: none;">',
207209
'<option></option>',
208-
'<option value="bold" class="fa fa-bold fa-fw">Toggle bold</option>',
210+
'<option value="bold" class="fa fa-bold fa-fw" style="display: none;">Toggle bold</option>',
209211
'</select>',
210212
'</jw-group>',
211213
'</jw-toolbar>',
@@ -217,14 +219,16 @@ describe('Toolbar', async () => {
217219
editor.configure(Toolbar, { layout: [[[['BoldButton']]]] });
218220
await editor.start();
219221
const toolbar = container.querySelector('jw-toolbar');
222+
// TODO: ensure the group also disappears when all its components
223+
// are display none.
220224
expect(toolbar?.outerHTML.replace(/[\s\n]+/g, ' ')).to.equal(
221225
[
222226
'<jw-toolbar>',
223227
'<jw-group>',
224-
'<select>',
228+
'<select style="display: none;">',
225229
'<option></option>',
226230
'<optgroup>',
227-
'<option value="bold" class="fa fa-bold fa-fw">Toggle bold</option>',
231+
'<option value="bold" class="fa fa-bold fa-fw" style="display: none;">Toggle bold</option>',
228232
'</optgroup>',
229233
'</select>',
230234
'</jw-group>',
@@ -238,12 +242,14 @@ describe('Toolbar', async () => {
238242
editor.configure(Toolbar, { layout: [['BoldButton', 'ItalicButton']] });
239243
await editor.start();
240244
const toolbar = container.querySelector('jw-toolbar');
245+
// TODO: ensure the group also disappears when all its components
246+
// are display none.
241247
expect(toolbar?.outerHTML.replace(/[\s\n]+/g, ' ')).to.equal(
242248
[
243249
'<jw-toolbar>',
244250
'<jw-group>',
245-
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false"></jw-button>',
246-
'<jw-button name="italic" title="Toggle italic" class="fa fa-italic fa-fw" aria-pressed="false"></jw-button>',
251+
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
252+
'<jw-button name="italic" title="Toggle italic" class="fa fa-italic fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
247253
'</jw-group>',
248254
'</jw-toolbar>',
249255
].join(''),
@@ -255,13 +261,15 @@ describe('Toolbar', async () => {
255261
editor.configure(Toolbar, { layout: [['BoldButton', 'custom label', 'ItalicButton']] });
256262
await editor.start();
257263
const toolbar = container.querySelector('jw-toolbar');
264+
// TODO: ensure the group also disappears when all its components
265+
// are display none.
258266
expect(toolbar?.outerHTML.replace(/[\s\n]+/g, ' ')).to.equal(
259267
[
260268
'<jw-toolbar>',
261269
'<jw-group>',
262-
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false"></jw-button>',
270+
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
263271
'<span class="label">custom label</span>',
264-
'<jw-button name="italic" title="Toggle italic" class="fa fa-italic fa-fw" aria-pressed="false"></jw-button>',
272+
'<jw-button name="italic" title="Toggle italic" class="fa fa-italic fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
265273
'</jw-group>',
266274
'</jw-toolbar>',
267275
].join(''),
@@ -271,11 +279,13 @@ describe('Toolbar', async () => {
271279
editor.configure(Toolbar, { layout: [[['label']]] });
272280
await editor.start();
273281
const toolbar = container.querySelector('jw-toolbar');
282+
// TODO: ensure the group also disappears when all its components
283+
// are display none.
274284
expect(toolbar?.outerHTML.replace(/[\s\n]+/g, ' ')).to.equal(
275285
[
276286
'<jw-toolbar>',
277287
'<jw-group>',
278-
'<select>',
288+
'<select style="display: none;">',
279289
'<option></option>',
280290
'<option class="label" disabled="true">label</option>',
281291
'</select>',
@@ -284,7 +294,7 @@ describe('Toolbar', async () => {
284294
].join(''),
285295
);
286296
});
287-
it('should display a seperator button in the toolbar', async () => {
297+
it('should display a separator button in the toolbar', async () => {
288298
editor.load(Bold);
289299
editor.load(Italic);
290300
editor.configure(Toolbar, { layout: ['BoldButton', '|', 'ItalicButton'] });
@@ -293,53 +303,57 @@ describe('Toolbar', async () => {
293303
expect(toolbar?.outerHTML.replace(/[\s\n]+/g, ' ')).to.equal(
294304
[
295305
'<jw-toolbar>',
296-
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false"></jw-button>',
306+
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
297307
'<jw-separator role="separator"></jw-separator>',
298-
'<jw-button name="italic" title="Toggle italic" class="fa fa-italic fa-fw" aria-pressed="false"></jw-button>',
308+
'<jw-button name="italic" title="Toggle italic" class="fa fa-italic fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
299309
'</jw-toolbar>',
300310
].join(''),
301311
);
302312
});
303-
it('should display a seperator button in the toolbar group', async () => {
313+
it('should display a separator button in the toolbar group', async () => {
304314
editor.load(Bold);
305315
editor.load(Italic);
306316
editor.configure(Toolbar, { layout: [['BoldButton', '|', 'ItalicButton']] });
307317
await editor.start();
308318
const toolbar = container.querySelector('jw-toolbar');
319+
// TODO: ensure the group also disappears when all its components
320+
// are display none.
309321
expect(toolbar?.outerHTML.replace(/[\s\n]+/g, ' ')).to.equal(
310322
[
311323
'<jw-toolbar>',
312324
'<jw-group>',
313-
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false"></jw-button>',
325+
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
314326
'<jw-separator role="separator"></jw-separator>',
315-
'<jw-button name="italic" title="Toggle italic" class="fa fa-italic fa-fw" aria-pressed="false"></jw-button>',
327+
'<jw-button name="italic" title="Toggle italic" class="fa fa-italic fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
316328
'</jw-group>',
317329
'</jw-toolbar>',
318330
].join(''),
319331
);
320332
});
321-
it('should display a seperator button in the toolbar group select', async () => {
333+
it('should display a separator button in the toolbar group select', async () => {
322334
editor.load(Bold);
323335
editor.load(Italic);
324336
editor.configure(Toolbar, { layout: [[['BoldButton', '|', 'ItalicButton']]] });
325337
await editor.start();
326338
const toolbar = container.querySelector('jw-toolbar');
339+
// TODO: ensure the group also disappears when all its components
340+
// are display none.
327341
expect(toolbar?.outerHTML.replace(/[\s\n]+/g, ' ')).to.equal(
328342
[
329343
'<jw-toolbar>',
330344
'<jw-group>',
331-
'<select>',
345+
'<select style="display: none;">',
332346
'<option></option>',
333-
'<option value="bold" class="fa fa-bold fa-fw">Toggle bold</option>',
347+
'<option value="bold" class="fa fa-bold fa-fw" style="display: none;">Toggle bold</option>',
334348
'<option role="separator" disabled="true"></option>',
335-
'<option value="italic" class="fa fa-italic fa-fw">Toggle italic</option>',
349+
'<option value="italic" class="fa fa-italic fa-fw" style="display: none;">Toggle italic</option>',
336350
'</select>',
337351
'</jw-group>',
338352
'</jw-toolbar>',
339353
].join(''),
340354
);
341355
});
342-
it('should display not display an empty group', async () => {
356+
it('should not display an empty group', async () => {
343357
editor.configure(Toolbar, {
344358
layout: [[[]], '|', []],
345359
});
@@ -384,33 +398,35 @@ describe('Toolbar', async () => {
384398
await editor.start();
385399
const toolbar = container.querySelector('jw-toolbar');
386400

401+
// TODO: ensure the group also disappears when all its components
402+
// are display none.
387403
/* eslint-disable prettier/prettier */
388404
expect(toolbar?.outerHTML.replace(/[\s\n]+/g, ' ')).to.equal(
389405
[
390406
'<jw-toolbar>',
391407
'<jw-group>',
392-
'<select>',
408+
'<select style="display: none;">',
393409
'<option></option>',
394-
'<option value="paragraph" class="p" selected="true">Paragraph</option>',
395-
'<option value="heading1" class="h1">Heading1</option>',
396-
'<option value="heading2" class="h2">Heading2</option>',
410+
'<option value="paragraph" class="p" selected="true" style="display: none;">Paragraph</option>',
411+
'<option value="heading1" class="h1" style="display: none;">Heading1</option>',
412+
'<option value="heading2" class="h2" style="display: none;">Heading2</option>',
397413
'<option class="label" disabled="true">custom label in select</option>',
398-
'<option value="heading6" class="h6">Heading6</option>',
399-
'<option value="pre" class="pre">Pre</option>',
414+
'<option value="heading6" class="h6" style="display: none;">Heading6</option>',
415+
'<option value="pre" class="pre" style="display: none;">Pre</option>',
400416
'</select>',
401417
'</jw-group>',
402418
'<jw-separator role="separator"></jw-separator>',
403-
'<jw-button name="heading1" class="h1" aria-pressed="false">Heading1</jw-button>',
419+
'<jw-button name="heading1" class="h1" aria-pressed="false" style="display: none;">Heading1</jw-button>',
404420
'<jw-group>',
405-
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false"></jw-button>',
406-
'<jw-button name="italic" title="Toggle italic" class="fa fa-italic fa-fw" aria-pressed="false"></jw-button>',
407-
'<jw-button name="underline" title="Toggle underline" class="fa fa-underline fa-fw" aria-pressed="false"></jw-button>',
421+
'<jw-button name="bold" title="Toggle bold" class="fa fa-bold fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
422+
'<jw-button name="italic" title="Toggle italic" class="fa fa-italic fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
423+
'<jw-button name="underline" title="Toggle underline" class="fa fa-underline fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
408424
'</jw-group>',
409425
'<span class="label">custom label</span>',
410426
'<jw-group>',
411-
'<jw-button name="indent" title="Indent" class="fa fa-indent fa-fw" aria-pressed="false"></jw-button>',
427+
'<jw-button name="indent" title="Indent" class="fa fa-indent fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
412428
'<jw-separator role="separator"></jw-separator>',
413-
'<jw-button name="outdent" title="Outdent" class="fa fa-outdent fa-fw" aria-pressed="false"></jw-button>',
429+
'<jw-button name="outdent" title="Outdent" class="fa fa-outdent fa-fw" aria-pressed="false" style="display: none;"></jw-button>',
414430
'</jw-group>',
415431
'</jw-toolbar>',
416432
].join(''),

0 commit comments

Comments
 (0)