@fusioncharts/charts/src/chart/column2d/index.spec.js

JavaScript Data Visualisation Library

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _extends=require("@babel/runtime/helpers/extends");var _core=_interopRequireDefault(require("../../../../fusioncharts/core"));var _index=_interopRequireDefault(require("./index"));var _column2d=_interopRequireDefault(require("../../../../../smoke-test/test-sanity/column2d.sanity"));var _utility=require("../../../../../smoke-test/test-sanity/utility");var _lib=require("../../../../fc-core/src/lib/");var _common=_interopRequireDefault(require("../../../../../smoke-test/test-sanity/common.sanity"));var _lib2=require("../../../../../packages/fc-core/src/lib");var chartData=_interopRequireWildcard(require("../../../../../smoke-test/test-data/data-by-chart"));function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f=_extends({},null,{default:e});if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f})(e,t)}_core.default.addDep(_index.default);var svgElement,chartName=_index.default.getName(),chartID=chartName.toLowerCase();describe("Running common chart tests for "+chartName,(function(){var chart={type:chartID,renderAt:_utility.CONTAINER_ID,width:_utility.initDimensions.width,height:_utility.initDimensions.height,dataFormat:"json",dataSource:{}},config={chartID:chartID,chart:chart,document:document,chartWrapperId:_utility.CONTAINER_ID};_common.default.forEach((function(test){var itArr;if(test.name&&test.run){it(test.name,(function(done){test.run(config,(function(result){expect(result).toBe(true);done()}))}))}else if(test.iterator){itArr=test.iterator(chart);itArr.forEach((function(subTest){it(subTest.name,(function(done){subTest.run(config,(function(result){expect(result).toBe(true);done()}))}))}))}}))}));describe("Chart basic testing: "+chartName,(function(){var chart,chartObj,itResize,renderData=_column2d.default.BASIC.newChart,updateData=_column2d.default.BASIC.updateChart;chart={type:chartID,renderAt:_utility.CONTAINER_ID};(0,_lib.extend2)(chart,renderData);chart.dataSource=chart.dataSource?chart.dataSource:chartData[chartID]["default"];chart.dataSource.chart.animation="0";beforeEach((function(){chartObj=(0,_utility.setup)(_core.default,chart)}));afterEach((function(){if(chartObj&&!chartObj.disposed)chartObj.dispose()}));it("Rendered chart validation passes",(function(done){expect(chartObj).toBeDefined();var renderComplete=function renderComplete(){var response=_column2d.default.BASIC.validate(chartObj);expect(response.flag).toBe(true,response.messages.join(" && "));done()};chartObj.render();chartObj.addEventListener("renderComplete",renderComplete)}));it("Chart update passes",(function(done){expect(chartObj).toBeDefined();var called=0;var renderComplete=function renderComplete(){if(called===0){called++;chartObj.setChartData(updateData||chart.dataSource,"json")}else if(called===1){var response=_column2d.default.BASIC.updateValidate(chartObj);expect(response.flag).toBe(true,response.messages.join(" && "));done()}};chartObj.addEventListener("renderComplete",renderComplete);chartObj.render()}));itResize=function itResize(resizeDimensions){it("Chart resize passes for "+resizeDimensions.width+" x "+resizeDimensions.height,(function(done){expect(chartObj).toBeDefined();var renderComplete=function renderComplete(){var response=_column2d.default.BASIC.resizeValidate(chartObj);expect(response.flag).toBe(true,response.messages.join(" && "));done()};chartObj.addEventListener("renderComplete",renderComplete);chartObj.render((function(){chartObj.resizeTo(resizeDimensions.width,resizeDimensions.height)}))}))};for(var index=0;index<_utility.resizeDimensions.length;index++){itResize(_utility.resizeDimensions[index])}}));describe("Chart EI testing: "+_index.default.getName(),(function(){var chart,chartObj,eiMethods,renderData=_column2d.default.EI.newChart;chart={type:chartID,renderAt:_utility.CONTAINER_ID};(0,_lib.extend2)(chart,renderData);chart.dataSource=chart.dataSource?chart.dataSource:chartData[chartID]["default"];chart.dataSource.chart.animation="0";beforeEach((function(){chartObj=(0,_utility.setup)(_core.default,chart)}));afterEach((function(){if(chartObj&&!chartObj.disposed)chartObj.dispose()}));eiMethods=function eiMethods(methodObj){it(methodObj.name,(function(done){expect(chartObj).toBeDefined();var renderComplete=function renderComplete(){svgElement=(0,_utility.getSVG)(chartObj);methodObj.fn(svgElement,chartObj,(function(result){expect(result).toBe(true);done()}))};chartObj.addEventListener("renderComplete",renderComplete);chartObj.render()}))};for(var key in _column2d.default.EI.methods){if(_column2d.default.EI.methods.hasOwnProperty(key)){eiMethods(_column2d.default.EI.methods[key])}}}));describe("Running yaxisvaluecosmetics tests for "+chartName,(function(){var chart={type:chartID,renderAt:_utility.CONTAINER_ID,width:_utility.initDimensions.width,height:_utility.initDimensions.height,dataSource:{chart:{yaxisvaluefontcolor:"#ff0000",yaxisvaluelink:"https://www.google.com",yaxisvaluefontsize:30,yaxisvaluealpha:50,yaxisvaluefontbold:1,yaxisvaluefontitalic:1,yaxisvaluebgcolor:"#0000ff",yaxisvaluebordercolor:"#ffffff",yaxisvalueborderalpha:20,yaxisvalueborderdashed:1,yaxisvalueborderdashlen:6,yaxisvalueborderdashgap:5,labelalpha:50,animation:0},data:[{value:8},{value:10},{value:17},{value:2}]}},chartObj;beforeEach((function(){chartObj=(0,_utility.setup)(_core.default,chart)}));afterEach((function(){chartObj.dispose()}));it("yAxisCosmetics-FontColor",(function(done){chartObj.addEventListener("renderComplete",(function(){var yAxisDomElement=document.querySelectorAll('[class*="dataset-axis"]')[1],yAxisTextElement=yAxisDomElement.getElementsByTagName("text");expect(getComputedStyle(yAxisTextElement[0]).fill).toBe("rgb(255, 0, 0)");done()}));chartObj.render()}));it("yAxisCosmetics-FontSize",(function(done){chartObj.addEventListener("renderComplete",(function(){var yAxisDomElement=document.querySelectorAll('[class*="dataset-axis"]')[1],yAxisTextElement=yAxisDomElement.getElementsByTagName("text");expect(getComputedStyle(yAxisTextElement[0]).fontSize).toBe(chart.dataSource.chart.yaxisvaluefontsize+_lib2.PXSTRING);done()}));chartObj.render()}));it("yAxisCosmetics-yaxislabelAlpha",(function(done){chartObj.addEventListener("renderComplete",(function(){var yAxisDomElement=document.querySelectorAll('[class*="dataset-axis"]')[1],yAxisTextElement=yAxisDomElement.getElementsByTagName("text");expect(getComputedStyle(yAxisTextElement[0]).fillOpacity).toBe((chart.dataSource.chart.yaxisvaluealpha/100).toString());done()}));chartObj.render()}));it("yAxisCosmetics-labelLink",(function(done){chartObj.addEventListener("renderComplete",(function(){var yAxisDomElement=document.querySelectorAll('[class*="dataset-axis"]')[1],yAxisTextElement=yAxisDomElement.getElementsByTagName("text");expect(getComputedStyle(yAxisTextElement[0]).cursor).toBe(_lib2.POINTER);done()}));chartObj.render()}));it("yAxisCosmetics-BGColor",(function(done){chartObj.addEventListener("renderComplete",(function(){var yAxisDomElement=document.querySelectorAll('[class*="dataset-axis"]')[1],yAxisTextElement=yAxisDomElement.getElementsByTagName("rect");expect(getComputedStyle(yAxisTextElement[0]).fill).toBe("rgb(0, 0, 255)");done()}));chartObj.render()}));it("yAxisCosmetics-BDRColor",(function(done){chartObj.addEventListener("renderComplete",(function(){var yAxisDomElement=document.querySelectorAll('[class*="dataset-axis"]')[1],yAxisTextElement=yAxisDomElement.getElementsByTagName("rect");expect(getComputedStyle(yAxisTextElement[0]).stroke).toBe("rgb(255, 255, 255)");done()}));chartObj.render()}));it("yAxisCosmetics-BdrAlpha",(function(done){chartObj.addEventListener("renderComplete",(function(){var yAxisDomElement=document.querySelectorAll('[class*="dataset-axis"]')[1],yAxisTextElement=yAxisDomElement.getElementsByTagName("rect");expect(getComputedStyle(yAxisTextElement[0]).strokeOpacity).toBe((chart.dataSource.chart.yaxisvalueborderalpha/100).toString());done()}));chartObj.render()}));it("yAxisCosmetics-xaxislabelAlpha",(function(done){chartObj.addEventListener("renderComplete",(function(){var yAxisDomElement=document.querySelectorAll('[class*="dataset-axis"]')[1],yAxisTextElement=yAxisDomElement.getElementsByTagName("text");expect(getComputedStyle(yAxisTextElement[0]).fillOpacity).toBe((chart.dataSource.chart.labelalpha/100).toString());done()}));chartObj.render()}));it("yAxisCosmetics-BdrDashed",(function(done){chartObj.addEventListener("renderComplete",(function(){var yAxisDomElement=document.querySelectorAll('[class*="dataset-axis"]')[1],yAxisTextElement=yAxisDomElement.getElementsByTagName("rect");expect(getComputedStyle(yAxisTextElement[0]).strokeDasharray).toBe("6px, 5px");done()}));chartObj.render()}))}));describe("Text outline testing "+chartName,(function(){var chart,chartObj,itResize,renderData={chart:{caption:"Monthly",xaxisname:"Month",yaxisname:"Revenue",textoutline:"1",showvalues:"1",animation:"0"},data:[{label:"Jan",value:"420000"},{label:"Feb",value:"910000"},{label:"Mar",value:"720000"}]},updateDataWithNoOutline={chart:{caption:"Monthly",xaxisname:"Month",yaxisname:"Revenue",showvalues:"1",animation:"0"},data:[{label:"Jan",value:"420000"},{label:"Feb",value:"910000"},{label:"Mar",value:"720000"}]};chart={type:chartID,renderAt:_utility.CONTAINER_ID,dataSource:renderData};beforeEach((function(){chartObj=(0,_utility.setup)(_core.default,chart)}));afterEach((function(){if(chartObj&&!chartObj.disposed)chartObj.dispose()}));it("Text outline should get applied",(function(done){var renderComplete=function renderComplete(){var labelElement=document.querySelector('[class$="label-group fusioncharts-datalabels"]').getElementsByTagName("text")[0];expect(labelElement.getAttribute("filter")).not.toBe(null);done()};chartObj.addEventListener("renderComplete",renderComplete);chartObj.render()}));it("Text outline should be removed",(function(done){var updateFlag=0,renderComplete=function renderComplete(){if(!updateFlag){updateFlag=1;chartObj.setJSONData(updateDataWithNoOutline)}else{var labelElement=document.querySelector('[class$="label-group fusioncharts-datalabels"]').getElementsByTagName("text")[0];expect(labelElement.getAttribute("filter")).toBe(null);done()}};chartObj.addEventListener("renderComplete",renderComplete);chartObj.render()}))}));describe("Axis position testing",(function(){var chartObj,data={chart:{caption:"Monthly",xaxisname:"Month",yaxisname:"Revenue",numberprefix:"$",showvalues:"1",animation:"0",yaxisposition:"right",xaxisposition:"top"},data:[{label:"Jan",value:"420000"},{label:"Feb",value:"910000"},{label:"Mar",value:"720000"},{label:"Apr",value:"550000"},{label:"May",value:"810000"},{label:"Jun",value:"510000"},{label:"Jul",value:"680000"},{label:"Aug",value:"620000"},{label:"Sep",value:"610000"},{label:"Oct",value:"490000"},{label:"Nov",value:"530000"},{label:"Dec",value:"330000"}],trendlines:[{line:[{startvalue:"700000",istrendzone:"1",valueonright:"1",tooltext:"AYAN",endvalue:"900000",color:"009933",displayvalue:"Target",showontop:"1",thickness:"5"}]}]},chart={type:chartID,renderAt:_utility.CONTAINER_ID,width:600,height:400,dataFormat:"json",dataSource:data};beforeAll((function(){chartObj=(0,_utility.setup)(_core.default,chart)}));afterAll((function(){if(chartObj&&!chartObj.disposed)chartObj.dispose()}));it("yAxis will be rendered on right",(function(done){chartObj.addEventListener("renderComplete",(function(e){e.detachHandler();var dim=chartObj.apiInstance.getChildren("yAxis")[0].getAxisDimension(),yAxisLabelsGroup=document.querySelectorAll('[class*="dataset-Label-group"] > [class*="-dataset-axis"]')[0],label=yAxisLabelsGroup.getElementsByTagName("text")[0];expect(dim.x).toBe(530);expect(dim.opposite).toBe(16);expect(label.getAttribute("x")).toBe("534");done()}));chartObj.render()}));it("yAxis will be updated to render on left",(function(done){chartObj.addEventListener("renderComplete",(function(e){e.detachHandler();var dim=chartObj.apiInstance.getChildren("yAxis")[0].getAxisDimension(),yAxisLabelsGroup=document.querySelectorAll('[class*="dataset-Label-group"] > [class*="-dataset-axis"]')[0],label=yAxisLabelsGroup.getElementsByTagName("text")[0];expect(dim.x).toBe(69);expect(dim.opposite).toBe(547);expect(label.getAttribute("x")).toBe("65");done()}));data.chart.yaxisposition=undefined;chartObj.setJSONData(data)}));it("xAxis will be rendered on top",(function(done){chartObj.addEventListener("renderComplete",(function(e){e.detachHandler();var dim=chartObj.apiInstance.getChildren("xAxis")[0].getAxisDimension(),yAxisLabelsGroup=document.querySelectorAll('[class*="dataset-Label-group"] > [class*="-dataset-axis"]')[1],label=yAxisLabelsGroup.getElementsByTagName("text")[0];expect(dim.y).toBe(74.6);expect(dim.opposite).toBe(384);expect(label.getAttribute("y")).toBe("68");done()}));chartObj.setJSONData(data)}));it("xAxis will be updated to render on bottom",(function(done){chartObj.addEventListener("renderComplete",(function(e){e.detachHandler();var dim=chartObj.apiInstance.getChildren("xAxis")[0].getAxisDimension(),yAxisLabelsGroup=document.querySelectorAll('[class*="dataset-Label-group"] > [class*="-dataset-axis"]')[1],label=yAxisLabelsGroup.getElementsByTagName("text")[0];expect(dim.y).toBe(351);expect(dim.opposite).toBe(41.6);expect(label.getAttribute("y")).toBe("364");done()}));data.chart.xaxisposition=undefined;chartObj.setJSONData(data)}))}));describe("toolbar-master should be after logo,legend inside parent-group",(function(){var chartObj,data={chart:{exportenabled:"1",logoURL:"https://www.collabion.com/public/images/collabion.svg",logoposition:"TR"},data:[{label:"Jan",value:"420000"}]},chart={type:chartID,renderAt:_utility.CONTAINER_ID,width:600,height:400,dataFormat:"json",dataSource:data};beforeAll((function(){chartObj=(0,_utility.setup)(_core.default,chart)}));afterAll((function(){if(chartObj&&!chartObj.disposed)chartObj.dispose()}));it("toolbar-master should be after logo inside parent-group",(function(done){chartObj.addEventListener("renderComplete",(function(e){var parentGroup=document.querySelectorAll("[class*=parentgroup]")[0],logoElement=parentGroup.querySelectorAll("[class*=logo]")[0],toolIndex=-1,logoIndex=-1,toolbarElement=parentGroup.querySelectorAll("[class*=toolbar-master]")[0];parentGroup.childNodes.forEach((function(d,i){if(d===logoElement){logoIndex=i}else if(d===toolbarElement){toolIndex=i}}));expect(parentGroup.contains(logoElement)).toBe(true);expect(parentGroup.contains(toolbarElement)).toBe(true);expect(toolIndex).toBeGreaterThan(logoIndex);done()}));chartObj.render()}))}));describe("column2d minPLotHeightForValue testing",(function(){var chartObj,renderInfo={type:"column2d",renderAt:_utility.CONTAINER_ID,width:"600",height:"350",dataFormat:"json"},data={chart:{caption:"Monthly",xaxisname:"Month",yaxisname:"Revenue",numberprefix:"$",plottooltext:"<div>br is applied</div>",drawcrossline:"1",showValues:"1"},data:[{label:"Jan",value:"420000",showValue:"1"},{label:"Feb",value:"910000",showValue:"0"},{label:"Mar",value:"720000",minPlotHeightForValue:"170"},{label:"Apr",value:"550000",minPlotHeightForValue:"150"},{label:"May",value:"810000"},{label:"Jun",value:"510000"},{label:"Jul",value:"680000"},{label:"Aug",value:"620000"},{label:"Sep",value:"610000"},{label:"Oct",value:"490000"},{label:"Nov",value:"530000"},{label:"Dec",value:"330000"}]};beforeEach((function(){renderInfo.dataSource=data;chartObj=(0,_utility.setup)(_core.default,renderInfo)}));afterEach((function(){chartObj&&!chartObj.disposed&&chartObj.dispose()}));it("chart dataplot will appear when plotLavel ShowValue is set one",(function(done){chartObj.addEventListener("renderComplete",(function(){var dataLabelObj=document.querySelectorAll('[class*="label-group fusioncharts-datalabels"]')[0].children[0];if(dataLabelObj.innerHTML==="$420K"){done()}}));chartObj.render()}));it("chart dataplot will not appear when plotLavel ShowValue is set zero",(function(done){chartObj.addEventListener("renderComplete",(function(){var dataLabelObj=document.querySelectorAll('[class*="label-group fusioncharts-datalabels"]')[0].children[1];if(dataLabelObj.innerHTML!=="$910k"){done()}}));chartObj.render()}));it("chart dataplot will appear when plotLavel ShowValue is not set, parent has showValue 1 and plot height is equal or more than minPlotHeightForValue",(function(done){chartObj.addEventListener("renderComplete",(function(){var dataLabelObj=document.querySelectorAll('[class*="label-group fusioncharts-datalabels"]')[0].children[1];if(dataLabelObj.innerHTML==="$720K"){done()}}));chartObj.render()}));it("chart dataplot will not appear when plotLavel ShowValue is not set, parent has showValue 1 and plot height is less than minPlotHeightForValue",(function(done){chartObj.addEventListener("renderComplete",(function(){var dataLabelObj=document.querySelectorAll('[class*="label-group fusioncharts-datalabels"]')[0].children[2];if(dataLabelObj.innerHTML!=="$550k"){done()}}));chartObj.render()}))}));describe("valueFontColor, valueBgColor, valueBorderColor",(function(){var chartObj;afterEach((function(){return chartObj.dispose()}));it("Without valueFontColor, valueBgColor and valueBorderColor, chart should render normally",(function(done){chartObj=(0,_utility.setup)(_core.default,{type:chartID,renderAt:_utility.CONTAINER_ID,width:600,height:350,dataSource:{chart:{caption:"Monthly",xaxisname:"Month",yaxisname:"Revenue",numberprefix:"$",showvalues:"1",animation:"0"},data:[{label:"Jan",value:"420000"},{label:"Feb",value:"910000"}]}});chartObj.addEventListener("renderComplete",(function(){var dataLabelGroup=document.querySelectorAll('[class$="fusioncharts-datalabels"]')[1],rects=dataLabelGroup.getElementsByTagName("rect"),texts=dataLabelGroup.getElementsByTagName("text");expect(rects.length).toBe(0);expect(texts.length).toBe(2);expect(texts[0].getAttribute("fill")).toBe("#555555");expect(texts[1].getAttribute("fill")).toBe("#555555");done()}));chartObj.render()}));it("valueFontColor, valueBgColor and valueBorderColor should work from data level",(function(done){chartObj=(0,_utility.setup)(_core.default,{type:chartID,renderAt:_utility.CONTAINER_ID,width:600,height:350,dataSource:{chart:{caption:"Monthly",xaxisname:"Month",yaxisname:"Revenue",numberprefix:"$",showvalues:"1",animation:"0"},data:[{label:"Jan",value:"420000",valuefontcolor:"ff0000",valuebgcolor:"fff000",valuebordercolor:"0000ff"},{label:"Feb",value:"910000"}]}});chartObj.addEventListener("renderComplete",(function(){var dataLabelGroup=document.querySelectorAll('[class$="fusioncharts-datalabels"]')[1],rects=dataLabelGroup.getElementsByTagName("rect"),texts=dataLabelGroup.getElementsByTagName("text");expect(rects.length).toBe(1);expect(texts.length).toBe(2);expect(rects[0].getAttribute("fill")).toBe("#fff000");expect(rects[0].getAttribute("stroke")).toBe("#0000ff");expect(texts[0].getAttribute("fill")).toBe("#ff0000");expect(texts[1].getAttribute("fill")).toBe("#555555");done()}));chartObj.render()}));it("valueFontColor, valueBgColor and valueBorderColor at data level should overwrite the same configurations at chart level",(function(done){chartObj=(0,_utility.setup)(_core.default,{type:chartID,renderAt:_utility.CONTAINER_ID,width:600,height:350,dataSource:{chart:{caption:"Monthly",xaxisname:"Month",yaxisname:"Revenue",numberprefix:"$",showvalues:"1",valuefontcolor:"00ff00",valuebordercolor:"ff0000",valuebgcolor:"ffffff",animation:"0"},data:[{label:"Jan",value:"420000",valuefontcolor:"ff0000",valuebgcolor:"fff000",valuebordercolor:"0000ff"},{label:"Feb",value:"910000"}]}});chartObj.addEventListener("renderComplete",(function(){var dataLabelGroup=document.querySelectorAll('[class$="fusioncharts-datalabels"]')[1],rects=dataLabelGroup.getElementsByTagName("rect"),texts=dataLabelGroup.getElementsByTagName("text");expect(rects.length).toBe(2);expect(texts.length).toBe(2);expect(rects[0].getAttribute("fill")).toBe("#fff000");expect(rects[0].getAttribute("stroke")).toBe("#0000ff");expect(rects[1].getAttribute("fill")).toBe("#ffffff");expect(rects[1].getAttribute("stroke")).toBe("#ff0000");expect(texts[0].getAttribute("fill")).toBe("#ff0000");expect(texts[1].getAttribute("fill")).toBe("#00ff00");done()}));chartObj.render()}))}));