Icu 6680 UI code editor for secrets (#1499)

* feat: 🎸 initial secret editor * feat: 🎸 Create Secret Editor for JSON Credentials ✅ Closes: ICU-6680 * style: 💄 Fix sass lint errors * style: 💄 Appease sass-lint rule for using --size in stylesheet * refactor: 💡 Set Icon size via component attribute * refactor: 💡 remove computed decorators for Secret Editor * refactor: 💡 update editor styles to using sizing variables * refactor: 💡 update styles and add comments * refactor: 💡 clean up styling for secret editor * refactor: 💡 update class names to be more verbose * chore: 🤖 move jsonlint import to rose index.js * refactor: 💡 remove duplicate margin style for skeleton body * refactor: 💡 add comments to SecretEditor component class * refactor: 💡 large updates to secret json editor * refactor: 💡 Move JSON Secret to form/field/ directory * style: 💄 fix padding for Secret Editor line numbers * chore: 🤖 disable property-sort-oder in .sasslintrc * refactor: 💡 reorder app.scss styles * test: 💍 Add integration tests for JSON Secret and Skeleton
2022-12-02 13:58:04 -06:00
1 parent c3d9fd8fc5
commit c62eb751e4
@@ -0,0 +1,20 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | form/field/json-secret/skeleton', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(2);
+    await render(hbs`
+      <Form::Field::JsonSecret::Skeleton>
+        Skeleton Message
+      </Form::Field::JsonSecret::Skeleton>
+    `);
+
+    assert.dom('.secret-editor-skeleton-wrapper').isVisible();
+    assert.dom('.secret-editor-skeleton-message').hasText('Skeleton Message');
+  });
+});
@@ -0,0 +1,82 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+
+module('Integration | Component | form/field/json-secret', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  hooks.beforeEach(function () {
+    this.model = {
+      json_object: '{}',
+    };
+  });
+
+  test('it renders the active editor', async function (assert) {
+    assert.expect(3);
+    await render(hbs`
+      <Form::Field::JsonSecret
+        @value={{this.model.json_object}}
+        @onInput={{fn (mut this.model.json_object)}}
+        @showEditButton={{false}}
+      />
+    `);
+
+    assert.dom('.secret-editor').isVisible();
+    assert.dom('.secret-editor-json').isVisible();
+    assert.dom('.secret-editor-json .CodeMirror-line').hasText(this.model.json_object);
+  });
+
+  test('it renders the disabled editor', async function (assert) {
+    assert.expect(3);
+    await render(hbs`
+      <Form::Field::JsonSecret
+        @disabled={{true}}
+        @value={{this.model.json_object}}
+        @onInput={{fn (mut this.model.json_object)}}
+        @showEditButton={{true}}
+      />
+    `);
+
+    assert.dom('.secret-editor').isVisible();
+    assert.dom('.secret-editor-json').doesNotExist();
+    assert.dom('.secret-editor-skeleton-wrapper').hasText('This secret is saved but won\'t be displayed');
+  });
+
+  test('it renders the actionable editor', async function (assert) {
+    assert.expect(3);
+    await render(hbs`
+      <Form::Field::JsonSecret
+        @disabled={{false}}
+        @value={{this.model.json_object}}
+        @onInput={{fn (mut this.model.json_object)}}
+        @showEditButton={{true}}
+      />
+    `);
+
+    assert.dom('.secret-editor').isVisible();
+    assert.dom('.secret-editor-json').doesNotExist();
+    assert.dom('.secret-editor-skeleton-wrapper').hasText('Click to replace this secret');
+  });
+
+  test('it renders the active editor from the actionable view', async function (assert) {
+    assert.expect(4);
+    await render(hbs`
+      <Form::Field::JsonSecret
+        @disabled={{false}}
+        @value={{this.model.json_object}}
+        @onInput={{fn (mut this.model.json_object)}}
+        @showEditButton={{true}}
+      />
+    `);
+
+    assert.dom('.secret-editor').isVisible();
+    assert.dom('.secret-editor-json').doesNotExist();
+    assert.dom('.secret-editor-skeleton-wrapper').hasText('Click to replace this secret');
+
+    await click('button')
+    assert.dom('.secret-editor-json').isVisible();
+  });
+});