From ceea8c6c9a5ca8bd81bea9a21cde358bc2e575e3 Mon Sep 17 00:00:00 2001 From: tintinthong Date: Sun, 7 Apr 2024 13:22:19 +0800 Subject: [PATCH 1/3] improve api for resizable panel group test --- .../components/resizable-panel-group-test.gts | 425 +++++++++++++----- 1 file changed, 306 insertions(+), 119 deletions(-) diff --git a/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts b/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts index 0412049a8a..d3afe49825 100644 --- a/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts +++ b/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts @@ -3,6 +3,7 @@ import { setupRenderingTest } from 'ember-qunit'; import { doubleClick, render, RenderingTestContext } from '@ember/test-helpers'; import { ResizablePanelGroup } from '@cardstack/boxel-ui/components'; import { tracked } from '@glimmer/tracking'; +import { eq } from '@cardstack/boxel-ui/helpers'; function sleep(ms: number) { return new Promise(function (resolve) { @@ -10,12 +11,54 @@ function sleep(ms: number) { }); } +class PanelProperties { + @tracked lengthPx?: number; + @tracked isHidden?: boolean; + @tracked defaultLengthFraction?: number; + @tracked minLengthPx?: number; + + innerContainerStyle?: string; + outerContainerStyle?: string; + showResizeHandle?: boolean; + constructor( + panelArgs: { + lengthPx?: number; + isHidden?: boolean; + defaultLengthFraction?: number; + minLengthPx?: number; + innerContainerStyle?: string; + outerContainerStyle?: string; + showResizeHandle?: boolean; + } = {}, + testArgs: { + innerContainerStyle?: string; + outerContainerStyle?: string; + showResizeHandle?: boolean; + } = {}, + ) { + let { + lengthPx, + isHidden = false, + defaultLengthFraction, + minLengthPx, + } = panelArgs; + let { innerContainerStyle, outerContainerStyle, showResizeHandle } = + testArgs; + this.lengthPx = lengthPx; + this.isHidden = isHidden; + this.defaultLengthFraction = defaultLengthFraction; + this.minLengthPx = minLengthPx; + + this.showResizeHandle = showResizeHandle; + + this.innerContainerStyle = innerContainerStyle; + this.outerContainerStyle = outerContainerStyle; + } +} + class RenderController { @tracked containerStyle = ''; - @tracked panel1LengthPx: number | undefined; - @tracked panel2LengthPx: number | undefined; - @tracked isPanel2Hidden = false; - panel1InnerContentStyle: string | undefined; + @tracked panels: PanelProperties[] = []; } interface MyTestContext extends RenderingTestContext { @@ -39,33 +82,37 @@ module('Integration | ResizablePanelGroup', function (hooks) { @reverseCollapse={{true}} as |ResizablePanel ResizeHandle| > - -
-
- Panel 1 -
-
-
- - -
- Panel 2 -
-
+ {{#if (eq index 1)}} +
+
+ Panel + {{index}} +
+
+ {{else}} +
+ Panel 2 +
+ {{/if}} + + {{#if panel.showResizeHandle}} + + {{/if}} + {{/each}} ); @@ -75,193 +122,333 @@ module('Integration | ResizablePanelGroup', function (hooks) { test('it can lay out panels vertically (default)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 100px; height: 318px;'; + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + showResizeHandle: true, + outerContainerStyle: + 'border: 1px solid red; height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50 }, + { + outerContainerStyle: 'border: 1px solid red; height: 100%', + }, + ), + ]; await renderVerticalResizablePanelGroup(this.renderController); - assert.hasNumericStyle('.panel-1-content', 'height', (318 - 18) * 0.6, 1); - assert.hasNumericStyle('.panel-2-content', 'height', (318 - 18) * 0.4, 1); + assert.hasNumericStyle('.panel-0-content', 'height', (318 - 18) * 0.6, 1); + assert.hasNumericStyle('.panel-1-content', 'height', (318 - 18) * 0.4, 1); }); test('it can lay out panels vertically (length specified)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 518px; border: 1px solid green'; - this.renderController.panel1LengthPx = 355; - this.renderController.panel2LengthPx = 143; + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + showResizeHandle: true, + outerContainerStyle: + 'border: 1px solid red; height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50 }, + { + outerContainerStyle: 'border: 1px solid red; height: 100%', + }, + ), + ]; + this.renderController.panels[0].lengthPx = 355; + this.renderController.panels[1].lengthPx = 143; await renderVerticalResizablePanelGroup(this.renderController); - assert.hasNumericStyle('.panel-1-content', 'height', 355, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 143, 1); + assert.hasNumericStyle('.panel-0-content', 'height', 355, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 143, 1); }); test('it respects vertical minLength (default)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 108px;'; + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + showResizeHandle: true, + outerContainerStyle: + 'border: 1px solid red; height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50 }, + { + outerContainerStyle: 'border: 1px solid red; height: 100%', + }, + ), + ]; await renderVerticalResizablePanelGroup(this.renderController); - assert.hasNumericStyle('.panel-1-content', 'height', 40, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 50, 1); + assert.hasNumericStyle('.panel-0-content', 'height', 40, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 50, 1); }); test('it respects vertical minLength (length specified)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 108px; border: 1px solid green'; - this.renderController.panel1LengthPx = 45; - this.renderController.panel2LengthPx = 45; + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + showResizeHandle: true, + outerContainerStyle: + 'border: 1px solid red; height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50 }, + { + outerContainerStyle: 'border: 1px solid red; height: 100%', + }, + ), + ]; + this.renderController.panels[0].lengthPx = 45; + this.renderController.panels[1].lengthPx = 45; await renderVerticalResizablePanelGroup(this.renderController); - assert.hasNumericStyle('.panel-1-content', 'height', 40, 2); - assert.hasNumericStyle('.panel-2-content', 'height', 50, 2); + assert.hasNumericStyle('.panel-0-content', 'height', 40, 2); + assert.hasNumericStyle('.panel-1-content', 'height', 50, 2); }); test('it adjusts to its container growing (default)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 218px;'; + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + showResizeHandle: true, + outerContainerStyle: + 'border: 1px solid red; height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50 }, + { + outerContainerStyle: 'border: 1px solid red; height: 100%', + }, + ), + ]; await renderVerticalResizablePanelGroup(this.renderController); this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 418px;'; await sleep(100); // let didResizeModifier run - assert.hasNumericStyle('.panel-1-content', 'height', 240, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 160, 1); + assert.hasNumericStyle('.panel-0-content', 'height', 240, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 160, 1); }); test('it adjusts to its container growing (length specified)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 218px; border: 1px solid green'; - this.renderController.panel1LengthPx = 100; - this.renderController.panel2LengthPx = 100; + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + showResizeHandle: true, + outerContainerStyle: + 'border: 1px solid red; height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50 }, + { + outerContainerStyle: 'border: 1px solid red; height: 100%', + }, + ), + ]; + this.renderController.panels[0].lengthPx = 100; + this.renderController.panels[1].lengthPx = 100; await renderVerticalResizablePanelGroup(this.renderController); + assert.hasNumericStyle('.panel-0-content', 'height', 100, 1.5); assert.hasNumericStyle('.panel-1-content', 'height', 100, 1.5); - assert.hasNumericStyle('.panel-2-content', 'height', 100, 1.5); this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 418px; border: 1px solid green'; await sleep(100); // let didResizeModifier run + assert.hasNumericStyle('.panel-0-content', 'height', 200, 1.5); assert.hasNumericStyle('.panel-1-content', 'height', 200, 1.5); - assert.hasNumericStyle('.panel-2-content', 'height', 200, 1.5); }); test('it adjusts to its container shrinking (default)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 418px;'; + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + showResizeHandle: true, + outerContainerStyle: + 'border: 1px solid red; height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50 }, + { + outerContainerStyle: 'border: 1px solid red; height: 100%', + }, + ), + ]; await renderVerticalResizablePanelGroup(this.renderController); this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 218px;'; await sleep(100); // let didResizeModifier run - assert.hasNumericStyle('.panel-1-content', 'height', 120, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 80, 1); + assert.hasNumericStyle('.panel-0-content', 'height', 120, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 80, 1); }); test('it adjusts to its container shrinking (length specified A)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 420px; border: 1px solid green'; + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + showResizeHandle: true, + outerContainerStyle: + 'border: 1px solid red; height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50 }, + { + outerContainerStyle: 'border: 1px solid red; height: 100%', + }, + ), + ]; // Height ratio panel 1 and panel 2 is 3:2 - this.renderController.panel1LengthPx = 240; - this.renderController.panel2LengthPx = 160; + this.renderController.panels[0].lengthPx = 240; + this.renderController.panels[1].lengthPx = 160; await renderVerticalResizablePanelGroup(this.renderController); - assert.hasNumericStyle('.panel-1-content', 'height', 240, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 160, 1); + assert.hasNumericStyle('.panel-0-content', 'height', 240, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 160, 1); this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 220px; border: 1px solid green'; await sleep(100); // let didResizeModifier run // Maintain the ratio 3:2 when resizing - assert.hasNumericStyle('.panel-1-content', 'height', 120, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 80, 1); + assert.hasNumericStyle('.panel-0-content', 'height', 120, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 80, 1); }); test('it adjusts to its container shrinking (length specified B)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 620px; border: 1px solid green'; + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + showResizeHandle: true, + outerContainerStyle: + 'border: 1px solid red; height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50 }, + { + outerContainerStyle: 'border: 1px solid red; height: 100%', + }, + ), + ]; // Height ratio panel 1 and panel 2 is 2:1 - this.renderController.panel1LengthPx = 400; - this.renderController.panel2LengthPx = 200; - this.renderController.panel1InnerContentStyle = + this.renderController.panels[0].lengthPx = 400; + this.renderController.panels[1].lengthPx = 200; + this.renderController.panels[0].innerContainerStyle = 'height: 180px; background: blue'; await renderVerticalResizablePanelGroup(this.renderController); - assert.hasNumericStyle('.panel-1-content', 'height', 400, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 200, 1); + assert.hasNumericStyle('.panel-0-content', 'height', 400, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 200, 1); this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 220px; border: 1px solid green'; await sleep(100); // let didResizeModifier run // Maintain the ratio 2:1 when resizing - assert.hasNumericStyle('.panel-1-content', 'height', 133, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 67, 1); + assert.hasNumericStyle('.panel-0-content', 'height', 133, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 67, 1); }); test('it adjusts to its container shrinking and growing', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 620px; border: 1px solid green'; - this.renderController.panel1LengthPx = 400; - this.renderController.panel2LengthPx = 200; - this.renderController.panel1InnerContentStyle = + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + showResizeHandle: true, + outerContainerStyle: + 'border: 1px solid red; height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50 }, + { + outerContainerStyle: 'border: 1px solid red; height: 100%', + }, + ), + ]; + this.renderController.panels[0].lengthPx = 400; + this.renderController.panels[1].lengthPx = 200; + this.renderController.panels[0].innerContainerStyle = 'height: 180px; background: blue'; await renderVerticalResizablePanelGroup(this.renderController); - this.renderController.panel1LengthPx = 50; - this.renderController.panel2LengthPx = 550; + this.renderController.panels[0].lengthPx = 50; + this.renderController.panels[1].lengthPx = 550; await sleep(100); // let didResizeModifier run await doubleClick('[data-test-resize-handler]'); // Double-click to hide recent await sleep(100); // let onResizeHandleDblClick run - assert.hasNumericStyle('.panel-1-content', 'height', 600, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 0, 2); + assert.hasNumericStyle('.panel-0-content', 'height', 600, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 0, 2); this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 320px; border: 1px solid green'; // shrink container by ~50% await sleep(100); // let didResizeModifier run - assert.hasNumericStyle('.panel-1-content', 'height', 300, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 0, 2); + assert.hasNumericStyle('.panel-0-content', 'height', 300, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 0, 2); await doubleClick('[data-test-resize-handler]'); // Double-click to unhide recent await sleep(100); // let onResizeHandleDblClick run - assert.hasNumericStyle('.panel-1-content', 'height', 180, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 120, 1); + assert.hasNumericStyle('.panel-0-content', 'height', 180, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 120, 1); this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 620px; border: 1px solid green'; // increase window/container height to original height await sleep(100); // let didResizeModifier run // expected behavior: panel height percentages would remain consistent - assert.hasNumericStyle('.panel-1-content', 'height', 360, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 240, 1); + assert.hasNumericStyle('.panel-0-content', 'height', 360, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 240, 1); }); test('it excludes hidden panels from participating in layout', async function (this: MyTestContext, assert) { - this.renderController.isPanel2Hidden = true; this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 218px;'; - let { renderController } = this; + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + outerContainerStyle: 'height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50, isHidden: true }, + { + outerContainerStyle: 'height: 100%', + }, + ), + ]; + await renderVerticalResizablePanelGroup(this.renderController); - await render(); await sleep(100); // let didResizeModifier run - assert.hasNumericStyle('.panel-1-content', 'height', 218, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 0, 0); - this.renderController.isPanel2Hidden = false; + assert.hasNumericStyle('.panel-0-content', 'height', 218, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 0, 0); + this.renderController.panels[1].isHidden = false; await sleep(100); // let didResizeModifier run - assert.hasNumericStyle('.panel-1-content', 'height', 156, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 62, 1); - this.renderController.isPanel2Hidden = true; + assert.hasNumericStyle('.panel-0-content', 'height', 156, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 62, 1); + this.renderController.panels[1].isHidden = true; await sleep(100); // let didResizeModifier run - assert.hasNumericStyle('.panel-1-content', 'height', 218, 1); - assert.hasNumericStyle('.panel-2-content', 'height', 0, 0); + assert.hasNumericStyle('.panel-0-content', 'height', 218, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 0, 0); }); }); From e33ea62d8d078a4b4dbfd75d22c807a23ab02644 Mon Sep 17 00:00:00 2001 From: tintinthong Date: Mon, 8 Apr 2024 19:23:17 +0800 Subject: [PATCH 2/3] refactor redundant data --- .../components/resizable-panel-group-test.gts | 176 ++---------------- 1 file changed, 16 insertions(+), 160 deletions(-) diff --git a/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts b/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts index d3afe49825..e3cd439626 100644 --- a/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts +++ b/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts @@ -69,6 +69,22 @@ module('Integration | ResizablePanelGroup', function (hooks) { setupRenderingTest(hooks); hooks.beforeEach(function (this: MyTestContext) { this.renderController = new RenderController(); + this.renderController.panels = [ + new PanelProperties( + { defaultLengthFraction: 0.6 }, + { + showResizeHandle: true, + outerContainerStyle: + 'border: 1px solid red; height: 100%; overflow-y:auto', + }, + ), + new PanelProperties( + { defaultLengthFraction: 0.4, minLengthPx: 50 }, + { + outerContainerStyle: 'border: 1px solid red; height: 100%', + }, + ), + ]; }); async function renderVerticalResizablePanelGroup( @@ -122,22 +138,6 @@ module('Integration | ResizablePanelGroup', function (hooks) { test('it can lay out panels vertically (default)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 100px; height: 318px;'; - this.renderController.panels = [ - new PanelProperties( - { defaultLengthFraction: 0.6 }, - { - showResizeHandle: true, - outerContainerStyle: - 'border: 1px solid red; height: 100%; overflow-y:auto', - }, - ), - new PanelProperties( - { defaultLengthFraction: 0.4, minLengthPx: 50 }, - { - outerContainerStyle: 'border: 1px solid red; height: 100%', - }, - ), - ]; await renderVerticalResizablePanelGroup(this.renderController); assert.hasNumericStyle('.panel-0-content', 'height', (318 - 18) * 0.6, 1); assert.hasNumericStyle('.panel-1-content', 'height', (318 - 18) * 0.4, 1); @@ -146,22 +146,6 @@ module('Integration | ResizablePanelGroup', function (hooks) { test('it can lay out panels vertically (length specified)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 518px; border: 1px solid green'; - this.renderController.panels = [ - new PanelProperties( - { defaultLengthFraction: 0.6 }, - { - showResizeHandle: true, - outerContainerStyle: - 'border: 1px solid red; height: 100%; overflow-y:auto', - }, - ), - new PanelProperties( - { defaultLengthFraction: 0.4, minLengthPx: 50 }, - { - outerContainerStyle: 'border: 1px solid red; height: 100%', - }, - ), - ]; this.renderController.panels[0].lengthPx = 355; this.renderController.panels[1].lengthPx = 143; await renderVerticalResizablePanelGroup(this.renderController); @@ -172,22 +156,6 @@ module('Integration | ResizablePanelGroup', function (hooks) { test('it respects vertical minLength (default)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 108px;'; - this.renderController.panels = [ - new PanelProperties( - { defaultLengthFraction: 0.6 }, - { - showResizeHandle: true, - outerContainerStyle: - 'border: 1px solid red; height: 100%; overflow-y:auto', - }, - ), - new PanelProperties( - { defaultLengthFraction: 0.4, minLengthPx: 50 }, - { - outerContainerStyle: 'border: 1px solid red; height: 100%', - }, - ), - ]; await renderVerticalResizablePanelGroup(this.renderController); assert.hasNumericStyle('.panel-0-content', 'height', 40, 1); assert.hasNumericStyle('.panel-1-content', 'height', 50, 1); @@ -196,22 +164,6 @@ module('Integration | ResizablePanelGroup', function (hooks) { test('it respects vertical minLength (length specified)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 108px; border: 1px solid green'; - this.renderController.panels = [ - new PanelProperties( - { defaultLengthFraction: 0.6 }, - { - showResizeHandle: true, - outerContainerStyle: - 'border: 1px solid red; height: 100%; overflow-y:auto', - }, - ), - new PanelProperties( - { defaultLengthFraction: 0.4, minLengthPx: 50 }, - { - outerContainerStyle: 'border: 1px solid red; height: 100%', - }, - ), - ]; this.renderController.panels[0].lengthPx = 45; this.renderController.panels[1].lengthPx = 45; await renderVerticalResizablePanelGroup(this.renderController); @@ -222,22 +174,6 @@ module('Integration | ResizablePanelGroup', function (hooks) { test('it adjusts to its container growing (default)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 218px;'; - this.renderController.panels = [ - new PanelProperties( - { defaultLengthFraction: 0.6 }, - { - showResizeHandle: true, - outerContainerStyle: - 'border: 1px solid red; height: 100%; overflow-y:auto', - }, - ), - new PanelProperties( - { defaultLengthFraction: 0.4, minLengthPx: 50 }, - { - outerContainerStyle: 'border: 1px solid red; height: 100%', - }, - ), - ]; await renderVerticalResizablePanelGroup(this.renderController); this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 418px;'; @@ -249,22 +185,6 @@ module('Integration | ResizablePanelGroup', function (hooks) { test('it adjusts to its container growing (length specified)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 218px; border: 1px solid green'; - this.renderController.panels = [ - new PanelProperties( - { defaultLengthFraction: 0.6 }, - { - showResizeHandle: true, - outerContainerStyle: - 'border: 1px solid red; height: 100%; overflow-y:auto', - }, - ), - new PanelProperties( - { defaultLengthFraction: 0.4, minLengthPx: 50 }, - { - outerContainerStyle: 'border: 1px solid red; height: 100%', - }, - ), - ]; this.renderController.panels[0].lengthPx = 100; this.renderController.panels[1].lengthPx = 100; await renderVerticalResizablePanelGroup(this.renderController); @@ -280,22 +200,6 @@ module('Integration | ResizablePanelGroup', function (hooks) { test('it adjusts to its container shrinking (default)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 418px;'; - this.renderController.panels = [ - new PanelProperties( - { defaultLengthFraction: 0.6 }, - { - showResizeHandle: true, - outerContainerStyle: - 'border: 1px solid red; height: 100%; overflow-y:auto', - }, - ), - new PanelProperties( - { defaultLengthFraction: 0.4, minLengthPx: 50 }, - { - outerContainerStyle: 'border: 1px solid red; height: 100%', - }, - ), - ]; await renderVerticalResizablePanelGroup(this.renderController); this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 218px;'; @@ -307,22 +211,6 @@ module('Integration | ResizablePanelGroup', function (hooks) { test('it adjusts to its container shrinking (length specified A)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 420px; border: 1px solid green'; - this.renderController.panels = [ - new PanelProperties( - { defaultLengthFraction: 0.6 }, - { - showResizeHandle: true, - outerContainerStyle: - 'border: 1px solid red; height: 100%; overflow-y:auto', - }, - ), - new PanelProperties( - { defaultLengthFraction: 0.4, minLengthPx: 50 }, - { - outerContainerStyle: 'border: 1px solid red; height: 100%', - }, - ), - ]; // Height ratio panel 1 and panel 2 is 3:2 this.renderController.panels[0].lengthPx = 240; this.renderController.panels[1].lengthPx = 160; @@ -340,22 +228,6 @@ module('Integration | ResizablePanelGroup', function (hooks) { test('it adjusts to its container shrinking (length specified B)', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 620px; border: 1px solid green'; - this.renderController.panels = [ - new PanelProperties( - { defaultLengthFraction: 0.6 }, - { - showResizeHandle: true, - outerContainerStyle: - 'border: 1px solid red; height: 100%; overflow-y:auto', - }, - ), - new PanelProperties( - { defaultLengthFraction: 0.4, minLengthPx: 50 }, - { - outerContainerStyle: 'border: 1px solid red; height: 100%', - }, - ), - ]; // Height ratio panel 1 and panel 2 is 2:1 this.renderController.panels[0].lengthPx = 400; this.renderController.panels[1].lengthPx = 200; @@ -375,22 +247,6 @@ module('Integration | ResizablePanelGroup', function (hooks) { test('it adjusts to its container shrinking and growing', async function (this: MyTestContext, assert) { this.renderController.containerStyle = 'max-height: 100%; width: 200px; height: 620px; border: 1px solid green'; - this.renderController.panels = [ - new PanelProperties( - { defaultLengthFraction: 0.6 }, - { - showResizeHandle: true, - outerContainerStyle: - 'border: 1px solid red; height: 100%; overflow-y:auto', - }, - ), - new PanelProperties( - { defaultLengthFraction: 0.4, minLengthPx: 50 }, - { - outerContainerStyle: 'border: 1px solid red; height: 100%', - }, - ), - ]; this.renderController.panels[0].lengthPx = 400; this.renderController.panels[1].lengthPx = 200; this.renderController.panels[0].innerContainerStyle = From 5739ccbb5d9487e9f900745863c58b35446618c3 Mon Sep 17 00:00:00 2001 From: tintinthong Date: Mon, 8 Apr 2024 19:27:28 +0800 Subject: [PATCH 3/3] clean --- .../integration/components/resizable-panel-group-test.gts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts b/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts index e3cd439626..35a4d74d89 100644 --- a/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts +++ b/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts @@ -139,8 +139,8 @@ module('Integration | ResizablePanelGroup', function (hooks) { this.renderController.containerStyle = 'max-height: 100%; width: 100px; height: 318px;'; await renderVerticalResizablePanelGroup(this.renderController); - assert.hasNumericStyle('.panel-0-content', 'height', (318 - 18) * 0.6, 1); - assert.hasNumericStyle('.panel-1-content', 'height', (318 - 18) * 0.4, 1); + assert.hasNumericStyle('.panel-0-content', 'height', 300 * 0.6, 1); + assert.hasNumericStyle('.panel-1-content', 'height', 300 * 0.4, 1); }); test('it can lay out panels vertically (length specified)', async function (this: MyTestContext, assert) {