WCH-OPS: added status text tooltip

package.json

@@ -61,6 +61,7 @@
     "codemirror": "5.58.2",
     "crypto-js": "4.0.0",
     "escher-auth": "3.0.0",
+    "http-status-codes": "2.2.0",
     "pretty-bytes": "5.4.1",
     "pretty-ms": "7.0.1",
     "ramda": "0.27.1",

src/renderer/components/status-panel.vue

@@ -10,6 +10,10 @@
           :class="{ 'text-color-success': !statusCodeIndicatesFailure, 'text-color-danger': statusCodeIndicatesFailure }"
           class="e-legend__value">
           {{ statusCode }}
+          <e-tooltip
+            id="status-text"
+            :content="statusText"
+            type="helper"/>
         </div>
       </div>
     </div>
@@ -44,13 +48,15 @@
 import { mapState } from 'vuex';
 import prettyMs from 'pretty-ms';
 import prettyBytes from 'pretty-bytes';
+import * as httpStatusCodes from 'http-status-codes';
 
 export default {
   name: 'StatusPanel',
   computed: {
     ...mapState({
       statusCode: state => state.response.status,
       statusCodeIndicatesFailure: state => state.response.status >= 400,
+      statusText: state => httpStatusCodes.getReasonPhrase(state.response.status),
       requestTime: state => prettyMs(state.response.elapsedTime || 0),
       responseSize: state => prettyBytes(state.response.body.length || 0)
     })

test/unit/specs/renderer/components/status-panel.spec.js

@@ -21,6 +21,17 @@ describe('StatusPanel.vue', () => {
     expect(statusCodeElement.text()).to.eql('200');
   });
 
+  it('should render the status text tooltip', () => {
+    const response = { status: 200, body: '' };
+    store.commit(Mutation.UPDATE_RESPONSE, response);
+
+    const component = shallowMount(StatusPanel, { store });
+    const statusCodeElement = component.find('#status-text');
+
+    expect(statusCodeElement.exists()).to.eql(true);
+    expect(statusCodeElement.attributes('content')).to.eql('OK');
+  });
+
   context('when status code indicates failure', () => {
     it('should set the style to text-color-danger', () => {
       const response = { status: 400, body: '' };
@@ -46,7 +57,7 @@ describe('StatusPanel.vue', () => {
   });
 
   it('should render the request round trip time', () => {
-    const response = { elapsedTime: 100, body: '' };
+    const response = { status: 200, elapsedTime: 100, body: '' };
     store.commit(Mutation.UPDATE_RESPONSE, response);
 
     const component = shallowMount(StatusPanel, { store });
@@ -57,7 +68,7 @@ describe('StatusPanel.vue', () => {
   });
 
   it('should render the time in human readable format', () => {
-    const response = { elapsedTime: 1300, body: '' };
+    const response = { status: 200, elapsedTime: 1300, body: '' };
     store.commit(Mutation.UPDATE_RESPONSE, response);
 
     const component = shallowMount(StatusPanel, { store });
@@ -67,7 +78,7 @@ describe('StatusPanel.vue', () => {
   });
 
   it('should render the response size', () => {
-    const response = { body: 'abcd' };
+    const response = { status: 200, body: 'abcd' };
     store.commit(Mutation.UPDATE_RESPONSE, response);
 
     const component = shallowMount(StatusPanel, { store });
@@ -78,7 +89,7 @@ describe('StatusPanel.vue', () => {
   });
 
   it('should display size in a human readable format', () => {
-    const response = { body: '#'.repeat(1337) };
+    const response = { status: 200, body: '#'.repeat(1337) };
     store.commit(Mutation.UPDATE_RESPONSE, response);
 
     const component = shallowMount(StatusPanel, { store });