Fix column-reordering with Ember 3.13+ (#778)

* Add parameterizedComponentModule helper, test w/ and w/out ember arrays * Notify using the keyName rather than the full path Fixes #776 * Run resize tests w/ and w/o emberA column/rows
Addepar · Nov 5, 2019 · af2f0a3 · af2f0a3
1 parent b9ab330
commit af2f0a3
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 16 deletions.
diff --git a/addon/-private/column-tree.js b/addon/-private/column-tree.js
@@ -790,7 +790,7 @@ export default EmberObject.extend({
 
     move(subcolumns, insertIndex, afterIndex);
 
-    notifyPropertyChange(parent, 'column.subcolumns.[]');
+    notifyPropertyChange(subcolumns, '[]');
   },
 
   startReorder(node, clientX) {

diff --git a/tests/dummy/app/utils/generators.js b/tests/dummy/app/utils/generators.js
@@ -2,6 +2,17 @@ import { A as emberA } from '@ember/array';
 import { toBase26 } from './base-26';
 import faker from 'faker';
 
+const DEFAULT_USE_EMBER_ARRAY = true;
+let useEmberArray = DEFAULT_USE_EMBER_ARRAY;
+
+export function configureTableGeneration({ useEmberArray: _useEmberArray }) {
+  useEmberArray = _useEmberArray;
+}
+
+export function resetTableGenerationConfig() {
+  useEmberArray = DEFAULT_USE_EMBER_ARRAY;
+}
+
 export function getRandomInt(max, min) {
   return faker.random.number({ min, max });
 }
@@ -43,7 +54,7 @@ export function generateRows(rowCount, depth, format, idPrefix = '') {
     arr.push(row);
   }
 
-  return emberA(arr);
+  return useEmberArray ? emberA(arr) : arr;
 }
 
 export function generateColumn(id, options) {
@@ -95,5 +106,5 @@ export function generateColumns(
     columns[columnCount - i - 1].isFixed = 'right';
   }
 
-  return emberA(columns);
+  return useEmberArray ? emberA(columns) : columns;
 }
diff --git a/tests/helpers/generate-table.js b/tests/helpers/generate-table.js
@@ -1,9 +1,14 @@
 import hbs from 'htmlbars-inline-precompile';
 import wait from 'ember-test-helpers/wait';
-import { generateColumns, generateRows } from 'dummy/utils/generators';
+import {
+  configureTableGeneration,
+  generateColumns,
+  generateRows,
+  resetTableGenerationConfig,
+} from 'dummy/utils/generators';
 
 // reexport for use in tests
-export { generateColumns, generateRows };
+export { configureTableGeneration, resetTableGenerationConfig, generateColumns, generateRows };
 
 const fullTable = hbs`
   <div style="height: 500px;">

diff --git a/tests/helpers/module.js b/tests/helpers/module.js
@@ -13,3 +13,22 @@ export function componentModule(moduleName, callback) {
 
   callback();
 }
+
+export function parameterizedComponentModule(moduleName, parameters, callback) {
+  Object.keys(parameters).forEach(key => {
+    let { values, hooks } = parameters[key];
+
+    for (let value of values) {
+      moduleForComponent('ember-table', `${moduleName} > params {${key}: ${value}}`, {
+        integration: true,
+        beforeEach() {
+          hooks.beforeEach && hooks.beforeEach(value);
+        },
+        afterEach() {
+          hooks.afterEach && hooks.afterEach(value);
+        },
+      });
+      callback();
+    }
+  });
+}
diff --git a/tests/integration/components/headers/reorder-test.js b/tests/integration/components/headers/reorder-test.js
@@ -1,7 +1,12 @@
 import { module, test, skip } from 'ember-qunit';
 
-import { generateTable, generateColumns } from '../../../helpers/generate-table';
-import { componentModule } from '../../../helpers/module';
+import {
+  configureTableGeneration,
+  generateTable,
+  generateColumns,
+  resetTableGenerationConfig,
+} from '../../../helpers/generate-table';
+import { parameterizedComponentModule } from '../../../helpers/module';
 
 import { find, findAll, scrollTo } from 'ember-native-dom-helpers';
 import { mouseDown, mouseMove, mouseUp } from 'ember-table/test-support/helpers/mouse';
@@ -36,6 +41,20 @@ export async function scrollToEdge(targetElement, edgeOffset, direction) {
   await mouseUp(targetElement);
 }
 
+const USE_EMBER_ARRAY_PARAMETERS = {
+  useEmberArray: {
+    values: [true, false],
+    hooks: {
+      beforeEach(value) {
+        configureTableGeneration({ useEmberArray: value });
+      },
+      afterEach() {
+        resetTableGenerationConfig();
+      },
+    },
+  },
+};
+
 async function reorderToLeftEdge(column, edgeOffset = 0) {
   await scrollToEdge(column, edgeOffset, 'left', true);
 }
@@ -45,7 +64,7 @@ async function reorderToRightEdge(column, edgeOffset = 0) {
 }
 
 module('Integration | headers | reorder', function() {
-  componentModule('reordering', function() {
+  parameterizedComponentModule('reordering', USE_EMBER_ARRAY_PARAMETERS, function() {
     test('standard columns', async function(assert) {
       await generateTable(this);
 
@@ -181,7 +200,7 @@ module('Integration | headers | reorder', function() {
     });
   });
 
-  componentModule('fixed columns', function() {
+  parameterizedComponentModule('fixed columns', USE_EMBER_ARRAY_PARAMETERS, function() {
     test('left fixed column can be reordered with other left fixed columns', async function(assert) {
       await generateTable(this, { columnOptions: { fixedLeftCount: 2 } });
 
@@ -290,7 +309,7 @@ module('Integration | headers | reorder', function() {
     });
   });
 
-  componentModule('subheaders', function() {
+  parameterizedComponentModule('subheaders', USE_EMBER_ARRAY_PARAMETERS, function() {
     test('subheaders can be reordered', async function(assert) {
       await generateTable(this, { columnCount: 1, columnOptions: { subcolumnCount: 2 } });
 

diff --git a/tests/integration/components/headers/resize-test.js b/tests/integration/components/headers/resize-test.js
@@ -1,14 +1,33 @@
 import { module, test } from 'ember-qunit';
 
-import { generateTable, generateColumns } from '../../../helpers/generate-table';
-import { componentModule } from '../../../helpers/module';
+import {
+  configureTableGeneration,
+  resetTableGenerationConfig,
+  generateTable,
+  generateColumns,
+} from '../../../helpers/generate-table';
+import { componentModule, parameterizedComponentModule } from '../../../helpers/module';
 
 import TablePage from 'ember-table/test-support/pages/ember-table';
 
 const table = new TablePage();
 
+const USE_EMBER_ARRAY_PARAMETERS = {
+  useEmberArray: {
+    values: [true, false],
+    hooks: {
+      beforeEach(value) {
+        configureTableGeneration({ useEmberArray: value });
+      },
+      afterEach() {
+        resetTableGenerationConfig();
+      },
+    },
+  },
+};
+
 module('Integration | header | resize', function() {
-  componentModule('basic', function() {
+  parameterizedComponentModule('basic', USE_EMBER_ARRAY_PARAMETERS, function() {
     test('basic', async function(assert) {
       await generateTable(this);
 

diff --git a/tests/integration/components/row-test.js b/tests/integration/components/row-test.js
@@ -1,7 +1,11 @@
 import { module, test } from 'ember-qunit';
 
-import { generateTable } from '../../helpers/generate-table';
-import { componentModule } from '../../helpers/module';
+import {
+  generateTable,
+  configureTableGeneration,
+  resetTableGenerationConfig,
+} from '../../helpers/generate-table';
+import { parameterizedComponentModule } from '../../helpers/module';
 
 import TablePage from 'ember-table/test-support/pages/ember-table';
 import { collection, hasClass } from 'ember-classy-page-object';
@@ -14,8 +18,22 @@ let table = new TablePage({
   },
 });
 
+const USE_EMBER_ARRAY_PARAMETERS = {
+  useEmberArray: {
+    values: [true, false],
+    hooks: {
+      beforeEach(value) {
+        configureTableGeneration({ useEmberArray: value });
+      },
+      afterEach() {
+        resetTableGenerationConfig();
+      },
+    },
+  },
+};
+
 module('Integration | row', function() {
-  componentModule('basic', function() {
+  parameterizedComponentModule('basic', USE_EMBER_ARRAY_PARAMETERS, function() {
     test('can use a custom row component', async function(assert) {
       await generateTable(this, {
         rowComponent: 'custom-row',