zoomers

(js tests for page zoom)
sz3 · Feb 21, 2020 · ebaa8ee · ebaa8ee
1 parent 716be11
commit ebaa8ee
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 5 deletions.
diff --git a/js_tests/mock_api.js b/js_tests/mock_api.js
@@ -88,6 +88,24 @@ return {
     return _thenDoIt(_response['removeKeyfile']);
   },
 
+  zoom : function()
+  {
+    _calls.push('zoom()');
+    return _thenDoIt(_response['zoom']);
+  },
+
+  zoomChange : function(amount)
+  {
+    _calls.push('zoomChange(' + amount + ')');
+    return _thenDoIt(_response['zoomChange']);
+  },
+
+  zoomReset : function()
+  {
+    _calls.push('zoomReset()');
+    return _thenDoIt(_response['zoomReset']);
+  },
+
   downloadArchive : function(mfn)
   {
     _calls.push('downloadArchive(' + mfn + ')');

diff --git a/js_tests/test_settings.js b/js_tests/test_settings.js
@@ -107,3 +107,51 @@ QUnit.test( "remove keyfile", function( assert ) {
   assert.deepEqual(Api.calls(), ['removeKeyfile(key.one)']);
   assert.deepEqual(getKeyfileEntries(), ['/path/to/key']);
 });
+
+QUnit.test( "change zoom", function( assert ) {
+  settingsSetup();
+  Api.setResponseForCall('zoomChange', 120);
+  Api.setResponseForCall('zoomReset', 100);
+
+  // increase zoom
+  $('#settings .zoom-setting button')[2].click();
+
+  assert.deepEqual(Api.calls(), ['zoomChange(10)']);
+  assert.equal(document.body.style.zoom, '120%');
+  Api.clear();
+
+  // decrease zoom
+  $('#settings .zoom-setting button')[0].click();
+  assert.deepEqual(Api.calls(), ['zoomChange(-10)']);
+  Api.clear();
+
+  // reset zoom
+  $('#settings .zoom-setting button')[1].click();
+  assert.deepEqual(Api.calls(), ['zoomReset()']);
+  assert.equal(document.body.style.zoom, '100%');
+});
+
+QUnit.test( "change zoom", function( assert ) {
+  settingsSetup();
+  Api.setResponseForCall('zoomChange', 120);
+  Api.setResponseForCall('zoomReset', 100);
+
+  // increase zoom
+  $('#settings .zoom-setting button')[2].click();
+
+  assert.deepEqual(Api.calls(), ['zoomChange(10)']);
+  assert.equal(document.body.style.zoom, '120%');
+  assert.equal($('#settings .zoom-setting-current').text(), '120%');
+  Api.clear();
+
+  // decrease zoom
+  $('#settings .zoom-setting button')[0].click();
+  assert.deepEqual(Api.calls(), ['zoomChange(-10)']);
+  Api.clear();
+
+  // reset zoom
+  $('#settings .zoom-setting-current').click();
+  assert.deepEqual(Api.calls(), ['zoomReset()']);
+  assert.equal(document.body.style.zoom, '100%');
+  assert.equal($('#settings .zoom-setting-current').text(), '100%');
+});
diff --git a/js_tests/tests.html b/js_tests/tests.html
@@ -71,9 +71,9 @@ <h2 class="content-subhead">Keyfiles</h2>
   <button class="pure-button settings-keyfiles-add" href="javascript:;" onclick="Settings.updateKeyfilesDir()">Find</button>
 
   <h2 class="content-subhead">Zoom</h2>
-  <div class="pure-button-group" role="group" aria-label="...">
+  <div class="pure-button-group zoom-setting" role="group" aria-label="...">
     <button class="pure-button" href="javascript:;" onclick="Settings.zoomOut()">-</button>
-    <button class="current-zoom pure-button" href="javascript:;" onclick="Settings.zoomReset()">100%</button>
+    <button class="zoom-setting-current pure-button" href="javascript:;" onclick="Settings.zoomReset()">100%</button>
     <button class="pure-button" href="javascript:;" onclick="Settings.zoomIn()">+</button>
   </div>
 </div>

diff --git a/pogui/web/index.html b/pogui/web/index.html
@@ -75,9 +75,9 @@ <h2 class="content-subhead">Keyfiles</h2>
   <button class="pure-button settings-keyfiles-add" href="javascript:;" onclick="Settings.updateKeyfilesDir()">Find</button>
 
   <h2 class="content-subhead">Zoom</h2>
-  <div class="pure-button-group" role="group" aria-label="...">
+  <div class="pure-button-group zoom-setting" role="group" aria-label="...">
     <button class="pure-button" href="javascript:;" onclick="Settings.zoomOut()">-</button>
-    <button class="current-zoom pure-button" href="javascript:;" onclick="Settings.zoomReset()">100%</button>
+    <button class="zoom-setting-current pure-button" href="javascript:;" onclick="Settings.zoomReset()">100%</button>
     <button class="pure-button" href="javascript:;" onclick="Settings.zoomIn()">+</button>
   </div>
 </div>

diff --git a/pogui/web/settings.js b/pogui/web/settings.js
@@ -64,7 +64,7 @@ return {
   zoom : function(percent)
   {
     percent += '%';
-    $('#settings .current-zoom').text(percent);
+    $('#settings .zoom-setting-current').text(percent);
     document.body.style.zoom = percent;
   },