diff --git a/core/zoom_controls.js b/core/zoom_controls.js
index b69d3e128..f5b507508 100644
--- a/core/zoom_controls.js
+++ b/core/zoom_controls.js
@@ -277,7 +277,7 @@ Blockly.ZoomControls.prototype.createZoomOutSvg_ = function(rnd) {
 
   // Attach listener.
   this.onZoomOutWrapper_ = Blockly.bindEventWithChecks_(
-      zoomoutSvg, 'mousedown', null, this.zoom_.bind(this, -1));
+      this.zoomOutGroup_, 'mousedown', null, this.zoom_.bind(this, -1));
 };
 
 /**
@@ -328,7 +328,7 @@ Blockly.ZoomControls.prototype.createZoomInSvg_ = function(rnd) {
 
   // Attach listener.
   this.onZoomInWrapper_ = Blockly.bindEventWithChecks_(
-      zoominSvg, 'mousedown', null, this.zoom_.bind(this, 1));
+      this.zoomInGroup_, 'mousedown', null, this.zoom_.bind(this, 1));
 };
 
 /**
@@ -396,7 +396,7 @@ Blockly.ZoomControls.prototype.createZoomResetSvg_ = function(rnd) {
 
   // Attach event listeners.
   this.onZoomResetWrapper_ = Blockly.bindEventWithChecks_(
-      zoomresetSvg, 'mousedown', null, this.resetZoom_.bind(this));
+      this.zoomResetGroup_, 'mousedown', null, this.resetZoom_.bind(this));
 };
 
 /**
diff --git a/tests/mocha/index.html b/tests/mocha/index.html
index b725c4daf..967975d5b 100644
--- a/tests/mocha/index.html
+++ b/tests/mocha/index.html
@@ -86,6 +86,7 @@
     <script src="workspace_comment_test.js"></script>
     <script src="xml_procedures_test.js"></script>
     <script src="xml_test.js"></script>
+    <script src="zoom_controls_test.js"></script>
 
     <div id="blocklyDiv"></div>
     <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-simple" style="display: none">
diff --git a/tests/mocha/zoom_controls_test.js b/tests/mocha/zoom_controls_test.js
new file mode 100644
index 000000000..ef0028d84
--- /dev/null
+++ b/tests/mocha/zoom_controls_test.js
@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+suite("Zoom Controls", function() {
+  setup(function() {
+    sharedTestSetup.call(this);
+    this.workspace = Blockly.inject('blocklyDiv',
+        {'zoom': {'controls': true}});
+    this.zoomControls = this.workspace.zoomControls_;
+  });
+  teardown(function() {
+    sharedTestTeardown.call(this);
+  });
+
+  suite("Events", function() {
+    function closeToMatcher(expectedValue, delta) {
+      return sinon.match(function(value) {
+        return Math.abs(value - expectedValue) <= delta;
+      });
+    }
+    test("Zoom in", function() {
+      simulateClick(this.zoomControls.zoomInGroup_);
+
+      assertEventFired(
+          this.eventsFireStub, Blockly.Events.Ui,
+          {element: 'zoom', oldValue: 1, newValue: closeToMatcher(1.2, 0.05)},
+          this.workspace.id, null);
+      assertEventNotFired(
+          this.eventsFireStub, Blockly.Events.Ui, {element: 'click'});
+    });
+    test("Zoom out", function() {
+      simulateClick(this.zoomControls.zoomOutGroup_);
+
+      assertEventFired(
+          this.eventsFireStub, Blockly.Events.Ui,
+          {element: 'zoom', oldValue: 1, newValue: closeToMatcher(0.8, 0.05)},
+          this.workspace.id, null);
+      assertEventNotFired(
+          this.eventsFireStub, Blockly.Events.Ui, {element: 'click'});
+    });
+    test("Reset zoom", function() {
+      simulateClick(this.zoomControls.zoomResetGroup_);
+
+      assertEventFired(
+          this.eventsFireStub, Blockly.Events.Ui,
+          {element: 'zoom', oldValue: 1, newValue: 1},
+          this.workspace.id, null);
+      assertEventNotFired(
+          this.eventsFireStub, Blockly.Events.Ui, {element: 'click'});
+    });
+  });
+});