Repository: hashicorp/vault
File: ui/tests/integration/components/oidc/scope-form-test.js (JavaScript)

Code before:
    // formatting here is purposeful so that it matches formatting in the template modal
    const exampleTemplate = `{
  "username": {{identity.entity.aliases.$MOUNT_ACCESSOR.name}},
  "contact": {
    "email": {{identity.entity.metadata.email}},
    "phone_number": {{identity.entity.metadata.phone_number}}
  },
  "groups": {{identity.entity.groups.names}}
}`;

    await render(hbs`
      <Oidc::ScopeForm
        @model={{this.model}}
        @onCancel={{this.onCancel}}
        @onSave={{this.onSave}}
      />
    `);

    await click('[data-test-oidc-scope-example]');
    assert.dom(MODAL('title')).hasText('Scope template', 'Modal title renders');
    assert.dom(MODAL('text')).hasText('Example of a JSON template for scopes:', 'Modal text renders');
    assert
      .dom('#scope-template-modal [data-test-copy-button]')
      .hasAttribute(
        'data-test-copy-button',
        exampleTemplate,
        'Modal copy button copies the example template'
      );
    assert.dom('.cm-string').hasText('"username"', 'Example template json renders');
    await click('[data-test-close-modal]');
    assert.dom('.hds#scope-template-modal').doesNotExist('Modal is hidden');
  });

  test('it should render error alerts when API returns an error', async function (assert) {
    assert.expect(2);
    this.model = this.store.createRecord('oidc/scope');
    this.server.post('/sys/capabilities-self', () => capabilitiesStub(OIDC_BASE_URL + '/scopes'));
    await render(hbs`
      <Oidc::ScopeForm
        @model={{this.model}}
        @onCancel={{this.onCancel}}
        @onSave={{this.onSave}}
      />
    `);
    await fillIn('[data-test-input="name"]', 'test-scope');
    await click(SELECTORS.scopeSaveButton);
    assert
      .dom(SELECTORS.inlineAlert)
      .hasText('There was an error submitting this form.', 'form error alert renders ');
    assert.dom('[data-test-message-error]').exists('alert banner renders');
  });

Review comment (suggestion):
If we don't have access to the copy button anymore - Should we keep an assertion that the code editor value is what we expect? There's been some issues in the past with code editors in modals working improperly (hopefully just due to codemirror weirdness)

Code after:
    await render(hbs`
      <Oidc::ScopeForm
        @model={{this.model}}
        @onCancel={{this.onCancel}}
        @onSave={{this.onSave}}
      />
    `);

    await click('[data-test-oidc-scope-example]');
    assert.dom(MODAL('title')).hasText('Scope template', 'Modal title renders');
    assert.dom(MODAL('text')).hasText('Example of a JSON template for scopes:', 'Modal text renders');
    assert.dom('#scope-template-modal .hds-icon-clipboard-copy').exists('Modal copy button exists');
    assert.dom('.token .string').hasText('"username"', 'Example template json renders');
    await click('[data-test-close-modal]');
    assert.dom('.hds#scope-template-modal').doesNotExist('Modal is hidden');
  });

  test('it should render error alerts when API returns an error', async function (assert) {
    assert.expect(2);
    this.model = this.store.createRecord('oidc/scope');
    this.server.post('/sys/capabilities-self', () => capabilitiesStub(OIDC_BASE_URL + '/scopes'));
    await render(hbs`
      <Oidc::ScopeForm
        @model={{this.model}}
        @onCancel={{this.onCancel}}
        @onSave={{this.onSave}}
      />
    `);
    await fillIn('[data-test-input="name"]', 'test-scope');
    await click(SELECTORS.scopeSaveButton);
    assert
      .dom(SELECTORS.inlineAlert)
      .hasText('There was an error submitting this form.', 'form error alert renders ');
    assert.dom('[data-test-message-error]').exists('alert banner renders');
  });
});