diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss
index 67ca5c0eb3ae..778f34cf70e0 100644
--- a/ui/app/styles/components/replication-dashboard.scss
+++ b/ui/app/styles/components/replication-dashboard.scss
@@ -23,14 +23,12 @@
 
     .card-container {
       display: grid;
-      grid-gap: 2rem;
+      grid-gap: 1rem;
       grid-template-columns: 1fr 1fr;
-      grid-template-rows: 1fr 1fr 0.8fr;
+      grid-template-rows: 0.2fr 1fr 0.2fr;
       padding: $spacing-l;
       line-height: 1.5;
 
-      height: 230px;
-
       @include until(1320px) {
         // prevent an issue with the card descriptions wrapping and expanding height
         min-height: 250px;
diff --git a/ui/lib/core/addon/components/replication-header.js b/ui/lib/core/addon/components/replication-header.js
index 1f567ad032b3..17ed3907320c 100644
--- a/ui/lib/core/addon/components/replication-header.js
+++ b/ui/lib/core/addon/components/replication-header.js
@@ -1,18 +1,8 @@
-/**
- * @module ReplicationHeader
- * ARG TODO: finish
- *
- * @example
- * ```js
- * <ReplicationHeader finish/>
- * ```
- */
-
 import Component from '@ember/component';
 import layout from '../templates/components/replication-header';
 
 export default Component.extend({
   layout,
-  data: null,
   isSecondary: null,
+  'data-test-replication-header': true,
 });
diff --git a/ui/lib/core/addon/components/replication-secondary-card.js b/ui/lib/core/addon/components/replication-secondary-card.js
index ef51e11e0b9a..7317bc58bbe1 100644
--- a/ui/lib/core/addon/components/replication-secondary-card.js
+++ b/ui/lib/core/addon/components/replication-secondary-card.js
@@ -3,6 +3,21 @@ import { computed } from '@ember/object';
 import layout from '../templates/components/replication-secondary-card';
 import { clusterStates } from 'core/helpers/cluster-states';
 
+/**
+ * @module ReplicationSecondaryCard
+ * ReplicationSecondaryCard components
+ *
+ * @example
+ * ```js
+ * <ReplicationSecondaryCard
+    @title='States'
+    @replicationDetails=replicationDetails
+    />
+ * ```
+ * @param {string} [title=null] - The title to be displayed on the top left corner of the card.
+ * @param replicationDetails=null{DS.Model.replicationDetails} - An Ember data object off the Ember data model.  It is computed at the parent component and passed through to this component.
+ */
+
 export default Component.extend({
   layout,
   title: null,
@@ -31,7 +46,6 @@ export default Component.extend({
     // we should use the clusterStates helper instead
     return this.state === 'stream-wals';
   }),
-
   hasErrorClass: computed('replicationDetails', 'title', 'state', 'connection', function() {
     const { title, state, connection } = this;
 
diff --git a/ui/lib/core/addon/templates/components/alert-inline.hbs b/ui/lib/core/addon/templates/components/alert-inline.hbs
index 9bfd0f733450..973623816579 100644
--- a/ui/lib/core/addon/templates/components/alert-inline.hbs
+++ b/ui/lib/core/addon/templates/components/alert-inline.hbs
@@ -2,6 +2,6 @@
   @glyph={{this.alertType.glyph}}
   class={{this.alertType.glyphClass}}
 />
-<p class="{{this.textClass}}">
+<p class="{{this.textClass}}" data-test-inline-error-message>
   {{@message}}
 </p>
diff --git a/ui/lib/core/addon/templates/components/replication-dashboard.hbs b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
index 77a415c897b3..f33d086ccdf2 100644
--- a/ui/lib/core/addon/templates/components/replication-dashboard.hbs
+++ b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
@@ -1,4 +1,4 @@
-<div class="replication-dashboard box is-sideless is-fullwidth is-marginless">
+<div class="replication-dashboard box is-sideless is-fullwidth is-marginless" data-test-replication-dashboard>
   {{#if isSecondary}}
     <h2 class="has-text-weight-semibold is-size-4 has-bottom-margin-xs">
         Primary Cluster
@@ -7,7 +7,7 @@
       If you set a primary_cluster_addr when enabling replication, it will appear here.
     </p>
     {{#if replicationDetails.primaryClusterAddr}}
-      <code>{{replicationDetails.primaryClusterAddr}}</code>
+      <code data-test-primary-cluster-address>{{replicationDetails.primaryClusterAddr}}</code>
     {{else}}
       <code>no known primary cluster address</code>
     {{/if}}
@@ -18,7 +18,8 @@
       @title={{concat "Re-indexing in progress" reindexingStage}}
       @type="info"
       @secondIconType="loading"
-      @message="This can cause a delay depending on the size of the data store. You can use Vault during this time."/>
+      @message="This can cause a delay depending on the size of the data store. You can use Vault during this time."
+      data-test-isReindexing/>
   {{/if}}
 
   <div class="selectable-card-container has-top-margin-xl">
@@ -36,10 +37,11 @@
       @type="info"
       @secondIconType="loading"
       @message="The cluster is syncing. This happens when the secondary is too far behind the primary to use the normal stream-wals state for catching up."
-      @class="has-top-margin-xl" />
+      @class="has-top-margin-xl" 
+      data-test-isSyncing/>
   {{/if}}
   <ReplicationTableRows
     @replicationDetails={{replicationDetails}}
-    @clusterMode={{clusterMode}} />
-  <ReplicationDocLink />
+    @clusterMode={{clusterMode}}/>
+  <ReplicationDocLink data-test-replication-doc-link/>
 </div>
diff --git a/ui/lib/core/addon/templates/components/replication-header.hbs b/ui/lib/core/addon/templates/components/replication-header.hbs
index f13fb2b3eb6b..77aa9eb4720d 100644
--- a/ui/lib/core/addon/templates/components/replication-header.hbs
+++ b/ui/lib/core/addon/templates/components/replication-header.hbs
@@ -33,10 +33,10 @@
   <p.levelLeft>
     <h1 class="title is-3">
       {{title}}
-      <span class="tag">
+      <span class="tag" data-test-mode>
         {{if isSecondary 'Secondary' 'Primary'}}
       </span>
-      <span class="tag">
+      <span class="tag" data-test-clusterId>
         {{data.dr.clusterIdDisplay}}
       </span>
     </h1>
@@ -44,7 +44,7 @@
 </PageHeader>
 
 {{#if showTabs}}
-  <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
+  <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-tabs>
     <nav class="tabs">
       <ul>
         {{#link-to
diff --git a/ui/lib/core/addon/templates/components/replication-page.hbs b/ui/lib/core/addon/templates/components/replication-page.hbs
index 25ad66133275..00918032f23b 100644
--- a/ui/lib/core/addon/templates/components/replication-page.hbs
+++ b/ui/lib/core/addon/templates/components/replication-page.hbs
@@ -1,4 +1,4 @@
-<div class="replication-page">
+<div class="replication-page" data-test-replication-page>
   {{yield
     (hash
       header=(component 'replication-header' data=model title=replicationMode isSecondary=isSecondary)
diff --git a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
index 48f45cdab8fa..b7e65d8388e6 100644
--- a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
+++ b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
@@ -1,4 +1,4 @@
-<div class="selectable-card is-rounded card-container {{if hasErrorClass "has-border-danger"}}">
+<div class="selectable-card is-rounded card-container {{if hasErrorClass "has-border-danger"}}" data-test-replication-secondary-card>
   {{!-- Check if State or WAL Card --}}
   {{#if (eq title "States")}}
     <h3 class="title is-5 grid-item-title card-title">{{title}}</h3>
@@ -7,7 +7,7 @@
         <h6 class="title is-6">state</h6>
         <p class="has-text-grey is-size-8">How this cluster is communicating with others at this moment.</p>
       {{else}}
-        <h6 class="has-text-danger">state</h6>
+        <h6 class="has-text-danger" data-test-error>state</h6>
         <AlertInline
           @type="danger"
           @message="Please check your server logs." />
@@ -15,12 +15,12 @@
     </div>
     <div class="grid-item-right">
       {{#if (eq connection "transient_failure")}}
-        <h6 class="title is-6 has-text-danger">connection_state</h6>
+        <h6 class="title is-6 has-text-danger" data-test-error>connection_state</h6>
         <AlertInline
           @type="danger"
           @message="There has been some transient failure.  Your cluster will eventually switch back to connection and try to establish a connection again." />
       {{else if (eq connection "shutdown")}}
-        <h6 class="title is-6 has-text-danger">connection_state</h6>
+        <h6 class="title is-6 has-text-danger" data-test-error>connection_state</h6>
         <AlertInline
           @type="danger"
           @message="Your connection has shut down. This may be because the application explicitly requested a shutdown or a non-recoverable error has happened during attempts to communicate." />
@@ -29,11 +29,11 @@
         <p class="has-text-grey is-size-8">The health of the connection between this cluster and others.</p>
       {{/if}}
     </div>
-    <h2 class="title is-3 grid-item-left-bottom">{{state}}
+    <h2 class="title is-3 grid-item-left-bottom" data-test-state>{{state}}
       {{#if inSyncState }}
         <ToolTip @verticalPosition="above" as |T|>
           <T.trigger>
-            <Icon @glyph={{"check-circle-outline" }} @size="m" class={{"has-text-success"}} />
+            <Icon @glyph={{"check-circle-outline" }} @size="m" class={{"has-text-success"}} data-test-glyph />
           </T.trigger>
           <T.content @class="tool-tip">
             <div class="box">
@@ -43,7 +43,7 @@
         </ToolTip>
       {{/if}}
     </h2>
-    <h2 class="title is-3 grid-item-right-bottom">{{connection}}</h2>
+    <h2 class="title is-3 grid-item-right-bottom" data-test-connection>{{connection}}</h2>
   {{else}}
     <h3 class="title is-5 grid-item-title card-title">{{title}}
       <ToolTip @verticalPosition="above" @closeDelay="2000ms" as |T|>
@@ -67,12 +67,12 @@
     </div>
     <div class="grid-item-right">
       <h6 class="title is-6">last_wal</h6>
-      <p class="has-text-grey is-size-8">{{lastWAL}}</p>
+      <p class="has-text-grey is-size-8" data-test-lastWAL>{{lastWAL}}</p>
     </div>
-    <code class="title is-3 grid-item-left-bottom">{{format-number delta}}</code>
+    <code class="title is-3 grid-item-left-bottom" data-test-delta>{{format-number delta}}</code>
     <div class="grid-item-right-bottom">
       <h6 class="title is-6">last_remote_wal</h6>
-      <p class="has-text-grey is-size-8">{{lastRemoteWAL}}</p>
+      <p class="has-text-grey is-size-8" data-test-lastRemoteWAL>{{lastRemoteWAL}}</p>
     </div>
   {{/if}}
 </div>
diff --git a/ui/tests/acceptance/enterprise-replication-test.js b/ui/tests/acceptance/enterprise-replication-test.js
index 97bfa9c6ab1d..de7c0fb35029 100644
--- a/ui/tests/acceptance/enterprise-replication-test.js
+++ b/ui/tests/acceptance/enterprise-replication-test.js
@@ -49,6 +49,19 @@ module('Acceptance | Enterprise | replication', function(hooks) {
     const mode = 'deny';
     let mountPath;
 
+    // confirm unable to visit dr secondary details page when both replications are disabled
+    await visit('/vault/replication-dr-promote/details');
+    assert.dom('[data-test-component="empty-state"]').exists();
+    assert
+      .dom('[data-test-empty-state-title]')
+      .includesText('Disaster Recovery secondary not set up', 'shows the correct title of the empty state');
+
+    assert.equal(
+      find('[data-test-empty-state-message]').textContent.trim(),
+      'This cluster has not been enabled as a Disaster Recovery Secondary. You can do so by enabling replication and adding a secondary from the Disaster Recovery Primary.',
+      'renders default message specific to when no replication is enabled'
+    );
+
     await visit('/vault/replication');
     assert.equal(currentURL(), '/vault/replication');
 
@@ -58,6 +71,10 @@ module('Acceptance | Enterprise | replication', function(hooks) {
 
     await click('[data-test-replication-enable]');
     await pollCluster(this.owner);
+    await settled();
+
+    // confirm that the details dashboard shows
+    assert.dom('[data-test-replication-dashboard]').exists();
 
     // add a secondary with a mount filter config
     await click('[data-test-replication-link="secondaries"]');
@@ -104,6 +121,13 @@ module('Acceptance | Enterprise | replication', function(hooks) {
       `/vault/replication/performance/secondaries`,
       'redirects to the secondaries page'
     );
+    // nav back to details page and confirm secondary is in the know secondaries table
+    await click('[data-test-replication-link="details"]');
+    await settled();
+    assert
+      .dom(`[data-test-secondaries-row=${secondaryName}]`)
+      .exists('shows a table row the recently added secondary');
+    // ARG TODO when get connected state check here
 
     // nav to DR
     await visit('/vault/replication/dr');
@@ -123,6 +147,15 @@ module('Acceptance | Enterprise | replication', function(hooks) {
     await click('button[type="submit"]');
 
     await pollCluster(this.owner);
+    // empty state inside of know secondaries table
+    assert.dom('[data-test-empty-state-title]').exists();
+    assert
+      .dom('[data-test-empty-state-title]')
+      .includesText(
+        'No known dr secondary clusters associated with this cluster',
+        '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'
@@ -161,4 +194,20 @@ module('Acceptance | Enterprise | replication', function(hooks) {
     await visit('/vault/replication/dr/manage');
     assert.ok(findAll('[data-test-demote-warning]').length, 'displays the demotion warning');
   });
+
+  test('navigating to dr secondary details page', async function(assert) {
+    // enable dr replication
+    await visit('/vault/replication/dr');
+    await fillIn('[data-test-replication-cluster-mode-select]', 'primary');
+    await click('[data-test-replication-enable]');
+    await pollCluster(this.owner);
+
+    await visit('/vault/replication-dr-promote/details');
+    assert.dom('[data-test-component="empty-state"]').exists();
+    assert.equal(
+      find('[data-test-empty-state-message]').textContent.trim(),
+      'This Disaster Recovery secondary has not been enabled.  You can do so from the Disaster Recovery Primary.',
+      'renders default message specific to when no replication is enabled'
+    );
+  });
 });
diff --git a/ui/tests/integration/components/replication-dashboard-test.js b/ui/tests/integration/components/replication-dashboard-test.js
new file mode 100644
index 000000000000..061865698a66
--- /dev/null
+++ b/ui/tests/integration/components/replication-dashboard-test.js
@@ -0,0 +1,58 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+const REPLICATION_DETAILS = {
+  state: 'stream-wals',
+  primaryClusterAddr: 'https://127.0.0.1:8201',
+};
+
+const REPLICATION_DETAILS_SYNCING = {
+  state: 'merkle-diff',
+  primaryClusterAddr: 'https://127.0.0.1:8201',
+};
+
+module('Integration | Enterprise | Component | replication-dashboard', function(hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function() {
+    this.set('clusterMode', 'secondary');
+    this.set('isSecondary', true);
+  });
+
+  test('it renders', async function(assert) {
+    this.set('replicationDetails', REPLICATION_DETAILS);
+
+    await render(hbs`<ReplicationDashboard
+    @replicationDetails={{replicationDetails}}
+    @clusterMode={{clusterMode}}
+    @isSecondary={{isSecondary}}
+    />`);
+
+    assert.dom('[data-test-replication-dashboard]').exists();
+    assert.dom('[data-test-table-rows').exists();
+    assert
+      .dom('[data-test-primary-cluster-address]')
+      .includesText(
+        REPLICATION_DETAILS.primaryClusterAddr,
+        `shows the correct primary cluster address value`
+      );
+    assert.dom('[data-test-replication-doc-link]').exists();
+    assert.dom('[data-test-flash-message]').doesNotExist('no flash message is displayed on render');
+  });
+
+  test('it renders an alert banner if the dashboard is syncing', async function(assert) {
+    this.set('replicationDetailsSyncing', REPLICATION_DETAILS_SYNCING);
+
+    await render(hbs`<ReplicationDashboard 
+    @replicationDetails={{replicationDetailsSyncing}} 
+    @clusterMode={{clusterMode}}
+    @isSecondary={{isSecondary}}
+    @componentToRender='replication-secondary-card'
+    />`);
+
+    assert.dom('[data-test-isSyncing]').exists();
+    assert.dom('[data-test-isReindexing]').doesNotExist();
+  });
+});
diff --git a/ui/tests/integration/components/replication-header-test.js b/ui/tests/integration/components/replication-header-test.js
new file mode 100644
index 000000000000..33897fa7a735
--- /dev/null
+++ b/ui/tests/integration/components/replication-header-test.js
@@ -0,0 +1,49 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+const DATA = {
+  dr: {
+    mode: 'secondary',
+    rm: {
+      mode: 'dr',
+    },
+    clusterIdDisplay: 12345,
+  },
+  unsealed: 'good',
+};
+
+const TITLE = 'Disaster Recovery';
+
+module('Integration | Enterprise | Component | replication-header', function(hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function() {
+    this.set('data', DATA);
+    this.set('title', TITLE);
+    this.set('isSecondary', true);
+  });
+
+  test('it renders', async function(assert) {
+    await render(hbs`<ReplicationHeader @data={{data}} @isSecondary={{isSecondary}} @title={{title}}/>`);
+
+    assert.dom('[data-test-replication-header]').exists();
+  });
+
+  test('it renders with clusterId and mode when set', async function(assert) {
+    await render(hbs`<ReplicationHeader @data={{data}} @isSecondary={{isSecondary}} @title={{title}}/>`);
+
+    assert
+      .dom('[data-test-clusterId]')
+      .includesText(DATA.dr.clusterIdDisplay, `shows the correct clusterId value`);
+
+    assert.dom('[data-test-mode]').includesText('Secondary', `shows the correct mode value`);
+  });
+
+  test('it does not show tabs when showTabs is not set', async function(assert) {
+    await render(hbs`<ReplicationHeader @data={{data}} @isSecondary={{isSecondary}} @title={{title}}/>`);
+
+    assert.dom('[data-test-tabs]').doesNotExist();
+  });
+});
diff --git a/ui/tests/integration/components/replication-page-test.js b/ui/tests/integration/components/replication-page-test.js
new file mode 100644
index 000000000000..6622cdd8dfdd
--- /dev/null
+++ b/ui/tests/integration/components/replication-page-test.js
@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+const MODEL = {
+  replicationMode: 'dr',
+};
+
+module('Integration | Enterprise | Component | replication-page', function(hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function() {
+    this.set('model', MODEL);
+  });
+
+  test('it renders', async function(assert) {
+    await render(hbs`<ReplicationPage @model={{model}} />`);
+
+    assert.dom('[data-test-replication-page]').exists();
+  });
+});
diff --git a/ui/tests/integration/components/replication-secondary-card-test.js b/ui/tests/integration/components/replication-secondary-card-test.js
new file mode 100644
index 000000000000..9f3e94f57a13
--- /dev/null
+++ b/ui/tests/integration/components/replication-secondary-card-test.js
@@ -0,0 +1,89 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+const TITLE = 'States';
+
+const REPLICATION_DETAILS = {
+  state: 'stream-wals',
+  connection_state: 'ready',
+  lastWAL: 0,
+  lastRemoteWAL: 10,
+  delta: 10,
+};
+
+const STATE_ERROR = {
+  state: 'idle',
+  connection_state: 'ready',
+  lastWAL: 0,
+  lastRemoteWAL: 10,
+  delta: 10,
+};
+
+const CONNECTION_ERROR = {
+  state: 'stream-wals',
+  connection_state: 'transient_failure',
+  lastWAL: 0,
+  lastRemoteWAL: 10,
+  delta: 10,
+};
+
+module('Integration | Enterprise | Component | replication-secondary-card', function(hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function() {
+    this.set('replicationDetails', REPLICATION_DETAILS);
+    this.set('title', TITLE);
+  });
+
+  test('it renders', async function(assert) {
+    await render(
+      hbs`<ReplicationSecondaryCard @replicationDetails={{replicationDetails}} @title={{title}} />`
+    );
+    assert.dom('[data-test-replication-secondary-card]').exists();
+    assert.dom('[data-test-state]').includesText(REPLICATION_DETAILS.state, `shows the correct state value`);
+    assert
+      .dom('[data-test-connection]')
+      .includesText(REPLICATION_DETAILS.connection_state, `shows the correct connection value`);
+  });
+
+  test('it renders with lastWAL, lastRemoteWAL and delta set when title is not States', async function(assert) {
+    await render(hbs`<ReplicationSecondaryCard @replicationDetails={{replicationDetails}} />`);
+    assert
+      .dom('[data-test-lastWAL]')
+      .includesText(REPLICATION_DETAILS.lastWAL, `shows the correct lastWAL value`);
+    assert
+      .dom('[data-test-lastRemoteWAL]')
+      .includesText(REPLICATION_DETAILS.lastRemoteWAL, `shows the correct lastRemoteWAL value`);
+    assert.dom('[data-test-delta]').includesText(REPLICATION_DETAILS.delta, `shows the correct delta value`);
+  });
+
+  test('it renders tooltip with check-circle-outline when state is stream-wals', async function(assert) {
+    await render(
+      hbs`<ReplicationSecondaryCard @replicationDetails={{replicationDetails}} @title={{title}} />`
+    );
+    assert.dom('[data-test-glyph]').hasClass('has-text-success', `shows success icon`);
+  });
+
+  test('it renders hasErrorMessage when state is idle', async function(assert) {
+    this.set('stateError', STATE_ERROR);
+    await render(hbs`<ReplicationSecondaryCard @replicationDetails={{stateError}} @title={{title}} />`);
+    assert.dom('[data-test-error]').includesText('state', 'show correct error title');
+    assert
+      .dom('[data-test-inline-error-message]')
+      .includesText('Please check your server logs.', 'show correct error message');
+  });
+
+  test('it renders hasErrorMessage when connection is transient_failure', async function(assert) {
+    this.set('connectionError', CONNECTION_ERROR);
+    await render(hbs`<ReplicationSecondaryCard @replicationDetails={{connectionError}} @title={{title}} />`);
+    assert.dom('[data-test-error]').includesText('connection_state', 'show correct error title');
+    assert
+      .dom('[data-test-inline-error-message]')
+      .includesText(
+        'There has been some transient failure.  Your cluster will eventually switch back to connection and try to establish a connection again.',
+        'show correct error message'
+      );
+  });
+});
diff --git a/ui/tests/integration/components/replication-table-rows-test.js b/ui/tests/integration/components/replication-table-rows-test.js
index fcd118c50a36..be564c17f00b 100644
--- a/ui/tests/integration/components/replication-table-rows-test.js
+++ b/ui/tests/integration/components/replication-table-rows-test.js
@@ -3,47 +3,54 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-const DATA = {
+const REPLICATION_DETAILS = {
   clusterId: 'b829d963-6835-33eb-a903-57376024b97a',
-  mode: 'primary',
   merkleRoot: 'c21c8428a0a06135cef6ae25bf8e0267ff1592a6',
 };
 
+const CLUSTER_MODE = 'primary';
+
 module('Integration | Component | replication-table-rows', function(hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function() {
-    this.set('data', DATA);
+    this.set('replicationDetails', REPLICATION_DETAILS);
+    this.set('clusterMode', CLUSTER_MODE);
   });
 
   test('it renders', async function(assert) {
-    await render(hbs`<ReplicationTableRows @data={{data}}/>`);
-
+    await render(
+      hbs`<ReplicationTableRows @replicationDetails={{replicationDetails}} @clusterMode={{clusterMode}}/>`
+    );
     assert.dom('[data-test-table-rows]').exists();
   });
 
   test('it renders with merkle root, mode, replication set', async function(assert) {
-    await render(hbs`<ReplicationTableRows @data={{data}}/>`);
-
+    await render(
+      hbs`<ReplicationTableRows @replicationDetails={{replicationDetails}} @clusterMode={{clusterMode}}/>`
+    );
     assert.dom('.empty-state').doesNotExist('does not show empty state when data is found');
 
     assert
       .dom('[data-test-row-value="Merkle root index"]')
-      .includesText(DATA.merkleRoot, `shows the correct Merkle Root`);
-    assert.dom('[data-test-row-value="Mode"]').includesText(DATA.mode, `shows the correct Merkle Root`);
+      .includesText(REPLICATION_DETAILS.merkleRoot, `shows the correct Merkle Root`);
+    assert.dom('[data-test-row-value="Mode"]').includesText(CLUSTER_MODE, `shows the correct Mode`);
     assert
       .dom('[data-test-row-value="Replication set"]')
-      .includesText(DATA.clusterId, `shows the correct Merkle Root`);
+      .includesText(REPLICATION_DETAILS.clusterId, `shows the correct Cluster ID`);
   });
 
   test('it renders unknown if values cannot be found', async function(assert) {
     const noAttrs = {
       clusterId: null,
-      mode: null,
       merkleRoot: null,
     };
-    this.set('data', noAttrs);
-    await render(hbs`<ReplicationTableRows @data={{data}}/>`);
+    const clusterMode = null;
+    this.set('replicationDetails', noAttrs);
+    this.set('clusterMode', clusterMode);
+    await render(
+      hbs`<ReplicationTableRows @replicationDetails={{replicationDetails}} @clusterMode={{clusterMode}}/>`
+    );
 
     assert.dom('[data-test-table-rows]').includesText('unknown');
   });