Merge pull request #3738 from influxdata/tempVars/tests

Add two tests for template variables

ui/src/tempVars/components/TemplateControlBar.tsx

@@ -78,6 +78,7 @@ class TemplateControlBar extends Component<Props, State> {
           <Authorized requiredRole={EDITOR_ROLE}>
             <button
               className="btn btn-primary btn-sm template-control--manage"
+              data-test="add-template-variable"
               onClick={this.handleAddVariable}
             >
               <span className="icon plus" />

ui/src/tempVars/components/TemplateControlDropdown.tsx

@@ -72,6 +72,7 @@ class TemplateControlDropdown extends PureComponent<Props, State> {
             <span
               className="icon cog-thick"
               onClick={this.handleShowSettings}
+              data-test="edit"
             />
           </label>
         </Authorized>

ui/test/tempVars/components/TemplateControlBar.test.tsx

@@ -3,13 +3,26 @@ import {shallow} from 'enzyme'
 
 import TemplateControlBar from 'src/tempVars/components/TemplateControlBar'
 import TemplateControlDropdown from 'src/tempVars/components/TemplateControlDropdown'
-import {TemplateType, TemplateValueType} from 'src/types'
+import TemplateVariableEditor from 'src/tempVars/components/TemplateVariableEditor'
+import SimpleOverlayTechnology from 'src/shared/components/SimpleOverlayTechnology'
 import {source} from 'test/resources'
 
+import {TemplateType, TemplateValueType} from 'src/types'
+
 const defaultProps = {
   isOpen: true,
-  templates: [
+  templates: [],
-    {
+  meRole: 'EDITOR',
+  isUsingAuth: true,
+  onSelectTemplate: () => {},
+  onSaveTemplates: () => {},
+  onCreateTemplateVariable: () => {},
+  source,
+}
+
+describe('TemplateControlBar', () => {
+  it('renders component with variables', () => {
+    const template = {
       id: '000',
       tempVar: ':alpha:',
       label: '',
@@ -26,42 +39,39 @@ const defaultProps = {
           selected: false,
         },
       ],
-    },
+    }
-  ],
+    const props = {...defaultProps, templates: [template]}
-  meRole: 'EDITOR',
+    const wrapper = shallow(<TemplateControlBar {...props} />)
-  isUsingAuth: true,
-  onOpenTemplateManager: () => {},
-  onSelectTemplate: () => {},
-  onSaveTemplates: () => {},
-  onCreateTemplateVariable: () => {},
-  source,
-}
 
-const setup = (override = {}) => {
+    const dropdown = wrapper.find(TemplateControlDropdown)
-  const props = {...defaultProps, ...override}
+    expect(dropdown.exists()).toBe(true)
-  const wrapper = shallow(<TemplateControlBar {...props} />)
+  })
 
-  return {wrapper, props}
+  it('renders component without variables', () => {
-}
+    const props = {...defaultProps}
+    const wrapper = shallow(<TemplateControlBar {...props} />)
 
-describe('Dashboard.TemplateControlBar', () => {
+    const emptyState = wrapper.find({'data-test': 'empty-state'})
-  describe('rendering', () => {
-    it('renders component with variables', () => {
-      const {wrapper} = setup()
 
-      const dropdown = wrapper.find(TemplateControlDropdown)
+    const dropdown = wrapper.find(TemplateControlDropdown)
-      expect(dropdown.exists()).toBe(true)
-    })
 
-    it('renders component without variables', () => {
+    expect(dropdown.exists()).toBe(false)
-      const {wrapper} = setup({...defaultProps, templates: []})
+    expect(emptyState.exists()).toBe(true)
+  })
 
-      const emptyState = wrapper.find({'data-test': 'empty-state'})
+  it('renders an TemplateVariableEditor overlay when adding a template variable', () => {
+    const props = {...defaultProps}
+    const wrapper = shallow(<TemplateControlBar {...props} />)
 
-      const dropdown = wrapper.find(TemplateControlDropdown)
+    expect(wrapper.find(SimpleOverlayTechnology)).toHaveLength(0)
 
-      expect(dropdown.exists()).toBe(false)
+    wrapper.find('[data-test="add-template-variable"]').simulate('click')
-      expect(emptyState.exists()).toBe(true)
+
-    })
+    const elements = wrapper
+      .find(SimpleOverlayTechnology)
+      .dive()
+      .find(TemplateVariableEditor)
+
+    expect(elements).toHaveLength(1)
   })
 })

ui/test/tempVars/components/TemplateControlDropdown.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import {shallow} from 'enzyme'
+
+import SimpleOverlayTechnology from 'src/shared/components/SimpleOverlayTechnology'
+import TemplateVariableEditor from 'src/tempVars/components/TemplateVariableEditor'
+import TemplateControlDropdown from 'src/tempVars/components/TemplateControlDropdown'
+import {source} from 'test/resources'
+
+import {TemplateType, TemplateValueType} from 'src/types'
+
+const defaultProps = {
+  template: {
+    id: '0',
+    tempVar: ':my-var:',
+    label: '',
+    type: TemplateType.Databases,
+    values: [
+      {
+        value: 'db0',
+        type: TemplateValueType.Database,
+        selected: true,
+      },
+    ],
+  },
+  meRole: 'EDITOR',
+  isUsingAuth: true,
+  source,
+  onSelectTemplate: () => Promise.resolve(),
+  onCreateTemplate: () => Promise.resolve(),
+  onUpdateTemplate: () => Promise.resolve(),
+  onDeleteTemplate: () => Promise.resolve(),
+}
+
+describe('TemplateControlDropdown', () => {
+  it('should show a TemplateVariableEditor overlay when the settings icon is clicked', () => {
+    const wrapper = shallow(<TemplateControlDropdown {...defaultProps} />)
+
+    expect(wrapper.find(SimpleOverlayTechnology)).toHaveLength(0)
+
+    wrapper.find("[data-test='edit']").simulate('click')
+
+    const elements = wrapper
+      .find(SimpleOverlayTechnology)
+      .dive()
+      .find(TemplateVariableEditor)
+
+    expect(elements).toHaveLength(1)
+  })
+})