some more tests

src/sortable.test.html

@@ -134,22 +134,34 @@ <h2>class="no-sort"</h2>
       </tbody>
     </table>
 
-    <h2>times</h2>
+    <h2>numeric sorting</h2>
     <table class="sortable">
       <thead>
         <tr>
           <th>Role</th>
           <th>Time</th>
+          <th>Amount</th>
+          <th>Number</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>Genius</td>
           <td>12:00:12</td>
+          <td>$18.49</td>
+          <td>2.49</td>
         </tr>
         <tr>
           <td>Sidekick</td>
           <td>12:22:11</td>
+          <td>$2.49</td>
+          <td>18.49</td>
+        </tr>
+        <tr>
+          <td>Butler</td>
+          <td>12:22:05</td>
+          <td>$1.96</td>
+          <td>1.96</td>
         </tr>
       </tbody>
     </table>

src/sortable.test.js

@@ -134,4 +134,30 @@ describe('sortable.test.html', () => {
     expect(middle).toBe('12:22:11')
     expect(last).toBe('12:00:12')
   })
+
+  it('treats amounts like strings', async () => {
+    const table = getAllByRole(container, 'table')[5]
+    const th = getByRole(table, 'columnheader', { name: /Amount/ })
+    const first = getAllByRole(table, 'cell')[2].textContent
+    fireEvent.click(th)
+    const middle = getAllByRole(table, 'cell')[2].textContent
+    fireEvent.click(th)
+    const last = getAllByRole(table, 'cell')[2].textContent
+    expect(first).toBe('$18.49')
+    expect(middle).toBe('$2.49')
+    expect(last).toBe('$1.96')
+  })
+
+  it('treats numbers like numbers', async () => {
+    const table = getAllByRole(container, 'table')[5]
+    const th = getByRole(table, 'columnheader', { name: /Number/ })
+    const first = getAllByRole(table, 'cell')[3].textContent
+    fireEvent.click(th)
+    const middle = getAllByRole(table, 'cell')[3].textContent
+    fireEvent.click(th)
+    const last = getAllByRole(table, 'cell')[3].textContent
+    expect(first).toBe('2.49')
+    expect(middle).toBe('18.49')
+    expect(last).toBe('1.96')
+  })
 })