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

Code before:
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

import authPage from 'vault/tests/pages/auth';
import { click, fillIn, currentURL, visit, waitUntil } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { GENERAL } from 'vault/tests/helpers/general-selectors';
import { SECRET_ENGINE_SELECTORS as SES } from 'vault/tests/helpers/secret-engine/secret-engine-selectors';
import { mountBackend } from 'vault/tests/helpers/components/mount-backend-form-helpers';
import { v4 as uuidv4 } from 'uuid';
import { create } from 'ember-cli-page-object';
import fm from 'vault/tests/pages/components/flash-message';

const flashMessage = create(fm);

const SELECTORS = {
  menuItem: (item) => `[data-test-popup-menu="${item}"]`,
};

module('Acceptance | totp key backend', function (hooks) {
  setupApplicationTest(hooks);

  const createVaultKey = async (keyName, issuer, accountName) => {
    await fillIn(GENERAL.inputByAttr('name'), keyName);
    await fillIn(GENERAL.inputByAttr('issuer'), issuer);
    await fillIn(GENERAL.inputByAttr('accountName'), accountName);
    await click('[data-test-totp-create]');
    await click(GENERAL.backButton);
  };

  const createNonVaultKey = async (keyName, issuer, accountName, url, key) => {
    await click('[data-test-radio="Other service"]');
    await fillIn(GENERAL.inputByAttr('name'), keyName);
    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('[data-test-totp-create]');
  };

Review comment (suggestion):
using anything from `ember-cli-page-object` is deprecated (I think i mentioned this in an earlier review). instead we want to use `sinon` to check flash messages. Here's an [example](https://github.com/hashicorp/vault/blob/main/ui/tests/integration/components/edit-form-test.js#L43). If this is used in multiple test, the spy can be defined in the `beforeEach` hook. 

Code after:
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

import authPage from 'vault/tests/pages/auth';
import { click, fillIn, currentURL, visit, waitUntil } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { GENERAL } from 'vault/tests/helpers/general-selectors';
import { SECRET_ENGINE_SELECTORS as SES } from 'vault/tests/helpers/secret-engine/secret-engine-selectors';
import { mountBackend } from 'vault/tests/helpers/components/mount-backend-form-helpers';
import { v4 as uuidv4 } from 'uuid';
import sinon from 'sinon';

const SELECTORS = {
  menuItem: (item) => `[data-test-popup-menu="${item}"]`,
};

module('Acceptance | totp key backend', function (hooks) {
  setupApplicationTest(hooks);

  const createVaultKey = async (keyName, issuer, accountName) => {
    await fillIn(GENERAL.inputByAttr('name'), keyName);
    await fillIn(GENERAL.inputByAttr('issuer'), issuer);
    await fillIn(GENERAL.inputByAttr('accountName'), accountName);
    await click(GENERAL.saveButton);
    await click(GENERAL.backButton);
  };

  const createNonVaultKey = async (keyName, issuer, accountName, url, key) => {
    await click('[data-test-radio="Other service"]');
    await fillIn(GENERAL.inputByAttr('name'), keyName);
    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();