✅ Fixed tests to check for the null bar values.

* This check was added only for the bar variant of the charts - because line charts interpret null as dotted line. * Line charts do not need null value filling, as all the lines are drawn independently.
Adyen · Nov 27, 2023 · 52b777b · 52b777b
1 parent 11a4d1a
commit 52b777b
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 7 deletions.
diff --git a/packages/lib/src/components/charts/lume-bar-chart/lume-bar-chart.spec.ts b/packages/lib/src/components/charts/lume-bar-chart/lume-bar-chart.spec.ts
@@ -9,10 +9,12 @@ import {
   yScale,
 } from '@test/unit/mock-data';
 import { flushPromises } from '@test/unit/flush-promises';
+import { CHART_TYPES, ChartType } from '@/utils/constants';
 
 const numberOfSets = 2;
 const numberOfBars = singleSetData[0].values.length;
 const multiSetData = generateData(numberOfSets, singleSetData[0].values.length);
+const chartType: ChartType = CHART_TYPES.BAR;
 
 const barChartTestSuiteFactory = (props) => new BaseTestSuite(BarChart, props);
 
@@ -23,6 +25,7 @@ describe('lume-bar-chart.vue', () => {
       labels,
       xScale,
       yScale,
+      chartType,
     }).run().wrapper;
 
     await flushPromises();
@@ -36,6 +39,7 @@ describe('lume-bar-chart.vue', () => {
       labels,
       xScale,
       yScale,
+      chartType,
     }).wrapper;
 
     await flushPromises();
@@ -55,6 +59,7 @@ describe('lume-bar-chart.vue', () => {
       labels,
       xScale,
       yScale,
+      chartType,
     }).wrapper;
 
     await flushPromises();
@@ -76,6 +81,7 @@ describe('lume-bar-chart.vue', () => {
       labels,
       xScale,
       yScale,
+      chartType,
     }).wrapper;
 
     await flushPromises();
@@ -91,7 +97,13 @@ describe('lume-bar-chart.vue', () => {
   test.skip('should throw an error when type is not applied for multiset', () => {
     const spy = vi.spyOn(console, 'error').mockImplementation(vi.fn);
     expect(() =>
-      barChartTestSuiteFactory({ data: multiSetData, labels, xScale, yScale })
+      barChartTestSuiteFactory({
+        data: multiSetData,
+        labels,
+        xScale,
+        yScale,
+        chartType,
+      })
     ).toThrowError("Bar chart needs a type when there's multiple datasets.");
     expect(spy).toHaveBeenCalled();
   });

diff --git a/packages/lib/src/components/charts/lume-grouped-bar-chart/lume-grouped-bar-chart.spec.ts b/packages/lib/src/components/charts/lume-grouped-bar-chart/lume-grouped-bar-chart.spec.ts
@@ -10,9 +10,10 @@ import {
   yScale,
 } from '@test/unit/mock-data';
 
-import { Orientation } from '@/utils/constants';
+import { CHART_TYPES, ChartType, Orientation } from '@/utils/constants';
 
 const orientation: Orientation = 'horizontal';
+const chartType: ChartType = CHART_TYPES.BAR;
 const numberOfBars = data[0].values.length;
 
 const groupedBarChartTestSuiteFactory = (props) =>
@@ -25,6 +26,7 @@ describe('lume-grouped-bar-chart.vue', () => {
       labels,
       xScale,
       yScale,
+      chartType,
     }).wrapper;
 
     const el = wrapper.find('[data-j-grouped-bar-chart]');
@@ -43,6 +45,7 @@ describe('lume-grouped-bar-chart.vue', () => {
       yScale: xScale,
       xScale: yScale,
       orientation,
+      chartType,
     }).wrapper;
 
     const el = wrapper.findComponent('[data-j-bars-group]');
@@ -60,6 +63,7 @@ describe('lume-grouped-bar-chart.vue', () => {
       labels,
       xScale,
       yScale: linearScale,
+      chartType,
     }).wrapper;
 
     const el = wrapper.findComponent('[data-j-bars-group]');
@@ -79,6 +83,7 @@ describe('lume-grouped-bar-chart.vue', () => {
       yScale: xScale,
       xScale: linearScale,
       orientation,
+      chartType,
     }).wrapper;
 
     const el = wrapper.findComponent('[data-j-bars-group]');
@@ -103,6 +108,7 @@ describe('lume-grouped-bar-chart.vue', () => {
       labels,
       xScale,
       yScale: linearScale,
+      chartType,
     }).wrapper;
 
     const el = wrapper.findComponent('[data-j-bars-group]');
@@ -128,6 +134,7 @@ describe('lume-grouped-bar-chart.vue', () => {
       yScale: xScale,
       xScale: linearScale,
       orientation,
+      chartType,
     }).wrapper;
 
     const el = wrapper.findComponent('[data-j-bars-group]');
@@ -141,6 +148,7 @@ describe('lume-grouped-bar-chart.vue', () => {
     labels,
     xScale,
     yScale,
+    chartType,
   });
   testSuite.run({ selector: '[data-j-lume-bar]', multisetData: [3, 7, 4, 5] });
 });
diff --git a/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.spec.ts b/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.spec.ts
@@ -9,8 +9,10 @@ import {
   xScale,
   yScale,
 } from '@test/unit/mock-data';
+import { CHART_TYPES, ChartType } from '@/utils/constants';
 
 const numberOfLines = data[0].values.length;
+const chartType: ChartType = CHART_TYPES.LINE;
 const lineChartTestSuiteFactory = (props) =>
   new BaseTestSuite(LumeLineChart, props);
 
@@ -21,6 +23,7 @@ describe('lume-line-chart.vue', () => {
       labels,
       xScale,
       yScale,
+      chartType,
     }).wrapper;
 
     const el = wrapper.find('[data-j-lume-line-chart]');
@@ -38,6 +41,7 @@ describe('lume-line-chart.vue', () => {
       labels,
       xScale,
       yScale: linearScale,
+      chartType,
     }).wrapper;
 
     const elements = wrapper.findAll('[data-j-line]');
@@ -49,6 +53,7 @@ describe('lume-line-chart.vue', () => {
     labels,
     xScale,
     yScale,
+    chartType,
   });
   testSuite.run({ selector: '[data-j-line]', multisetData: [3, 7, 4, 5] });
 });
diff --git a/packages/lib/src/components/charts/lume-single-bar-chart/lume-single-bar-chart.spec.ts b/packages/lib/src/components/charts/lume-single-bar-chart/lume-single-bar-chart.spec.ts
@@ -2,10 +2,12 @@ import SingleBarChart from './lume-single-bar-chart.vue';
 
 import { BaseTestSuite } from '@test/unit/reusable.test';
 import { data, labels, xScale, yScale } from '@test/unit/mock-data';
+import { CHART_TYPES, ChartType } from '@/utils/constants';
 
 const numberOfPositiveBars = 5;
 const numberOfNegativeBars = 2;
 const totalNumberOfBars = data[0].values.length;
+const chartType: ChartType = CHART_TYPES.BAR;
 
 const singleBarChartTestSuiteFactory = (props) =>
   new BaseTestSuite(SingleBarChart, props);
@@ -17,6 +19,7 @@ describe('lume-single-bar-chart.vue', () => {
       labels,
       xScale,
       yScale,
+      chartType,
     }).wrapper;
 
     const el = wrapper.find('[data-j-single-bar-chart]');
@@ -47,6 +50,7 @@ describe('lume-single-bar-chart.vue', () => {
       labels,
       xScale,
       yScale,
+      chartType,
     }).wrapper;
 
     const el = wrapper.find('[data-j-single-bar-chart]');
@@ -101,6 +105,7 @@ describe('lume-single-bar-chart.vue', () => {
       labels,
       xScale,
       yScale,
+      chartType,
     }).wrapper;
 
     const el = wrapper.find('[data-j-single-bar-chart]');
@@ -113,6 +118,7 @@ describe('lume-single-bar-chart.vue', () => {
     labels,
     xScale,
     yScale,
+    chartType,
   });
   testSuite.run({ selector: '[data-j-lume-bar]', multisetData: [1, 7, 1, 5] });
 });
diff --git a/packages/lib/src/components/charts/lume-stacked-bar-chart/lume-stacked-bar-chart.spec.ts b/packages/lib/src/components/charts/lume-stacked-bar-chart/lume-stacked-bar-chart.spec.ts
@@ -10,9 +10,10 @@ import {
   yScale,
 } from '@test/unit/mock-data';
 
-import { Orientation } from '@/utils/constants';
+import { CHART_TYPES, ChartType, Orientation } from '@/utils/constants';
 
 const orientation: Orientation = 'horizontal';
+const chartType: ChartType = CHART_TYPES.BAR;
 const numberOfBars = data[0].values.length;
 
 const stackedBarChartTestSuiteFactory = (props) =>
@@ -25,6 +26,7 @@ describe('lume-stacked-bar-chart.vue', () => {
       labels,
       xScale,
       yScale,
+      chartType,
     }).wrapper;
 
     const el = wrapper.find('[data-j-stacked-bar-chart]');
@@ -43,6 +45,7 @@ describe('lume-stacked-bar-chart.vue', () => {
       xScale,
       yScale,
       orientation,
+      chartType,
     }).wrapper;
 
     const el = wrapper.findComponent('[data-j-bars-group]');
@@ -59,6 +62,7 @@ describe('lume-stacked-bar-chart.vue', () => {
       labels,
       xScale,
       yScale: manipulatedDataLinearScale,
+      chartType,
     }).wrapper;
 
     const el = wrapper.find('[data-j-bars-group]');
@@ -78,6 +82,7 @@ describe('lume-stacked-bar-chart.vue', () => {
       yScale: xScale,
       xScale: manipulatedDataLinearScale,
       orientation,
+      chartType,
     }).wrapper;
 
     const el = wrapper.find('[data-j-bars-group]');
@@ -102,6 +107,7 @@ describe('lume-stacked-bar-chart.vue', () => {
       labels,
       xScale,
       yScale: manipulatedDataLinearScale,
+      chartType,
     }).wrapper;
 
     const el = wrapper.find('[data-j-bars-group]');
@@ -127,6 +133,7 @@ describe('lume-stacked-bar-chart.vue', () => {
       yScale: xScale,
       xScale: manipulatedDataLinearScale,
       orientation,
+      chartType,
     }).wrapper;
 
     const el = wrapper.find('[data-j-bars-group]');
@@ -140,6 +147,7 @@ describe('lume-stacked-bar-chart.vue', () => {
     labels,
     xScale,
     yScale,
+    chartType,
   });
   testSuite.run({ selector: '[data-j-lume-bar]', multisetData: [3, 7, 4, 5] });
 });
diff --git a/packages/lib/src/utils/constants.ts b/packages/lib/src/utils/constants.ts
@@ -123,6 +123,15 @@ export const BAR_TYPES: Record<string, BarType> = {
   STACKED: 'stacked',
 };
 
+export type ChartType = 'bar' | 'line' | 'alluvial' | 'sparkline';
+
+export const CHART_TYPES: Record<string, ChartType> = {
+  BAR: 'bar',
+  LINE: 'line',
+  ALLUVIAL: 'alluvial',
+  SPARKLINE: 'sparkline',
+};
+
 export const NO_DATA = 'No data';
 
 export const BAR_HEIGHT = 20;

diff --git a/packages/lib/test/unit/reusable.test.ts b/packages/lib/test/unit/reusable.test.ts
@@ -4,6 +4,7 @@ import { mount, Wrapper } from '@vue/test-utils';
 import { LumeChart } from '@/components/core';
 
 import { generateData } from './mock-data';
+import { CHART_TYPES } from '@/utils/constants';
 
 type ComponentInstance = VueConstructor;
 type props = Record<string, unknown>;
@@ -46,12 +47,25 @@ export class BaseTestSuite {
 
   public run({ selector, multisetData }: OptionsType = {}): this {
     this.snapShotTest();
-    if (selector) this.multiDataSetTest(selector, ...multisetData);
+    if (selector)
+      this.multiDataSetTest(
+        selector,
+        (this.props.labels as Array<string | number>)?.length ?? 0,
+        this.props.chartType,
+        ...multisetData
+      );
     return this;
   }
 
+  private getNumberOfRecords(chartType, numberOfLabels, numberOfRecords) {
+    if (chartType === CHART_TYPES.BAR) return numberOfLabels;
+    return numberOfRecords;
+  }
+
   private multiDataSetTest(
     targetIdentifier,
+    numberOfLabels,
+    chartType,
     firstNumberOfSets = defaultFirstNumberOfSets,
     firstNumberOfRecords = defaultFirstNumberOfRecords,
     secondNumberOfSets = defaultSecondNumberOfSets,
@@ -67,12 +81,27 @@ export class BaseTestSuite {
     const cases = [
       {
         dataset: firstDataSet,
-        expectedResult: firstNumberOfSets * firstNumberOfRecords,
+        expectedResult:
+          firstNumberOfSets *
+          this.getNumberOfRecords(
+            chartType,
+            numberOfLabels,
+            firstNumberOfRecords
+          ),
+      },
+      {
+        dataset: emptyDataSet,
+        expectedResult: this.getNumberOfRecords(chartType, numberOfLabels, 0),
       },
-      { dataset: emptyDataSet, expectedResult: 0 },
       {
         dataset: secondDataSet,
-        expectedResult: secondNumberOfSets * secondNumberOfRecords,
+        expectedResult:
+          secondNumberOfSets *
+          this.getNumberOfRecords(
+            chartType,
+            numberOfLabels,
+            secondNumberOfRecords
+          ),
       },
     ];