UI: stabilize replication tests (#28384)

* Add specificity to replication title selectors

* Use specific selectors for replication titles in tests

ui/lib/core/addon/components/replication-header.hbs

@@ -13,7 +13,7 @@
     {{/if}}
   </p.top>
   <p.levelLeft>
-    <h1 class="title is-3" data-test-replication-title>
+    <h1 class="title is-3" data-test-replication-title={{@title}}>
       {{@title}}
       {{#if @data.anyReplicationEnabled}}
         <span class="tag is-light has-text-grey-dark" data-test-mode>

ui/lib/replication/addon/components/page/mode-index.hbs

@@ -6,7 +6,7 @@
 {{#if @replicationDisabled}}
   <PageHeader as |p|>
     <p.levelLeft>
-      <h1 class="title is-3" data-test-replication-title>
+      <h1 class="title is-3" data-test-replication-title={{@replicationMode}}>
         {{#if (eq @replicationMode "dr")}}
           Enable Disaster Recovery Replication
         {{else if (eq @replicationMode "performance")}}

ui/lib/replication/addon/templates/index.hbs

@@ -9,7 +9,7 @@
       {{! Replication is unsupported in non-enterprise or when using non-transactional storage (eg inmem) }}
       <PageHeader as |p|>
         <p.levelLeft>
-          <h1 class="title is-3 has-text-grey" data-test-replication-title>
+          <h1 class="title is-3 has-text-grey" data-test-replication-title="Replication unsupported">
             Replication unsupported
           </h1>
         </p.levelLeft>
@@ -20,7 +20,7 @@
     {{else if this.model.allReplicationDisabled}}
       <PageHeader as |p|>
         <p.levelLeft>
-          <h1 class="title is-3" data-test-replication-title>
+          <h1 class="title is-3" data-test-replication-title="Enable Replication">
             Enable Replication
           </h1>
         </p.levelLeft>
@@ -114,7 +114,7 @@
       {{! Renders when at least one mode is not enabled }}
       <PageHeader as |p|>
         <p.levelLeft>
-          <h1 class="title is-3" data-test-replication-title>
+          <h1 class="title is-3" data-test-replication-title="Replication">
             Replication
           </h1>
         </p.levelLeft>

ui/lib/replication/addon/templates/mode.hbs

@@ -17,7 +17,7 @@
             </Hds::Breadcrumb>
           </p.top>
           <p.levelLeft>
-            <h1 class="has-top-margin-m title is-3" data-test-replication-title>
+            <h1 class="has-top-margin-m title is-3" data-test-replication-title={{this.model.replicationModeForDisplay}}>
               {{this.model.replicationModeForDisplay}}
               <span class="tag is-light has-text-grey-dark" data-test-replication-mode-display>
                 {{this.model.replicationAttrs.modeForHeader}}

ui/tests/acceptance/enterprise-replication-modes-test.js

@@ -12,14 +12,21 @@ import { STATUS_DISABLED_RESPONSE, mockReplicationBlock } from 'vault/tests/help
 
 const s = {
   navLink: (title) => `[data-test-sidebar-nav-link="${title}"]`,
-  title: '[data-test-replication-title]',
+  title: (t) => `[data-test-replication-title="${t}"]`,
   detailLink: (mode) => `[data-test-replication-details-link="${mode}"]`,
   summaryCard: '[data-test-replication-summary-card]',
   dashboard: '[data-test-replication-dashboard]',
   enableForm: '[data-test-replication-enable-form]',
   knownSecondary: (name) => `[data-test-secondaries-node="${name}"]`,
 };
 
+// wait for specific title selector as an attempt to stabilize flaky tests
+async function assertTitle(assert, title, altSelector) {
+  const selector = altSelector || title;
+  await waitFor(s.title(selector));
+  assert.dom(s.title(selector)).hasText(title);
+}
+
 module('Acceptance | Enterprise | replication modes', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
@@ -42,7 +49,8 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
 
     await authPage.login();
     await visit('/vault/replication');
-    assert.dom(s.title).hasText('Replication unsupported', 'it shows the unsupported view');
+
+    await assertTitle(assert, 'Replication unsupported');
 
     // Nav links
     assert.dom(s.navLink('Performance')).doesNotExist('hides performance link');
@@ -52,7 +60,8 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
   test('replication page when disabled', async function (assert) {
     await this.setupMocks(STATUS_DISABLED_RESPONSE);
     await visit('/vault/replication');
-    assert.dom(s.title).hasText('Enable Replication', 'it shows the enable view');
+
+    await assertTitle(assert, 'Enable Replication');
 
     // Nav links
     assert.dom(s.navLink('Performance')).exists('shows performance link');
@@ -64,7 +73,8 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
     assert.dom(s.enableForm).exists();
 
     await click(s.navLink('Disaster Recovery'));
-    assert.dom(s.title).hasText('Enable Disaster Recovery Replication', 'it shows the enable view for dr');
+
+    await assertTitle(assert, 'Enable Disaster Recovery Replication', 'dr');
   });
 
   ['primary', 'secondary'].forEach((mode) => {
@@ -75,7 +85,7 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
       });
       await visit('/vault/replication');
 
-      assert.dom(s.title).hasText('Replication', 'it shows default view');
+      await assertTitle(assert, 'Replication');
       assert.dom(s.detailLink('performance')).hasText('Details', 'CTA to see performance details');
       assert.dom(s.detailLink('dr')).hasText('Enable', 'CTA to enable dr');
 
@@ -89,7 +99,7 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
       assert.dom(s.dashboard).exists(`it shows the replication dashboard`);
 
       await click(s.navLink('Disaster Recovery'));
-      assert.dom(s.title).hasText('Enable Disaster Recovery Replication', 'it shows the dr title');
+      await assertTitle(assert, 'Enable Disaster Recovery Replication', 'dr');
       assert.dom(s.enableForm).exists('it shows the enable view for dr');
     });
   });
@@ -100,7 +110,7 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
       performance: mockReplicationBlock(),
     });
     await visit('/vault/replication');
-    assert.dom(s.title).hasText('Replication', 'it shows default view');
+    await assertTitle(assert, 'Replication');
     assert.dom(s.detailLink('performance')).hasText('Enable', 'CTA to enable performance');
     assert.dom(s.detailLink('dr')).hasText('Details', 'CTA to see dr details');
 
@@ -114,7 +124,7 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
     assert.dom(s.enableForm).exists('it shows the enable view for performance');
 
     await click(s.navLink('Disaster Recovery'));
-    assert.dom(s.title).hasText(`Disaster Recovery primary`, 'it shows the dr title');
+    await assertTitle(assert, 'Disaster Recovery primary', 'Disaster Recovery');
     assert.dom(s.dashboard).exists(`it shows the replication dashboard`);
   });
 
@@ -124,15 +134,15 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
       performance: mockReplicationBlock('primary'),
     });
     await visit('/vault/replication');
-    assert.dom(s.title).hasText('Disaster Recovery & Performance primary', 'it shows primary view');
+    await assertTitle(assert, 'Disaster Recovery & Performance primary', 'Disaster Recovery & Performance');
     assert.dom(s.summaryCard).exists({ count: 2 }, 'shows 2 summary cards');
 
     await click(s.navLink('Performance'));
-    assert.dom(s.title).hasText(`Performance primary`, `it shows the performance mode details`);
+    await assertTitle(assert, 'Performance primary', 'Performance');
     assert.dom(s.enableForm).doesNotExist();
 
     await click(s.navLink('Disaster Recovery'));
-    assert.dom(s.title).hasText(`Disaster Recovery primary`, 'it shows the dr mode details');
+    await assertTitle(assert, 'Disaster Recovery primary', 'Disaster Recovery');
     assert.dom(s.enableForm).doesNotExist();
   });
 });

ui/tests/acceptance/enterprise-replication-test.js

@@ -165,14 +165,12 @@ module('Acceptance | Enterprise | replication', function (hooks) {
         'shows the correct title of the empty state'
       );
 
-    assert.ok(
-      find('[data-test-replication-title]').textContent.includes('Disaster Recovery'),
-      'it displays the replication type correctly'
-    );
-    assert.ok(
-      find('[data-test-replication-mode-display]').textContent.includes('primary'),
-      'it displays the cluster mode correctly'
-    );
+    assert
+      .dom('[data-test-replication-title="Disaster Recovery"]')
+      .includesText('Disaster Recovery', 'it displays the replication type correctly');
+    assert
+      .dom('[data-test-replication-mode-display]')
+      .includesText('primary', 'it displays the cluster mode correctly');
 
     // add dr secondary
     await click('[data-test-replication-link="secondaries"]');

ui/tests/integration/components/replication-page-test.js

@@ -62,11 +62,11 @@ module('Integration | Component | replication-page', function (hooks) {
     await render(
       hbs`<ReplicationPage @model={{this.model}} as |Page|><Page.header @showTabs={{true}} /></ReplicationPage>`
     );
-    await waitFor('[data-test-replication-title]');
+    await waitFor('[data-test-replication-title="dr"]');
     // Title has spaces and newlines, so we can't use hasText because it won't match exactly
-    assert.dom('[data-test-replication-title]').includesText('Disaster Recovery');
+    assert.dom('[data-test-replication-title="dr"]').includesText('Disaster Recovery');
     this.set('model', { ...MODEL, replicationMode: 'performance' });
     await settled();
-    assert.dom('[data-test-replication-title]').includesText('Performance');
+    assert.dom('[data-test-replication-title="performance"]').includesText('Performance');
   });
 });