diff --git a/public/app/features/explore/Graph.test.tsx b/public/app/features/explore/Graph.test.tsx
new file mode 100644
index 00000000000..eb9cb8a7f0d
--- /dev/null
+++ b/public/app/features/explore/Graph.test.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Graph from './Graph';
+import { mockData } from './__mocks__/mockData';
+
+const setup = (propOverrides?: object) => {
+ const props = Object.assign(
+ {
+ data: mockData().slice(0, 19),
+ options: {
+ interval: '20s',
+ range: { from: 'now-6h', to: 'now' },
+ targets: [
+ {
+ format: 'time_series',
+ instant: false,
+ hinting: true,
+ expr: 'prometheus_http_request_duration_seconds_bucket',
+ },
+ ],
+ },
+ },
+ propOverrides
+ );
+
+ // Enzyme.shallow did not work well with jquery.flop. Mocking the draw function.
+ Graph.prototype.draw = jest.fn();
+
+ const wrapper = shallow();
+ const instance = wrapper.instance() as Graph;
+
+ return {
+ wrapper,
+ instance,
+ };
+};
+
+describe('Render', () => {
+ it('should render component', () => {
+ const { wrapper } = setup();
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('should render component with disclaimer', () => {
+ const { wrapper } = setup({
+ data: mockData(),
+ });
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('should show query return no time series', () => {
+ const { wrapper } = setup({
+ data: [],
+ });
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/public/app/features/explore/__mocks__/mockData.ts b/public/app/features/explore/__mocks__/mockData.ts
new file mode 100644
index 00000000000..2e89ded29cf
--- /dev/null
+++ b/public/app/features/explore/__mocks__/mockData.ts
@@ -0,0 +1,274 @@
+export const mockData = () => {
+ return [
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/label/:name/values',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '+Inf',
+ },
+ values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/label/:name/values',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '0.1',
+ },
+ values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/label/:name/values',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '0.2',
+ },
+ values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/label/:name/values',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '0.4',
+ },
+ values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/label/:name/values',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '1',
+ },
+ values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/label/:name/values',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '120',
+ },
+ values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/label/:name/values',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '20',
+ },
+ values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/label/:name/values',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '3',
+ },
+ values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/label/:name/values',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '60',
+ },
+ values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/label/:name/values',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '8',
+ },
+ values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/metrics',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '+Inf',
+ },
+ values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/metrics',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '0.1',
+ },
+ values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/metrics',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '0.4',
+ },
+ values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/metrics',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '1',
+ },
+ values: [[1537847900, '953'], [1537858080, '1195'], [1537858100, '1195']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/metrics',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '120',
+ },
+ values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/metrics',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '20',
+ },
+ values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/metrics',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '3',
+ },
+ values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/metrics',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '60',
+ },
+ values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/metrics',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '8',
+ },
+ values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/query',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '+Inf',
+ },
+ values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/query',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '0.1',
+ },
+ values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/query',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '0.2',
+ },
+ values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/query',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '0.4',
+ },
+ values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/query',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '1',
+ },
+ values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/query',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '120',
+ },
+ values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/query',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '20',
+ },
+ values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+ },
+ {
+ metric: {
+ __name__: 'prometheus_http_request_duration_seconds_bucket',
+ handler: '/query',
+ instance: 'localhost:9090',
+ job: 'prometheus',
+ le: '3',
+ },
+ values: [[1537857260, '55'], [1537861960, '1'], [1537861980, '1']],
+ },
+ ];
+};
diff --git a/public/app/features/explore/__snapshots__/Graph.test.tsx.snap b/public/app/features/explore/__snapshots__/Graph.test.tsx.snap
new file mode 100644
index 00000000000..9f30a9e7eb9
--- /dev/null
+++ b/public/app/features/explore/__snapshots__/Graph.test.tsx.snap
@@ -0,0 +1,971 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+
+`;
+
+exports[`Render should render component with disclaimer 1`] = `
+
+
+
+ Showing only 20 time series.
+
+
+ Show all 27
+
+
+
+
+`;
+
+exports[`Render should show query return no time series 1`] = `
+
+
+ The queries returned no time series to graph.
+
+
+`;