diff --git a/test-app/tests/plugins/column-reordering/rendering-test.gts b/test-app/tests/plugins/column-reordering/rendering-test.gts index 3a9baef0..139f05e4 100644 --- a/test-app/tests/plugins/column-reordering/rendering-test.gts +++ b/test-app/tests/plugins/column-reordering/rendering-test.gts @@ -366,7 +366,7 @@ module('Plugins | columnReordering', function (hooks) { }); }); - module('with a preferences adapter', function (hooks) { + module('with a preferences adapter and previously saved preferences', function (hooks) { let preferences: null | PreferencesData = {}; class DefaultOptions extends Context { @@ -532,4 +532,85 @@ module('Plugins | columnReordering', function (hooks) { }); }); + module('with a preferences adapter and no previously saved preferences', function (hooks) { + let preferences: null | PreferencesData = {}; + + class DefaultOptions extends Context { + table = headlessTable(this, { + columns: () => this.columns, + data: () => DATA, + plugins: [ColumnReordering, ColumnVisibility], + preferences: { + key: 'test-preferences', + adapter: { + persist: (_key: string, data: PreferencesData) => { + preferences = data; + }, + restore: (key: string) => ({}) + } + } + }); + } + + hooks.beforeEach(async function () { + preferences = null; + ctx = new DefaultOptions(); + setOwner(ctx, this.owner); + + await render( + // @ts-ignore + + ); + }); + + test('changing column order with `set all` updates preferences', async function (assert) { + assert.strictEqual(getColumnOrder(), 'A B C D', 'pre-test setup'); + + let order = new ColumnOrder({ + columns: () => + [ + { key: 'D' }, + { key: 'C' }, + { key: 'B' }, + { key: 'A' }, + ] as Column[], + existingOrder: new Map([ + ['A', 3], + ['B', 2], + ['C', 1], + ['D', 0], + ]), + }); + + // @ts-expect-error + setColumnOrder(ctx.table, order); + + assert.deepEqual(preferences, { + "plugins": { + "column-reordering": { + "columns": {}, + "table": { + "order": { + "A": 3, + "B": 2, + "C": 1, + "D": 0 + } + } + }, + "column-visibility": { + "columns": { + "A": {}, + "B": {}, + "C": {}, + "D": {} + }, + "table": {} + } + } + }); + }); + }); }); diff --git a/test-app/tests/plugins/column-resizing/rendering-test.gts b/test-app/tests/plugins/column-resizing/rendering-test.gts index 67459404..5222f154 100644 --- a/test-app/tests/plugins/column-resizing/rendering-test.gts +++ b/test-app/tests/plugins/column-resizing/rendering-test.gts @@ -188,7 +188,7 @@ module('Plugins | resizing', function (hooks) { }); }); - module('with a preferences adapter', function (hooks) { + module('with a preferences adapter and previously saved preferences', function (hooks) { let preferences: null | PreferencesData = {}; class DefaultOptions extends Context { @@ -353,6 +353,89 @@ module('Plugins | resizing', function (hooks) { }); }); + module('with a preferences adapter and no previously saved preferences', function (hooks) { + let preferences: null | PreferencesData = {}; + + class DefaultOptions extends Context { + table = headlessTable(this, { + columns: () => this.columns, + data: () => [] as unknown[], + plugins: [ColumnResizing], + preferences: { + key: 'test-preferences', + adapter: { + persist: (_key: string, data: PreferencesData) => { + preferences = data; + }, + restore: (key: string) => ({}) + } + } + }); + } + + hooks.beforeEach(function () { + preferences = null; + ctx = new DefaultOptions(); + setOwner(ctx, this.owner); + }); + + test('it resizes each column and persists the new widths in the preferences', async function (assert) { + ctx.setContainerWidth(1000); + await render( + + ) + + const [columnA, columnB, columnC, columnD] = getColumns(); + + debugAssert(`columnA doesn't exist`, columnA); + debugAssert(`columnB doesn't exist`, columnB); + debugAssert(`columnC doesn't exist`, columnC); + debugAssert(`columnD doesn't exist`, columnD); + + // Columns all have the same default width since there are no previusly saved preferences to restore + assert.equal(width(columnA), 250, 'col A has expected width before resize'); + assert.equal(width(columnB), 250, 'col B has expected width before resize'); + assert.equal(width(columnC), 250, 'col C has expected width before resize'); + assert.equal(width(columnD), 250, 'col D has expected width before resize'); + + await requestAnimationFrameSettled(); + + // move the the resize handler between columns A & B 200px to the right + // increasing the width of column A and decreasing the width of columns + // to the right , while respecting the min width (128px) + await dragRight(columnB, 200); + + assert.equal(width(columnA), 450, 'col A has expected width after resize'); + assert.equal(width(columnB), 128, 'col B has expected width after resize'); + assert.equal(width(columnC), 172, 'col C has expected width after resize'); + assert.equal(width(columnD), 250, 'col D has expected width after resize'); + + assert.deepEqual(preferences, { + "plugins": { + "column-resizing": { + "columns": { + "A": { + "width": "450" + }, + "B": { + "width": "128" + }, + "C": { + "width": "172" + }, + "D": { + "width": "250" + }, + }, + "table": {} + } + } + }, 'column widths saved in preferences'); + }); + }); + module('with options that affect resize behavior', function (hooks) { module('handlePosition (default)', function (hooks) { class DefaultOptions extends Context {