Merge pull request #353 from TykTechnologies/TUI-2/tests-chart

tests for the Chart component

.eslintrc

@@ -28,7 +28,8 @@
     "import/no-extraneous-dependencies": "off",
     "import/prefer-default-export": "off",
     "indent": ["error", 2, {
-      "ignoredNodes": ["TemplateLiteral"]
+      "ignoredNodes": ["TemplateLiteral"],
+      "SwitchCase": 1
     }]
   },
   "env": {

src/components/Chart/Chart.test.js

@@ -1,7 +1,86 @@
+import React from 'react';
 import Chart from './index';
 
+function Component(props) {
+  return (
+    <Chart
+      hasData
+      dataLoaded
+      option={{
+        xAxis: {
+          data: ['Jan', 'Feb', 'Mar'],
+        },
+        yAxis: [{ min: 0 }],
+      }}
+      series={[
+        {
+          data: [5, 12, 8],
+        },
+      ]}
+      {...props}
+    />
+  );
+}
+
+const selectors = {
+  component: '.tyk-chart',
+  loader: '.loading',
+  message: '.tyk-message',
+};
+
 describe('Chart', () => {
-  it('TODO', () => {
-    expect(true).to.equal(true);
+  it('renders the component', () => {
+    cy.mount(<Component />);
+
+    cy.get(selectors.component)
+      .should('exist');
+  });
+
+  it('renders a loader if dataLoaded is false', () => {
+    cy.mount(<Component dataLoaded={false} />);
+
+    cy.get(selectors.loader)
+      .should('exist');
+  });
+
+  it('renders a message if hasData is false', () => {
+    cy.mount(<Component hasData={false} />);
+
+    cy.get(selectors.message)
+      .should('exist');
+  });
+
+  it('can render a custom component instead of the no data message', () => {
+    cy.mount(<Component hasData={false} noDataComponent={() => <span id="custom-no-data-component">custom no data</span>} />);
+
+    cy.get('#custom-no-data-component')
+      .should('exist');
+  });
+
+  it('can have different types', () => {
+    cy.mount(<Component type="bar" />);
+
+    cy.get(selectors.component)
+      .should('have.attr', 'data-type', 'bar');
+
+    cy.mount(<Component type="pie" />);
+
+    cy.get(selectors.component)
+      .should('have.attr', 'data-type', 'pie');
+
+    cy.mount(<Component type="geo" option={[]} series={[{ map: 'world' }]} />);
+
+    cy.get(selectors.component)
+      .should('have.attr', 'data-type', 'geo');
+  });
+
+  it('can specify the width and height of the component using the style prop', () => {
+    const width = '500px';
+    const height = '200px';
+    cy.mount(<Component style={{ width, height }} />);
+
+    cy.get(selectors.component)
+      .should('have.css', 'width', width)
+      .and('have.css', 'height', height);
   });
 });

src/components/Chart/index.js

@@ -13,23 +13,23 @@ import worldMap from './maps/world.json';
 
 echarts.registerMap('world', worldMap);
 
-const Chart = (props) => {
-  const {
-    areaStyleColors,
-    dataLoaded,
-    hasData,
-    highlight,
-    type,
-    option,
-    series,
-    onChange,
-    zoomStart,
-    zoomEnd,
-    title,
-    seriesConfig = [],
-    noDataComponent = null,
-    zoomColors,
-  } = props;
+function Chart({
+  areaStyleColors,
+  dataLoaded,
+  hasData,
+  highlight,
+  type,
+  option,
+  series,
+  onChange,
+  zoomStart,
+  zoomEnd,
+  title,
+  seriesConfig = [],
+  noDataComponent = null,
+  zoomColors,
+  style,
+}) {
   const [tykChartInstance, setTykChartInstance] = useState(null);
   const chartWrapperRef = useRef(null);
   const onResize = () => {
@@ -146,11 +146,18 @@ const Chart = (props) => {
       type: 'line',
       areaStyle: {
         opacity: 1,
-        color: areaStyleColors ? new echarts.graphic.LinearGradient(0, 0, 1, 1,
-          areaStyleColors.map((color, index) => ({
-            offset: index,
-            color,
-          }))) : [],
+        color: areaStyleColors
+          ? new echarts.graphic.LinearGradient(
+            0,
+            0,
+            1,
+            1,
+            areaStyleColors.map((color, index) => ({
+              offset: index,
+              color,
+            })),
+          )
+          : [],
       },
       smooth: false,
       symbolSize: 7,
@@ -238,11 +245,11 @@ const Chart = (props) => {
         }
 
         selectedSeries.forEach((entry, index) => {
-          const seriesData = Object.assign(
-            {},
-            lineBarChart.seriesDefault.toJS(),
-            seriesConfig[index], entry,
-          );
+          const seriesData = {
+            ...lineBarChart.seriesDefault.toJS(),
+            ...seriesConfig[index],
+            ...entry,
+          };
           finalOpts.series.push(seriesData);
         });
         break;
@@ -260,12 +267,11 @@ const Chart = (props) => {
   }, [tykChartInstance]);
 
   useEffect(() => {
-
-    if (!chartWrapperRef?.current) {
-      return;
-    }
+    if (!chartWrapperRef?.current) return;
 
     setTykChartInstance(echarts.init(chartWrapperRef.current));
+
+    // eslint-disable-next-line consistent-return
     return () => {
       if (tykChartInstance) {
         tykChartInstance.dispose();
@@ -342,7 +348,6 @@ const Chart = (props) => {
     }
   }, [highlight]);
 
-
   const prevZoomStart = usePrevious(zoomStart);
   const prevZoomEnd = usePrevious(zoomEnd);
   useEffect(() => {
@@ -364,7 +369,6 @@ const Chart = (props) => {
   }, [zoomStart, zoomEnd]);
 
   const getStyle = () => {
-    const { style } = props;
     const tempStyle = style || {};
 
     if (!tempStyle.height) {
@@ -404,6 +408,7 @@ const Chart = (props) => {
       <div
         className={getCssClasses()}
         style={getStyle()}
+        data-type={type}
         ref={chartWrapperRef}
       />
       {
@@ -420,7 +425,7 @@ const Chart = (props) => {
       }
     </div>
   );
-};
+}
 
 Chart.propTypes = {
   areaStyleColors: PropTypes.instanceOf(Array),