Merge pull request #516 from redbmk/zoom-minus-button-mouseout

ZoomControl minus button stays hovered on mouseout
alex3165 · Feb 4, 2018 · 5146624 · 5146624
2 parents b0bc490 + e9b483a
commit 5146624
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git a/src/__tests__/zoom-control.test.tsx b/src/__tests__/zoom-control.test.tsx
@@ -7,4 +7,54 @@ describe('ZoomControl', () => {
     const wrapper = shallow(<ZoomControl />);
     expect(wrapper).toBeDefined();
   });
+
+  describe('hovering over buttons', () => {
+    it('should highlight buttons on mouseover', () => {
+      const wrapper = shallow(<ZoomControl />);
+      const plus = () => wrapper.childAt(0);
+      const minus = () => wrapper.childAt(1);
+
+      expect(plus().props().style.opacity).toBe(0.95);
+      expect(minus().props().style.opacity).toBe(0.95);
+
+      plus().simulate('mouseover');
+      expect(plus().props().style.opacity).toBe(1);
+      expect(minus().props().style.opacity).toBe(0.95);
+
+      minus().simulate('mouseover');
+      expect(plus().props().style.opacity).toBe(0.95);
+      expect(minus().props().style.opacity).toBe(1);
+
+      plus().simulate('mouseover');
+      expect(plus().props().style.opacity).toBe(1);
+      expect(minus().props().style.opacity).toBe(0.95);
+    });
+
+    it('should remove highlight from plus button on mouseout', () => {
+      const wrapper = shallow(<ZoomControl />);
+      const plus = () => wrapper.childAt(0);
+      const minus = () => wrapper.childAt(1);
+
+      expect(plus().props().style.opacity).toBe(0.95);
+
+      plus().simulate('mouseover');
+      expect(plus().props().style.opacity).toBe(1);
+
+      minus().simulate('mouseout');
+      expect(plus().props().style.opacity).toBe(0.95);
+    });
+
+    it('should remove highlight from minus button on mouseout', () => {
+      const wrapper = shallow(<ZoomControl />);
+      const minus = () => wrapper.childAt(1);
+
+      expect(minus().props().style.opacity).toBe(0.95);
+
+      minus().simulate('mouseover');
+      expect(minus().props().style.opacity).toBe(1);
+
+      minus().simulate('mouseout');
+      expect(minus().props().style.opacity).toBe(0.95);
+    });
+  });
 });
diff --git a/src/zoom-control.tsx b/src/zoom-control.tsx
@@ -89,9 +89,7 @@ export default class ZoomControl extends React.Component<Props, State> {
   };
 
   private onMouseOut = () => {
-    if (!this.state.hover) {
-      this.setState({ hover: undefined });
-    }
+    this.setState({ hover: undefined });
   };
 
   private plusOver = () => {