Update unit test

chronograf/ui/src/shared/components/index_views/IndexListBody.tsx

@@ -5,7 +5,7 @@ import React, {Component} from 'react'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  children: JSX.Element[] | JSX.Element
+  children?: JSX.Element[] | JSX.Element
   emptyState: JSX.Element
   columnCount: number
 }

chronograf/ui/src/shared/components/index_views/test/IndexList.test.tsx

@@ -1,96 +1,71 @@
 import React from 'react'
 import {mount} from 'enzyme'
 
-import {Alignment} from 'src/clockface'
 import IndexList from 'src/shared/components/index_views/IndexList'
 
 describe('IndexList', () => {
   let wrapper
 
-  const wrapperSetup = (override = {}) => {
+  const wrapperSetup = (empty: boolean) => {
     const emptyState = <div>Empty</div>
 
-    const columns = [
+    const header = (
-      {
+      <IndexList.Header key="index-header">
-        key: 'test--fruit',
+        <IndexList.HeaderCell columnName="Fruit" width="50%" />
-        size: 500,
+        <IndexList.HeaderCell columnName="Calories" width="50%" />
-        title: 'Fruit',
+      </IndexList.Header>
-        align: Alignment.Left,
+    )
-        showOnHover: false,
-      },
-      {
-        key: 'test--calories',
-        size: 500,
-        title: 'Calories',
-        align: Alignment.Left,
-        showOnHover: false,
-      },
-    ]
 
-    const rows = [
+    const body = (
-      {
+      <IndexList.Body key="index-body" columnCount={2} emptyState={emptyState}>
-        disabled: false,
+        <IndexList.Row>
-        columns: [
+          <IndexList.Cell>Apple</IndexList.Cell>
-          {
+          <IndexList.Cell>500</IndexList.Cell>
-            key: 'test--fruit',
+        </IndexList.Row>
-            contents: 'Apple',
+        <IndexList.Row>
-          },
+          <IndexList.Cell>Pear</IndexList.Cell>
-          {
+          <IndexList.Cell>1000</IndexList.Cell>
-            key: 'test--calories',
+        </IndexList.Row>
-            contents: '500',
+        <IndexList.Row>
-          },
+          <IndexList.Cell>Banana</IndexList.Cell>
-        ],
+          <IndexList.Cell>100</IndexList.Cell>
-      },
+        </IndexList.Row>
-      {
+      </IndexList.Body>
-        disabled: false,
+    )
-        columns: [
+
-          {
+    const emptyBody = (
-            key: 'test--fruit',
+      <IndexList.Body
-            contents: 'Pear',
+        key="index-body"
-          },
+        columnCount={2}
-          {
+        emptyState={emptyState}
-            key: 'test--calories',
+      />
-            contents: '1000',
+    )
-          },
+
-        ],
+    let children = [header, body]
-      },
+
-      {
+    if (empty) {
-        disabled: false,
+      children = [header, emptyBody]
-        columns: [
+    }
-          {
-            key: 'test--fruit',
-            contents: 'Banana',
-          },
-          {
-            key: 'test--calories',
-            contents: '200',
-          },
-        ],
-      },
-    ]
 
     const props = {
-      columns,
+      children,
-      rows,
-      emptyState,
-      ...override,
     }
 
     return mount(<IndexList {...props} />)
   }
 
   it('mounts without exploding', () => {
-    wrapper = wrapperSetup()
+    wrapper = wrapperSetup(false)
     expect(wrapper).toHaveLength(1)
   })
 
   it('matches snapshot with minimal props', () => {
-    wrapper = wrapperSetup()
+    wrapper = wrapperSetup(false)
     expect(wrapper).toMatchSnapshot()
   })
 
   it('renders empty state when 0 rows exist', () => {
-    wrapper = wrapperSetup({rows: []})
+    wrapper = wrapperSetup(true)
 
     const emptyDiv = wrapper
       .find('div')
@@ -100,7 +75,7 @@ describe('IndexList', () => {
   })
 
   it('matches snapshot when 0 rows exist', () => {
-    wrapper = wrapperSetup({rows: []})
+    wrapper = wrapperSetup(true)
     expect(wrapper).toMatchSnapshot()
   })
 })

chronograf/ui/src/shared/components/index_views/test/__snapshots__/IndexList.test.tsx.snap

@@ -1,63 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`IndexList matches snapshot when 0 rows exist 1`] = `
-<IndexList
+<IndexList>
-  columns={
-    Array [
-      Object {
-        "align": "left",
-        "key": "test--fruit",
-        "showOnHover": false,
-        "size": 500,
-        "title": "Fruit",
-      },
-      Object {
-        "align": "left",
-        "key": "test--calories",
-        "showOnHover": false,
-        "size": 500,
-        "title": "Calories",
-      },
-    ]
-  }
-  emptyState={
-    <div>
-      Empty
-    </div>
-  }
-  rows={Array []}
->
   <table
     className="index-list"
   >
     <IndexListHeader
-      columns={
+      key="index-header"
-        Array [
-          Object {
-            "align": "left",
-            "key": "test--fruit",
-            "showOnHover": false,
-            "size": 500,
-            "title": "Fruit",
-          },
-          Object {
-            "align": "left",
-            "key": "test--calories",
-            "showOnHover": false,
-            "size": 500,
-            "title": "Calories",
-          },
-        ]
-      }
-      getColumnWidthPercent={[Function]}
     >
       <thead
         className="index-list--header"
       >
         <tr>
+          <IndexListHeaderCell
+            alignment="left"
+            columnName="Fruit"
+            width="50%"
+          >
             <th
               className="index-list--header-cell index-list--align-left"
-            key="test--fruit"
               style={
                 Object {
                   "width": "50%",
@@ -66,9 +27,14 @@ exports[`IndexList matches snapshot when 0 rows exist 1`] = `
             >
               Fruit
             </th>
+          </IndexListHeaderCell>
+          <IndexListHeaderCell
+            alignment="left"
+            columnName="Calories"
+            width="50%"
+          >
             <th
               className="index-list--header-cell index-list--align-left"
-            key="test--calories"
               style={
                 Object {
                   "width": "50%",
@@ -77,9 +43,19 @@ exports[`IndexList matches snapshot when 0 rows exist 1`] = `
             >
               Calories
             </th>
+          </IndexListHeaderCell>
         </tr>
       </thead>
     </IndexListHeader>
+    <IndexListBody
+      columnCount={2}
+      emptyState={
+        <div>
+          Empty
+        </div>
+      }
+      key="index-body"
+    >
       <tbody
         className="index-list--empty"
       >
@@ -100,110 +76,30 @@ exports[`IndexList matches snapshot when 0 rows exist 1`] = `
           </td>
         </tr>
       </tbody>
+    </IndexListBody>
   </table>
 </IndexList>
 `;
 
 exports[`IndexList matches snapshot with minimal props 1`] = `
-<IndexList
+<IndexList>
-  columns={
-    Array [
-      Object {
-        "align": "left",
-        "key": "test--fruit",
-        "showOnHover": false,
-        "size": 500,
-        "title": "Fruit",
-      },
-      Object {
-        "align": "left",
-        "key": "test--calories",
-        "showOnHover": false,
-        "size": 500,
-        "title": "Calories",
-      },
-    ]
-  }
-  emptyState={
-    <div>
-      Empty
-    </div>
-  }
-  rows={
-    Array [
-      Object {
-        "columns": Array [
-          Object {
-            "contents": "Apple",
-            "key": "test--fruit",
-          },
-          Object {
-            "contents": "500",
-            "key": "test--calories",
-          },
-        ],
-        "disabled": false,
-      },
-      Object {
-        "columns": Array [
-          Object {
-            "contents": "Pear",
-            "key": "test--fruit",
-          },
-          Object {
-            "contents": "1000",
-            "key": "test--calories",
-          },
-        ],
-        "disabled": false,
-      },
-      Object {
-        "columns": Array [
-          Object {
-            "contents": "Banana",
-            "key": "test--fruit",
-          },
-          Object {
-            "contents": "200",
-            "key": "test--calories",
-          },
-        ],
-        "disabled": false,
-      },
-    ]
-  }
->
   <table
     className="index-list"
   >
     <IndexListHeader
-      columns={
+      key="index-header"
-        Array [
-          Object {
-            "align": "left",
-            "key": "test--fruit",
-            "showOnHover": false,
-            "size": 500,
-            "title": "Fruit",
-          },
-          Object {
-            "align": "left",
-            "key": "test--calories",
-            "showOnHover": false,
-            "size": 500,
-            "title": "Calories",
-          },
-        ]
-      }
-      getColumnWidthPercent={[Function]}
     >
       <thead
         className="index-list--header"
       >
         <tr>
+          <IndexListHeaderCell
+            alignment="left"
+            columnName="Fruit"
+            width="50%"
+          >
             <th
               className="index-list--header-cell index-list--align-left"
-            key="test--fruit"
               style={
                 Object {
                   "width": "50%",
@@ -212,9 +108,14 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
             >
               Fruit
             </th>
+          </IndexListHeaderCell>
+          <IndexListHeaderCell
+            alignment="left"
+            columnName="Calories"
+            width="50%"
+          >
             <th
               className="index-list--header-cell index-list--align-left"
-            key="test--calories"
               style={
                 Object {
                   "width": "50%",
@@ -223,42 +124,34 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
             >
               Calories
             </th>
+          </IndexListHeaderCell>
         </tr>
       </thead>
     </IndexListHeader>
+    <IndexListBody
+      columnCount={2}
+      emptyState={
+        <div>
+          Empty
+        </div>
+      }
+      key="index-body"
+    >
       <tbody
         className="index-list--body"
       >
         <IndexListRow
           disabled={false}
-        getColumnWidthPercent={[Function]}
-        getRowColumnClassName={[Function]}
-        key="index-list--row-0"
-        rowColumns={
-          Array [
-            Object {
-              "contents": "Apple",
-              "key": "test--fruit",
-            },
-            Object {
-              "contents": "500",
-              "key": "test--calories",
-            },
-          ]
-        }
-        rowIndex={0}
         >
           <tr
             className="index-list--row"
+          >
+            <IndexListRowCell
+              alignment="left"
+              revealOnHover={false}
             >
               <td
                 className="index-list--row-cell index-list--align-left"
-            key="index-list--row-0-col-test--fruit"
-            style={
-              Object {
-                "width": "50%",
-              }
-            }
               >
                 <div
                   className="index-list--cell"
@@ -266,14 +159,13 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
                   Apple
                 </div>
               </td>
+            </IndexListRowCell>
+            <IndexListRowCell
+              alignment="left"
+              revealOnHover={false}
+            >
               <td
                 className="index-list--row-cell index-list--align-left"
-            key="index-list--row-0-col-test--calories"
-            style={
-              Object {
-                "width": "50%",
-              }
-            }
               >
                 <div
                   className="index-list--cell"
@@ -281,38 +173,21 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
                   500
                 </div>
               </td>
+            </IndexListRowCell>
           </tr>
         </IndexListRow>
         <IndexListRow
           disabled={false}
-        getColumnWidthPercent={[Function]}
-        getRowColumnClassName={[Function]}
-        key="index-list--row-1"
-        rowColumns={
-          Array [
-            Object {
-              "contents": "Pear",
-              "key": "test--fruit",
-            },
-            Object {
-              "contents": "1000",
-              "key": "test--calories",
-            },
-          ]
-        }
-        rowIndex={1}
         >
           <tr
             className="index-list--row"
+          >
+            <IndexListRowCell
+              alignment="left"
+              revealOnHover={false}
             >
               <td
                 className="index-list--row-cell index-list--align-left"
-            key="index-list--row-1-col-test--fruit"
-            style={
-              Object {
-                "width": "50%",
-              }
-            }
               >
                 <div
                   className="index-list--cell"
@@ -320,14 +195,13 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
                   Pear
                 </div>
               </td>
+            </IndexListRowCell>
+            <IndexListRowCell
+              alignment="left"
+              revealOnHover={false}
+            >
               <td
                 className="index-list--row-cell index-list--align-left"
-            key="index-list--row-1-col-test--calories"
-            style={
-              Object {
-                "width": "50%",
-              }
-            }
               >
                 <div
                   className="index-list--cell"
@@ -335,38 +209,21 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
                   1000
                 </div>
               </td>
+            </IndexListRowCell>
           </tr>
         </IndexListRow>
         <IndexListRow
           disabled={false}
-        getColumnWidthPercent={[Function]}
-        getRowColumnClassName={[Function]}
-        key="index-list--row-2"
-        rowColumns={
-          Array [
-            Object {
-              "contents": "Banana",
-              "key": "test--fruit",
-            },
-            Object {
-              "contents": "200",
-              "key": "test--calories",
-            },
-          ]
-        }
-        rowIndex={2}
         >
           <tr
             className="index-list--row"
+          >
+            <IndexListRowCell
+              alignment="left"
+              revealOnHover={false}
             >
               <td
                 className="index-list--row-cell index-list--align-left"
-            key="index-list--row-2-col-test--fruit"
-            style={
-              Object {
-                "width": "50%",
-              }
-            }
               >
                 <div
                   className="index-list--cell"
@@ -374,24 +231,25 @@ exports[`IndexList matches snapshot with minimal props 1`] = `
                   Banana
                 </div>
               </td>
+            </IndexListRowCell>
+            <IndexListRowCell
+              alignment="left"
+              revealOnHover={false}
+            >
               <td
                 className="index-list--row-cell index-list--align-left"
-            key="index-list--row-2-col-test--calories"
-            style={
-              Object {
-                "width": "50%",
-              }
-            }
               >
                 <div
                   className="index-list--cell"
                 >
-              200
+                  100
                 </div>
               </td>
+            </IndexListRowCell>
           </tr>
         </IndexListRow>
       </tbody>
+    </IndexListBody>
   </table>
 </IndexList>
 `;