tests added

danreeves · Sep 26, 2018 · d43f966 · d43f966
1 parent 27b3e3d
commit d43f966
Showing 1 changed file with 38 additions and 5 deletions.
diff --git a/tests/unit/component.test.js b/tests/unit/component.test.js
@@ -87,15 +87,36 @@ describe('TetherComponent', () => {
     expect(document.querySelector('.tether-element')).toBeFalsy();
   });
 
-  it('should destroy the tether element if the second child is unmounted', () => {
+  it('should not create a tether element if there is no target', () => {
+    wrapper = mount(
+      <TetherComponent attachment="top left">
+        {null}
+        <div id={'child2'} />
+      </TetherComponent>
+    );
+    expect(document.querySelector('.tether-element')).toBeFalsy();
+  });
+
+  it('should not create a tether element if there is no dom node for target', () => {
+    const FalsyComponent = () => null;
+    wrapper = mount(
+      <TetherComponent attachment="top left">
+        <FalsyComponent />
+        <FalsyComponent />
+      </TetherComponent>
+    );
+    expect(document.querySelector('.tether-element')).toBeFalsy();
+  });
+
+  it('should destroy the tether element if the first/second child is unmounted', () => {
     class ToggleComponent extends React.Component {
-      state = { on: true };
+      state = { firstOn: true, secondOn: true };
 
       render() {
         return (
           <TetherComponent attachment="top left">
-            <div id="child1" />
-            {this.state.on && <div id="child2" />}
+            {this.state.firstOn && <div id="child1" />}
+            {this.state.secondOn && <div id="child2" />}
           </TetherComponent>
         );
       }
@@ -106,11 +127,23 @@ describe('TetherComponent', () => {
     expect(document.querySelector('.tether-element')).toBeTruthy();
     expect(document.querySelector('.tether-element #child2')).toBeTruthy();
 
-    wrapper.setState({ on: false });
+    wrapper.setState({ secondOn: false });
 
     expect(wrapper.find('#child1').exists()).toBeTruthy();
     expect(document.querySelector('.tether-element')).toBeFalsy();
     expect(document.querySelector('.tether-element #child2')).toBeFalsy();
+
+    wrapper.setState({ firstOn: false, secondOn: true });
+
+    expect(wrapper.find('#child1').exists()).toBeFalsy();
+    expect(document.querySelector('.tether-element')).toBeFalsy();
+    expect(document.querySelector('.tether-element #child2')).toBeFalsy();
+
+    wrapper.setState({ firstOn: false, secondOn: false });
+
+    expect(wrapper.find('#child1').exists()).toBeFalsy();
+    expect(document.querySelector('.tether-element')).toBeFalsy();
+    expect(document.querySelector('.tether-element #child2')).toBeFalsy();
   });
 
   it('allows changing the tether element tag', () => {