Sidebranch: component and acceptance tests

ui/app/styles/components/replication-dashboard.scss

@@ -23,12 +23,11 @@
 
     .card-container {
       display: grid;
-      grid-gap: 2rem;
+      grid-gap: 1.5rem;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr 1fr 0.8fr;
       padding: $spacing-l;
       line-height: 1.5;
-
       height: 230px;
 
       @include until(1320px) {
@@ -43,10 +42,18 @@
       .grid-item-left {
         grid-column: 1/1;
         grid-row: 2/2;
+
+        height: 75px;
+        max-height: 75px;
+        overflow: auto;
       }
       .grid-item-right {
         grid-column: 2/2;
         grid-row: 2/2;
+
+        height: 75px;
+        max-height: 75px;
+        overflow: auto;
       }
       .grid-item-left-bottom {
         grid-column: 1/1;

ui/lib/core/addon/components/replication-dashboard.js

@@ -8,7 +8,6 @@ export default Component.extend({
   data: null,
   replicationDetails: null,
   isSecondary: null,
-  dr: null,
   isSyncing: computed('replicationDetails', 'isSecondary', function() {
     const { state } = this.replicationDetails;
     const isSecondary = this.isSecondary;

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,
 });

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;
 

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}}
@@ -37,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>

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

@@ -33,18 +33,18 @@
   <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>
   </p.levelLeft>
 </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

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)
   toggle=(component 'replication-toggle')

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." />
@@ -20,7 +20,7 @@
           @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>

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

@@ -49,6 +49,11 @@ 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');
+    await settled();
+    assert.dom('[data-test-component="empty-state"]').exists();
+
     await visit('/vault/replication');
     assert.equal(currentURL(), '/vault/replication');
 
@@ -58,6 +63,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 +113,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 +139,9 @@ 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.ok(
       find('[data-test-replication-title]').textContent.includes('Disaster Recovery'),
       'it displays the replication type correctly'
@@ -161,4 +180,22 @@ 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) {
+    await visit('vault/replication/performance');
+    // enable perf replication
+    await fillIn('[data-test-replication-cluster-mode-select]', 'primary');
+    await click('[data-test-replication-enable]');
+    await pollCluster(this.owner);
+
+    // 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');
+    await settled();
+    assert.dom('[data-test-component="empty-state"]').exists();
+  });
 });

ui/tests/acceptance/replication/dr/secondary-test.js

@@ -8,6 +8,7 @@ module('Acceptance | DR secondary details', function(hooks) {
   setupApplicationTest(hooks);
 
   hooks.beforeEach(function() {
+    this.set('mode', 'dr');
     return authPage.login();
   });
 

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

@@ -0,0 +1,67 @@
+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('replicationDetails', REPLICATION_DETAILS);
+    this.set('replicationDetailsSyncing', REPLICATION_DETAILS_SYNCING);
+    this.set('componentToRender', 'replication-secondary-card');
+    this.set('clusterMode', 'secondary');
+    this.set('isSecondary', true);
+  });
+
+  test('it renders', async function(assert) {
+    await render(hbs`<ReplicationDashboard 
+    @replicationDetails={{replicationDetails}} 
+    />`);
+
+    assert.dom('[data-test-replication-dashboard]').exists();
+  });
+
+  test('it renders table rows', async function(assert) {
+    await render(hbs`<ReplicationDashboard @replicationDetails={{replicationDetails}}/>`);
+    assert.dom('[data-test-table-rows').exists();
+  });
+
+  test('it renders with primary cluster address when set, and documentation link', async function(assert) {
+    await render(hbs`<ReplicationDashboard 
+    @replicationDetails={{replicationDetails}} 
+    @clusterMode={{clusterMode}}
+    @isSecondary={{isSecondary}}
+    />`);
+
+    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();
+  });
+
+  test('it renders alert banner if state is merkle-diff and isSecondary', async function(assert) {
+    await render(hbs`<ReplicationDashboard 
+    @replicationDetails={{replicationDetailsSyncing}} 
+    @clusterMode={{clusterMode}}
+    @isSecondary={{true}}
+    @componentToRender={{componentToRender}}
+    />`);
+
+    assert.dom('[data-test-isSyncing]').exists();
+  });
+});