From 3a4f4571ef9c18c857dbf47567f121b2744d3157 Mon Sep 17 00:00:00 2001
From: Gaurav Munjal <gaurav@peeriq.com>
Date: Fri, 7 Dec 2018 10:38:46 -0500
Subject: [PATCH 1/3] Write integration tests for occlusion

---
 .../components/light-table-occlusion-test.js  | 236 ++++++++++++++++++
 .../components/lt-body-occlusion-test.js      | 157 ++++++++++++
 2 files changed, 393 insertions(+)
 create mode 100644 tests/integration/components/light-table-occlusion-test.js
 create mode 100644 tests/integration/components/lt-body-occlusion-test.js

diff --git a/tests/integration/components/light-table-occlusion-test.js b/tests/integration/components/light-table-occlusion-test.js
new file mode 100644
index 00000000..5e3d2bcf
--- /dev/null
+++ b/tests/integration/components/light-table-occlusion-test.js
@@ -0,0 +1,236 @@
+import { scrollTo } from 'ember-native-dom-helpers';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, findAll, find, click } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import hbs from 'htmlbars-inline-precompile';
+import setupMirageTest from 'ember-cli-mirage/test-support/setup-mirage';
+import Table from 'ember-light-table';
+import Columns from '../../helpers/table-columns';
+import hasClass from '../../helpers/has-class';
+import RowComponent from 'ember-light-table/components/lt-row';
+import Component from '@ember/component';
+import { get, computed } from '@ember/object';
+
+module('Integration | Component | light table | occlusion', function(hooks) {
+  setupRenderingTest(hooks);
+  setupMirageTest(hooks);
+
+  hooks.beforeEach(function() {
+    this.actions = {};
+    this.send = (actionName, ...args) => this.actions[actionName].apply(this, args);
+  });
+
+  test('it renders', async function(assert) {
+    this.set('table', new Table());
+    await render(hbs `{{light-table table height="40vh" occlusion=true estimatedRowHeight=30}}`);
+
+    assert.equal(find('*').textContent.trim(), '');
+  });
+
+  test('takes 50 rows, renders 28 rows with scrollbar and occludes the rest', async function(assert) {
+    assert.expect(3);
+
+    this.set('table', new Table(Columns, this.server.createList('user', 50)));
+
+    await render(hbs `
+      {{#light-table table height='40vh' occlusion=true estimatedRowHeight=30 as |t|}}
+        {{t.head fixed=true}}
+        {{t.body}}
+      {{/light-table}}
+    `);
+
+    assert.equal(findAll('.vertical-collection tbody.lt-body tr.lt-row').length, 28, '28 rows are rendered');
+
+    let scrollContainer = 'vertical-collection';
+    let { scrollHeight } = find(scrollContainer);
+
+    assert.ok(findAll(scrollContainer).length > 0, 'scroll container was rendered');
+    assert.equal(scrollHeight, 2060, 'scroll height is 50 rows * 30 px per row + header size');
+
+    await scrollTo(scrollContainer, 0, scrollHeight);
+  });
+
+  test('fixed header', async function(assert) {
+    assert.expect(2);
+    this.set('table', new Table(Columns, this.server.createList('user', 5)));
+
+    await render(hbs `
+      {{#light-table table height='500px' id='lightTable' occlusion=true estimatedRowHeight=30 as |t|}}
+        {{t.head fixed=true}}
+        {{t.body}}
+      {{/light-table}}
+    `);
+
+    assert.equal(findAll('#lightTable_inline_head thead').length, 0);
+
+    await render(hbs `
+      {{#light-table table height='500px' id='lightTable' occlusion=true estimatedRowHeight=30 as |t|}}
+        {{t.head fixed=false}}
+        {{t.body}}
+      {{/light-table}}
+    `);
+
+    assert.equal(findAll('#lightTable_inline_head thead').length, 1);
+  });
+
+  test('fixed footer', async function(assert) {
+    assert.expect(2);
+    this.set('table', new Table(Columns, this.server.createList('user', 5)));
+
+    await render(hbs `
+      {{#light-table table height='500px' id='lightTable' occlusion=true estimatedRowHeight=30 as |t|}}
+        {{t.body}}
+        {{t.foot fixed=true}}
+      {{/light-table}}
+    `);
+
+    assert.equal(findAll('#lightTable_inline_foot tfoot').length, 0);
+
+    await render(hbs `
+      {{#light-table table height='500px' id='lightTable' occlusion=true estimatedRowHeight=30 as |t|}}
+        {{t.body}}
+        {{t.foot fixed=false}}
+      {{/light-table}}
+    `);
+
+    assert.equal(findAll('#lightTable_inline_foot tfoot').length, 1);
+  });
+
+  test('table assumes height of container', async function(assert) {
+
+    this.set('table', new Table(Columns, this.server.createList('user', 5)));
+    this.set('fixed', true);
+
+    await render(hbs `
+      <div style="height: 500px">
+        {{#light-table table id='lightTable' occlusion=true estimatedRowHeight=30 as |t|}}
+          {{t.body}}
+          {{t.foot fixed=fixed}}
+        {{/light-table}}
+      </div>
+    `);
+
+    assert.equal(find('#lightTable').offsetHeight, 500, 'table is 500px height');
+
+  });
+
+  test('table body should consume all available space when not enough content to fill it', async function(assert) {
+    this.set('table', new Table(Columns, this.server.createList('user', 1)));
+    this.set('fixed', true);
+
+    await render(hbs `
+      <div style="height: 500px">
+        {{#light-table table id='lightTable' occlusion=true estimatedRowHeight=30 as |t|}}
+          {{t.head fixed=true}}
+          {{t.body}}
+          {{#t.foot fixed=true}}
+            Hello World
+          {{/t.foot}}
+        {{/light-table}}
+      </div>
+    `);
+
+    const bodyHeight = find('.lt-body-wrap').offsetHeight;
+    const headHeight = find('.lt-head-wrap').offsetHeight;
+    const footHeight = find('.lt-foot-wrap').offsetHeight;
+
+    assert.equal(bodyHeight + headHeight + footHeight, 500, 'combined table content is 500px tall');
+    assert.ok(bodyHeight > (headHeight + footHeight), 'body is tallest element');
+  });
+
+  test('accepts components that are used in the body', async function(assert) {
+
+    this.owner.register('component:custom-row', RowComponent);
+
+    this.set('table', new Table(Columns, this.server.createList('user', 1)));
+
+    await render(hbs `
+      {{#light-table table occlusion=true estimatedRowHeight=30 as |t|}}
+        {{t.body rowComponent=(component "custom-row" classNames="custom-row")}}
+      {{/light-table}}
+    `);
+
+    assert.equal(findAll('.lt-row.custom-row').length, 1, 'row has custom-row class');
+  });
+
+  test('passed in components can have computed properties', async function(assert) {
+
+    this.owner.register('component:custom-row', RowComponent.extend({
+      classNameBindings: ['isActive'],
+      current: null,
+      isActive: computed('row.content', 'current', function() {
+        return this.get('row.content') === this.get('current');
+      })
+    }));
+
+    let users = this.server.createList('user', 3);
+    this.set('table', new Table(Columns, users));
+
+    await render(hbs `
+      {{#light-table table height='500px' occlusion=true estimatedRowHeight=30 as |t|}}
+        {{t.body
+          rowComponent=(component "custom-row" classNames="custom-row" current=current)
+        }}
+      {{/light-table}}
+    `);
+
+    assert.equal(findAll('.custom-row').length, 3, 'three custom rows were rendered');
+    assert.notOk(find('.custom-row.is-active'), 'none of the items are active');
+
+    this.set('current', users[0]);
+    let firstRow = find('.custom-row:nth-child(2)');
+    assert.ok(hasClass(firstRow, 'is-active'), 'first custom row is active');
+
+    this.set('current', users[2]);
+    let thirdRow = find('.custom-row:nth-child(4)');
+    assert.ok(hasClass(thirdRow, 'is-active'), 'third custom row is active');
+
+    this.set('current', null);
+
+    assert.notOk(find('.custom-row.is-active'), 'none of the items are active');
+  });
+
+  test('extra data and tableActions', async function(assert) {
+    assert.expect(4);
+
+    this.owner.register('component:some-component', Component.extend({
+      classNames: 'some-component',
+      didReceiveAttrs() {
+        assert.equal(get(this, 'extra.someData'), 'someValue', 'extra data is passed');
+      },
+      click() {
+        get(this, 'tableActions.someAction')();
+      }
+    }));
+
+    const columns = [{
+      component: 'some-component',
+      cellComponent: 'some-component'
+    }];
+
+    this.set('table', new Table(columns, [{}]));
+
+    this.actions.someAction = () => {
+      assert.ok(true, 'table action is passed');
+    };
+
+    await render(hbs `
+      {{#light-table table
+        occlusion=true
+        estimatedRowHeight=30
+        extra=(hash someData="someValue")
+        tableActions=(hash
+          someAction=(action "someAction")
+        )
+        as |t|
+      }}
+        {{t.head}}
+        {{t.body}}
+      {{/light-table}}
+    `);
+
+    for (const element of findAll('.some-component')) {
+      await click(element);
+    }
+  });
+});
diff --git a/tests/integration/components/lt-body-occlusion-test.js b/tests/integration/components/lt-body-occlusion-test.js
new file mode 100644
index 00000000..e20398ec
--- /dev/null
+++ b/tests/integration/components/lt-body-occlusion-test.js
@@ -0,0 +1,157 @@
+import { click, findAll, find, triggerEvent, settled } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+import setupMirageTest from 'ember-cli-mirage/test-support/setup-mirage';
+import Table from 'ember-light-table';
+import hasClass from '../../helpers/has-class';
+import Columns from '../../helpers/table-columns';
+import { run } from '@ember/runloop';
+import registerWaiter from 'ember-raf-scheduler/test-support/register-waiter';
+
+module('Integration | Component | lt body | occlusion', function(hooks) {
+  setupRenderingTest(hooks);
+  setupMirageTest(hooks);
+
+  hooks.beforeEach(function() {
+    this.actions = {};
+    this.send = (actionName, ...args) => this.actions[actionName].apply(this, args);
+    registerWaiter();
+  });
+
+  hooks.beforeEach(function() {
+    this.set('sharedOptions', {
+      fixedHeader: false,
+      fixedFooter: false,
+      height: '500px',
+      occlusion: true,
+      estimatedRowHeight: 30
+    });
+  });
+
+  test('it renders', async function(assert) {
+    await render(hbs `{{lt-body sharedOptions=sharedOptions}}`);
+    assert.equal(find('*').textContent.trim(), '');
+  });
+
+  test('row selection - enable or disable', async function(assert) {
+    this.set('table', new Table(Columns, this.server.createList('user', 1)));
+    this.set('canSelect', false);
+
+    await render(hbs `{{lt-body table=table sharedOptions=sharedOptions canSelect=canSelect}}`);
+
+    let row = find('tr');
+
+    assert.notOk(hasClass(row, 'is-selectable'));
+    assert.notOk(hasClass(row, 'is-selected'));
+    await click(row);
+    assert.notOk(hasClass(row, 'is-selected'));
+
+    this.set('canSelect', true);
+
+    assert.ok(hasClass(row, 'is-selectable'));
+    assert.notOk(hasClass(row, 'is-selected'));
+    await click(row);
+    assert.ok(hasClass(row, 'is-selected'));
+  });
+
+  test('row selection - ctrl-click to modify selection', async function(assert) {
+    this.set('table', new Table(Columns, this.server.createList('user', 5)));
+
+    await render(hbs `{{lt-body table=table scrollBuffer=200 sharedOptions=sharedOptions canSelect=true multiSelect=true}}`);
+    let firstRow = find('tr:nth-child(2)');
+    let middleRow = find('tr:nth-child(4)');
+    let lastRow = find('tr:nth-child(6)');
+
+    assert.equal(findAll('tbody tr').length, 5);
+
+    await click(firstRow);
+    assert.equal(findAll('tr.is-selected').length, 1, 'clicking a row selects it');
+
+    await click(lastRow, { shiftKey: true });
+    assert.equal(findAll('tr.is-selected').length, 5, 'shift-clicking another row selects it and all rows between');
+
+    await click(middleRow, { ctrlKey: true });
+    assert.equal(findAll('tr.is-selected').length, 4, 'ctrl-clicking a selected row deselects it');
+
+    await click(firstRow);
+    assert.equal(findAll('tr.is-selected').length, 0, 'clicking a selected row deselects all rows');
+  });
+
+  test('row selection - click to modify selection', async function(assert) {
+    this.set('table', new Table(Columns, this.server.createList('user', 5)));
+
+    await render(
+      hbs `{{lt-body table=table sharedOptions=sharedOptions canSelect=true multiSelect=true multiSelectRequiresKeyboard=false}}`
+    );
+
+    let firstRow = find('tr:nth-child(2)');
+    let middleRow = find('tr:nth-child(4)');
+    let lastRow = find('tr:nth-child(6)');
+
+    assert.equal(findAll('tbody tr').length, 5);
+
+    await click(firstRow);
+    assert.equal(findAll('tr.is-selected').length, 1, 'clicking a row selects it');
+
+    await click(lastRow, { shiftKey: true });
+    assert.equal(findAll('tr.is-selected').length, 5, 'shift-clicking another row selects it and all rows between');
+
+    await click(middleRow);
+    assert.equal(findAll('tr.is-selected').length, 4, 'clicking a selected row deselects it without affecting other selected rows');
+
+    await click(middleRow);
+    assert.equal(findAll('tr.is-selected').length, 5, 'clicking a deselected row selects it without affecting other selected rows');
+  });
+
+  test('row actions', async function(assert) {
+    assert.expect(2);
+
+    this.set('table', new Table(Columns, this.server.createList('user', 1)));
+    this.actions.onRowClick = (row) => assert.ok(row);
+    this.actions.onRowDoubleClick = (row) => assert.ok(row);
+    await render(
+      hbs `{{lt-body table=table sharedOptions=sharedOptions onRowClick=(action 'onRowClick') onRowDoubleClick=(action 'onRowDoubleClick')}}`
+    );
+
+    let row = find('tr');
+    await click(row);
+    await triggerEvent(row, 'dblclick');
+  });
+
+  test('hidden rows', async function(assert) {
+    this.set('table', new Table(Columns, this.server.createList('user', 5)));
+
+    await render(hbs `{{lt-body table=table sharedOptions=sharedOptions}}`);
+
+    assert.equal(findAll('tbody tr').length, 5);
+
+    run(() => {
+      this.get('table.rows').objectAt(0).set('hidden', true);
+      this.get('table.rows').objectAt(1).set('hidden', true);
+    });
+    await settled();
+
+    assert.equal(findAll('tbody tr').length, 3);
+
+    run(() => {
+      this.get('table.rows').objectAt(0).set('hidden', false);
+    });
+    await settled();
+
+    assert.equal(findAll('tbody tr').length, 4);
+  });
+
+  test('overwrite', async function(assert) {
+    this.set('table', new Table(Columns, this.server.createList('user', 5)));
+
+    await render(hbs `
+      {{#lt-body table=table sharedOptions=sharedOptions overwrite=true as |columns rows|}}
+        {{columns.length}}, {{rows.length}}
+      {{/lt-body}}
+    `);
+
+    assert.equal(find('*').textContent.trim(), '6, 5');
+  });
+});

From ac01fe54e2906a275567203ffe64f84746b720c9 Mon Sep 17 00:00:00 2001
From: Gaurav Munjal <gaurav@peeriq.com>
Date: Fri, 7 Dec 2018 12:36:23 -0500
Subject: [PATCH 2/3] Fix tests

---
 package.json |  3 +++
 yarn.lock    | 18 +++++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index af7a3eea..8b1ea9aa 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,9 @@
     "loader.js": "^4.6.0",
     "yuidoc-ember-theme": "^2.0.1"
   },
+  "resolutions": {
+    "ember-element-resize-detector": "0.3.0"
+  },
   "engines": {
     "node": "^4.5 || 6.* || >= 7.*"
   },
diff --git a/yarn.lock b/yarn.lock
index 76c354a7..59c7f574 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3828,6 +3828,7 @@ ember-cli-update@^0.21.4:
 ember-cli-valid-component-name@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ember-cli-valid-component-name/-/ember-cli-valid-component-name-1.0.0.tgz#71550ce387e0233065f30b30b1510aa2dfbe87ef"
+  integrity sha1-cVUM44fgIzBl8wswsVEKot++h+8=
   dependencies:
     silent-error "^1.0.0"
 
@@ -4029,9 +4030,10 @@ ember-disable-prototype-extensions@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/ember-disable-prototype-extensions/-/ember-disable-prototype-extensions-1.1.3.tgz#1969135217654b5e278f9fe2d9d4e49b5720329e"
 
-ember-element-resize-detector@~0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/ember-element-resize-detector/-/ember-element-resize-detector-0.2.0.tgz#79170a97e59e29ecc07ffe1c5d3b84eb0af06326"
+ember-element-resize-detector@0.3.0, ember-element-resize-detector@~0.2.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/ember-element-resize-detector/-/ember-element-resize-detector-0.3.0.tgz#33dbba7aa86da2b931dac16d887d960a28e15daa"
+  integrity sha512-nbhEifEjHgryf/Rsd3taVJBNrXvyVhseTu3Y+zvUBCLRxY07eCiHfz9Jb6ZnXSUgThoACPZuEkMReGZX6iqNkQ==
   dependencies:
     broccoli-funnel "^1.0.2"
     broccoli-merge-trees "^1.1.1"
@@ -4200,8 +4202,9 @@ ember-runtime-enumerable-includes-polyfill@^2.0.0:
     ember-cli-version-checker "^2.1.0"
 
 ember-scrollable@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/ember-scrollable/-/ember-scrollable-0.5.0.tgz#843e8486e2ea69a4febfd963163b148154e346f2"
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/ember-scrollable/-/ember-scrollable-0.5.1.tgz#804953b644bba4d32b08657005c42a219ab36a77"
+  integrity sha512-78TC1EOPtAPcNMz94GhKrEFG/mEhAMN7X3ySP1bePx2D4G7n/ZgITp6W479wdpKPqTBh1Linx9muk+zjX0BF7g==
   dependencies:
     ember-cli-babel "^6.8.0"
     ember-cli-htmlbars "^2.0.1"
@@ -4216,8 +4219,9 @@ ember-source-channel-url@^1.0.1:
     got "^8.0.1"
 
 ember-source@~3.1.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/ember-source/-/ember-source-3.1.3.tgz#431929098e84f8e9c18529cfe32cd3e920851107"
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/ember-source/-/ember-source-3.1.4.tgz#e7e6cd45a0bc695ad9f9efe5fa32b2cfd2071d7a"
+  integrity sha512-m2Wzf/unzOSnj1EzUNBaLrv4RuWpJVoE+VvlXA2CJ4QC4XjUtJEhtTb8QFNsX3+rjmD92uYoMcX5IpAfB2bnfg==
   dependencies:
     broccoli-funnel "^2.0.1"
     broccoli-merge-trees "^2.0.0"

From 4ddd3cf8dc9d3fc30717b40d71b055f653937d55 Mon Sep 17 00:00:00 2001
From: Gaurav Munjal <gaurav@peeriq.com>
Date: Fri, 7 Dec 2018 14:03:22 -0500
Subject: [PATCH 3/3] loosen test

---
 tests/integration/components/light-table-occlusion-test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/integration/components/light-table-occlusion-test.js b/tests/integration/components/light-table-occlusion-test.js
index 5e3d2bcf..c72a000e 100644
--- a/tests/integration/components/light-table-occlusion-test.js
+++ b/tests/integration/components/light-table-occlusion-test.js
@@ -27,7 +27,7 @@ module('Integration | Component | light table | occlusion', function(hooks) {
     assert.equal(find('*').textContent.trim(), '');
   });
 
-  test('takes 50 rows, renders 28 rows with scrollbar and occludes the rest', async function(assert) {
+  test('takes 50 rows, renders some rows with scrollbar and occludes the rest', async function(assert) {
     assert.expect(3);
 
     this.set('table', new Table(Columns, this.server.createList('user', 50)));
@@ -39,13 +39,13 @@ module('Integration | Component | light table | occlusion', function(hooks) {
       {{/light-table}}
     `);
 
-    assert.equal(findAll('.vertical-collection tbody.lt-body tr.lt-row').length, 28, '28 rows are rendered');
+    assert.ok(findAll('.vertical-collection tbody.lt-body tr.lt-row').length < 30, 'only some rows are rendered');
 
     let scrollContainer = 'vertical-collection';
     let { scrollHeight } = find(scrollContainer);
 
     assert.ok(findAll(scrollContainer).length > 0, 'scroll container was rendered');
-    assert.equal(scrollHeight, 2060, 'scroll height is 50 rows * 30 px per row + header size');
+    assert.ok(scrollHeight > 1500, 'scroll height is 50 rows * 30 px per row + header size');
 
     await scrollTo(scrollContainer, 0, scrollHeight);
   });