Repository: hashicorp/vault
File: ui/tests/integration/components/tools/wrap-test.js (JavaScript)

Code before:
    await click(TS.submit);

    await waitUntil(() => find(TS.button('Done')));
    await click(TS.button('Done'));
    assert.strictEqual(codemirror().getValue(' '), '{ }', 'json editor resets to empty object');
    assert.dom(TTL.toggleByLabel('Wrap TTL')).isNotChecked('Wrap TTL resets to unchecked');
    await click(TTL.toggleByLabel('Wrap TTL'));
    assert.dom(TTL.valueInputByLabel('Wrap TTL')).hasValue('30', 'ttl resets to default when toggled');
  });

  test('it preserves input data on back', async function (assert) {
    await this.renderComponent();
    await codemirror().setValue(this.wrapData);
    await click(TS.submit);

    await waitUntil(() => find(TS.button('Back')));
    await click(TS.button('Back'));
    assert.strictEqual(codemirror().getValue(' '), `{"foo": "bar"}`, 'json editor has original data');
    assert.dom(TTL.toggleByLabel('Wrap TTL')).isNotChecked('Wrap TTL defaults to unchecked');
  });

  test('it disables/enables submit based on json linting', async function (assert) {
    await this.renderComponent();
    await codemirror().setValue(`{bad json}`);
    assert.dom(TS.submit).isDisabled('submit disables if json editor has linting errors');

    await codemirror().setValue(this.wrapData);
    assert.dom(TS.submit).isEnabled('submit reenables if json editor has no linting errors');
  });
});


Review comment (suggestion):
Is there a reason to stringify?  We can just compare the two objects below, right? (Instead of need to call `JSON.parse()` on 145)

Code after:
  test('it toggles between views and preserves input data', async function (assert) {
    assert.expect(6);
    await this.renderComponent();
    await codemirror().setValue(this.wrapData);
    assert.dom('[data-test-component="json-editor-title"]').hasText('Data to wrap (json-formatted)');
    await click('[data-test-toggle-input="json"]');
    assert.dom('[data-test-component="json-editor-title"]').doesNotExist();
    assert.dom('[data-test-kv-key="0"]').hasValue('foo');
    assert.dom('[data-test-kv-value="0"]').hasValue('bar');
    await click('[data-test-toggle-input="json"]');
    assert.dom('[data-test-component="json-editor-title"]').exists();
    assert.strictEqual(
      codemirror().getValue(' '),
      `{   \"foo": \"bar" }`, // eslint-disable-line no-useless-escape
      'json editor has original data'
    );
  });

  test('it submits from kv view', async function (assert) {
    assert.expect(6);

    const multilineData = `this is a multi-line secret
      that contains
      some seriously important config`;
    const flashSpy = sinon.spy(this.owner.lookup('service:flash-messages'), 'success');
    const updatedWrapData = JSON.stringify({
      ...JSON.parse(this.wrapData),
      foo: 'bar',
      foo2: multilineData,
    });

    this.server.post('sys/wrapping/wrap', (schema, { requestBody, requestHeaders }) => {
      const payload = JSON.parse(requestBody);
      assert.propEqual(payload, JSON.parse(updatedWrapData), `payload contains data: ${requestBody}`);
      assert.strictEqual(requestHeaders['X-Vault-Wrap-TTL'], '30m', 'request header has default wrap ttl');
      return {
        wrap_info: {
          token: this.token,
          accessor: '5yjKx6Om9NmBx1mjiN1aIrnm',
          ttl: 1800,
          creation_time: '2024-06-07T12:02:22.096254-07:00',
          creation_path: 'sys/wrapping/wrap',
        },
      };
    });

    await this.renderComponent();
    await click('[data-test-toggle-input="json"]');
    await fillIn('[data-test-kv-key="0"]', 'foo');
    await fillIn('[data-test-kv-value="0"]', 'bar');
    await click('[data-test-kv-add-row="0"]');