From 910f513ab2b04bf5607213da0a49ce9c5c73bc32 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Mon, 5 Mar 2018 18:50:01 +0200
Subject: Move MemoryGraph and MemoryUsage vue components

---
 .../components/memory_usage.vue                    | 160 +++++++++++++++++++++
 .../components/mr_widget_deployment.js             |   8 +-
 .../components/mr_widget_memory_usage.js           | 153 --------------------
 .../vue_shared/components/memory_graph.js          | 117 ---------------
 .../vue_shared/components/memory_graph.vue         | 133 +++++++++++++++++
 ...mr-widget-memory-usage-and-graph-components.yml |   5 +
 .../components/mr_widget_memory_usage_spec.js      |  18 +--
 .../vue_shared/components/memory_graph_spec.js     |  26 +---
 8 files changed, 308 insertions(+), 312 deletions(-)
 create mode 100644 app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
 delete mode 100644 app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
 delete mode 100644 app/assets/javascripts/vue_shared/components/memory_graph.js
 create mode 100644 app/assets/javascripts/vue_shared/components/memory_graph.vue
 create mode 100644 changelogs/unreleased/refactor-move-mr-widget-memory-usage-and-graph-components.yml

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
new file mode 100644
index 00000000000..a16f9055a6d
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
@@ -0,0 +1,160 @@
+<script>
+import statusCodes from '../../lib/utils/http_status';
+import { bytesToMiB } from '../../lib/utils/number_utils';
+import { backOff } from '../../lib/utils/common_utils';
+import MemoryGraph from '../../vue_shared/components/memory_graph.vue';
+import MRWidgetService from '../services/mr_widget_service';
+
+export default {
+  name: 'MemoryUsage',
+  components: {
+    MemoryGraph,
+  },
+  props: {
+    metricsUrl: {
+      type: String,
+      required: true,
+    },
+    metricsMonitoringUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      memoryFrom: 0,
+      memoryTo: 0,
+      memoryMetrics: [],
+      deploymentTime: 0,
+      hasMetrics: false,
+      loadFailed: false,
+      loadingMetrics: true,
+      backOffRequestCounter: 0,
+    };
+  },
+  computed: {
+    shouldShowLoading() {
+      return this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
+    },
+    shouldShowMemoryGraph() {
+      return !this.loadingMetrics && this.hasMetrics && !this.loadFailed;
+    },
+    shouldShowLoadFailure() {
+      return !this.loadingMetrics && !this.hasMetrics && this.loadFailed;
+    },
+    shouldShowMetricsUnavailable() {
+      return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
+    },
+    memoryChangeType() {
+      const memoryTo = Number(this.memoryTo);
+      const memoryFrom = Number(this.memoryFrom);
+
+      if (memoryTo > memoryFrom) {
+        return 'increased';
+      } else if (memoryTo < memoryFrom) {
+        return 'decreased';
+      }
+
+      return 'unchanged';
+    },
+  },
+  mounted() {
+    this.loadingMetrics = true;
+    this.loadMetrics();
+  },
+  methods: {
+    getMegabytes(bytesString) {
+      const valueInBytes = Number(bytesString).toFixed(2);
+      return (bytesToMiB(valueInBytes)).toFixed(2);
+    },
+    computeGraphData(metrics, deploymentTime) {
+      this.loadingMetrics = false;
+      const { memory_before, memory_after, memory_values } = metrics;
+
+      // Both `memory_before` and `memory_after` objects
+      // have peculiar structure where accessing only a specific
+      // index yeilds correct value that we can use to show memory delta.
+      if (memory_before.length > 0) {
+        this.memoryFrom = this.getMegabytes(memory_before[0].value[1]);
+      }
+
+      if (memory_after.length > 0) {
+        this.memoryTo = this.getMegabytes(memory_after[0].value[1]);
+      }
+
+      if (memory_values.length > 0) {
+        this.hasMetrics = true;
+        this.memoryMetrics = memory_values[0].values;
+        this.deploymentTime = deploymentTime;
+      }
+    },
+    loadMetrics() {
+      backOff((next, stop) => {
+        MRWidgetService.fetchMetrics(this.metricsUrl)
+          .then((res) => {
+            if (res.status === statusCodes.NO_CONTENT) {
+              this.backOffRequestCounter = this.backOffRequestCounter += 1;
+              /* eslint-disable no-unused-expressions */
+              this.backOffRequestCounter < 3 ? next() : stop(res);
+            } else {
+              stop(res);
+            }
+          })
+          .catch(stop);
+      })
+        .then((res) => {
+          if (res.status === statusCodes.NO_CONTENT) {
+            return res;
+          }
+
+          return res.data;
+        })
+        .then((data) => {
+          this.computeGraphData(data.metrics, data.deployment_time);
+          return data;
+        })
+        .catch(() => {
+          this.loadFailed = true;
+          this.loadingMetrics = false;
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
+    <p
+      v-if="shouldShowLoading"
+      class="usage-info js-usage-info usage-info-loading">
+      <i
+        class="fa fa-spinner fa-spin usage-info-load-spinner"
+        aria-hidden="true">
+      </i>Loading deployment statistics
+    </p>
+    <p
+      v-if="shouldShowMemoryGraph"
+      class="usage-info js-usage-info">
+      <a
+        :href="metricsMonitoringUrl"
+      >Memory</a> usage <b>{{ memoryChangeType }}</b> from {{ memoryFrom }}MB to {{ memoryTo }}MB
+    </p>
+    <p
+      v-if="shouldShowLoadFailure"
+      class="usage-info js-usage-info usage-info-failed">
+      Failed to load deployment statistics
+    </p>
+    <p
+      v-if="shouldShowMetricsUnavailable"
+      class="usage-info js-usage-info usage-info-unavailable">
+      Deployment statistics are not available currently
+    </p>
+    <memory-graph
+      v-if="shouldShowMemoryGraph"
+      :metrics="memoryMetrics"
+      :deployment-time="deploymentTime"
+      height="25"
+      width="100"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
index d174a900f63..c7f992384c8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
@@ -1,7 +1,7 @@
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import { visitUrl } from '../../lib/utils/url_utility';
 import Flash from '../../flash';
-import MemoryUsage from './mr_widget_memory_usage';
+import MemoryUsage from './memory_usage.vue';
 import StatusIcon from './mr_widget_status_icon.vue';
 import MRWidgetService from '../services/mr_widget_service';
 
@@ -12,8 +12,8 @@ export default {
     service: { type: Object, required: true },
   },
   components: {
-    'mr-widget-memory-usage': MemoryUsage,
-    'status-icon': StatusIcon,
+    MemoryUsage,
+    StatusIcon,
   },
   methods: {
     formatDate(date) {
@@ -100,7 +100,7 @@ export default {
               class="btn btn-default btn-xs">
               Stop environment
             </button>
-            <mr-widget-memory-usage
+            <memory-usage
               v-if="deployment.metrics_url"
               :metrics-url="deployment.metrics_url"
               :metrics-monitoring-url="deployment.metrics_monitoring_url"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
deleted file mode 100644
index 69e70ba1dd6..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import statusCodes from '../../lib/utils/http_status';
-import { bytesToMiB } from '../../lib/utils/number_utils';
-import { backOff } from '../../lib/utils/common_utils';
-import MemoryGraph from '../../vue_shared/components/memory_graph';
-import MRWidgetService from '../services/mr_widget_service';
-
-export default {
-  name: 'MemoryUsage',
-  props: {
-    metricsUrl: {
-      type: String,
-      required: true,
-    },
-    metricsMonitoringUrl: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      memoryFrom: 0,
-      memoryTo: 0,
-      memoryMetrics: [],
-      deploymentTime: 0,
-      hasMetrics: false,
-      loadFailed: false,
-      loadingMetrics: true,
-      backOffRequestCounter: 0,
-    };
-  },
-  components: {
-    'mr-memory-graph': MemoryGraph,
-  },
-  computed: {
-    shouldShowLoading() {
-      return this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
-    },
-    shouldShowMemoryGraph() {
-      return !this.loadingMetrics && this.hasMetrics && !this.loadFailed;
-    },
-    shouldShowLoadFailure() {
-      return !this.loadingMetrics && !this.hasMetrics && this.loadFailed;
-    },
-    shouldShowMetricsUnavailable() {
-      return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
-    },
-    memoryChangeType() {
-      const memoryTo = Number(this.memoryTo);
-      const memoryFrom = Number(this.memoryFrom);
-
-      if (memoryTo > memoryFrom) {
-        return 'increased';
-      } else if (memoryTo < memoryFrom) {
-        return 'decreased';
-      }
-
-      return 'unchanged';
-    },
-  },
-  methods: {
-    getMegabytes(bytesString) {
-      const valueInBytes = Number(bytesString).toFixed(2);
-      return (bytesToMiB(valueInBytes)).toFixed(2);
-    },
-    computeGraphData(metrics, deploymentTime) {
-      this.loadingMetrics = false;
-      const { memory_before, memory_after, memory_values } = metrics;
-
-      // Both `memory_before` and `memory_after` objects
-      // have peculiar structure where accessing only a specific
-      // index yeilds correct value that we can use to show memory delta.
-      if (memory_before.length > 0) {
-        this.memoryFrom = this.getMegabytes(memory_before[0].value[1]);
-      }
-
-      if (memory_after.length > 0) {
-        this.memoryTo = this.getMegabytes(memory_after[0].value[1]);
-      }
-
-      if (memory_values.length > 0) {
-        this.hasMetrics = true;
-        this.memoryMetrics = memory_values[0].values;
-        this.deploymentTime = deploymentTime;
-      }
-    },
-    loadMetrics() {
-      backOff((next, stop) => {
-        MRWidgetService.fetchMetrics(this.metricsUrl)
-          .then((res) => {
-            if (res.status === statusCodes.NO_CONTENT) {
-              this.backOffRequestCounter = this.backOffRequestCounter += 1;
-              /* eslint-disable no-unused-expressions */
-              this.backOffRequestCounter < 3 ? next() : stop(res);
-            } else {
-              stop(res);
-            }
-          })
-          .catch(stop);
-      })
-        .then((res) => {
-          if (res.status === statusCodes.NO_CONTENT) {
-            return res;
-          }
-
-          return res.data;
-        })
-        .then((data) => {
-          this.computeGraphData(data.metrics, data.deployment_time);
-          return data;
-        })
-        .catch(() => {
-          this.loadFailed = true;
-          this.loadingMetrics = false;
-        });
-    },
-  },
-  mounted() {
-    this.loadingMetrics = true;
-    this.loadMetrics();
-  },
-  template: `
-    <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
-      <p
-        v-if="shouldShowLoading"
-        class="usage-info js-usage-info usage-info-loading">
-        <i
-          class="fa fa-spinner fa-spin usage-info-load-spinner"
-          aria-hidden="true" />Loading deployment statistics
-      </p>
-      <p
-        v-if="shouldShowMemoryGraph"
-        class="usage-info js-usage-info">
-        <a :href="metricsMonitoringUrl">Memory</a> usage <b>{{memoryChangeType}}</b> from {{memoryFrom}}MB to {{memoryTo}}MB
-      </p>
-      <p
-        v-if="shouldShowLoadFailure"
-        class="usage-info js-usage-info usage-info-failed">
-        Failed to load deployment statistics
-      </p>
-      <p
-        v-if="shouldShowMetricsUnavailable"
-        class="usage-info js-usage-info usage-info-unavailable">
-        Deployment statistics are not available currently
-      </p>
-      <mr-memory-graph
-        v-if="shouldShowMemoryGraph"
-        :metrics="memoryMetrics"
-        :deploymentTime="deploymentTime"
-        height="25"
-        width="100" />
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.js b/app/assets/javascripts/vue_shared/components/memory_graph.js
deleted file mode 100644
index f37ef1a5ca3..00000000000
--- a/app/assets/javascripts/vue_shared/components/memory_graph.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import { getTimeago } from '../../lib/utils/datetime_utility';
-
-export default {
-  name: 'MemoryGraph',
-  props: {
-    metrics: { type: Array, required: true },
-    deploymentTime: { type: Number, required: true },
-    width: { type: String, required: true },
-    height: { type: String, required: true },
-  },
-  data() {
-    return {
-      pathD: '',
-      pathViewBox: '',
-      dotX: '',
-      dotY: '',
-    };
-  },
-  computed: {
-    getFormattedMedian() {
-      const deployedSince = getTimeago().format(this.deploymentTime * 1000);
-      return `Deployed ${deployedSince}`;
-    },
-  },
-  methods: {
-    /**
-     * Returns metric value index in metrics array
-     * with timestamp closest to matching median
-     */
-    getMedianMetricIndex(median, metrics) {
-      let matchIndex = 0;
-      let timestampDiff = 0;
-      let smallestDiff = 0;
-
-      const metricTimestamps = metrics.map(v => v[0]);
-
-      // Find metric timestamp which is closest to deploymentTime
-      timestampDiff = Math.abs(metricTimestamps[0] - median);
-      metricTimestamps.forEach((timestamp, index) => {
-        if (index === 0) { // Skip first element
-          return;
-        }
-
-        smallestDiff = Math.abs(timestamp - median);
-        if (smallestDiff < timestampDiff) {
-          matchIndex = index;
-          timestampDiff = smallestDiff;
-        }
-      });
-
-      return matchIndex;
-    },
-
-    /**
-     * Get Graph Plotting values to render Line and Dot
-     */
-    getGraphPlotValues(median, metrics) {
-      const renderData = metrics.map(v => v[1]);
-      const medianMetricIndex = this.getMedianMetricIndex(median, metrics);
-      let cx = 0;
-      let cy = 0;
-
-      // Find Maximum and Minimum values from `renderData` array
-      const maxMemory = Math.max.apply(null, renderData);
-      const minMemory = Math.min.apply(null, renderData);
-
-      // Find difference between extreme ends
-      const diff = maxMemory - minMemory;
-      const lineWidth = renderData.length;
-
-      // Iterate over metrics values and perform following
-      // 1. Find x & y co-ords for deploymentTime's memory value
-      // 2. Return line path against maxMemory
-      const linePath = renderData.map((y, x) => {
-        if (medianMetricIndex === x) {
-          cx = x;
-          cy = maxMemory - y;
-        }
-        return `${x} ${maxMemory - y}`;
-      });
-
-      return {
-        pathD: linePath,
-        pathViewBox: {
-          lineWidth,
-          diff,
-        },
-        dotX: cx,
-        dotY: cy,
-      };
-    },
-
-    /**
-     * Render Graph based on provided median and metrics values
-     */
-    renderGraph(median, metrics) {
-      const { pathD, pathViewBox, dotX, dotY } = this.getGraphPlotValues(median, metrics);
-
-      // Set props and update graph on UI.
-      this.pathD = `M ${pathD}`;
-      this.pathViewBox = `0 0 ${pathViewBox.lineWidth} ${pathViewBox.diff}`;
-      this.dotX = dotX;
-      this.dotY = dotY;
-    },
-  },
-  mounted() {
-    this.renderGraph(this.deploymentTime, this.metrics);
-  },
-  template: `
-    <div class="memory-graph-container">
-      <svg class="has-tooltip" :title="getFormattedMedian" :width="width" :height="height" xmlns="http://www.w3.org/2000/svg">
-        <path :d="pathD" :viewBox="pathViewBox" />
-        <circle r="1.5" :cx="dotX" :cy="dotY" tranform="translate(0 -1)" />
-      </svg>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.vue b/app/assets/javascripts/vue_shared/components/memory_graph.vue
new file mode 100644
index 00000000000..b07f6b07afe
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue
@@ -0,0 +1,133 @@
+<script>
+import { getTimeago } from '../../lib/utils/datetime_utility';
+
+export default {
+  name: 'MemoryGraph',
+  props: {
+    metrics: { type: Array, required: true },
+    deploymentTime: { type: Number, required: true },
+    width: { type: String, required: true },
+    height: { type: String, required: true },
+  },
+  data() {
+    return {
+      pathD: '',
+      pathViewBox: '',
+      dotX: '',
+      dotY: '',
+    };
+  },
+  computed: {
+    getFormattedMedian() {
+      const deployedSince = getTimeago().format(this.deploymentTime * 1000);
+      return `Deployed ${deployedSince}`;
+    },
+  },
+  mounted() {
+    this.renderGraph(this.deploymentTime, this.metrics);
+  },
+  methods: {
+    /**
+     * Returns metric value index in metrics array
+     * with timestamp closest to matching median
+     */
+    getMedianMetricIndex(median, metrics) {
+      let matchIndex = 0;
+      let timestampDiff = 0;
+      let smallestDiff = 0;
+
+      const metricTimestamps = metrics.map(v => v[0]);
+
+      // Find metric timestamp which is closest to deploymentTime
+      timestampDiff = Math.abs(metricTimestamps[0] - median);
+      metricTimestamps.forEach((timestamp, index) => {
+        if (index === 0) { // Skip first element
+          return;
+        }
+
+        smallestDiff = Math.abs(timestamp - median);
+        if (smallestDiff < timestampDiff) {
+          matchIndex = index;
+          timestampDiff = smallestDiff;
+        }
+      });
+
+      return matchIndex;
+    },
+
+    /**
+     * Get Graph Plotting values to render Line and Dot
+     */
+    getGraphPlotValues(median, metrics) {
+      const renderData = metrics.map(v => v[1]);
+      const medianMetricIndex = this.getMedianMetricIndex(median, metrics);
+      let cx = 0;
+      let cy = 0;
+
+      // Find Maximum and Minimum values from `renderData` array
+      const maxMemory = Math.max.apply(null, renderData);
+      const minMemory = Math.min.apply(null, renderData);
+
+      // Find difference between extreme ends
+      const diff = maxMemory - minMemory;
+      const lineWidth = renderData.length;
+
+      // Iterate over metrics values and perform following
+      // 1. Find x & y co-ords for deploymentTime's memory value
+      // 2. Return line path against maxMemory
+      const linePath = renderData.map((y, x) => {
+        if (medianMetricIndex === x) {
+          cx = x;
+          cy = maxMemory - y;
+        }
+        return `${x} ${maxMemory - y}`;
+      });
+
+      return {
+        pathD: linePath,
+        pathViewBox: {
+          lineWidth,
+          diff,
+        },
+        dotX: cx,
+        dotY: cy,
+      };
+    },
+
+    /**
+     * Render Graph based on provided median and metrics values
+     */
+    renderGraph(median, metrics) {
+      const { pathD, pathViewBox, dotX, dotY } = this.getGraphPlotValues(median, metrics);
+
+      // Set props and update graph on UI.
+      this.pathD = `M ${pathD}`;
+      this.pathViewBox = `0 0 ${pathViewBox.lineWidth} ${pathViewBox.diff}`;
+      this.dotX = dotX;
+      this.dotY = dotY;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="memory-graph-container">
+    <svg
+      class="has-tooltip"
+      :title="getFormattedMedian"
+      :width="width"
+      :height="height"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        :d="pathD"
+        :viewBox="pathViewBox"
+      />
+      <circle
+        r="1.5"
+        :cx="dotX"
+        :cy="dotY"
+        tranform="translate(0 -1)"
+      />
+    </svg>
+  </div>
+</template>
diff --git a/changelogs/unreleased/refactor-move-mr-widget-memory-usage-and-graph-components.yml b/changelogs/unreleased/refactor-move-mr-widget-memory-usage-and-graph-components.yml
new file mode 100644
index 00000000000..96e63343963
--- /dev/null
+++ b/changelogs/unreleased/refactor-move-mr-widget-memory-usage-and-graph-components.yml
@@ -0,0 +1,5 @@
+---
+title: Move MemoryGraph and MemoryUsage vue components
+merge_request: 17533
+author: George Tsiolis
+type: performance
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
index 07ed7f7f532..31710551399 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import memoryUsageComponent from '~/vue_merge_request_widget/components/mr_widget_memory_usage';
+import MemoryUsage from '~/vue_merge_request_widget/components/memory_usage.vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 
 const url = '/root/acets-review-apps/environments/15/deployments/1/metrics';
@@ -34,7 +34,7 @@ const metricsMockData = {
 };
 
 const createComponent = () => {
-  const Component = Vue.extend(memoryUsageComponent);
+  const Component = Vue.extend(MemoryUsage);
 
   return new Component({
     el: document.createElement('div'),
@@ -67,21 +67,9 @@ describe('MemoryUsage', () => {
     el = vm.$el;
   });
 
-  describe('props', () => {
-    it('should have props with defaults', () => {
-      const { metricsUrl } = memoryUsageComponent.props;
-      const MetricsUrlTypeClass = metricsUrl.type;
-
-      Vue.nextTick(() => {
-        expect(new MetricsUrlTypeClass() instanceof String).toBeTruthy();
-        expect(metricsUrl.required).toBeTruthy();
-      });
-    });
-  });
-
   describe('data', () => {
     it('should have default data', () => {
-      const data = memoryUsageComponent.data();
+      const data = MemoryUsage.data();
 
       expect(Array.isArray(data.memoryMetrics)).toBeTruthy();
       expect(data.memoryMetrics.length).toBe(0);
diff --git a/spec/javascripts/vue_shared/components/memory_graph_spec.js b/spec/javascripts/vue_shared/components/memory_graph_spec.js
index d46a3f2328e..73a69df019e 100644
--- a/spec/javascripts/vue_shared/components/memory_graph_spec.js
+++ b/spec/javascripts/vue_shared/components/memory_graph_spec.js
@@ -1,12 +1,12 @@
 import Vue from 'vue';
-import memoryGraphComponent from '~/vue_shared/components/memory_graph';
+import MemoryGraph from '~/vue_shared/components/memory_graph.vue';
 import { mockMetrics, mockMedian, mockMedianIndex } from './mock_data';
 
 const defaultHeight = '25';
 const defaultWidth = '100';
 
 const createComponent = () => {
-  const Component = Vue.extend(memoryGraphComponent);
+  const Component = Vue.extend(MemoryGraph);
 
   return new Component({
     el: document.createElement('div'),
@@ -32,29 +32,9 @@ describe('MemoryGraph', () => {
     el = vm.$el;
   });
 
-  describe('props', () => {
-    it('should have props with defaults', (done) => {
-      const { metrics, deploymentTime, width, height } = memoryGraphComponent.props;
-
-      Vue.nextTick(() => {
-        const typeClassMatcher = (propItem, expectedType) => {
-          const PropItemTypeClass = propItem.type;
-          expect(new PropItemTypeClass() instanceof expectedType).toBeTruthy();
-          expect(propItem.required).toBeTruthy();
-        };
-
-        typeClassMatcher(metrics, Array);
-        typeClassMatcher(deploymentTime, Number);
-        typeClassMatcher(width, String);
-        typeClassMatcher(height, String);
-        done();
-      });
-    });
-  });
-
   describe('data', () => {
     it('should have default data', () => {
-      const data = memoryGraphComponent.data();
+      const data = MemoryGraph.data();
       const dataValidator = (dataItem, expectedType, defaultVal) => {
         expect(typeof dataItem).toBe(expectedType);
         expect(dataItem).toBe(defaultVal);
-- 
cgit v1.2.1