Skip to content

Commit 9a251b7

Browse files
tomivirkkitomivirkki
authored
test: remove custom styles from menu-bar tests (#11349)
1 parent b83888e commit 9a251b7

File tree

2 files changed

+52
-40
lines changed

2 files changed

+52
-40
lines changed

‎packages/menu-bar/test/overflow.test.js‎

Lines changed: 52 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { expect } from '@vaadin/chai-plugins';
22
import { arrowRight, fixtureSync, nextRender, nextResize, nextUpdate } from '@vaadin/testing-helpers';
33
import sinon from 'sinon';
4-
import './menu-bar-test-styles.js';
54
import '../src/vaadin-menu-bar.js';
65

76
// Utility function to assert a menu item is not visible
@@ -18,22 +17,45 @@ const assertVisible = (elem) => {
1817
expect(style.position).to.not.equal('absolute');
1918
};
2019

20+
const BUTTON_WIDTH = 60;
21+
22+
function makeComponent(id) {
23+
const div = document.createElement('div');
24+
div.style.width = `${BUTTON_WIDTH}px`;
25+
div.textContent = `Item ${id}`;
26+
return div;
27+
}
28+
2129
describe('overflow', () => {
30+
beforeEach(() => {
31+
fixtureSync(`
32+
<style>
33+
vaadin-menu-bar-button {
34+
width: ${BUTTON_WIDTH}px;
35+
}
36+
37+
vaadin-menu-bar[theme="big"] vaadin-menu-bar-button {
38+
width: 100px;
39+
}
40+
</style>
41+
`);
42+
});
43+
2244
describe('overflow button', () => {
2345
let wrapper, menu, buttons, overflow;
2446

2547
beforeEach(async () => {
2648
wrapper = fixtureSync(`
2749
<div style="display: flex">
2850
<div style="width: 100px;"></div>
29-
<vaadin-menu-bar style="width: 200px"></vaadin-menu-bar>
51+
<vaadin-menu-bar style="width: ${BUTTON_WIDTH * 3}px"></vaadin-menu-bar>
3052
</div>
3153
`);
3254
menu = wrapper.querySelector('vaadin-menu-bar');
3355
menu.items = [{ text: 'Item 1' }, { text: 'Item 2' }, { text: 'Item 3' }, { text: 'Item 4' }, { text: 'Item 5' }];
3456
await nextResize(menu);
3557
buttons = menu._buttons;
36-
overflow = buttons[buttons.length - 1];
58+
overflow = buttons.at(-1);
3759
});
3860

3961
it('should show overflow button and hide the buttons which do not fit', () => {
@@ -57,26 +79,24 @@ describe('overflow', () => {
5779
});
5880

5981
it('should show buttons and update overflow items when width increased', async () => {
60-
menu.style.width = '350px';
82+
menu.style.width = `${BUTTON_WIDTH * 4.5}px`;
6183
await nextResize(menu);
6284
assertVisible(buttons[2]);
63-
assertVisible(buttons[3]);
64-
expect(overflow.item.children.length).to.equal(1);
65-
expect(overflow.item.children[0]).to.deep.equal(menu.items[4]);
85+
expect(overflow.item.children.length).to.equal(2);
86+
expect(overflow.item.children[0]).to.deep.equal(menu.items[3]);
6687
});
6788

6889
it('should show buttons and update overflow items when width increased in RTL', async () => {
6990
menu.setAttribute('dir', 'rtl');
70-
menu.style.width = '350px';
91+
menu.style.width = `${BUTTON_WIDTH * 4.5}px`;
7192
await nextResize(menu);
7293
assertVisible(buttons[2]);
73-
assertVisible(buttons[3]);
74-
expect(overflow.item.children.length).to.equal(1);
75-
expect(overflow.item.children[0]).to.deep.equal(menu.items[4]);
94+
expect(overflow.item.children.length).to.equal(2);
95+
expect(overflow.item.children[0]).to.deep.equal(menu.items[3]);
7696
});
7797

7898
it('should hide buttons and update overflow items when width decreased', async () => {
79-
menu.style.width = '150px';
99+
menu.style.width = `${BUTTON_WIDTH * 2.5}px`;
80100
await nextResize(menu);
81101
assertHidden(buttons[1]);
82102
expect(overflow.item.children.length).to.equal(4);
@@ -88,7 +108,7 @@ describe('overflow', () => {
88108

89109
it('should hide buttons and update overflow items when width decreased in RTL', async () => {
90110
menu.setAttribute('dir', 'rtl');
91-
menu.style.width = '150px';
111+
menu.style.width = `${BUTTON_WIDTH * 2.5}px`;
92112
await nextResize(menu);
93113
assertHidden(buttons[1]);
94114
expect(overflow.item.children.length).to.equal(4);
@@ -121,7 +141,7 @@ describe('overflow', () => {
121141
});
122142

123143
it('should show overflow button when theme makes buttons do not fit', async () => {
124-
menu.style.width = '400px';
144+
menu.style.width = `${BUTTON_WIDTH * 5}px`;
125145
await nextResize(menu);
126146
expect(overflow.hasAttribute('hidden')).to.be.true;
127147
menu.setAttribute('theme', 'big');
@@ -132,7 +152,7 @@ describe('overflow', () => {
132152
});
133153

134154
it('should reset buttons after moving back from the overflow menu', async () => {
135-
menu.style.width = '400px';
155+
menu.style.width = `${BUTTON_WIDTH * 5}px`;
136156
await nextResize(menu);
137157

138158
// Set theme to make button hidden
@@ -154,7 +174,7 @@ describe('overflow', () => {
154174
expect(buttons[0].getAttribute('tabindex')).to.equal('-1');
155175
expect(buttons[1].getAttribute('tabindex')).to.equal('0');
156176

157-
menu.style.width = '150px';
177+
menu.style.width = `${BUTTON_WIDTH * 2.5}px`;
158178
await nextResize(menu);
159179

160180
expect(buttons[0].getAttribute('tabindex')).to.equal('0');
@@ -221,7 +241,7 @@ describe('overflow', () => {
221241
});
222242

223243
it('should not set when one button and overflow are only visible', async () => {
224-
menu.style.width = '150px';
244+
menu.style.width = `${BUTTON_WIDTH * 2.5}px`;
225245
await nextResize(menu);
226246
assertVisible(buttons[0]);
227247
assertHidden(buttons[1]);
@@ -230,24 +250,24 @@ describe('overflow', () => {
230250
});
231251

232252
it('should set when only overflow button is visible', async () => {
233-
menu.style.width = '100px';
253+
menu.style.width = `${BUTTON_WIDTH * 0.5}px`;
234254
await nextResize(menu);
235255
assertHidden(buttons[0]);
236256
assertHidden(buttons[1]);
237257
expect(menu.hasAttribute('has-single-button')).to.be.true;
238258
});
239259

240260
it('should remove when buttons become visible after size increases', async () => {
241-
menu.style.width = '100px';
261+
menu.style.width = `${BUTTON_WIDTH * 0.5}px`;
242262
await nextResize(menu);
243263

244-
menu.style.width = '150px';
264+
menu.style.width = `${BUTTON_WIDTH * 2.5}px`;
245265
await nextResize(menu);
246266
expect(menu.hasAttribute('has-single-button')).to.be.false;
247267
});
248268

249269
it('should set when theme attribute makes other buttons not fit', async () => {
250-
menu.style.width = '150px';
270+
menu.style.width = `${BUTTON_WIDTH * 2}px`;
251271
await nextResize(menu);
252272

253273
menu.setAttribute('theme', 'big');
@@ -262,7 +282,7 @@ describe('overflow', () => {
262282
});
263283

264284
it('should not remove after changing items to not overflow', async () => {
265-
menu.style.width = '100px';
285+
menu.style.width = `${BUTTON_WIDTH * 1.5}px`;
266286
await nextResize(menu);
267287

268288
menu.items = [{ text: 'Actions' }];
@@ -289,7 +309,7 @@ describe('overflow', () => {
289309
);
290310
menu = container.firstChild;
291311

292-
container.style.width = '250px';
312+
container.style.width = `${BUTTON_WIDTH * 2.5}px`;
293313

294314
menu.items = [{ text: 'Item 1' }, { text: 'Item 2' }, { text: 'Item 3' }, { text: 'Item 4' }, { text: 'Item 5' }];
295315
await nextRender();
@@ -302,12 +322,12 @@ describe('overflow', () => {
302322
// when more space becomes available
303323
// see https://github.com/vaadin/vaadin-menu-bar/issues/130
304324
menu.style.minWidth = '0';
305-
container.style.width = '150px';
325+
container.style.width = `${BUTTON_WIDTH * 1.5}px`;
306326
await nextResize(menu);
307327
assertHidden(buttons[2]);
308328
assertHidden(buttons[3]);
309329

310-
container.style.width = '400px';
330+
container.style.width = `${BUTTON_WIDTH * 5}px`;
311331
await nextResize(menu);
312332
assertVisible(buttons[2]);
313333
assertVisible(buttons[3]);
@@ -321,12 +341,12 @@ describe('overflow', () => {
321341
let container, text, menu, buttons;
322342

323343
beforeEach(() => {
324-
container = fixtureSync('<div style="display: flex; max-width: 300px"></div>');
344+
container = fixtureSync(`<div style="display: flex; max-width: ${BUTTON_WIDTH * 3}px"></div>`);
325345
text = document.createElement('div');
326346
text.textContent = 'Sibling';
327347
menu = document.createElement('vaadin-menu-bar');
328348
menu.items = [{ text: 'Item 1' }, { text: 'Item 2' }, { text: 'Item 3' }, { text: 'Item 4' }];
329-
menu.style.minWidth = '100px';
349+
menu.style.minWidth = `${BUTTON_WIDTH * 1.5}px`;
330350
});
331351

332352
describe('container', () => {
@@ -340,7 +360,7 @@ describe('overflow', () => {
340360
assertHidden(buttons[2]);
341361
assertHidden(buttons[3]);
342362

343-
container.style.maxWidth = '400px';
363+
container.style.maxWidth = `${BUTTON_WIDTH * 5}px`;
344364
await nextResize(menu);
345365

346366
assertVisible(buttons[2]);
@@ -350,11 +370,11 @@ describe('overflow', () => {
350370
it('should show buttons after attaching another container and increasing its width', async () => {
351371
const other = document.createElement('div');
352372
other.style.display = 'flex';
353-
other.style.maxWidth = '300px';
373+
other.style.maxWidth = `${BUTTON_WIDTH * 4}px`;
354374
container.parentNode.appendChild(other);
355375

356376
other.append(text, menu);
357-
other.style.maxWidth = '400px';
377+
other.style.maxWidth = `${BUTTON_WIDTH * 5}px`;
358378
await nextResize(menu);
359379

360380
assertVisible(buttons[2]);
@@ -374,7 +394,7 @@ describe('overflow', () => {
374394
assertHidden(buttons[2]);
375395
assertHidden(buttons[3]);
376396

377-
container.style.maxWidth = '400px';
397+
container.style.maxWidth = `${BUTTON_WIDTH * 6}px`;
378398
await nextResize(menu);
379399

380400
assertVisible(buttons[2]);
@@ -386,13 +406,6 @@ describe('overflow', () => {
386406
describe('sub-menu', () => {
387407
let menu, buttons, overflow, subMenu;
388408

389-
function makeComponent(id) {
390-
const div = document.createElement('div');
391-
div.style.width = '100px';
392-
div.textContent = `Item ${id}`;
393-
return div;
394-
}
395-
396409
beforeEach(async () => {
397410
menu = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>');
398411
menu.items = [
@@ -408,7 +421,7 @@ describe('overflow', () => {
408421
overflow = buttons[buttons.length - 1];
409422
subMenu = menu._subMenu;
410423

411-
menu.style.width = '250px';
424+
menu.style.width = `${BUTTON_WIDTH * 3}px`;
412425
await nextResize(menu);
413426
});
414427

‎packages/menu-bar/test/sub-menu.test.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
touchstart,
1818
} from '@vaadin/testing-helpers';
1919
import sinon from 'sinon';
20-
import './menu-bar-test-styles.js';
2120
import '../src/vaadin-menu-bar.js';
2221
import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
2322

0 commit comments

Comments
 (0)