Add test for TagList.tsx

ui/src/shared/components/TagList.tsx

@@ -61,6 +61,7 @@ class TagList extends PureComponent<Props, State> {
       measurement: prevMeas,
       retentionPolicy: prevRP,
     } = prevProps.query
+
     if (!database || !measurement || !retentionPolicy) {
       return
     }
@@ -116,8 +117,8 @@ class TagList extends PureComponent<Props, State> {
               key={tagKey}
               tagKey={tagKey}
               tagValues={tagValues}
-              selectedTagValues={query.tags[tagKey] || []}
               isUsingGroupBy={query.groupBy.tags.indexOf(tagKey) > -1}
+              selectedTagValues={query.tags[tagKey] || []}
               onChooseTag={this.props.onChooseTag}
               onGroupByTag={this.props.onGroupByTag}
             />

ui/test/shared/components/TagList.test.tsx

@@ -0,0 +1,170 @@
+import React from 'react'
+import TagList from 'src/shared/components/TagList'
+import TagListItem from 'src/shared/components/TagListItem'
+import {shallow} from 'enzyme'
+
+import {query, source} from 'test/resources'
+
+const setup = (override = {}) => {
+  const props = {
+    query,
+    querySource: source,
+    onChooseTag: () => {},
+    onGroupByTag: () => {},
+    ...override,
+  }
+
+  TagList.prototype.getTags = jest.fn(() => Promise.resolve)
+  const wrapper = shallow(<TagList {...props} />, {context: {source}})
+  const instance = wrapper.instance() as TagList
+
+  return {
+    instance,
+    wrapper,
+    props,
+  }
+}
+
+describe('Shared.Components.TagList', () => {
+  describe('lifecycle methods', () => {
+    describe('componentDidMount', () => {
+      it('gets the tags', () => {
+        const getTags = jest.fn()
+        const {instance} = setup()
+        instance.getTags = getTags
+        instance.componentDidMount()
+
+        expect(getTags).toHaveBeenCalledTimes(1)
+      })
+
+      describe('if there is no database', () => {
+        it('does not get the tags', () => {
+          const getTags = jest.fn()
+          const {instance} = setup({query: {...query, database: ''}})
+          instance.getTags = getTags
+          instance.componentDidMount()
+
+          expect(getTags).not.toHaveBeenCalled()
+        })
+      })
+
+      describe('if there is no measurement', () => {
+        it('does not get the tags', () => {
+          const getTags = jest.fn()
+          const {instance} = setup({query: {...query, measurement: ''}})
+          instance.getTags = getTags
+          instance.componentDidMount()
+
+          expect(getTags).not.toHaveBeenCalled()
+        })
+      })
+
+      describe('if there is no retention policy', () => {
+        it('does not get the tags', () => {
+          const getTags = jest.fn()
+          const {instance} = setup({query: {...query, retentionPolicy: ''}})
+          instance.getTags = getTags
+          instance.componentDidMount()
+
+          expect(getTags).not.toHaveBeenCalled()
+        })
+      })
+    })
+
+    describe('componentDidUpdate', () => {
+      describe('if the db, rp, measurement, and source change and exist', () => {
+        it('gets the tags', () => {
+          const getTags = jest.fn()
+          const updates = {
+            database: 'newDb',
+            retentionPolicy: 'newRp',
+            measurement: 'newMeasurement',
+          }
+
+          const prevQuery = {...query, ...updates}
+          const prevSource = {...source, id: 'prevID'}
+
+          const {instance} = setup()
+          instance.getTags = getTags
+          instance.componentDidUpdate({
+            query: prevQuery,
+            querySource: prevSource,
+          })
+
+          expect(getTags).toHaveBeenCalledTimes(1)
+        })
+
+        describe('if there is no database', () => {
+          it('does not get the tags', () => {
+            const getTags = jest.fn()
+            const {instance} = setup({query: {...query, database: ''}})
+            instance.getTags = getTags
+            instance.componentDidMount()
+
+            expect(getTags).not.toHaveBeenCalled()
+          })
+        })
+
+        describe('if there is no retentionPolicy', () => {
+          it('does not get the tags', () => {
+            const getTags = jest.fn()
+            const {instance} = setup({query: {...query, retentionPolicy: ''}})
+            instance.getTags = getTags
+            instance.componentDidMount()
+
+            expect(getTags).not.toHaveBeenCalled()
+          })
+        })
+
+        describe('if there is no measurement', () => {
+          it('does not get the tags', () => {
+            const getTags = jest.fn()
+            const {instance} = setup({query: {...query, measurement: ''}})
+            instance.getTags = getTags
+            instance.componentDidMount()
+
+            expect(getTags).not.toHaveBeenCalled()
+          })
+        })
+      })
+    })
+  })
+
+  describe('rendering', () => {
+    it('renders', () => {
+      const {wrapper} = setup()
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    describe('when there are no tags', () => {
+      it('does not render the <TagListItem/>', () => {
+        const {wrapper} = setup()
+        const tagListItems = wrapper.find(TagListItem)
+        expect(tagListItems.length).toBe(0)
+      })
+    })
+
+    describe('when there are tags', () => {
+      it('does renders the <TagListItem/>', () => {
+        const {wrapper} = setup()
+        const values = ['tv1', 'tv2']
+        const tags = {
+          tk1: values,
+          tk2: values,
+        }
+
+        wrapper.setState({tags})
+        const tagListItems = wrapper.find(TagListItem)
+        const first = tagListItems.first()
+        const last = tagListItems.last()
+
+        expect(tagListItems.length).toBe(2)
+        expect(first.props().tagKey).toBe('tk1')
+        expect(first.props().tagValues).toBe(values)
+        expect(last.props().tagKey).toBe('tk2')
+        expect(last.props().tagValues).toBe(values)
+      })
+    })
+  })
+})