update GraphOptionsCustomizableColumn.test with visible prop and toggling it

ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx

@@ -26,8 +26,10 @@ describe('Dashboards.Components.GraphOptionsCustomizableColumn', () => {
       const {wrapper} = setup()
       const label = wrapper.find('div').last()
       const input = wrapper.find(InputClickToEdit)
+      const icon = wrapper.find('span')
 
       expect(label.exists()).toBe(true)
+      expect(icon.exists()).toBe(true)
       expect(input.exists()).toBe(true)
     })
 
@@ -36,18 +38,34 @@ describe('Dashboards.Components.GraphOptionsCustomizableColumn', () => {
         const internalName = 'test'
         const {wrapper} = setup({internalName})
         const label = wrapper.find('div').last()
+        const icon = wrapper.find('span')
+
         expect(label.exists()).toBe(true)
         expect(label.children().contains(internalName)).toBe(true)
+        expect(icon.exists()).toBe(true)
+      })
+    })
+
+    describe('when visible is false', () => {
+      it('displays disabled inputClickToEdit', () => {
+        const visible = false
+        const {wrapper} = setup({visible})
+        const input = wrapper.find(InputClickToEdit)
+
+        expect(input.prop('disabled')).toBe(!visible)
       })
     })
   })
 
   describe('instance methods', () => {
     describe('#handleColumnUpdate', () => {
-      it('calls onColumnUpdate once', () => {
+      it('calls onColumnUpdate once with internalName, new name, and visible', () => {
         const onColumnUpdate = jest.fn()
         const internalName = 'test'
-        const {instance} = setup({onColumnUpdate, internalName})
+        const {instance, props: {visible}} = setup({
+          onColumnUpdate,
+          internalName,
+        })
         const rename = 'TEST'
 
         instance.handleColumnRename(rename)
@@ -56,6 +74,27 @@ describe('Dashboards.Components.GraphOptionsCustomizableColumn', () => {
         expect(onColumnUpdate).toHaveBeenCalledWith({
           internalName,
           displayName: rename,
+          visible,
+        })
+      })
+    })
+
+    describe('#handleToggleVisible', () => {
+      it('calls onColumnUpdate once with !visible, internalName, and displayName', () => {
+        const onColumnUpdate = jest.fn()
+        const visible = true
+        const {instance, props: {internalName, displayName}} = setup({
+          visible,
+          onColumnUpdate,
+        })
+
+        instance.handleToggleVisible()
+
+        expect(onColumnUpdate).toHaveBeenCalledTimes(1)
+        expect(onColumnUpdate).toHaveBeenCalledWith({
+          internalName,
+          displayName,
+          visible: !visible,
         })
       })
     })