Fix crash on sorting a column with no data (#54)

* Add tests for sorting a column with no data * Fix sorting of columns with no data If the value is undefined, return an empty string to prevent value.toString from crashing.
spatie · Sep 13, 2017 · 3504b1b · 3504b1b
1 parent b46fdf5
commit 3504b1b
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 0 deletions.
diff --git a/__tests__/components/table-component/__snapshots__/sort.test.js.snap b/__tests__/components/table-component/__snapshots__/sort.test.js.snap
@@ -827,3 +827,105 @@ exports[`Sortable tableComponent will sort the data ascendingly if the header of
 </div>
 
 `;
+
+exports[`Sortable tableComponent wont break if a sortable column has no data 1`] = `
+
+<div id="app">
+  <div>
+    <div class="table-component">
+      <div class="table-component__filter">
+        <input type="text"
+               placeholder="Filter table…"
+               class="table-component__filter__field"
+        >
+        <!---->
+      </div>
+      <div class="table-component__table-wrapper">
+        <table class="table-component__table">
+          <caption role="alert"
+                   aria-live="polite"
+                   class="table-component__table__caption"
+          >
+            Table sorted by lastName (ascending)
+          </caption>
+          <thead>
+            <tr>
+              <th role="columnheader"
+                  scope="col"
+                  aria-sort="none"
+                  class="table-component__th table-component__th--sort"
+              >
+                First name
+              </th>
+              <th role="columnheader"
+                  scope="col"
+                  aria-sort="ascending"
+                  class="table-component__th table-component__th--sort-asc"
+              >
+                Last name
+              </th>
+              <th role="columnheader"
+                  scope="col"
+                  aria-sort="none"
+                  class="table-component__th table-component__th--sort"
+              >
+                Songs
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                John
+              </td>
+              <td>
+              </td>
+              <td>
+                30
+              </td>
+            </tr>
+            <tr>
+              <td>
+                Paul
+              </td>
+              <td>
+              </td>
+              <td>
+                20
+              </td>
+            </tr>
+            <tr>
+              <td>
+                George
+              </td>
+              <td>
+              </td>
+              <td>
+                420
+              </td>
+            </tr>
+            <tr>
+              <td>
+                Ringo
+              </td>
+              <td>
+              </td>
+              <td>
+                210
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <!---->
+      <div style="display: none;">
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+</div>
+
+`;
diff --git a/__tests__/components/table-component/sort.test.js b/__tests__/components/table-component/sort.test.js
@@ -82,6 +82,33 @@ describe('Sortable tableComponent', () => {
         expect(document.body.innerHTML).toMatchSnapshot();
     });
 
+    it('wont break if a sortable column has no data', async () => {
+        document.body.innerHTML = `
+            <div id="app">
+                <div>
+                    <table-component
+                        :data="[{ firstName: 'John', songs: 30 },
+                                { firstName: 'Paul', songs: 20 },
+                                { firstName: 'George', songs: 420 },
+                                { firstName: 'Ringo', songs: 210 }]"
+                    >
+                        <table-column show="firstName" label="First name" sort-by="songs"></table-column>
+                        <table-column show="lastName" label="Last name"></table-column>
+                        <table-column show="songs" data-type="numeric" label="Songs" sort-by="songs"></table-column>
+                    </table-component>
+                </div>
+            </div>
+        `;
+
+        await createVm();
+
+        const secondColumnHeader = document.getElementsByTagName('th')[1];
+
+        await simulant.fire(secondColumnHeader, 'click');
+
+        expect(document.body.innerHTML).toMatchSnapshot();
+    });
+
     it('can sort on another column', async () => {
         document.body.innerHTML = `
             <div id="app">

diff --git a/src/classes/Row.js b/src/classes/Row.js
@@ -30,6 +30,10 @@ export default class Row {
 
         let value = this.getValue(columnName);
 
+        if (value === undefined) {
+            return '';
+        }
+
         if (value instanceof String) {
             value = value.toLowerCase();
         }