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

Code before:
      await settled();
      // the namespace path will include all of the namespaces up to this point
      const targetNamespace = nses.slice(0, i + 1).join('/');
      const url = `/vault/secrets?namespace=${targetNamespace}`;
      // this is usually triggered when creating a ns in the form -- trigger a reload of the namespaces manually
      await click('[data-test-namespace-toggle]');
      await click('[data-test-refresh-namespaces]');
      await waitFor(`[data-test-namespace-link="${targetNamespace}"]`);
      // check that the full namespace path, like "beep/boop", shows in the toggle display
      assert
        .dom(`[data-test-namespace-link="${targetNamespace}"]`)
        .hasText(targetNamespace, `shows the namespace ${targetNamespace} in the toggle component`);
      // because quint does not like page reloads, visiting url directly instead of clicking on namespace in toggle
      await visit(url);
    }

    await logout.visit();
    await settled();
    await authPage.visit({ namespace: '/beep/boop' });
    await settled();
    await authPage.tokenInput('root').submit();
    await settled();

    // Open the namespace picker & wait for it to render
    await click('[data-test-namespace-toggle]');
    await waitFor('svg[data-test-icon="check"]');

    // Find the selected element with the check icon & ensure it exists
    const checkIcon = document.querySelector('[data-test-namespace-link] svg[data-test-icon="check"]');
    assert.ok(checkIcon, 'A selected namespace link with the check icon exists');

    // Get the selected namespace with the data-test-namespace-link attribute & ensure it exists
    const selectedNamespace = checkIcon.closest('[data-test-namespace-link]');
    assert.ok(selectedNamespace, 'The selected namespace link exists');

    // Verify that the selected namespace has the correct data-test-namespace-link attribute and path value
    assert.strictEqual(
      selectedNamespace.getAttribute('data-test-namespace-link'),
      'beep/boop',
      'The current namespace does not begin or end with /'
    );
  });

  test('it shows the regular namespace toolbar when not managed', async function (assert) {
    // This test is the opposite of the test in managed-namespace-test
    await logout.visit();
    assert.strictEqual(currentURL(), '/vault/auth?with=token', 'Does not redirect');
    assert.dom('[data-test-namespace-toolbar]').exists('Normal namespace toolbar exists');
    assert
      .dom('[data-test-managed-namespace-root]')
      .doesNotExist('Managed namespace indicator does not exist');

Review comment (refactor):
A pattern we're moving towards with data-test selectors, especially those that are commonly used, is to import them from `tests/helpers`. See general-selectors [here](https://github.com/hashicorp/vault/blob/main/ui/tests/helpers/general-selectors.ts#L15) for the icon one and it being used [here](https://github.com/hashicorp/vault/blob/main/ui/tests/integration/components/tools/unwrap-test.js#L85).

A good rule of thumb is if you're hard-coding data-test-whatever into a test file, search test `tests/helpers` directory to see if it's already been defined.

Code after:
    const nses = ['beep', 'boop', 'bop'];
    for (const [i, ns] of nses.entries()) {
      await runCmd(createNS(ns), false);
      await settled();
      // the namespace path will include all of the namespaces up to this point
      const targetNamespace = nses.slice(0, i + 1).join('/');
      const url = `/vault/secrets?namespace=${targetNamespace}`;
      // this is usually triggered when creating a ns in the form -- trigger a reload of the namespaces manually
      await click(NAMESPACE_PICKER_SELECTORS.toggle);
      await click(NAMESPACE_PICKER_SELECTORS.refreshList);
      await waitFor(NAMESPACE_PICKER_SELECTORS.link(targetNamespace));
      // check that the full namespace path, like "beep/boop", shows in the toggle display
      assert
        .dom(NAMESPACE_PICKER_SELECTORS.link(targetNamespace))
        .hasText(targetNamespace, `shows the namespace ${targetNamespace} in the toggle component`);
      // because quint does not like page reloads, visiting url directly instead of clicking on namespace in toggle
      await visit(url);
    }

    await logout.visit();
    await settled();
    await authPage.visit({ namespace: '/beep/boop' });
    await settled();
    await authPage.tokenInput('root').submit();
    await settled();

    // Open the namespace picker & wait for it to render
    await click(NAMESPACE_PICKER_SELECTORS.toggle);
    await waitFor(`svg${GENERAL.icon('check')}`);

    // Find the selected element with the check icon & ensure it exists
    const checkIcon = document.querySelector(
      `${NAMESPACE_PICKER_SELECTORS.link()} svg${GENERAL.icon('check')}`
    );
    assert.ok(checkIcon, 'A selected namespace link with the check icon exists');

    // Get the selected namespace with the data-test-namespace-link attribute & ensure it exists
    const selectedNamespace = checkIcon.closest(NAMESPACE_PICKER_SELECTORS.link());
    assert.ok(selectedNamespace, 'The selected namespace link exists');

    // Verify that the selected namespace has the correct data-test-namespace-link attribute and path value
    assert.strictEqual(
      selectedNamespace.getAttribute('data-test-namespace-link'),
      'beep/boop',
      'The current namespace does not begin or end with /'
    );
  });

  test('it shows the regular namespace toolbar when not managed', async function (assert) {
    // This test is the opposite of the test in managed-namespace-test
    await logout.visit();