update getters in TableOptions.test

ui/src/dashboards/components/TableOptions.tsx

@@ -53,7 +53,7 @@ export class TableOptions extends PureComponent<Props, {}> {
     return fieldNames || []
   }
 
-  get timeColumn() {
+  get timeField() {
     return (
       this.fieldNames.find(f => f.internalName === 'time') || TIME_FIELD_DEFAULT
     )
@@ -63,7 +63,7 @@ export class TableOptions extends PureComponent<Props, {}> {
     const {dataLabels} = this.props
 
     return _.isEmpty(dataLabels)
-      ? [this.timeColumn]
+      ? [this.timeField]
       : dataLabels.map(label => {
           const existing = this.fieldNames.find(f => f.internalName === label)
           return (

ui/test/dashboards/components/TableOptions.test.tsx

@@ -9,6 +9,7 @@ import {TableOptions} from 'src/dashboards/components/TableOptions'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import ThresholdsList from 'src/shared/components/ThresholdsList'
 import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
+import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph'
 
 const defaultProps = {
   dataLabels: [],
@@ -32,12 +33,105 @@ const setup = (override = {}) => {
 
   const wrapper = shallow(<TableOptions {...props} />)
 
-  return {wrapper, props}
+  const instance = wrapper.instance() as TableOptions
+
+  return {wrapper, instance, props}
 }
+const dataLabels = ['time', 'foo', 'bar']
 
 describe('Dashboards.Components.TableOptions', () => {
   describe('getters', () => {
-    describe('computedColumnNames', () => {})
+    describe('fieldNames', () => {
+      describe('if fieldNames are passed in tableOptions as props', () => {
+        it('returns fieldNames', () => {
+          const fieldNames = [
+            {internalName: 'time', displayName: 'TIME', visible: true},
+            {internalName: 'foo', displayName: 'BAR', visible: false},
+          ]
+          const {instance} = setup({tableOptions: {fieldNames}})
+
+          expect(instance.fieldNames).toBe(fieldNames)
+        })
+      })
+
+      describe('if fieldNames are not passed in tableOptions as props', () => {
+        it('returns empty array', () => {
+          const {instance} = setup()
+
+          expect(instance.fieldNames).toEqual([])
+        })
+      })
+    })
+
+    describe('timeField', () => {
+      describe('if time field in fieldNames', () => {
+        it('returns time field', () => {
+          const timeField = {
+            internalName: 'time',
+            displayName: 'TIME',
+            visible: true,
+          }
+          const fieldNames = [
+            timeField,
+            {internalName: 'foo', displayName: 'BAR', visible: false},
+          ]
+          const {instance} = setup({tableOptions: {fieldNames}})
+
+          expect(instance.timeField).toBe(timeField)
+        })
+      })
+
+      describe('if time field not in fieldNames', () => {
+        it('returns default time field', () => {
+          const fieldNames = [
+            {internalName: 'foo', displayName: 'BAR', visible: false},
+          ]
+          const {instance} = setup({tableOptions: {fieldNames}})
+
+          expect(instance.timeField).toBe(TIME_FIELD_DEFAULT)
+        })
+      })
+    })
+
+    describe('computedFieldNames', () => {
+      describe('if dataLabels are not passed in', () => {
+        it('returns an array of the time column', () => {
+          const {instance} = setup()
+
+          expect(instance.computedFieldNames).toEqual([TIME_FIELD_DEFAULT])
+        })
+      })
+
+      describe('if dataLabels are passed in', () => {
+        describe('if dataLabel has a matching fieldName', () => {
+          it('returns array with the matching fieldName', () => {
+            const fieldNames = [
+              {internalName: 'foo', displayName: 'bar', visible: true},
+            ]
+            const dataLabels = ['foo']
+            const {instance} = setup({tableOptions: {fieldNames}, dataLabels})
+
+            expect(instance.computedFieldNames).toEqual(fieldNames)
+          })
+        })
+
+        describe('if dataLabel does not have a matching fieldName', () => {
+          it('returns array with a new fieldName created for it', () => {
+            const fieldNames = [
+              {internalName: 'time', displayName: 'bar', visible: true},
+            ]
+            const unmatchedLabel = 'foo'
+            const dataLabels = ['time', unmatchedLabel]
+            const {instance} = setup({tableOptions: {fieldNames}, dataLabels})
+
+            expect(instance.computedFieldNames).toEqual([
+              ...fieldNames,
+              {internalName: unmatchedLabel, displayName: '', visible: true},
+            ])
+          })
+        })
+      })
+    })
   })
 
   describe('rendering', () => {