WIP Test FieldList

ui/mocks/shared/apis/metaQuery.ts

@@ -70,3 +70,59 @@ const showRetentionPoliciesResponse = {
 export const showRetentionPolicies = jest.fn(() =>
   Promise.resolve({data: showRetentionPoliciesResponse})
 )
+
+const showFieldKeysResponse = {
+  data: {
+    results: [
+      {
+        statement_id: 0,
+        series: [
+          {
+            name: 'm1',
+            columns: ['fieldKey', 'fieldType'],
+            values: [
+              ['usage_guest', 'float'],
+              ['usage_guest_nice', 'float'],
+              ['usage_idle', 'float'],
+              ['usage_iowait', 'float'],
+              ['usage_irq', 'float'],
+              ['usage_nice', 'float'],
+              ['usage_softirq', 'float'],
+              ['usage_steal', 'float'],
+              ['usage_system', 'float'],
+              ['usage_user', 'float'],
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  status: 200,
+  statusText: 'OK',
+  headers: {
+    date: 'Thu, 10 May 2018 00:31:31 GMT',
+    'content-encoding': 'gzip',
+    vary: 'Accept-Encoding',
+    'content-length': '171',
+    'x-chronograf-version': '1.4.3.0-1103-gb964e64fd',
+    'content-type': 'application/json',
+  },
+  config: {self: '/chronograf/v1/config', auth: '/chronograf/v1/config/auth'},
+  request: {},
+  auth: {links: []},
+  external: {statusFeed: 'https://www.influxdata.com/feed/json'},
+  users: '/chronograf/v1/organizations/default/users',
+  allUsers: '/chronograf/v1/users',
+  organizations: '/chronograf/v1/organizations',
+  meLink: '/chronograf/v1/me',
+  environment: '/chronograf/v1/env',
+  ifql: {
+    ast: '/chronograf/v1/ifql/ast',
+    self: '/chronograf/v1/ifql',
+    suggestions: '/chronograf/v1/ifql/suggestions',
+  },
+}
+
+export const showFieldKeys = jest.fn(() =>
+  Promise.resolve(showFieldKeysResponse)
+)

ui/src/data_explorer/components/FieldListItem.tsx

@@ -49,6 +49,7 @@ class FieldListItem extends PureComponent<Props, State> {
         fieldFuncsLabel = `${num} Functions`
         break
     }
+
     return (
       <div>
         <div

ui/src/shared/components/FieldList.tsx

@@ -147,7 +147,6 @@ class FieldList extends PureComponent<Props, State> {
                   fieldFunc.value,
                   fields
                 )
-
                 const funcs: FieldFunc[] = getFuncsByFieldName(
                   fieldFunc.value,
                   fields

ui/test/fixtures/index.ts

@@ -1,4 +1,5 @@
 import {
+  Field,
   Source,
   CellQuery,
   SourceLinks,
@@ -37,11 +38,7 @@ export const source: Source = {
   insecureSkipVerify: false,
 }
 
-export const queryConfig: QueryConfig = {
+export const fields: Field[] = [
-  database: 'telegraf',
-  measurement: 'cpu',
-  retentionPolicy: 'autogen',
-  fields: [
   {
     value: 'mean',
     type: 'func',
@@ -66,7 +63,13 @@ export const queryConfig: QueryConfig = {
       },
     ],
   },
-  ],
+]
+
+export const queryConfig: QueryConfig = {
+  database: 'telegraf',
+  measurement: 'cpu',
+  retentionPolicy: 'autogen',
+  fields,
   tags: {},
   groupBy: {
     time: 'auto',

ui/test/shared/components/FieldList.test.tsx

@@ -0,0 +1,65 @@
+import {mount} from 'enzyme'
+import React from 'react'
+import FieldList from 'src/shared/components/FieldList'
+import FieldListItem from 'src/data_explorer/components/FieldListItem'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+
+import {query, source} from 'test/resources'
+
+jest.mock('src/shared/apis/metaQuery', () =>
+  require('mocks/shared/apis/metaQuery')
+)
+
+const setup = (override = {}) => {
+  const props = {
+    query,
+    onTimeShift: () => {},
+    onToggleField: () => {},
+    onGroupByTime: () => {},
+    onFill: () => {},
+    applyFuncsToField: () => {},
+    isKapacitorRule: false,
+    // querySource,
+    removeFuncs: () => {},
+    addInitialField: () => {},
+    initialGroupByTime: '5m',
+    isQuerySupportedByExplorer: true,
+    source,
+    ...override,
+  }
+
+  const wrapper = mount(<FieldList {...props} />, {
+    context: {source},
+  })
+
+  // const instance = wrapper.instance() as FieldList
+
+  return {
+    // instance,
+    props,
+    wrapper,
+  }
+}
+
+describe('Shared.Components.FieldList', () => {
+  describe('rendering', () => {
+    it('renders to the page', () => {
+      const {wrapper} = setup()
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    describe('<FieldListItem/>', () => {
+      it('renders <FieldListItem/>`s to the page', () => {
+        const {wrapper} = setup()
+        const items = wrapper.find(FieldListItem)
+        // const first = items.first()
+        // const last = items.last()
+        console.debug('jimmy', wrapper.debug())
+        expect(items.length).toBe(9)
+        // expect(first.dive().text()).toContain('foo')
+        // expect(last.dive().text()).toContain('bar')
+      })
+    })
+  })
+})