Repository: hashicorp/vault
File: ui/tests/acceptance/vault-reporting/index-test.js (JavaScript)

Code before:
    this.server.get('http://localhost:7357/v1/sys/utilization-report', () => mockedResponseWithData);
    await visit('/vault/usage-reporting');
    await waitFor('[data-test-vault-reporting-dashboard-counters]');
    assert
      .dom('[data-test-vault-reporting-dashboard-counters]')
      .exists('renders the counters dashboard block');

    const expectedCounters = ['Child namespaces', 'KV secrets', 'Secrets sync', 'PKI roles'];

    expectedCounters.forEach((counterLabel) => {
      assert
        .dom(`[data-test-vault-reporting-counter="${counterLabel}"]`)
        .exists(`counter "${counterLabel}" is rendered`);
    });

    assert.dom('[data-test-vault-reporting-counter="Child namespaces"]').includesText('1');
    assert.dom('[data-test-vault-reporting-counter="KV secrets"]').includesText('100');
  });

  test('dashboard card: Secret engines', async function (assert) {
    this.server.get('http://localhost:7357/v1/sys/utilization-report', () => mockedResponseWithData);
    await visit('/vault/usage-reporting');
    await waitFor('[data-test-vault-reporting-dashboard-secret-engines]');

    assert.dom('[data-test-vault-reporting-dashboard-secret-engines]').exists('renders Secret engines card');
    assert
      .dom(
        '[data-test-vault-reporting-dashboard-secret-engines] [data-test-vault-reporting-dashboard-card-title]'
      )
      .exists('title is present')
      .hasText('Secret engines', 'title is correct');
    assert
      .dom(
        '[data-test-vault-reporting-dashboard-secret-engines] [data-test-vault-reporting-dashboard-card-title-link]'
      )
      .exists('title link is present')
      .hasAttribute('href', 'secrets', 'link points to secrets');
    assert
      .dom(
        '[data-test-vault-reporting-dashboard-secret-engines] [data-test-vault-reporting-dashboard-card-description]'
      )
      .exists('description is present')
      .hasText('Enabled secret engines for this cluster.', 'description is correct');
    assert
      .dom('[data-test-vault-reporting-dashboard-secret-engines]')
      .includesText('aws nomad cubbyhole 47 46 45');
  });

  test('dashboard card: Authentication methods', async function (assert) {
    this.server.get('http://localhost:7357/v1/sys/utilization-report', () => mockedResponseWithData);
    await visit('/vault/usage-reporting');

Review comment (security):
Not necessary to update, but mostly an FYI. We typically use `const SELECTORS` var at either the top of the test file, or in a separate helper file if they'll be reused elsewhere, to streamline future test selector updates. Here's an [example](https://github.com/hashicorp/vault/blob/82eda875ddb9852d6c52bf80e511f1bd0e81e718/ui/tests/helpers/components/dashboard/dashboard-selectors.js#L7) of a dynamic selector so that the test file just references `SELECTORS.card('secret-engines'`). 


Code after:
  test('it renders the counters dashboard block with all expected counters', async function (assert) {
    this.server.get('sys/utilization-report', () => mockedResponseWithData);
    await visit('/vault/usage-reporting');
    await waitFor('[data-test-vault-reporting-dashboard-counters]');
    assert
      .dom('[data-test-vault-reporting-dashboard-counters]')
      .exists('renders the counters dashboard block');

    const expectedCounters = ['Child namespaces', 'KV secrets', 'Secrets sync', 'PKI roles'];

    expectedCounters.forEach((counterLabel) => {
      assert
        .dom(`[data-test-vault-reporting-counter="${counterLabel}"]`)
        .exists(`counter "${counterLabel}" is rendered`);
    });

    assert.dom('[data-test-vault-reporting-counter="Child namespaces"]').includesText('1');
    assert.dom('[data-test-vault-reporting-counter="KV secrets"]').includesText('100');
  });

  test('dashboard card: Secret engines', async function (assert) {
    this.server.get('sys/utilization-report', () => mockedResponseWithData);
    await visit('/vault/usage-reporting');
    await waitFor('[data-test-vault-reporting-dashboard-secret-engines]');

    assert.dom('[data-test-vault-reporting-dashboard-secret-engines]').exists('renders Secret engines card');
    assert
      .dom(
        '[data-test-vault-reporting-dashboard-secret-engines] [data-test-vault-reporting-dashboard-card-title]'
      )
      .exists('title is present')
      .hasText('Secret engines', 'title is correct');
    assert
      .dom(
        '[data-test-vault-reporting-dashboard-secret-engines] [data-test-vault-reporting-dashboard-card-title-link]'
      )
      .exists('title link is present')
      .hasAttribute('href', 'secrets', 'link points to secrets');
    assert
      .dom(
        '[data-test-vault-reporting-dashboard-secret-engines] [data-test-vault-reporting-dashboard-card-description]'
      )
      .exists('description is present')
      .hasText('Enabled secret engines for this cluster.', 'description is correct');
    assert
      .dom('[data-test-vault-reporting-dashboard-secret-engines]')
      .includesText('aws nomad cubbyhole 47 46 45');
  });

  test('dashboard card: Authentication methods', async function (assert) {
    this.server.get('sys/utilization-report', () => mockedResponseWithData);