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

Code before:

import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { visit, currentURL, waitFor } from '@ember/test-helpers';
import { login } from 'vault/tests/helpers/auth/auth-helpers';
import { setupMirage } from 'ember-cli-mirage/test-support';

const mockedEmptyResponse = {
  data: {
    auth_methods: {},
    kvv1_secrets: 0,
    kvv2_secrets: 0,
    lease_count_quotas: {},
    leases_by_auth_method: {},
    replication_status: {},
    secret_engines: {},
  },
};

const mockedResponseWithData = {
  data: {
    auth_methods: { cats: 42 },
    kvv1_secrets: 60,
    kvv2_secrets: 40,
    lease_count_quotas: {
      global_lease_count_quota: { capacity: 420000, count: 210000, name: 'default' },
      total_lease_count_quotas: 1,
    },
    namespaces: 1,
    replication_status: {
      dr_primary: true,
      dr_state: 'enabled',
      pr_primary: false,
      pr_state: 'enabled',
    },
    secret_engines: { dogs: 43 },
  },
};

module('Acceptance | vault-reporting', function (hooks) {
  setupApplicationTest(hooks);
  setupMirage(hooks);

  hooks.beforeEach(async function () {
    await login();
  });

  test('it visits the usage reporting dashboard and renders the header', async function (assert) {
    await visit('/vault/usage-reporting');
    assert.strictEqual(currentURL(), '/vault/usage-reporting', 'navigates to usage reporting dashboard');
    assert.dom('.hds-page-header').includesText('Vault Usage', 'renders the "Vault Usage" header');

Review comment (refactor):
Up to you guys, but I recommend creating a vault-usage helper directory & file. Similar to something like [this](https://github.com/hashicorp/vault/blob/main/ui/tests/helpers/kubernetes/kubernetes-selectors.ts). 

Code after:

import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { visit, currentURL, waitFor, click } from '@ember/test-helpers';
import { login } from 'vault/tests/helpers/auth/auth-helpers';
import { setupMirage } from 'ember-cli-mirage/test-support';
import { mockedResponseWithData, mockedEmptyResponse } from 'vault/tests/helpers/vault-usage/mocks';

module('Acceptance | enterprise vault-reporting', function (hooks) {
  setupApplicationTest(hooks);
  setupMirage(hooks);

  hooks.beforeEach(async function () {
    await login();
  });

  test('it visits the usage reporting dashboard and renders the header', async function (assert) {
    await visit('/vault/dashboard');
    await click('[data-test-sidebar-nav-link="Vault Usage"]');
    assert.strictEqual(currentURL(), '/vault/usage-reporting', 'navigates to usage reporting dashboard');
    assert.dom('.hds-page-header').includesText('Vault Usage', 'renders the "Vault Usage" header');
  });

  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(