diff --git a/src/ui/public/vis/__tests__/_vis_update_state.js b/src/ui/public/vis/__tests__/_vis_update_state.js
new file mode 100644
index 000000000000..973be3ec6d7e
--- /dev/null
+++ b/src/ui/public/vis/__tests__/_vis_update_state.js
@@ -0,0 +1,54 @@
+import _ from 'lodash';
+import expect from 'expect.js';
+import { updateOldState } from '../vis_update_state';
+
+// eslint-disable-next-line camelcase
+import { pre_6_1, since_6_1 } from './vis_update_objs/gauge_objs';
+
+function watchForChanges(obj) {
+  const originalObject = _.cloneDeep(obj);
+  return () => {
+    return _.isEqual(originalObject, obj);
+  };
+}
+
+describe('updateOldState', () => {
+
+  it('needs to be a function', () => {
+    expect(updateOldState).to.be.a('function');
+  });
+
+  describe('gauge conversion', () => {
+
+    const oldGaugeChart = {
+      type: 'gauge',
+      fontSize: 12,
+    };
+
+    it('needs to convert fontSize for old gauge charts', () => {
+      const isUnchanged = watchForChanges(oldGaugeChart);
+      const state = updateOldState(oldGaugeChart);
+      expect(state).to.be.eql({
+        type: 'gauge',
+        gauge: {
+          style: {
+            fontSize: 12
+          }
+        }
+      });
+      // The method is not allowed to modify the passed in object
+      expect(isUnchanged()).to.be(true);
+    });
+
+    it('needs to convert gauge metrics (pre 6.1) to real metrics', () => {
+      const isUnchanged = watchForChanges(pre_6_1);
+      const state = updateOldState(pre_6_1);
+
+      expect(state).to.be.eql(since_6_1);
+      // The method is not allowed to modify the passed in object
+      expect(isUnchanged()).to.be(true);
+    });
+
+  });
+
+});
diff --git a/src/ui/public/vis/__tests__/index.js b/src/ui/public/vis/__tests__/index.js
index 03825e05e0d9..f1ef820424ec 100644
--- a/src/ui/public/vis/__tests__/index.js
+++ b/src/ui/public/vis/__tests__/index.js
@@ -1,6 +1,7 @@
 import './_agg_config';
 import './_agg_config_result';
 import './_agg_configs';
+import './_vis_update_state';
 import './_vis';
 describe('Vis Component', function () {
 });
diff --git a/src/ui/public/vis/__tests__/vis_update_objs/gauge_objs.js b/src/ui/public/vis/__tests__/vis_update_objs/gauge_objs.js
new file mode 100644
index 000000000000..5ee2255abfb4
--- /dev/null
+++ b/src/ui/public/vis/__tests__/vis_update_objs/gauge_objs.js
@@ -0,0 +1,98 @@
+/* eslint-disable camelcase */
+
+export const pre_6_1 = {
+  'title': 'metrics test',
+  'type': 'metric',
+  'params': {
+    'addTooltip': true,
+    'addLegend': true,
+    'type': 'gauge',
+    'gauge': {
+      'verticalSplit': false,
+      'autoExtend': false,
+      'percentageMode': false,
+      'gaugeType': 'Metric',
+      'gaugeStyle': 'Full',
+      'backStyle': 'Full',
+      'orientation': 'vertical',
+      'colorSchema': 'Green to Red',
+      'gaugeColorMode': 'Labels',
+      'useRange': false,
+      'colorsRange': [
+        {
+          'from': 0,
+          'to': 100
+        }
+      ],
+      'invertColors': false,
+      'labels': {
+        'show': true,
+        'color': 'black'
+      },
+      'scale': {
+        'show': false,
+        'labels': false,
+        'color': '#333',
+        'width': 2
+      },
+      'type': 'simple',
+      'style': {
+        'fontSize': 60,
+        'bgColor': false,
+        'labelColor': true,
+        'subText': ''
+      }
+    }
+  },
+  'aggs': [
+    {
+      'id': '1',
+      'enabled': true,
+      'type': 'count',
+      'schema': 'metric',
+      'params': {}
+    }
+  ]
+};
+
+export const since_6_1 = {
+  'title': 'metrics test',
+  'type': 'metric',
+  'params': {
+    'addTooltip': true,
+    'addLegend': false,
+    'type': 'metric',
+    'metric': {
+      'percentageMode': false,
+      'colorSchema': 'Green to Red',
+      'metricColorMode': 'Labels',
+      'useRange': false,
+      'colorsRange': [
+        {
+          'from': 0,
+          'to': 100
+        }
+      ],
+      'invertColors': false,
+      'labels': {
+        'show': true,
+        'color': 'black'
+      },
+      'style': {
+        'fontSize': 60,
+        'bgColor': false,
+        'labelColor': true,
+        'subText': ''
+      }
+    }
+  },
+  'aggs': [
+    {
+      'id': '1',
+      'enabled': true,
+      'type': 'count',
+      'schema': 'metric',
+      'params': {}
+    }
+  ]
+};
diff --git a/src/ui/public/vis/vis_update.js b/src/ui/public/vis/vis_update.js
index ed787069f674..2b9ff1032e3c 100644
--- a/src/ui/public/vis/vis_update.js
+++ b/src/ui/public/vis/vis_update.js
@@ -1,3 +1,7 @@
+// TODO: this should be moved to vis_update_state
+// Currently the migration takes place in Vis when calling setCurrentState.
+// It should rather convert the raw saved object before starting to instantiate
+// any JavaScript classes from it.
 const updateVisualizationConfig = (stateConfig, config) => {
   if (!stateConfig || stateConfig.seriesParams) return;
   if (!['line', 'area', 'histogram'].includes(config.type)) return;
diff --git a/src/ui/public/vis/vis_update_state.js b/src/ui/public/vis/vis_update_state.js
index babff2467f8a..02cf84628cac 100644
--- a/src/ui/public/vis/vis_update_state.js
+++ b/src/ui/public/vis/vis_update_state.js
@@ -1,5 +1,12 @@
 import _ from 'lodash';
 
+/**
+ * This function is responsible for updating old visStates - the actual saved object
+ * object - into the format, that will be required by the current Kibana version.
+ * This method will be executed for each saved vis object, that will be loaded.
+ * It will return the updated version as Kibana would expect it. It does not modify
+ * the passed state.
+ */
 export const updateOldState = (visState) => {
   if (!visState) return visState;
   const newState = _.cloneDeep(visState);