Procházet zdrojové kódy

HUE-9485 [frontend] Add additional tests for the HueTable Vue component

Johan Ahlen před 5 roky
rodič
revize
31b79bf671

+ 47 - 1
desktop/core/src/desktop/js/components/HueTable.test.ts

@@ -14,7 +14,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
+import TimeAgo from 'components/TimeAgo.vue';
 import { Column, Row } from './HueTable';
 import HueTable from './HueTable.vue';
 
@@ -38,4 +39,49 @@ describe('HueTable.vue', () => {
     });
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  it('should render a table with a custom component for a cell', () => {
+    const now = Date.now() + 30000000000; // Guarantees future ~year, i.e, TimeAgo will show "now"
+    const wrapper = mount(HueTable, {
+      components: { 'time-ago': TimeAgo },
+      propsData: {
+        columns: <Column[]>[
+          { key: 'a', label: 'A' },
+          {
+            key: 'b',
+            label: 'B',
+            cellComponent: TimeAgo,
+            cellProps: (key, row) => ({ value: row[key] })
+          }
+        ],
+        rows: <Row[]>[
+          { a: '1', b: now },
+          { a: '4', b: now }
+        ]
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should render a table with adapter', () => {
+    const wrapper = shallowMount(HueTable, {
+      propsData: {
+        columns: <Column[]>[
+          { key: 'a', label: 'A' },
+          {
+            key: 'b',
+            label: 'B + C',
+            adapter: (key, row) => (row['b'] as number) + (row['c'] as number)
+          }
+        ],
+        rows: <Row[]>[
+          { a: '1', b: 5, c: 9 },
+          { a: '2', b: 6, c: 10 },
+          { a: '3', b: 7, c: 11 },
+          { a: '4', b: 8, c: 12 }
+        ]
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
 });

+ 108 - 0
desktop/core/src/desktop/js/components/__snapshots__/HueTable.test.ts.snap

@@ -111,3 +111,111 @@ exports[`HueTable.vue should render a table 1`] = `
   </tbody>
 </table>
 `;
+
+exports[`HueTable.vue should render a table with a custom component for a cell 1`] = `
+<table>
+  <thead>
+    <tr>
+      <th>
+        A
+      </th>
+      <th>
+        B
+      </th>
+    </tr>
+  </thead>
+   
+  <tbody>
+    <tr>
+      <td>
+        
+          1
+        
+      </td>
+      <td>
+        <span>
+          now
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        
+          4
+        
+      </td>
+      <td>
+        <span>
+          now
+        </span>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`HueTable.vue should render a table with adapter 1`] = `
+<table>
+  <thead>
+    <tr>
+      <th>
+        A
+      </th>
+      <th>
+        B + C
+      </th>
+    </tr>
+  </thead>
+   
+  <tbody>
+    <tr>
+      <td>
+        
+          1
+        
+      </td>
+      <td>
+        
+          14
+        
+      </td>
+    </tr>
+    <tr>
+      <td>
+        
+          2
+        
+      </td>
+      <td>
+        
+          16
+        
+      </td>
+    </tr>
+    <tr>
+      <td>
+        
+          3
+        
+      </td>
+      <td>
+        
+          18
+        
+      </td>
+    </tr>
+    <tr>
+      <td>
+        
+          4
+        
+      </td>
+      <td>
+        
+          20
+        
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;