1 files changed, 121 insertions, 0 deletions
diff --git a/spec/javascripts/serverless/components/area_spec.js b/spec/javascripts/serverless/components/area_spec.js
new file mode 100644
index 00000000000..2be6ac3d268
--- /dev/null
+++ b/spec/javascripts/serverless/components/area_spec.js
@@ -0,0 +1,121 @@
+import { shallowMount } from '@vue/test-utils';
+import Area from '~/serverless/components/area.vue';
+import { mockNormalizedMetrics } from '../mock_data';
+
+describe('Area component', () => {
+  const mockWidgets = 'mockWidgets';
+  const mockGraphData = mockNormalizedMetrics;
+  let areaChart;
+
+  beforeEach(() => {
+    areaChart = shallowMount(Area, {
+      propsData: {
+        graphData: mockGraphData,
+        containerWidth: 0,
+      },
+      slots: {
+        default: mockWidgets,
+      },
+    });
+  });
+
+  afterEach(() => {
+    areaChart.destroy();
+  });
+
+  it('renders chart title', () => {
+    expect(areaChart.find({ ref: 'graphTitle' }).text()).toBe(mockGraphData.title);
+  });
+
+  it('contains graph widgets from slot', () => {
+    expect(areaChart.find({ ref: 'graphWidgets' }).text()).toBe(mockWidgets);
+  });
+
+  describe('methods', () => {
+    describe('formatTooltipText', () => {
+      const mockDate = mockNormalizedMetrics.queries[0].result[0].values[0].time;
+      const generateSeriesData = type => ({
+        seriesData: [
+          {
+            componentSubType: type,
+            value: [mockDate, 4],
+          },
+        ],
+        value: mockDate,
+      });
+
+      describe('series is of line type', () => {
+        beforeEach(() => {
+          areaChart.vm.formatTooltipText(generateSeriesData('line'));
+        });
+
+        it('formats tooltip title', () => {
+          expect(areaChart.vm.tooltipPopoverTitle).toBe('28 Feb 2019, 11:11AM');
+        });
+
+        it('formats tooltip content', () => {
+          expect(areaChart.vm.tooltipPopoverContent).toBe('Invocations (requests): 4');
+        });
+      });
+
+      it('verify default interval value of 1', () => {
+        expect(areaChart.vm.getInterval).toBe(1);
+      });
+    });
+
+    describe('onResize', () => {
+      const mockWidth = 233;
+
+      beforeEach(() => {
+        spyOn(Element.prototype, 'getBoundingClientRect').and.callFake(() => ({
+          width: mockWidth,
+        }));
+        areaChart.vm.onResize();
+      });
+
+      it('sets area chart width', () => {
+        expect(areaChart.vm.width).toBe(mockWidth);
+      });
+    });
+  });
+
+  describe('computed', () => {
+    describe('chartData', () => {
+      it('utilizes all data points', () => {
+        expect(Object.keys(areaChart.vm.chartData)).toEqual(['requests']);
+        expect(areaChart.vm.chartData.requests.length).toBe(2);
+      });
+
+      it('creates valid data', () => {
+        const data = areaChart.vm.chartData.requests;
+
+        expect(
+          data.filter(
+            datum => new Date(datum.time).getTime() > 0 && typeof datum.value === 'number',
+          ).length,
+        ).toBe(data.length);
+      });
+    });
+
+    describe('generateSeries', () => {
+      it('utilizes correct time data', () => {
+        expect(areaChart.vm.generateSeries.data).toEqual([
+          ['2019-02-28T11:11:38.756Z', 0],
+          ['2019-02-28T11:12:38.756Z', 0],
+        ]);
+      });
+    });
+
+    describe('xAxisLabel', () => {
+      it('constructs a label for the chart x-axis', () => {
+        expect(areaChart.vm.xAxisLabel).toBe('invocations / minute');
+      });
+    });
+
+    describe('yAxisLabel', () => {
+      it('constructs a label for the chart y-axis', () => {
+        expect(areaChart.vm.yAxisLabel).toBe('Invocations (requests)');
+      });
+    });
+  });
+});