[console] Fix settings

src/core_plugins/console/public/src/directives/settings.html

@@ -14,6 +14,7 @@ <h4>Editor &amp; Output pane settings</h4>
           type="number"
           required
           class="form-control"
+          data-test-subj="setting-font-size-input"
           >
       </div>
     </div>
@@ -62,7 +63,8 @@ <h4>Autocomplete</h4>
     <button
       type="submit"
       ng-disabled="settingsForm.$invalid"
-      class="btn btn-primary">
+      class="btn btn-primary"
+      data-test-subj="settings-save-button">
       Save
     </button>
   </div>

src/core_plugins/console/public/src/settings.js

@@ -2,6 +2,9 @@ let $ = require('jquery');
 let es = require('./es');
 const storage = require('./storage');
 
+import getInput from './input'
+import getOutput from './output'
+
 function getFontSize() {
   return storage.get('font_size', 14);
 }
@@ -28,7 +31,7 @@ function setBasicAuth(mode) {
   return true;
 }
 
-function getAutocomplete() {
+export function getAutocomplete() {
   return storage.get('autocomplete_settings', { fields: true, indices: true });
 }
 
@@ -37,37 +40,29 @@ function setAutocomplete(settings) {
   return true;
 }
 
-function applyCurrentSettings(editor) {
+export function applyCurrentSettings(editor) {
   if (typeof editor === 'undefined') {
-    applyCurrentSettings(require('./input')());
-    applyCurrentSettings(require('./output')());
+    applyCurrentSettings(getInput());
+    applyCurrentSettings(getOutput());
   }
   if (editor) {
     editor.getSession().setUseWrapMode(getWrapMode());
     editor.$el.css('font-size', getFontSize() + 'px');
   }
 }
 
-function getCurrentSettings() {
+export function getCurrentSettings() {
   return {
     autocomplete: getAutocomplete(),
     wrapMode: getWrapMode(),
     fontSize: parseFloat(getFontSize()),
   };
 }
 
-function updateSettings({ fontSize, wrapMode, autocomplete}) {
+export function updateSettings({ fontSize, wrapMode, autocomplete}) {
   setFontSize(fontSize);
   setWrapMode(wrapMode);
   setAutocomplete(autocomplete);
-  require('./input')().focus();
+  getInput().focus();
   return getCurrentSettings();
 }
-
-module.exports = {
-  getAutocomplete,
-  applyCurrentSettings,
-
-  getCurrentSettings,
-  updateSettings,
-};

src/ui/public/kbn_top_nav/kbn_top_nav.html

@@ -1,4 +1,4 @@
-<navbar ng-show="kbnTopNav.isVisible()" class="kibana-nav-options">
+<navbar ng-show="kbnTopNav.isVisible()" class="kibana-nav-options" data-test-subj="top-nav">
   <div ng-transclude></div>
   <div class="button-group kibana-nav-actions" role="toolbar">
     <button
@@ -13,6 +13,7 @@
       tooltip-placement="bottom"
       tooltip-popup-delay="400"
       tooltip-append-to-body="1"
+      data-test-subj="menu-item-{{menuItem.key}}"
     >
     </button>
   </div>

test/functional/apps/console/_console.js

@@ -54,4 +54,18 @@ bdd.describe('console app', function describeIndexTests() {
       });
     });
   });
+
+  bdd.it('settings should allow changing the text size', async function () {
+    await PageObjects.console.setFontSizeSetting(20);
+    await PageObjects.common.try(async () => {
+      // the settings are not applied synchronously, so we retry for a time
+      expect(await PageObjects.console.getRequestFontSize()).to.be('20px');
+    });
+
+    await PageObjects.console.setFontSizeSetting(24);
+    await PageObjects.common.try(async () => {
+      // the settings are not applied synchronously, so we retry for a time
+      expect(await PageObjects.console.getRequestFontSize()).to.be('24px');
+    });
+  });
 });

test/support/page_objects/console_page.js

@@ -12,12 +12,16 @@ async function getVisibleTextFromAceEditor(editor) {
 }
 
 export default class ConsolePage {
-  init() {
+  init(remote) {
+    this.remote = remote;
+  }
 
+  async getRequestEditor() {
+    return await PageObjects.common.findTestSubject('console request-editor');
   }
 
   async getRequest() {
-    const requestEditor = await PageObjects.common.findTestSubject('console request-editor');
+    const requestEditor = await this.getRequestEditor();
     return await getVisibleTextFromAceEditor(requestEditor);
   }
 
@@ -35,4 +39,33 @@ export default class ConsolePage {
     const closeButton = await PageObjects.common.findTestSubject('console help-close-button');
     await closeButton.click();
   }
+
+  async openSettings() {
+    const settingsButton = await PageObjects.common.findTestSubject('console top-nav menu-item-settings');
+    await settingsButton.click();
+  }
+
+  async setFontSizeSetting(newSize) {
+    await this.openSettings();
+
+    // while the settings form opens/loads this may fail, so retry for a while
+    await PageObjects.common.try(async () => {
+      const fontSizeInput = await PageObjects.common.findTestSubject('console setting-font-size-input');
+      await fontSizeInput.clearValue();
+      await fontSizeInput.click();
+      await fontSizeInput.type(String(newSize));
+    });
+
+    const saveButton = await PageObjects.common.findTestSubject('console settings-save-button');
+    await saveButton.click();
+  }
+
+  async getFontSize(editor) {
+    const aceLine = await editor.findByClassName('ace_line');
+    return await aceLine.getComputedStyle('font-size');
+  }
+
+  async getRequestFontSize() {
+    return await this.getFontSize(await this.getRequestEditor());
+  }
 }