diff --git a/ui/lib/core/addon/components/replication-header.hbs b/ui/lib/core/addon/components/replication-header.hbs
index 69816fb40c..be2fd0892c 100644
--- a/ui/lib/core/addon/components/replication-header.hbs
+++ b/ui/lib/core/addon/components/replication-header.hbs
@@ -13,7 +13,7 @@
{{/if}}
-
+
{{@title}}
{{#if @data.anyReplicationEnabled}}
diff --git a/ui/lib/replication/addon/components/page/mode-index.hbs b/ui/lib/replication/addon/components/page/mode-index.hbs
index d35e024b0f..720da2235c 100644
--- a/ui/lib/replication/addon/components/page/mode-index.hbs
+++ b/ui/lib/replication/addon/components/page/mode-index.hbs
@@ -6,7 +6,7 @@
{{#if @replicationDisabled}}
-
+
{{#if (eq @replicationMode "dr")}}
Enable Disaster Recovery Replication
{{else if (eq @replicationMode "performance")}}
diff --git a/ui/lib/replication/addon/templates/index.hbs b/ui/lib/replication/addon/templates/index.hbs
index 25f497dc94..9b2c9c326e 100644
--- a/ui/lib/replication/addon/templates/index.hbs
+++ b/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) }}
-
+
Replication unsupported
@@ -20,7 +20,7 @@
{{else if this.model.allReplicationDisabled}}
-
+
Enable Replication
@@ -114,7 +114,7 @@
{{! Renders when at least one mode is not enabled }}
-
+
Replication
diff --git a/ui/lib/replication/addon/templates/mode.hbs b/ui/lib/replication/addon/templates/mode.hbs
index befb396e7e..40a8465112 100644
--- a/ui/lib/replication/addon/templates/mode.hbs
+++ b/ui/lib/replication/addon/templates/mode.hbs
@@ -17,7 +17,7 @@
-
+
{{this.model.replicationModeForDisplay}}
{{this.model.replicationAttrs.modeForHeader}}
diff --git a/ui/tests/acceptance/enterprise-replication-modes-test.js b/ui/tests/acceptance/enterprise-replication-modes-test.js
index d042fe7f3e..50ddc1b8c7 100644
--- a/ui/tests/acceptance/enterprise-replication-modes-test.js
+++ b/ui/tests/acceptance/enterprise-replication-modes-test.js
@@ -12,7 +12,7 @@ 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]',
@@ -20,6 +20,13 @@ const s = {
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();
});
});
diff --git a/ui/tests/acceptance/enterprise-replication-test.js b/ui/tests/acceptance/enterprise-replication-test.js
index d079d49708..8998ee118e 100644
--- a/ui/tests/acceptance/enterprise-replication-test.js
+++ b/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"]');
diff --git a/ui/tests/integration/components/replication-page-test.js b/ui/tests/integration/components/replication-page-test.js
index 07dbc502be..d9b6ed17b7 100644
--- a/ui/tests/integration/components/replication-page-test.js
+++ b/ui/tests/integration/components/replication-page-test.js
@@ -62,11 +62,11 @@ module('Integration | Component | replication-page', function (hooks) {
await render(
hbs``
);
- 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');
});
});