From 675d8fbe8d10947c6f2f738c6bb42781c924bf2a Mon Sep 17 00:00:00 2001 From: Matthew Beale Date: Tue, 22 Aug 2023 09:44:45 -0400 Subject: [PATCH] Migrate to explicit logicalWidth values in test --- addon-test-support/pages/ember-table.js | 15 ++- .../components/headers/ember-thead-test.js | 32 +++-- .../components/headers/main-test.js | 120 +++++++++--------- .../components/headers/reorder-test.js | 10 +- .../components/headers/resize-test.js | 102 ++++++++++----- 5 files changed, 169 insertions(+), 110 deletions(-) diff --git a/addon-test-support/pages/ember-table.js b/addon-test-support/pages/ember-table.js index a9be52c58..27147bea3 100644 --- a/addon-test-support/pages/ember-table.js +++ b/addon-test-support/pages/ember-table.js @@ -6,6 +6,17 @@ import EmberTableFooterPage from './-private/ember-table-footer'; import EmberTableHeaderPage from './-private/ember-table-header'; import EmberTableLoadingMorePage from './-private/ember-table-loading-more'; +function computedStyleInPixels(target, property) { + let stringValue = window.getComputedStyle(target)[property]; + let numberValue = Number(stringValue.substring(0, stringValue.length - 2)); + if (isNaN(numberValue)) { + throw new Error( + `computedStyleInPixels failed to convert the computed style property of '${property}' into a Number. Value was '${stringValue}'` + ); + } + return numberValue; +} + /** * Ember Table page object. Use this page object and its nested header/body object to retrieve table * data and manipulate table in test. @@ -64,7 +75,7 @@ export default PageObject.extend({ * Retrieves the logical width of the table. */ get logicalWidth() { - return window.getComputedStyle(findElement(this, 'table')).width; + return computedStyleInPixels(findElement(this, 'table'), 'width'); }, /** @@ -90,7 +101,7 @@ export default PageObject.extend({ * Retrieves the logical width of the container. */ get logicalContainerWidth() { - return window.getComputedStyle(findElement(this)).width; + return computedStyleInPixels(findElement(this), 'width'); }, /** diff --git a/tests/integration/components/headers/ember-thead-test.js b/tests/integration/components/headers/ember-thead-test.js index c00355388..afd1f1b02 100644 --- a/tests/integration/components/headers/ember-thead-test.js +++ b/tests/integration/components/headers/ember-thead-test.js @@ -35,7 +35,7 @@ function tableData() { } function sumHeaderWidths(table) { - return table.headers.map(h => h.width).reduce((sum, w) => sum + w, 0); + return table.headers.map(h => h.logicalWidth).reduce((sum, w) => sum + w, 0); } async function renderTable() { @@ -68,8 +68,8 @@ async function renderTable() { } async function testColumnRemovals(assert, table) { - let originalWidth = table.width; - let originalContainerWidth = table.containerWidth; + let originalWidth = table.logicalWidth; + let originalContainerWidth = table.logicalContainerWidth; let currentColumnCount = table.headers.length; assert.equal(currentColumnCount, 4, 'precond - 4 columns'); @@ -90,12 +90,12 @@ async function testColumnRemovals(assert, table) { currentColumnCount -= 1; assert.equal( - table.width, + table.logicalWidth, originalWidth, `table width is same after removal of column #${currentColumnCount}.` ); assert.equal( - table.containerWidth, + table.logicalContainerWidth, originalContainerWidth, `new table container is same size as original container after removal of column #${currentColumnCount}.` ); @@ -105,16 +105,16 @@ async function testColumnRemovals(assert, table) { `headers sum to table width after removal of column #${currentColumnCount}` ); assert.equal( - table.width, - table.containerWidth, + table.logicalWidth, + table.logicalContainerWidth, `new table width is as wide as its container after removal of column #${currentColumnCount}.` ); } } async function testColumnAddition(assert, table) { - let originalWidth = table.width; - let originalContainerWidth = table.containerWidth; + let originalWidth = table.logicalWidth; + let originalContainerWidth = table.logicalContainerWidth; let currentColumnCount = table.headers.length; assert.equal(currentColumnCount, 4, 'precond - 4 columns'); @@ -128,8 +128,12 @@ async function testColumnAddition(assert, table) { await click('#add-column'); assert.equal(table.headers.length, 5, 'column is added'); assert.equal(sumHeaderWidths(table), originalWidth, 'headers sum to table width after adding'); - assert.equal(table.width, originalWidth, 'table width is unchanged'); - assert.equal(table.containerWidth, originalContainerWidth, 'table container width is unchanged'); + assert.equal(table.logicalWidth, originalWidth, 'table width is unchanged'); + assert.equal( + table.logicalContainerWidth, + originalContainerWidth, + 'table container width is unchanged' + ); } module('[Unit] ember-thead', function(hooks) { @@ -207,9 +211,9 @@ module('[Unit] ember-thead', function(hooks) { let table = new TablePage(); let header = table.headers.objectAt(0); - let initialHeaderWidth = header.width; + let initialHeaderWidth = header.logicalWidth; await header.resize(500); - let expectedHeaderWidth = header.width; // might not be exactly 500 + let expectedHeaderWidth = header.logicalWidth; // might not be exactly 500 // sanity check assert.notEqual(initialHeaderWidth, expectedHeaderWidth, 'header width has changed'); @@ -220,6 +224,6 @@ module('[Unit] ember-thead', function(hooks) { await rafFinished(); // without `columnKeyPath`, header would snap back to default width - assert.equal(header.width, expectedHeaderWidth, 'meta data is preserved'); + assert.equal(header.logicalWidth, expectedHeaderWidth, 'meta data is preserved'); }); }); diff --git a/tests/integration/components/headers/main-test.js b/tests/integration/components/headers/main-test.js index 963bff0cb..158fe60bc 100644 --- a/tests/integration/components/headers/main-test.js +++ b/tests/integration/components/headers/main-test.js @@ -20,7 +20,7 @@ module('Integration | header | main', function() { }); let header = table.headers.objectAt(0); - assert.equal(header.width, 200, 'column has min width'); + assert.equal(header.logicalWidth, 200, 'column has min width'); }); test('max column widths respected', async function(assert) { @@ -33,7 +33,7 @@ module('Integration | header | main', function() { }); let header = table.headers.objectAt(0); - assert.equal(header.width, 100, 'column has max width'); + assert.equal(header.logicalWidth, 100, 'column has max width'); }); }); @@ -48,7 +48,7 @@ module('Integration | header | main', function() { }); let containerWidth = table.containerWidth; - let tableWidth = table.width; + let tableWidth = table.logicalWidth; let slackHeader = table.slackHeaders.objectAt(0); assert.ok( @@ -68,8 +68,8 @@ module('Integration | header | main', function() { }, }); - let containerWidth = table.containerWidth; - let tableWidth = table.width; + let containerWidth = table.logicalContainerWidth; + let tableWidth = table.logicalWidth; let slackHeader = table.slackHeaders.objectAt(0); assert.ok( @@ -88,8 +88,8 @@ module('Integration | header | main', function() { columnCount: 2, }); - let containerWidth = table.containerWidth; - let tableWidth = table.width; + let containerWidth = table.logicalContainerWidth; + let tableWidth = table.logicalWidth; let slackHeader = table.slackHeaders.objectAt(0); assert.equal( @@ -110,8 +110,8 @@ module('Integration | header | main', function() { }, }); - let containerWidth = table.containerWidth; - let tableWidth = table.width; + let containerWidth = table.logicalContainerWidth; + let tableWidth = table.logicalWidth; let slackHeader = table.slackHeaders.objectAt(0); assert.ok( @@ -131,8 +131,8 @@ module('Integration | header | main', function() { }, }); - let containerWidth = table.containerWidth; - let tableWidth = table.width; + let containerWidth = table.logicalContainerWidth; + let tableWidth = table.logicalWidth; let slackHeader = table.slackHeaders.objectAt(0); assert.ok( @@ -152,28 +152,28 @@ module('Integration | header | main', function() { }, }); - let containerWidth = table.containerWidth; + let containerWidth = table.logicalContainerWidth; let header = table.headers.objectAt(0); let slackHeader = table.slackHeaders.objectAt(0); - assert.equal(table.width, containerWidth, 'table fits container exactly'); + assert.equal(table.logicalWidth, containerWidth, 'table fits container exactly'); assert.ok(slackHeader.isRendered, 'slack column is rendered'); - assert.equal(slackHeader.width, containerWidth - 100, 'slack column fills whitespace'); + assert.equal(slackHeader.logicalWidth, containerWidth - 100, 'slack column fills whitespace'); // expand column a little bit await header.resize(200); - assert.equal(table.width, containerWidth, 'table fits container exactly'); + assert.equal(table.logicalWidth, containerWidth, 'table fits container exactly'); assert.ok(slackHeader.isRendered, 'slack column is rendered'); - assert.equal(slackHeader.width, containerWidth - 200, 'slack column fills whitespace'); + assert.equal(slackHeader.logicalWidth, containerWidth - 200, 'slack column fills whitespace'); // expand column to fill container await header.resize(containerWidth); - assert.equal(table.width, containerWidth, 'table fits container exactly'); + assert.equal(table.logicalWidth, containerWidth, 'table fits container exactly'); assert.notOk(slackHeader.isRendered, 'slack column is not rendered'); // try to expand column beyond container await header.resize(containerWidth + 100); - assert.equal(table.width, containerWidth, 'table fits container exactly'); + assert.equal(table.logicalWidth, containerWidth, 'table fits container exactly'); assert.notOk(slackHeader.isRendered, 'slack column is not rendered'); }); @@ -186,28 +186,28 @@ module('Integration | header | main', function() { }, }); - let containerWidth = table.containerWidth; + let containerWidth = table.logicalContainerWidth; let header = table.headers.objectAt(0); let slackHeader = table.slackHeaders.objectAt(0); - assert.equal(table.width, containerWidth, 'table fits container exactly'); + assert.equal(table.logicalWidth, containerWidth, 'table fits container exactly'); assert.ok(slackHeader.isRendered, 'slack column is rendered'); - assert.equal(slackHeader.width, containerWidth - 100, 'slack column fills whitespace'); + assert.equal(slackHeader.logicalWidth, containerWidth - 100, 'slack column fills whitespace'); // expand column a little bit await header.resize(200); - assert.equal(table.width, containerWidth, 'table fits container exactly'); + assert.equal(table.logicalWidth, containerWidth, 'table fits container exactly'); assert.ok(slackHeader.isRendered, 'slack column is rendered'); - assert.equal(slackHeader.width, containerWidth - 200, 'slack column fills whitespace'); + assert.equal(slackHeader.logicalWidth, containerWidth - 200, 'slack column fills whitespace'); // expand column to fill container await header.resize(containerWidth); - assert.equal(table.width, containerWidth, 'table fits container exactly'); + assert.equal(table.logicalWidth, containerWidth, 'table fits container exactly'); assert.notOk(slackHeader.isRendered, 'slack column is not rendered'); // expand column beyond container await header.resize(containerWidth + 100); - assert.equal(table.width, containerWidth + 100, 'table extends beyond container'); + assert.equal(table.logicalWidth, containerWidth + 100, 'table extends beyond container'); assert.notOk(slackHeader.isRendered, 'slack column is not rendered'); }); }); @@ -216,11 +216,11 @@ module('Integration | header | main', function() { test('equal column mode', async function(assert) { await generateTable(this, { widthConstraint: 'eq-container' }); - let expectedWidth = table.width / table.headers.length; + let expectedWidth = table.logicalWidth / table.headers.length; table.headers.forEach(header => { assert.ok( - Math.abs(header.width - expectedWidth) <= 1, + Math.abs(header.logicalWidth - expectedWidth) <= 1, 'Table header have same width in equal resize mode.' ); }); @@ -239,8 +239,8 @@ module('Integration | header | main', function() { }, }); - let tableWidth = table.width; - let firstColumnWidth = table.headers.objectAt(0).width; + let tableWidth = table.logicalWidth; + let firstColumnWidth = table.headers.objectAt(0).logicalWidth; assert.ok( Math.abs(tableWidth - firstColumnWidth - columnWidth) <= 1, @@ -248,7 +248,7 @@ module('Integration | header | main', function() { ); assert.ok( - Math.abs(table.headers.objectAt(1).width - columnWidth) <= 0, + Math.abs(table.headers.objectAt(1).logicalWidth - columnWidth) <= 0, 'Other columns keep same width in first column resize mode.' ); }); @@ -266,8 +266,8 @@ module('Integration | header | main', function() { }, }); - let tableWidth = table.width; - let lastColumnWidth = table.headers.objectAt(1).width; + let tableWidth = table.logicalWidth; + let lastColumnWidth = table.headers.objectAt(1).logicalWidth; assert.ok( Math.abs(tableWidth - lastColumnWidth - columnWidth) <= 1, @@ -275,7 +275,7 @@ module('Integration | header | main', function() { ); assert.ok( - Math.abs(table.headers.objectAt(0).width - columnWidth) <= 0, + Math.abs(table.headers.objectAt(0).logicalWidth - columnWidth) <= 0, 'Other columns keep same width in last column resize mode.' ); }); @@ -294,8 +294,8 @@ module('Integration | header | main', function() { }, }); - let tableWidth = table.width; - let middleColumnWidth = table.headers.objectAt(0).width; + let tableWidth = table.logicalWidth; + let middleColumnWidth = table.headers.objectAt(0).logicalWidth; assert.ok( Math.abs(tableWidth - middleColumnWidth - 2 * columnWidth) <= 1, @@ -317,16 +317,16 @@ module('Integration | header | main', function() { }, }); - let tableWidth = table.width; - let middleColumnWidth = table.headers.objectAt(1).width; + let tableWidth = table.logicalWidth; + let middleColumnWidth = table.headers.objectAt(1).logicalWidth; assert.ok( - Math.abs(table.headers.objectAt(0).width - columnWidth) <= 0, + Math.abs(table.headers.objectAt(0).logicalWidth - columnWidth) <= 0, 'First column keeps same width in nth column resize mode.' ); assert.ok( - Math.abs(table.headers.objectAt(2).width - columnWidth) <= 0, + Math.abs(table.headers.objectAt(2).logicalWidth - columnWidth) <= 0, 'Last column keeps same width in nth column resize mode.' ); @@ -354,27 +354,31 @@ module('Integration | header | main', function() { let slackHeader = table.slackHeaders.objectAt(0); // `fillMode` is ignored because we are in slack mode - assert.equal(header1.width, 100, 'first column is default size'); - assert.equal(header2.width, 100, 'second column is default size'); - assert.equal(slackHeader.width, containerWidth - 200, 'slack column fills remaining space'); + assert.equal(header1.logicalWidth, 100, 'first column is default size'); + assert.equal(header2.logicalWidth, 100, 'second column is default size'); + assert.equal( + slackHeader.logicalWidth, + containerWidth - 200, + 'slack column fills remaining space' + ); // expand first column to eliminate slack await header1.resize(containerWidth - 100); - assert.equal(header1.width, containerWidth - 100, 'first column is resized'); - assert.equal(header2.width, 100, 'second column remains default size'); + assert.equal(header1.logicalWidth, containerWidth - 100, 'first column is resized'); + assert.equal(header2.logicalWidth, 100, 'second column remains default size'); assert.notOk(slackHeader.isRendered, 'slack column is not rendered'); // expand second column beyond container; `equal-column` fill mode is applied await header2.resize(200); - assert.equal(header1.width, containerWidth - 150, 'first column receives equal share'); - assert.equal(header2.width, 150, 'second column receives equal share'); + assert.equal(header1.logicalWidth, containerWidth - 150, 'first column receives equal share'); + assert.equal(header2.logicalWidth, 150, 'second column receives equal share'); assert.notOk(slackHeader.isRendered, 'slack column is not rendered'); // shrink second column to original size; slack is applied await header2.resize(100); - assert.equal(header1.width, containerWidth - 150, 'first column is unaffected'); + assert.equal(header1.logicalWidth, containerWidth - 150, 'first column is unaffected'); assert.ok(slackHeader.isRendered, 'slack column is rendered'); - assert.equal(slackHeader.width, 50, 'slack column receives the balance'); + assert.equal(slackHeader.logicalWidth, 50, 'slack column receives the balance'); }); test('eq-container-slack with initialFillMode', async function(assert) { @@ -394,22 +398,22 @@ module('Integration | header | main', function() { let slackHeader = table.slackHeaders.objectAt(0); // `first-column` initial fill mode is applied - assert.equal(header1.width, containerWidth - 100, 'first column receives fill'); - assert.equal(header2.width, 100, 'second column remains default size'); + assert.equal(header1.logicalWidth, containerWidth - 100, 'first column receives fill'); + assert.equal(header2.logicalWidth, 100, 'second column remains default size'); assert.notOk(slackHeader.isRendered, 'slack column is not rendered'); // expand second column beyond container; `equal-column` fill mode is applied await header2.resize(200); - assert.equal(header1.width, containerWidth - 150, 'first column receives equal share'); - assert.equal(header2.width, 150, 'second column receives equal share'); + assert.equal(header1.logicalWidth, containerWidth - 150, 'first column receives equal share'); + assert.equal(header2.logicalWidth, 150, 'second column receives equal share'); assert.notOk(slackHeader.isRendered, 'slack column is not rendered'); // shrink second column to original size; slack is applied await header2.resize(100); - assert.equal(header1.width, containerWidth - 150, 'first column is unaffected'); - assert.equal(header2.width, 100, 'second column is resized'); + assert.equal(header1.logicalWidth, containerWidth - 150, 'first column is unaffected'); + assert.equal(header2.logicalWidth, 100, 'second column is resized'); assert.ok(slackHeader.isRendered, 'slack column is rendered'); - assert.equal(slackHeader.width, 50, 'slack column receives the balance'); + assert.equal(slackHeader.logicalWidth, 50, 'slack column receives the balance'); }); test('gte-container-slack', async function(assert) { @@ -426,12 +430,12 @@ module('Integration | header | main', function() { let header = table.headers.objectAt(0); let slackHeader = table.slackHeaders.objectAt(0); - assert.equal(header.width, containerWidth, 'fill mode is applied on initial run'); + assert.equal(header.logicalWidth, containerWidth, 'fill mode is applied on initial run'); assert.notOk(slackHeader.isRendered, 'slack column is not rendered'); await header.resize(100); - assert.equal(header.width, 100, 'header is resized'); - assert.equal(slackHeader.width, containerWidth - 100, 'slack column is expanded'); + assert.equal(header.logicalWidth, 100, 'header is resized'); + assert.equal(slackHeader.logicalWidth, containerWidth - 100, 'slack column is expanded'); }); }); diff --git a/tests/integration/components/headers/reorder-test.js b/tests/integration/components/headers/reorder-test.js index 49e625b20..742aa94bf 100644 --- a/tests/integration/components/headers/reorder-test.js +++ b/tests/integration/components/headers/reorder-test.js @@ -171,17 +171,21 @@ module('Integration | headers | reorder', function() { let firstHeader = table.headers.objectAt(0); let secondHeader = table.headers.objectAt(1); - let originalHeaderWidth = firstHeader.width; + let originalHeaderWidth = firstHeader.logicalWidth; await firstHeader.resize(originalHeaderWidth + 30); - assert.equal(firstHeader.width, originalHeaderWidth + 30, 'header can be resized larger'); + assert.equal( + firstHeader.logicalWidth, + originalHeaderWidth + 30, + 'header can be resized larger' + ); await table.headers.objectAt(0).reorderBy(1); assert.equal(table.headers.objectAt(0).text.trim(), 'B', 'First column is swapped forward'); assert.equal(table.headers.objectAt(1).text.trim(), 'A', 'Second column is swapped backward'); - assert.equal(secondHeader.width, originalHeaderWidth + 30, 'width was not reset'); + assert.equal(secondHeader.logicalWidth, originalHeaderWidth + 30, 'width was not reset'); }); test('reordering can be disabled per column', async function(assert) { diff --git a/tests/integration/components/headers/resize-test.js b/tests/integration/components/headers/resize-test.js index 7cf03aaca..4c87d2720 100644 --- a/tests/integration/components/headers/resize-test.js +++ b/tests/integration/components/headers/resize-test.js @@ -31,38 +31,50 @@ module('Integration | header | resize', function() { test('basic', async function(assert) { await generateTable(this); - let originalWidth = table.headers.objectAt(1).width; + let originalWidth = table.headers.objectAt(1).logicalWidth; await table.headers.objectAt(1).resize(originalWidth + 30); - assert.equal(table.headers.objectAt(1).width, originalWidth + 30, 'Can be resized larger'); + assert.equal( + table.headers.objectAt(1).logicalWidth, + originalWidth + 30, + 'Can be resized larger' + ); await table.headers.objectAt(1).resize(originalWidth - 30); - assert.equal(table.headers.objectAt(1).width, originalWidth - 30, 'Can be resized smaller'); + assert.equal( + table.headers.objectAt(1).logicalWidth, + originalWidth - 30, + 'Can be resized smaller' + ); }); test('respects minWidth', async function(assert) { await generateTable(this, { columnOptions: { minWidth: 100, width: 100 } }); await table.headers.objectAt(1).resize(30); - assert.equal(table.headers.objectAt(1).width, 100, 'Column size is updated'); + assert.equal(table.headers.objectAt(1).logicalWidth, 100, 'Column size is updated'); }); test('respects maxWidth', async function(assert) { await generateTable(this, { columnOptions: { maxWidth: 100, width: 100 } }); await table.headers.objectAt(1).resize(200); - assert.equal(table.headers.objectAt(1).width, 100, 'Column size is updated'); + assert.equal(table.headers.objectAt(1).logicalWidth, 100, 'Column size is updated'); }); test('fluid mode', async function(assert) { await generateTable(this, { resizeMode: 'fluid' }); - let originalWidth = table.headers.objectAt(1).width; + let originalWidth = table.headers.objectAt(1).logicalWidth; await table.headers.objectAt(1).resize(originalWidth + 30); - assert.equal(table.headers.objectAt(1).width, originalWidth + 30, 'Column size is updated'); assert.equal( - table.headers.objectAt(2).width - originalWidth, + table.headers.objectAt(1).logicalWidth, + originalWidth + 30, + 'Column size is updated' + ); + assert.equal( + table.headers.objectAt(2).logicalWidth - originalWidth, -30, 'Next column shrinks in fluid mode' ); @@ -76,7 +88,7 @@ module('Integration | header | resize', function() { await generateTable(this, { widthConstraint: 'eq-container' }); - let originalWidth = table.headers.objectAt(1).width; + let originalWidth = table.headers.objectAt(1).logicalWidth; await table.headers.objectAt(1).resize(originalWidth + 30); assert.equal(calls.length, 1, 'resize called once'); assert.equal(calls[0][0].name, 'B', 'The correct resized column ("B") is passed'); @@ -89,18 +101,18 @@ module('Integration | header | resize', function() { await generateTable(this, { columns }); - let originalWidth = table.headers.objectAt(0).width; + let originalWidth = table.headers.objectAt(0).logicalWidth; await table.headers.objectAt(0).resize(originalWidth + 30); assert.equal( - table.headers.objectAt(0).width, + table.headers.objectAt(0).logicalWidth, originalWidth, 'disabled column is not resized' ); await table.headers.objectAt(1).resize(originalWidth + 30); assert.equal( - table.headers.objectAt(1).width, + table.headers.objectAt(1).logicalWidth, originalWidth + 30, 'not disabled column can be resized' ); @@ -113,9 +125,9 @@ module('Integration | header | resize', function() { let firstHeader = table.headers.objectAt(0); - let originalWidth = firstHeader.width; + let originalWidth = firstHeader.logicalWidth; await firstHeader.resize(originalWidth + 30); - assert.equal(firstHeader.width, originalWidth + 30, 'Fixed column size is updated'); + assert.equal(firstHeader.logicalWidth, originalWidth + 30, 'Fixed column size is updated'); }); test('fixed right column', async function(assert) { @@ -124,9 +136,9 @@ module('Integration | header | resize', function() { let lastHeader = table.headers.objectAt(columnCount - 1); - let originalWidth = lastHeader.width; + let originalWidth = lastHeader.logicalWidth; await lastHeader.resize(130); - assert.equal(lastHeader.width, originalWidth + 30, 'Fixed column size is updated'); + assert.equal(lastHeader.logicalWidth, originalWidth + 30, 'Fixed column size is updated'); }); }); @@ -137,28 +149,36 @@ module('Integration | header | resize', function() { let firstHeader = table.headers.findOne({ text: 'A' }); let firstSubheader = table.headers.findOne({ text: 'A A' }); - let originalHeaderWidth = firstHeader.width; - let originalSubheaderWidth = firstSubheader.width; + let originalHeaderWidth = firstHeader.logicalWidth; + let originalSubheaderWidth = firstSubheader.logicalWidth; await firstSubheader.resize(originalSubheaderWidth + 30); assert.equal( - firstSubheader.width, + firstSubheader.logicalWidth, originalSubheaderWidth + 30, 'subheader can be resized larger' ); - assert.equal(firstHeader.width, originalHeaderWidth + 30, 'header is resized with subheader'); + assert.equal( + firstHeader.logicalWidth, + originalHeaderWidth + 30, + 'header is resized with subheader' + ); await firstSubheader.resize(originalSubheaderWidth - 30); assert.equal( - firstSubheader.width, + firstSubheader.logicalWidth, originalSubheaderWidth - 30, 'subheader can be resized smaller' ); - assert.equal(firstHeader.width, originalHeaderWidth - 30, 'header is resized with subheader'); + assert.equal( + firstHeader.logicalWidth, + originalHeaderWidth - 30, + 'header is resized with subheader' + ); }); test('headers with subheaders can be resized', async function(assert) { @@ -168,25 +188,33 @@ module('Integration | header | resize', function() { let firstSubheader = table.headers.findOne({ text: 'A A' }); let secondSubheader = table.headers.findOne({ text: 'A B' }); - let originalHeaderWidth = firstHeader.width; + let originalHeaderWidth = firstHeader.logicalWidth; await firstHeader.resize(originalHeaderWidth + 30); - assert.equal(firstHeader.width, originalHeaderWidth + 30, 'header can be resized larger'); + assert.equal( + firstHeader.logicalWidth, + originalHeaderWidth + 30, + 'header can be resized larger' + ); assert.equal( - firstSubheader.width + secondSubheader.width, - firstHeader.width, + firstSubheader.logicalWidth + secondSubheader.logicalWidth, + firstHeader.logicalWidth, 'resize is distributed among subheaders' ); await firstHeader.resize(originalHeaderWidth - 30); - assert.equal(firstHeader.width, originalHeaderWidth - 30, 'subheader can be resized larger'); + assert.equal( + firstHeader.logicalWidth, + originalHeaderWidth - 30, + 'subheader can be resized larger' + ); assert.equal( - firstSubheader.width + secondSubheader.width, - firstHeader.width, + firstSubheader.logicalWidth + secondSubheader.logicalWidth, + firstHeader.logicalWidth, 'resize is distributed among subheaders' ); }); @@ -197,11 +225,15 @@ module('Integration | header | resize', function() { }); let firstHeader = table.headers.findOne({ text: 'A' }); - let originalHeaderWidth = firstHeader.width; + let originalHeaderWidth = firstHeader.logicalWidth; await firstHeader.resize(originalHeaderWidth - 100); - assert.equal(firstHeader.width, originalHeaderWidth, 'minWidth constraint is respected'); + assert.equal( + firstHeader.logicalWidth, + originalHeaderWidth, + 'minWidth constraint is respected' + ); }); test('resizing headers with subheaders respects maxWidth', async function(assert) { @@ -210,11 +242,15 @@ module('Integration | header | resize', function() { }); let firstHeader = table.headers.findOne({ text: 'A' }); - let originalHeaderWidth = firstHeader.width; + let originalHeaderWidth = firstHeader.logicalWidth; await firstHeader.resize(originalHeaderWidth + 100); - assert.equal(firstHeader.width, originalHeaderWidth, 'maxWidth constraint is respected'); + assert.equal( + firstHeader.logicalWidth, + originalHeaderWidth, + 'maxWidth constraint is respected' + ); }); }); });