From 438e0725bdebcc511bac782e6f7e7e52ca0aa354 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Wed, 20 Jun 2018 11:25:12 -0700
Subject: [PATCH 1/3] Refactor TemplateControlBar test

---
 .../components/TemplateControlBar.test.tsx    | 59 ++++++++-----------
 1 file changed, 25 insertions(+), 34 deletions(-)

diff --git a/ui/test/tempVars/components/TemplateControlBar.test.tsx b/ui/test/tempVars/components/TemplateControlBar.test.tsx
index 6a0c62be4b..c3295221ae 100644
--- a/ui/test/tempVars/components/TemplateControlBar.test.tsx
+++ b/ui/test/tempVars/components/TemplateControlBar.test.tsx
@@ -8,8 +8,18 @@ import {source} from 'test/resources'
 
 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 +36,23 @@ const defaultProps = {
           selected: false,
         },
       ],
-    },
-  ],
-  meRole: 'EDITOR',
-  isUsingAuth: true,
-  onOpenTemplateManager: () => {},
-  onSelectTemplate: () => {},
-  onSaveTemplates: () => {},
-  onCreateTemplateVariable: () => {},
-  source,
-}
+    }
+    const props = {...defaultProps, templates: [template]}
+    const wrapper = shallow(<TemplateControlBar {...props} />)
 
-const setup = (override = {}) => {
-  const props = {...defaultProps, ...override}
-  const wrapper = shallow(<TemplateControlBar {...props} />)
+    const dropdown = wrapper.find(TemplateControlDropdown)
+    expect(dropdown.exists()).toBe(true)
+  })
 
-  return {wrapper, props}
-}
+  it('renders component without variables', () => {
+    const props = {...defaultProps}
+    const wrapper = shallow(<TemplateControlBar {...props} />)
 
-describe('Dashboard.TemplateControlBar', () => {
-  describe('rendering', () => {
-    it('renders component with variables', () => {
-      const {wrapper} = setup()
+    const emptyState = wrapper.find({'data-test': 'empty-state'})
 
-      const dropdown = wrapper.find(TemplateControlDropdown)
-      expect(dropdown.exists()).toBe(true)
-    })
+    const dropdown = wrapper.find(TemplateControlDropdown)
 
-    it('renders component without variables', () => {
-      const {wrapper} = setup({...defaultProps, templates: []})
-
-      const emptyState = wrapper.find({'data-test': 'empty-state'})
-
-      const dropdown = wrapper.find(TemplateControlDropdown)
-
-      expect(dropdown.exists()).toBe(false)
-      expect(emptyState.exists()).toBe(true)
-    })
+    expect(dropdown.exists()).toBe(false)
+    expect(emptyState.exists()).toBe(true)
   })
 })

From 1bf264e373242050f8a9f0c6ef8191219c5f4ea0 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Wed, 20 Jun 2018 11:43:18 -0700
Subject: [PATCH 2/3] Add TemplateControlDropdown test

---
 .../components/TemplateControlDropdown.tsx    |  1 +
 .../TemplateControlDropdown.test.tsx          | 49 +++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 ui/test/tempVars/components/TemplateControlDropdown.test.tsx

diff --git a/ui/src/tempVars/components/TemplateControlDropdown.tsx b/ui/src/tempVars/components/TemplateControlDropdown.tsx
index 707d05c315..8d7ef8fc4f 100644
--- a/ui/src/tempVars/components/TemplateControlDropdown.tsx
+++ b/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>
diff --git a/ui/test/tempVars/components/TemplateControlDropdown.test.tsx b/ui/test/tempVars/components/TemplateControlDropdown.test.tsx
new file mode 100644
index 0000000000..ed1d8712dd
--- /dev/null
+++ b/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)
+  })
+})

From d8a3332fe15b74f833550ce32eb0b75e1f6b0000 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Wed, 20 Jun 2018 12:48:20 -0700
Subject: [PATCH 3/3] Add TemplateControlBar test

---
 .../components/TemplateControlBar.tsx         |  1 +
 .../components/TemplateControlBar.test.tsx    | 21 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/src/tempVars/components/TemplateControlBar.tsx b/ui/src/tempVars/components/TemplateControlBar.tsx
index d13fb80b98..64a3388894 100644
--- a/ui/src/tempVars/components/TemplateControlBar.tsx
+++ b/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" />
diff --git a/ui/test/tempVars/components/TemplateControlBar.test.tsx b/ui/test/tempVars/components/TemplateControlBar.test.tsx
index c3295221ae..57831bb561 100644
--- a/ui/test/tempVars/components/TemplateControlBar.test.tsx
+++ b/ui/test/tempVars/components/TemplateControlBar.test.tsx
@@ -3,9 +3,12 @@ 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: [],
@@ -55,4 +58,20 @@ describe('TemplateControlBar', () => {
     expect(dropdown.exists()).toBe(false)
     expect(emptyState.exists()).toBe(true)
   })
+
+  it('renders an TemplateVariableEditor overlay when adding a template variable', () => {
+    const props = {...defaultProps}
+    const wrapper = shallow(<TemplateControlBar {...props} />)
+
+    expect(wrapper.find(SimpleOverlayTechnology)).toHaveLength(0)
+
+    wrapper.find('[data-test="add-template-variable"]').simulate('click')
+
+    const elements = wrapper
+      .find(SimpleOverlayTechnology)
+      .dive()
+      .find(TemplateVariableEditor)
+
+    expect(elements).toHaveLength(1)
+  })
 })