Add tests

ui/test/tempVars/components/TemplateControl.test.tsx

@@ -4,11 +4,13 @@ import {shallow} from 'enzyme'
 import OverlayTechnology from 'src/reusable_ui/components/overlays/OverlayTechnology'
 import TemplateVariableEditor from 'src/tempVars/components/TemplateVariableEditor'
 import TemplateControl from 'src/tempVars/components/TemplateControl'
+import TextTemplateSelector from 'src/tempVars/components/TextTemplateSelector'
+import TemplateDropdown from 'src/tempVars/components/TemplateDropdown'
 import {source} from 'test/resources'
 
 import {TemplateType, TemplateValueType} from 'src/types'
 
-const template = {
+const defaultTemplate = () => ({
   id: '0',
   tempVar: ':my-var:',
   label: '',
@@ -21,23 +23,23 @@ const template = {
       localSelected: true,
     },
   ],
-}
+})
 
-const defaultProps = {
+const defaultProps = ({template = defaultTemplate()} = {}) => ({
   template,
   templates: [template],
   meRole: 'EDITOR',
   isUsingAuth: true,
   source,
-  onPickTemplate: () => Promise.resolve(),
+  onPickValue: () => Promise.resolve(),
   onCreateTemplate: () => Promise.resolve(),
   onUpdateTemplate: () => Promise.resolve(),
   onDeleteTemplate: () => Promise.resolve(),
-}
+})
 
 describe('TemplateControl', () => {
   it('should show a TemplateVariableEditor overlay when the settings icon is clicked', () => {
-    const wrapper = shallow(<TemplateControl {...defaultProps} />, {
+    const wrapper = shallow(<TemplateControl {...defaultProps()} />, {
       context: {
         store: {},
       },
@@ -60,4 +62,45 @@ describe('TemplateControl', () => {
 
     expect(elements).toHaveLength(1)
   })
+
+  it('displays a TextTemplateSelector for text templates', () => {
+    const props = defaultProps({
+      template: {
+        id: '0',
+        tempVar: ':my-var:',
+        label: '',
+        type: TemplateType.Text,
+        values: [
+          {
+            value: 'initial value',
+            type: TemplateValueType.Constant,
+            selected: true,
+            localSelected: true,
+          },
+        ],
+      },
+    })
+
+    const wrapper = shallow(<TemplateControl {...props} />)
+
+    expect(wrapper.find(TemplateDropdown).length).toEqual(0)
+    expect(wrapper.find(TextTemplateSelector).length).toEqual(1)
+  })
+
+  it('displays a TemplateDropdown for non-text templates', () => {
+    const props = defaultProps({
+      template: {
+        id: '0',
+        tempVar: ':my-var:',
+        label: '',
+        type: TemplateType.CSV,
+        values: [],
+      },
+    })
+
+    const wrapper = shallow(<TemplateControl {...props} />)
+
+    expect(wrapper.find(TemplateDropdown).length).toEqual(1)
+    expect(wrapper.find(TextTemplateSelector).length).toEqual(0)
+  })
 })

ui/test/tempVars/components/TextTemplateBuilder.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import {shallow} from 'enzyme'
+
+import {source} from 'test/resources'
+import TextTemplateBuilder from 'src/tempVars/components/TextTemplateBuilder'
+
+import {TemplateType, TemplateValueType} from 'src/types'
+
+describe('TextTemplateBuilder', () => {
+  test('updates template approriately after edits', () => {
+    const onUpdateTemplateMock = jest.fn()
+    const template = {
+      id: '0',
+      tempVar: ':my-var:',
+      label: '',
+      type: TemplateType.Text,
+      values: [
+        {
+          value: 'initial value',
+          type: TemplateValueType.Constant,
+          selected: true,
+          localSelected: true,
+        },
+      ],
+    }
+
+    const props = {
+      template,
+      templates: [template],
+      source,
+      onUpdateTemplate: onUpdateTemplateMock,
+      onUpdateDefaultTemplateValue: () => {},
+    }
+
+    const wrapper = shallow(<TextTemplateBuilder {...props} />)
+
+    wrapper.find('input').simulate('change', {target: {value: 'new value'}})
+
+    expect(onUpdateTemplateMock).toBeCalledWith({
+      id: '0',
+      tempVar: ':my-var:',
+      label: '',
+      type: TemplateType.Text,
+      values: [
+        {
+          value: 'new value',
+          type: TemplateValueType.Constant,
+          selected: true,
+          localSelected: true,
+        },
+      ],
+    })
+  })
+})

ui/test/tempVars/components/TextTemplateSelector.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import {shallow} from 'enzyme'
+
+import TextTemplateSelector from 'src/tempVars/components/TextTemplateSelector'
+
+import {TemplateType, TemplateValueType} from 'src/types'
+
+describe('TextTemplateSelector', () => {
+  test('updates template on enter', () => {
+    const onUpdateTemplateMock = jest.fn()
+    const template = {
+      id: '0',
+      tempVar: ':my-var:',
+      label: '',
+      type: TemplateType.Text,
+      values: [
+        {
+          value: 'initial value',
+          type: TemplateValueType.Constant,
+          selected: true,
+          localSelected: true,
+        },
+      ],
+    }
+
+    const wrapper = shallow(
+      <TextTemplateSelector
+        template={template}
+        onUpdateTemplate={onUpdateTemplateMock}
+      />
+    )
+
+    wrapper.find('input').simulate('change', {target: {value: 'new value'}})
+    expect(wrapper.find('input').prop('value')).toEqual('new value')
+
+    wrapper.find('input').simulate('keyup', {
+      key: 'Enter',
+      currentTarget: {
+        blur() {
+          wrapper.find('input').simulate('blur')
+        },
+      },
+    })
+
+    expect(onUpdateTemplateMock).toBeCalledWith({
+      id: '0',
+      tempVar: ':my-var:',
+      label: '',
+      type: TemplateType.Text,
+      values: [
+        {
+          value: 'new value',
+          type: TemplateValueType.Constant,
+          selected: true,
+          localSelected: true,
+        },
+      ],
+    })
+  })
+})