From 80b3f84b16fb789a6384f76d7dd1fddab051adb5 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Tue, 26 Jun 2018 16:53:05 -0700
Subject: [PATCH] Tweak OverlayTechnology lifecycle and fix test

---
 .../shared/components/OverlayTechnology.tsx   | 24 ++++++++-----------
 .../TemplateControlDropdown.test.tsx          | 18 ++++++++++----
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/ui/src/shared/components/OverlayTechnology.tsx b/ui/src/shared/components/OverlayTechnology.tsx
index cf3559b7e..014cec228 100644
--- a/ui/src/shared/components/OverlayTechnology.tsx
+++ b/ui/src/shared/components/OverlayTechnology.tsx
@@ -12,6 +12,14 @@ interface State {
 
 @ErrorHandling
 class OverlayTechnology extends Component<Props, State> {
+  public static getDerivedStateFromProps(props) {
+    if (props.visible) {
+      return {showChildren: true}
+    }
+
+    return {}
+  }
+
   private animationTimer: number
 
   constructor(props: Props) {
@@ -23,17 +31,10 @@ class OverlayTechnology extends Component<Props, State> {
   }
 
   public componentDidUpdate(prevProps) {
-    if (prevProps.visible === true && this.props.visible === false) {
+    if (prevProps.visible && !this.props.visible) {
+      clearTimeout(this.animationTimer)
       this.animationTimer = window.setTimeout(this.hideChildren, 300)
-      return
     }
-
-    if (prevProps.visible === false && this.props.visible === true) {
-      this.showChildren()
-      return
-    }
-
-    return
   }
 
   public render() {
@@ -65,13 +66,8 @@ class OverlayTechnology extends Component<Props, State> {
     return `overlay-tech ${visible ? 'show' : ''}`
   }
 
-  private showChildren = (): void => {
-    this.setState({showChildren: true})
-  }
-
   private hideChildren = (): void => {
     this.setState({showChildren: false})
-    clearTimeout(this.animationTimer)
   }
 }
 
diff --git a/ui/test/tempVars/components/TemplateControlDropdown.test.tsx b/ui/test/tempVars/components/TemplateControlDropdown.test.tsx
index ed1d8712d..25416edaf 100644
--- a/ui/test/tempVars/components/TemplateControlDropdown.test.tsx
+++ b/ui/test/tempVars/components/TemplateControlDropdown.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {shallow} from 'enzyme'
 
-import SimpleOverlayTechnology from 'src/shared/components/SimpleOverlayTechnology'
+import OverlayTechnology from 'src/shared/components/OverlayTechnology'
 import TemplateVariableEditor from 'src/tempVars/components/TemplateVariableEditor'
 import TemplateControlDropdown from 'src/tempVars/components/TemplateControlDropdown'
 import {source} from 'test/resources'
@@ -33,14 +33,24 @@ const defaultProps = {
 
 describe('TemplateControlDropdown', () => {
   it('should show a TemplateVariableEditor overlay when the settings icon is clicked', () => {
-    const wrapper = shallow(<TemplateControlDropdown {...defaultProps} />)
+    const wrapper = shallow(<TemplateControlDropdown {...defaultProps} />, {
+      context: {
+        store: {},
+      },
+    })
 
-    expect(wrapper.find(SimpleOverlayTechnology)).toHaveLength(0)
+    const children = wrapper
+      .find(OverlayTechnology)
+      .dive()
+      .find("[data-test='overlay-children']")
+      .children()
+
+    expect(children).toHaveLength(0)
 
     wrapper.find("[data-test='edit']").simulate('click')
 
     const elements = wrapper
-      .find(SimpleOverlayTechnology)
+      .find(OverlayTechnology)
       .dive()
       .find(TemplateVariableEditor)