Repository: hashicorp/vault
File: ui/tests/acceptance/secrets/backend/totp/key-test.js (JavaScript)

Code before:
    this.uid = uuidv4();
    return authPage.login();
  });

  test('it views a key via menu option', async function (assert) {
    // Setup TOTP engine
    const mountPath = `totp-${this.uid}`;
    await enablePage.enable('totp', mountPath);

    const path = `totp-${this.uid}`;
    const keyName = 'totp-key';
    const issuer = 'totp-issuer';
    const accountName = 'totp-acount';

    assert.strictEqual(
      currentURL(),
      `/vault/secrets/${path}/list`,
      'After enabling totp secrets engine it navigates to keys list'
    );

    await click(SES.createSecret);
    await createVaultKey(keyName, issuer, accountName);
    await settled();
    await listPage.visit({ backend: path, id: keyName });
    await click('[data-test-popup-menu-trigger]');
    assert.dom('.hds-dropdown li:nth-of-type(1)').hasText('Details', 'first list item is "details"');
    await click('.hds-dropdown li:nth-of-type(1) a');
    assert.dom('.title').hasText(`TOTP key ${keyName}`);
    assert.dom('[data-test-totp-key-details]').exists();
  });

  test('it deletes a key via menu option', async function (assert) {
    // Setup TOTP engine
    const mountPath = `totp-${this.uid}`;
    await enablePage.enable('totp', mountPath);

    const path = `totp-${this.uid}`;
    const keyName = 'totp-key';
    const issuer = 'totp-issuer';
    const accountName = 'totp-acount';

    assert.strictEqual(
      currentURL(),
      `/vault/secrets/${path}/list`,
      'After enabling totp secrets engine it navigates to keys list'
    );

    await click(SES.createSecret);
    await createVaultKey(keyName, issuer, accountName);
    await settled();
    await listPage.visit({ backend: path, id: keyName });

Review comment (refactor):
usually we create selectors for this since the HDS team can change class names. Doing so dynamically can make the selector reusable, like this:

https://github.com/hashicorp/vault/blob/05f32b69ee55b934b06ac1e32d5c96d4fd71526d/ui/app/templates/components/identity/popup-alias.hbs#L33

```js
const SELECTORS = {
  menuItem: (item) => `[data-test-popup-menu="${item}"]`,
}
```
https://github.com/hashicorp/vault/blob/main/ui/tests/acceptance/access/identity/entities/index-test.js#L18

Code after:
    await fillIn(GENERAL.inputByAttr('issuer'), issuer);
    await fillIn(GENERAL.inputByAttr('accountName'), accountName);
    if (url) await fillIn(GENERAL.inputByAttr('url'), url);
    if (key) await fillIn(GENERAL.inputByAttr('key'), key);
    await click(GENERAL.saveButton);
  };

  hooks.beforeEach(async function () {
    this.uid = uuidv4();
    this.mountPath = `totp-${this.uid}`;
    this.path = `totp-${this.uid}`;
    this.keyName = 'totp-key';
    this.issuer = 'totp-issuer';
    this.accountName = 'totp-acount';
    this.url =
      'otpauth://totp/test-issuer:my-account?algorithm=SHA1&digits=6&issuer=test-issuer&period=30&secret=HICPOBIMFO4YYHFYX3QPVYUL2YEPVJKU';
    this.key = 'VCUDXBWFQXUEAIJYXH5YB62D5WFNQXFA';

    const flash = this.owner.lookup('service:flash-messages');
    this.flashSuccessSpy = sinon.spy(flash, 'success');

    await authPage.login();
    // Setup TOTP engine
    await visit('/vault/settings/mount-secret-backend');
    await mountBackend('totp', this.mountPath);
  });

  test('it views a key via menu option', async function (assert) {
    assert.strictEqual(
      currentURL(),
      `/vault/secrets/${this.path}/list`,
      'After enabling totp secrets engine it navigates to keys list'
    );

    await click(SES.createSecret);
    await createVaultKey(this.keyName, this.issuer, this.accountName);
    await visit(`/vault/secrets/${this.path}`);
    await click(GENERAL.menuTrigger);
    await click(`${SELECTORS.menuItem('details')}`);

    assert.dom('.title').hasText(`TOTP key ${this.keyName}`);
    assert.dom('[data-test-totp-key-details]').exists();

    assert.strictEqual(
      currentURL(),
      `/vault/secrets/${this.path}/show/${this.keyName}`,
      'After clicking details option it navigates to key detail view'
    );
  });

  test('it deletes a key via menu option', async function (assert) {