[UI] [VAULT-36185] Acceptance tests for Reporting #30627

erentantekin · 2025-05-14T19:52:59Z

Description

[UI] VAULT-36185 Acceptance tests for Reporting

Adds acceptance tests for reporting dashboard.

TODO only if you're a HashiCorp employee

Backport Labels: If this fix needs to be backported, use the appropriate backport/ label that matches the desired release branch. Note that in the CE repo, the latest release branch will look like backport/x.x.x, but older release branches will be backport/ent/x.x.x+ent.
- LTS: If this fixes a critical security vulnerability or severity 1 bug, it will also need to be backported to the current LTS versions of Vault. To ensure this, use all available enterprise labels.
ENT Breakage: If this PR either 1) removes a public function OR 2) changes the signature
of a public function, even if that change is in a CE file, double check that
applying the patch for this PR to the ENT repo and running tests doesn't
break any tests. Sometimes ENT only tests rely on public functions in CE
files.
Jira: If this change has an associated Jira, it's referenced either
in the PR description, commit message, or branch name.
RFC: If this change has an associated RFC, please link it in the description.
ENT PR: If this change has an associated ENT PR, please link it in the
description. Also, make sure the changelog is in this PR, not in your ENT PR.

github-actions · 2025-05-14T19:56:55Z

Build Results:
All builds succeeded! ✅

github-actions · 2025-05-14T20:17:29Z

CI Results:
All Go tests succeeded! ✅

Monkeychip · 2025-05-15T15:42:52Z

ui/tests/acceptance/vault-reporting/index-test.js

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


Up to you guys, but I recommend creating a vault-usage helper directory & file. Similar to something like this.

Monkeychip · 2025-05-15T15:43:43Z

ui/tests/acceptance/vault-reporting/index-test.js

+    await waitFor('[data-test-dashboard-secret-engines]');
+
+    const card = document.querySelector('[data-test-dashboard-secret-engines]');
+    assert.ok(card, 'renders Secret engines card');


We try not to use assert.ok, but instead assert.true or assert.false

Monkeychip · 2025-05-15T15:45:32Z

ui/tests/acceptance/vault-reporting/index-test.js

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


To help avoid confusion with other areas of our app that have the concept of dashboard, could we change these selectors here to something like data-test-usage-counters? If you do a quick search of the app you can see the use of data-test-dashboard-... in several places.

ui/tests/acceptance/vault-reporting/index-test.js

Monkeychip · 2025-05-15T15:49:59Z

ui/tests/acceptance/vault-reporting/index-test.js

+      .includesText('Global lease count quota', 'Lease quota empty state: docs link is shown');
+  });
+
+  //


Suggested change

//

hellobontempo · 2025-05-15T16:09:01Z

ui/tests/acceptance/vault-reporting/index-test.js

+
+const mockedResponseWithData = {
+  data: {
+    auth_methods: { cats: 42 },


Are the keys here auth method types or paths? I'm guessing paths because of the numerical number. For posterity it might be helpful to name these more similar to the real-world.

yes, they're paths. i updated their names and added more options.

hellobontempo · 2025-05-27T19:49:08Z

ui/tests/acceptance/vault-reporting/index-test.js

+  });
+
+  test('it renders the counters dashboard block with all expected counters', async function (assert) {
+    this.server.get('http://localhost:7357/v1/sys/utilization-report', () => mockedResponseWithData);


typically we remove the origin from the url example when stubbing mirage responses so that if something with the host in CI changes tests won't fail. Removing v1 should also be possible because the server should automatically prefix that

Suggested change

this.server.get('http://localhost:7357/v1/sys/utilization-report', () => mockedResponseWithData);

this.server.get('sys/utilization-report', () => mockedResponseWithData);

Co-authored-by: Angel Garbarino <Monkeychip@users.noreply.github.com>

hellobontempo · 2025-05-27T20:06:14Z

ui/tests/acceptance/vault-reporting/index-test.js

+    await login();
+  });
+
+  test('it visits the usage reporting dashboard and renders the header', async function (assert) {


Since this test is asserting navigation, I think it would be a little more resilient to click the sidebar nav link rather than visit the route directly. That way we get the added benefit of testing the conditionals wrapping the link (which from what I could tell, currently only have integration tests)

hellobontempo · 2025-05-27T20:09:47Z

ui/tests/acceptance/vault-reporting/index-test.js

+    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');


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 of a dynamic selector so that the test file just references SELECTORS.card('secret-engines').

hellobontempo · 2025-05-27T21:14:21Z

ui/tests/acceptance/vault-reporting/index-test.js

+
+  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"]');


👏 awesome, thanks!

erentantekin requested a review from a team as a code owner May 14, 2025 19:52

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label May 14, 2025

erentantekin added this to the 1.20.0-rc milestone May 15, 2025

erentantekin added the pr/no-changelog label May 15, 2025

Monkeychip reviewed May 15, 2025

View reviewed changes

hellobontempo reviewed May 15, 2025

View reviewed changes

erentantekin requested review from a team as code owners May 23, 2025 14:08

erentantekin requested review from anwittin and brewgator May 23, 2025 14:08

erentantekin force-pushed the ui/VAULT-36185 branch from 9d12a42 to e640f22 Compare May 23, 2025 14:11

erentantekin removed request for a team, anwittin and brewgator May 23, 2025 14:26

erentantekin force-pushed the ui/VAULT-36185 branch from 9102ae8 to 40e75f6 Compare May 27, 2025 17:33

erentantekin added 3 commits May 27, 2025 10:34

tests

1c6d179

feedback

3c4a4f8

data test tags'

1544ba1

erentantekin force-pushed the ui/VAULT-36185 branch from 40e75f6 to 1544ba1 Compare May 27, 2025 17:34

erentantekin enabled auto-merge (squash) May 27, 2025 19:03

hellobontempo reviewed May 27, 2025

View reviewed changes

Update ui/tests/acceptance/vault-reporting/index-test.js

8188249

Co-authored-by: Angel Garbarino <Monkeychip@users.noreply.github.com>

hellobontempo reviewed May 27, 2025

View reviewed changes

update url

8a9acee

hellobontempo reviewed May 27, 2025

View reviewed changes

click the relevant link instead of navigating through url

2c475fb

hellobontempo approved these changes May 27, 2025

View reviewed changes

erentantekin merged commit bc430db into main May 27, 2025
33 checks passed

erentantekin deleted the ui/VAULT-36185 branch May 27, 2025 21:23

drivera258 pushed a commit that referenced this pull request Jun 4, 2025

[UI] [VAULT-36185] Acceptance tests for Reporting (#30627)

89e90c0

drivera258 pushed a commit that referenced this pull request Jun 11, 2025

[UI] [VAULT-36185] Acceptance tests for Reporting (#30627)

65c2bee

Erfankam pushed a commit to Erfankam/vault that referenced this pull request Sep 1, 2025

[UI] [VAULT-36185] Acceptance tests for Reporting (hashicorp#30627)

434311e

	this.server.get('http://localhost:7357/v1/sys/utilization-report', () => mockedResponseWithData);
	this.server.get('sys/utilization-report', () => mockedResponseWithData);

[UI] [VAULT-36185] Acceptance tests for Reporting #30627

[UI] [VAULT-36185] Acceptance tests for Reporting #30627

Uh oh!

Conversation

erentantekin commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

TODO only if you're a HashiCorp employee

Uh oh!

github-actions bot commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

erentantekin commented May 14, 2025 •

edited

Loading

github-actions bot commented May 14, 2025 •

edited

Loading

github-actions bot commented May 14, 2025 •

edited

Loading