tests and fixes

vaadin · Sep 11, 2024 · eab84f5 · eab84f5
1 parent 5505aa6
commit eab84f5
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 2 deletions.
diff --git a/dev/dashboard.html b/dev/dashboard.html
@@ -34,7 +34,8 @@
  }
 
  .chart {
- height: 300px;
+ height: 100%;
+ min-height: 300px;
  background: repeating-linear-gradient(45deg, #e0e0e0, #e0e0e0 10px, #f5f5f5 10px, #f5f5f5 20px);
  }
  </style>

diff --git a/packages/dashboard/src/widget-resize-controller.js b/packages/dashboard/src/widget-resize-controller.js
@@ -132,7 +132,7 @@ export class WidgetResizeController extends EventTarget {
 
  /** @private */
  __updateResizedItem(colspan = 1, rowspan = 1) {
- if (this.resizedItem.colspan === colspan && this.resizedItem.rowspan === rowspan) {
+ if ((this.resizedItem.colspan || 1) === colspan && (this.resizedItem.rowspan || 1) === rowspan) {
  return;
  }
 

diff --git a/packages/dashboard/test/dashboard-widget-resizing.test.ts b/packages/dashboard/test/dashboard-widget-resizing.test.ts
@@ -267,6 +267,43 @@ describe('dashboard - widget resizing', () => {
  ]);
  });
 
+ it('should not resize beyond effective column count', async () => {
+ const resizeSpy = sinon.spy();
+ dashboard.addEventListener('dashboard-item-drag-resize', resizeSpy);
+
+ const widget1Rect = getElementFromCell(dashboard, 0, 1)!.getBoundingClientRect();
+
+ // Narrow the dashboard to have only one column
+ dashboard.style.width = `${columnWidth}px`;
+ await nextFrame();
+ // prettier-ignore
+ expectLayout(dashboard, [
+ [0],
+ [1],
+ ]);
+
+ fireResizeStart(getElementFromCell(dashboard, 0, 0)!);
+ // Try yo resize the widget to the cover two columns
+ const x = widget1Rect.right;
+ const y = widget1Rect.bottom;
+ const event = new MouseEvent('mousemove', {
+ bubbles: true,
+ composed: true,
+ clientX: x,
+ clientY: y,
+ buttons: 1,
+ });
+ dashboard.dispatchEvent(event);
+ await nextFrame();
+
+ expect(resizeSpy).to.not.have.been.called;
+ // prettier-ignore
+ expectLayout(dashboard, [
+ [0],
+ [1],
+ ]);
+ });
+
  it('should dispatch an item resize end event', async () => {
  const resizeEndSpy = sinon.spy();
  dashboard.addEventListener('dashboard-item-resize-end', resizeEndSpy);
@@ -283,6 +320,22 @@ describe('dashboard - widget resizing', () => {
  });
  });
 
+ it('should not dispatch an item reorder end event if drag has not started', async () => {
+ const resizeEndSpy = sinon.spy();
+ dashboard.addEventListener('dashboard-item-resize-end', resizeEndSpy);
+
+ const widget = getElementFromCell(dashboard, 0, 0)!;
+ widget.shadowRoot?.querySelector('.resize-handle')?.remove();
+ // Start dragging the first widget by somewhere else than the resize handle
+ fireResizeStart(widget);
+ await nextFrame();
+
+ fireResizeEnd(dashboard);
+ await nextFrame();
+
+ expect(resizeEndSpy).to.not.have.been.called;
+ });
+
  it('should cancel touchmove events while resizing', async () => {
  fireResizeStart(getElementFromCell(dashboard, 0, 0)!);
  await nextFrame();
@@ -316,6 +369,95 @@ describe('dashboard - widget resizing', () => {
  expect(getComputedStyle(getElementFromCell(dashboard, 0, 0)!).userSelect).not.to.equal('none');
  });
 
+ it('should not throw with a lazy renderer while resizing', async () => {
+ dashboard.style.width = `${columnWidth}px`;
+ await nextFrame();
+ // prettier-ignore
+ expectLayout(dashboard, [
+ [0],
+ [1],
+ ]);
+
+ const widget1Rect = getElementFromCell(dashboard, 1, 0)!.getBoundingClientRect();
+
+ // Assign a renderer that initially renders nothing
+ const syncRenderer = dashboard.renderer!;
+ dashboard.renderer = (root, _, model) => {
+ root.textContent = '';
+ requestAnimationFrame(() => {
+ syncRenderer(root, _, model);
+ });
+ };
+ await nextFrame();
+ await nextFrame();
+
+ fireResizeStart(getElementFromCell(dashboard, 0, 0)!);
+ await nextFrame();
+ fireResizeOver(getElementFromCell(dashboard, 0, 0)!, 'top');
+ await nextFrame();
+
+ expect(() => {
+ // Dispatch dragover event while the renderer is still rendering (no widget in the cells)
+ const x = widget1Rect.left + widget1Rect.width / 2;
+ const y = widget1Rect.bottom;
+ const event = new MouseEvent('mousemove', {
+ bubbles: true,
+ composed: true,
+ clientX: x,
+ clientY: y,
+ buttons: 1,
+ });
+ dashboard.dispatchEvent(event);
+ }).to.not.throw();
+ });
+
+ it('should take gap into account when resizing', async () => {
+ dashboard.style.width = `${columnWidth * 3}px`;
+ setGap(dashboard, columnWidth / 2);
+ await nextFrame();
+
+ // prettier-ignore
+ expectLayout(dashboard, [
+ [0, 1],
+ ]);
+
+ fireResizeStart(getElementFromCell(dashboard, 0, 0)!);
+ await nextFrame();
+ fireResizeOver(getElementFromCell(dashboard, 0, 1)!, 'start');
+ await nextFrame();
+
+ // prettier-ignore
+ expectLayout(dashboard, [
+ [0, 1],
+ ]);
+ });
+
+ it('should not shrink colspan below 0', async () => {
+ const resizeSpy = sinon.spy();
+ dashboard.addEventListener('dashboard-item-drag-resize', resizeSpy);
+
+ fireResizeStart(getElementFromCell(dashboard, 0, 0)!);
+ await nextFrame();
+ fireResizeOver(getElementFromCell(dashboard, 0, 0)!, 'start');
+ await nextFrame();
+
+ expect((dashboard.items[0] as TestDashboardItem).colspan).to.be.undefined;
+ expect(resizeSpy).to.not.have.been.calledOnce;
+ });
+
+ it('should not shrink rowspan below 0', async () => {
+ const resizeSpy = sinon.spy();
+ dashboard.addEventListener('dashboard-item-drag-resize', resizeSpy);
+
+ fireResizeStart(getElementFromCell(dashboard, 0, 0)!);
+ await nextFrame();
+ fireResizeOver(getElementFromCell(dashboard, 0, 0)!, 'top');
+ await nextFrame();
+
+ expect((dashboard.items[0] as TestDashboardItem).rowspan).to.be.undefined;
+ expect(resizeSpy).to.not.have.been.calledOnce;
+ });
+
  // Make sure the original resized element is restored in the host.
  // Otherwise, "track" event would stop working.
  describe('ensure track event', () => {