UI json edit test (#5705)

* add new codemirror helpers

* adding json helpers to the secret pages

* mark the edit button / link as the edit element instead of the json toggle

* add acceptance tests for JSON editing

ui/app/templates/components/secret-edit.hbs

@@ -60,6 +60,7 @@
             @params={{array targetRoute model.id (query-params version=this.modelForData.version)}}
             @replace={{true}}
             class="link link-plain has-text-weight-semibold"
+            data-test-secret-edit="true"
           >
             Create new version
           </LinkTo>
@@ -68,6 +69,7 @@
             @params={{array targetRoute model.id}}
             @replace={{true}}
             class="link link-plain has-text-weight-semibold"
+            data-test-secret-edit="true"
           >
             Edit Secret
           </LinkTo>

ui/tests/acceptance/secrets/backend/kv/secret-test.js

@@ -64,4 +64,22 @@ module('Acceptance | secrets/secret/create', function(hooks) {
     assert.equal(currentRouteName(), 'vault.cluster.secrets.backend.list');
     assert.ok(currentURL().endsWith('/'), 'redirects to the path ending in a slash');
   });
+
+  test('it can edit via the JSON input', async function(assert) {
+    let content = JSON.stringify({ foo: 'fa', bar: 'boo' });
+    const path = `kv-path-${new Date().getTime()}`;
+    await listPage.visitRoot({ backend: 'secret' });
+    await listPage.create();
+    await editPage.path(path).toggleJSON();
+    await editPage.editor.fillIn(this, content);
+    await editPage.save();
+
+    assert.equal(currentRouteName(), 'vault.cluster.secrets.backend.show', 'redirects to the show page');
+    assert.ok(showPage.editIsPresent, 'shows the edit button');
+    assert.equal(
+      showPage.editor.content(this),
+      JSON.stringify({ bar: 'boo', foo: 'fa' }, null, 2),
+      'saves the content'
+    );
+  });
 });

ui/tests/helpers/codemirror.js

+const invariant = (truthy, error) => {
+  if (!truthy) throw new Error(error);
+};
+
+export default function(context, selector) {
+  let cmService = context.owner.lookup('service:code-mirror');
+
+  let element = document.querySelector(selector);
+  invariant(element, `Selector ${selector} matched no elements`);
+
+  let cm = cmService.instanceFor(element.id);
+  invariant(cm, `No registered CodeMirror instance for ${selector}`);
+
+  return cm;
+}

ui/tests/pages/helpers/codemirror.js

+import getCodeMirrorInstance from 'vault/tests/helpers/codemirror';
+// Like fillable, but for the CodeMirror editor
+//
+// Usage: fillIn: codeFillable('[data-test-editor]')
+//        Page.fillIn(code);
+export function codeFillable(selector) {
+  return {
+    isDescriptor: true,
+
+    get() {
+      return function(context, code) {
+        const cm = getCodeMirrorInstance(context, selector);
+        cm.setValue(code);
+        return this;
+      };
+    },
+  };
+}
+
+// Like text, but for the CodeMirror editor
+//
+// Usage: content: code('[data-test-editor]')
+//        Page.code(); // some = [ 'string', 'of', 'code' ]
+export function code(selector) {
+  return {
+    isDescriptor: true,
+    get() {
+      return function(context) {
+        const cm = getCodeMirrorInstance(context, selector);
+        return cm.getValue();
+      };
+    },
+  };
+}

ui/tests/pages/secrets/backend/kv/edit-secret.js

 import { Base } from '../create';
 import { clickable, visitable, create, fillable } from 'ember-cli-page-object';
-
+import { codeFillable } from 'vault/tests/pages/helpers/codemirror';
 export default create({
   ...Base,
   path: fillable('[data-test-secret-path]'),
@@ -11,6 +11,10 @@ export default create({
   confirmBtn: clickable('[data-test-confirm-button]'),
   visitEdit: visitable('/vault/secrets/:backend/edit/:id'),
   visitEditRoot: visitable('/vault/secrets/:backend/edit'),
+  toggleJSON: clickable('[data-test-secret-json-toggle]'),
+  editor: {
+    fillIn: codeFillable('[data-test-component="json-editor"]'),
+  },
   deleteSecret() {
     return this.deleteBtn().confirmBtn();
   },

ui/tests/pages/secrets/backend/kv/show.js

 import { Base } from '../show';
 import { create, clickable, collection, isPresent } from 'ember-cli-page-object';
+import { code } from 'vault/tests/pages/helpers/codemirror';
 
 export default create({
   ...Base,
   rows: collection('data-test-row-label'),
-  edit: clickable('[data-test-secret-json-toggle]'),
-  editIsPresent: isPresent('[data-test-secret-json-toggle]'),
+  toggleJSON: clickable('[data-test-secret-json-toggle]'),
+  toggleIsPresent: isPresent('[data-test-secret-json-toggle]'),
+  edit: clickable('[data-test-secret-edit]'),
+  editIsPresent: isPresent('[data-test-secret-edit]'),
+  editor: {
+    content: code('[data-test-component="json-editor"]'),
+  },
 });