Skip to content

Commit 389d798

Browse files
web-padawanweb-padawan
authored
chore: update unit and integration tests to run with base styles (#9906)
1 parent a14ca3e commit 389d798

File tree

14 files changed

+74
-117
lines changed

14 files changed

+74
-117
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
"prepare": "husky",
2020
"serve:dist": "web-dev-server --app-index dist/index.html --open",
2121
"start": "web-dev-server --node-resolve --open /dev",
22-
"start:base": "web-dev-server --node-resolve --open /dev --theme=base",
2322
"start:aura": "web-dev-server --node-resolve --open /dev --theme=aura",
23+
"start:lumo": "web-dev-server --node-resolve --open /dev --theme=lumo",
2424
"check-releases": "node ./scripts/check-releases.js && web-dev-server --node-resolve --open /scripts/check-releases.html",
2525
"test": "web-test-runner",
2626
"test:aura": "yarn test --config web-test-runner-aura.config.js",

‎packages/avatar/test/avatar.test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -324,11 +324,11 @@ describe('vaadin-avatar', () => {
324324
document.documentElement.style.setProperty('--vaadin-user-color-0', 'red');
325325
});
326326

327-
it('should set box-shadow based on color index', async () => {
327+
it('should set border color based on color index', async () => {
328328
avatar.colorIndex = 0;
329329
await nextUpdate(avatar);
330-
const { boxShadow } = getComputedStyle(avatar, '::before');
331-
expect(['rgb(255, 0, 0)', 'red'].some((v) => boxShadow.indexOf(v) > -1)).to.be.true;
330+
const { borderColor } = getComputedStyle(avatar, '::before');
331+
expect(['rgb(255, 0, 0)', 'red'].some((v) => borderColor.indexOf(v) > -1)).to.be.true;
332332
});
333333

334334
it('should set attribute based on color index', async () => {

‎packages/charts/test/styling.test.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -76,16 +76,9 @@ describe('vaadin-chart styling', () => {
7676
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
7777
});
7878

79-
// As there's no --vaadin-charts-color-1 this should pick default styling
80-
configuration.addSeries({
81-
type: 'column',
82-
data: [19.9, 61.5, 96.4, 119.2, 134.0, 166.0, 125.6, 138.5, 206.4, 184.1, 85.6, 44.4],
83-
});
84-
8579
const rects = chart.$.chart.querySelectorAll('.highcharts-legend-item > rect');
86-
expect(rects).to.have.lengthOf(2);
80+
expect(rects).to.have.lengthOf(1);
8781
expect(getComputedStyle(rects[0]).fill).to.equal('rgb(0, 255, 0)');
88-
expect(getComputedStyle(rects[1]).fill).to.equal('rgb(22, 118, 243)');
8982
});
9083
});
9184
});

‎packages/dashboard/test/dashboard-layout.test.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,19 @@ import {
1919
setSpacing,
2020
} from './helpers.js';
2121

22-
const [defaultSpacing, defaultMinimumColumnWidth] = (() => {
22+
// Corresponds to --_default-padding: 1em;
23+
const defaultPadding = 16;
24+
25+
// Corresponds to --_default-gap: 0.5em;
26+
const defaultSpacing = 8;
27+
28+
const defaultMinimumColumnWidth = (() => {
2329
const div = document.createElement('div');
2430
document.body.appendChild(div);
2531
div.style.width = '1rem';
2632
const minColWidth = div.offsetWidth * 25;
27-
div.style.width = '1rem'; // var(--lumo-space-m)
28-
const spacing = div.offsetWidth;
2933
div.remove();
30-
return [spacing, minColWidth];
34+
return minColWidth;
3135
})();
3236

3337
describe('dashboard layout', () => {
@@ -317,7 +321,7 @@ describe('dashboard layout', () => {
317321
// Clear the gap used in the tests
318322
setSpacing(dashboard, undefined);
319323
// Increase the width of the dashboard to fit two items, paddings and a gap
320-
dashboard.style.width = `calc(${columnWidth}px * 2 + ${defaultSpacing * 3}px)`;
324+
dashboard.style.width = `calc(${columnWidth}px * 2 + ${defaultPadding * 2}px + ${defaultSpacing}px)`;
321325
await nextResize(dashboard);
322326

323327
const { right: item0Right } = childElements[0].getBoundingClientRect();
@@ -361,7 +365,7 @@ describe('dashboard layout', () => {
361365
const { left: itemLeft } = childElements[0].getBoundingClientRect();
362366
const { left: dashboardLeft } = dashboard.getBoundingClientRect();
363367
// Expect the dashboard to have default padding of 1rem
364-
expect(itemLeft - dashboardLeft).to.eql(defaultSpacing);
368+
expect(itemLeft - dashboardLeft).to.eql(defaultPadding);
365369
});
366370

367371
it('should have custom gap between items horizontally', async () => {
@@ -547,7 +551,7 @@ describe('dashboard layout', () => {
547551
// Clear the spacing used in the tests
548552
setSpacing(dashboard, undefined);
549553
// Increase the width of the dashboard to fit two items, paddings and a gap
550-
dashboard.style.width = `calc(${columnWidth}px * 2 + ${defaultSpacing * 3}px)`;
554+
dashboard.style.width = `calc(${columnWidth}px * 2 + ${defaultPadding * 3}px + ${defaultSpacing}px)`;
551555
await nextResize(dashboard);
552556

553557
const { right: item2Right } = childElements[2].getBoundingClientRect();

‎packages/dialog/test/dialog.test.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -207,10 +207,8 @@ describe('vaadin-dialog', () => {
207207
it('should have min-width when not explicitly sized', async () => {
208208
dialog.opened = true;
209209
await nextRender();
210-
const contentMinWidth = parseFloat(getComputedStyle(dialog.$.overlay.$.content).minWidth);
211-
// TODO change to this with new base styles
212-
// const contentMinWidth = parseFloat(getComputedStyle(dialog.$.overlay.$.overlay).minWidth);
213-
expect(contentMinWidth).to.be.gt(0);
210+
const contentMinWidth = getComputedStyle(dialog.$.overlay.$.overlay).minWidth;
211+
expect(contentMinWidth).to.be.equal('min(64px, 100%)');
214212
});
215213
});
216214

‎packages/dialog/test/draggable-resizable.test.js‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { expect } from '@vaadin/chai-plugins';
2-
import { fixtureSync, nextFrame, nextRender, nextUpdate } from '@vaadin/testing-helpers';
2+
import { fixtureSync, nextFrame, nextRender, nextResize, nextUpdate } from '@vaadin/testing-helpers';
33
import sinon from 'sinon';
44
import './draggable-resizable-styles.js';
55
import '../src/vaadin-dialog.js';
@@ -245,18 +245,15 @@ describe('resizable', () => {
245245
expect(container.offsetHeight).to.equal(resizeContainer.offsetHeight);
246246
});
247247

248-
it('should scroll if the content overflows', () => {
248+
it('should scroll if the content overflows', async () => {
249249
// Fill the content with a lot of text so that it overflows the viewport
250250
dialog.firstElementChild.textContent = new Array(10000).fill('foo').join(' ');
251+
await nextResize(dialog.firstElementChild);
252+
await nextRender();
251253

252-
const resizeContainer = dialog.$.overlay.$.resizerContainer;
253-
resizeContainer.scrollTop = 1;
254-
expect(resizeContainer.scrollTop).to.equal(1);
255-
256-
// TODO change to this with base styles
257-
// const content = dialog.$.overlay.$.content;
258-
// content.scrollTop = 1;
259-
// expect(content.scrollTop).to.equal(1);
254+
const content = dialog.$.overlay.$.content;
255+
content.scrollTop = 1;
256+
expect(content.scrollTop).to.equal(1);
260257
});
261258

262259
it('should expand content with relative height', () => {
@@ -301,7 +298,6 @@ describe('resizable', () => {
301298
});
302299

303300
it('should be able to resize dialog to be wider than window', async () => {
304-
dialog.$.overlay.$.content.style.padding = '20px';
305301
dx = 20;
306302
dialog.$.overlay.setBounds({ left: -dx });
307303
dx = Math.floor(window.innerWidth - bounds.width + 5);
@@ -566,14 +562,17 @@ describe('draggable', () => {
566562

567563
it('should not reset scroll position on dragstart', async () => {
568564
dialog.modeless = true;
569-
button.style.marginBottom = '200px';
570-
dialog.$.overlay.setBounds({ height: '100px' });
571-
await nextUpdate(dialog);
572-
// TODO use dialog.$.overlay.$.content.scrollTop with base styles
573-
container.scrollTop = 100;
574-
expect(container.scrollTop).to.equal(100);
565+
dialog.height = '100px';
566+
await nextRender();
567+
568+
const contentElement = dialog.firstElementChild;
569+
contentElement.style.minHeight = '200px';
570+
await nextResize(contentElement);
571+
await nextRender();
572+
573+
dialog.$.overlay.$.content.scrollTop = 100;
575574
drag(container);
576-
expect(container.scrollTop).to.equal(100);
575+
expect(dialog.$.overlay.$.content.scrollTop).to.equal(100);
577576
});
578577

579578
it('should update "top" and "left" properties on drag', async () => {
@@ -855,13 +854,9 @@ describe('overflowing content', () => {
855854
dialog.$.overlay.setBounds({ height: 200 });
856855
await nextFrame();
857856
overlay.$.content.style.padding = '20px';
858-
container.scrollTop = 100;
859-
// TODO change to this with new base styles
860-
// overlay.$.content.scrollTop = 100;
857+
overlay.$.content.scrollTop = 100;
861858
resize(overlayPart.querySelector('.s'), 0, -50);
862859
await nextFrame();
863-
expect(container.scrollTop).to.equal(100);
864-
// TODO change to this with new base styles
865-
// expect(overlay.$.content.scrollTop).to.equal(100);
860+
expect(overlay.$.content.scrollTop).to.equal(100);
866861
});
867862
});

‎packages/form-layout/test/form-layout.test.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,20 +72,22 @@ describe('form layout', () => {
7272
});
7373

7474
it('should apply default --vaadin-form-layout-label-spacing', () => {
75-
expect(getComputedStyle(layout).getPropertyValue('--vaadin-form-layout-label-spacing')).to.equal('1em');
76-
expect(getComputedStyle(item.$.spacing).width).to.equal('16px');
75+
expect(getComputedStyle(layout).getPropertyValue('--vaadin-form-layout-label-spacing')).to.equal('0.5em');
76+
expect(getComputedStyle(item.$.spacing).width).to.equal('8px');
7777
});
7878

7979
it('should apply default --vaadin-form-layout-row-spacing', () => {
80-
expect(getComputedStyle(layout).getPropertyValue('--vaadin-form-layout-row-spacing')).to.equal('1em');
80+
expect(getComputedStyle(layout).getPropertyValue('--vaadin-form-layout-row-spacing')).to.equal('calc(0.5em * 2)');
8181
expect(getComputedStyle(item).marginTop).to.equal('8px');
8282
expect(getComputedStyle(item).marginBottom).to.equal('8px');
8383
});
8484

8585
it('should apply default --vaadin-form-layout-column-spacing', () => {
86-
expect(getComputedStyle(layout).getPropertyValue('--vaadin-form-layout-column-spacing')).to.equal('2em');
87-
expect(getComputedStyle(item).marginLeft).to.equal('16px');
88-
expect(getComputedStyle(item).marginRight).to.equal('16px');
86+
expect(getComputedStyle(layout).getPropertyValue('--vaadin-form-layout-column-spacing')).to.equal(
87+
'calc(0.5em * 2)',
88+
);
89+
expect(getComputedStyle(item).marginLeft).to.equal('8px');
90+
expect(getComputedStyle(item).marginRight).to.equal('8px');
8991
});
9092

9193
it('should ignore --vaadin-form-layout-label-width when label-position is top', () => {

‎packages/grid/test/basic.test.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { expect } from '@vaadin/chai-plugins';
2-
import { aTimeout, fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
2+
import { fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
33
import sinon from 'sinon';
44
import './grid-test-styles.js';
55
import '../all-imports.js';
@@ -358,14 +358,12 @@ describe('flex child', () => {
358358
it('should have a visible header after row reorder', async () => {
359359
column.header = 'header';
360360
grid.scrollToIndex(300);
361-
await aTimeout(0);
361+
await oneEvent(grid.$.table, 'scroll');
362362
flushGrid(grid);
363363
const { left, top } = grid.getBoundingClientRect();
364364

365-
oneEvent(grid.$.table, 'scroll');
366-
flushGrid(grid);
367-
368-
const cell = grid._cellFromPoint(left + 1, top + 1);
365+
// Use 10px to account for border-radius in Firefox
366+
const cell = grid._cellFromPoint(left + 10, top + 10);
369367
expect(grid.$.header.contains(cell)).to.be.true;
370368
});
371369

‎packages/grid/test/scroll-to-index.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ describe('scroll to index', () => {
8181
const index = grid.size / 2;
8282
grid.scrollToIndex(index);
8383
flushGrid(grid);
84-
grid.scrollTop += 1; // Scroll a little to validate the test
84+
grid.$.table.scrollTop += 5; // Scroll a little to validate the test
8585
let row = Array.from(grid.$.items.children).find((r) => r.index === index);
8686
const rowTop = row.getBoundingClientRect().top;
8787

‎packages/progress-bar/test/progress-bar.test.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@ describe('progress bar', () => {
2727

2828
beforeEach(async () => {
2929
progress = fixtureSync('<vaadin-progress-bar></vaadin-progress-bar>');
30+
fixtureSync(`
31+
<style>
32+
vaadin-progress-bar::part(value) {
33+
transition: none;
34+
}
35+
</style>
36+
`);
3037
await nextRender();
3138
value = progress.shadowRoot.querySelector('[part="value"]');
3239
});

0 commit comments

Comments
 (0)