fix(mox/list): allow rerender of sorted items on arg updates

ConduitIO · Sep 21, 2022 · db7a0ac · db7a0ac
1 parent c014da9
commit db7a0ac
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 6 deletions.
diff --git a/.changeset/wicked-jars-talk.md b/.changeset/wicked-jars-talk.md
@@ -0,0 +1,5 @@
+---
+'mx-ui-components': patch
+---
+
+fix(mox/list): allow comp. rerender on argument updates
diff --git a/addon/components/mox/list.js b/addon/components/mox/list.js
@@ -13,12 +13,7 @@ export default class MoxListComponent extends Component {
   @tracked
   sortDirection;
 
-  constructor() {
-    super(...arguments);
-    this.items = this.args.items;
-  }
-
-  @sort('items', 'sortSetting') sortedItems;
+  @sort('args.items', 'sortSetting') sortedItems;
 
   get sortSetting() {
     return [`${this.sortedBy}:${this.sortDirection}`];

diff --git a/tests/integration/components/mox/list-test.js b/tests/integration/components/mox/list-test.js
@@ -169,4 +169,42 @@ module('Integration | Component | mox/list', function(hooks) {
       assert.dom(updatedListItems[3]).includesText('Fire Veil');
     });
   });
+
+  module('empty sortable list', function(hooks) {
+    hooks.beforeEach(async function() {
+      this.listItems = [];
+
+      await render(
+        hbs`
+        <Mox::List @items={{this.listItems}}>
+          <:header as |s|>
+            <Mox::List::Item @isHeader={{true}} @isActive={{eq s.sortedBy "name"}} @sort={{fn s.sortByColumn "name"}} data-test-name>
+              Name
+            </Mox::List::Item>
+            <Mox::List::Item @isHeader={{true}} @isActive={{eq s.sortedBy "description"}} @sort={{fn s.sortByColumn "description"}} data-test-description>
+              Description
+            </Mox::List::Item>
+          </:header>
+          <:body as |sortedItems|>
+            {{#each sortedItems as |item|}}
+              <Mox::List::Row>
+                <Mox::List::Item>
+                  {{item.name}}
+                </Mox::List::Item>
+                <Mox::List::Item>
+                  {{item.description}}
+                </Mox::List::Item>
+              </Mox::List::Row>
+            {{/each}}
+          </:body>
+        </Mox::List>
+      `);
+    });
+
+    test('it renders', function (assert) {
+      assert.dom('[data-test-mox-list-header]').includesText('Name');
+      assert.dom('[data-test-mox-list-header]').includesText('Description');
+      assert.dom('[data-test-mox-list-row]').doesNotExist();
+    });
+  });
 });