@fusioncharts/charts/src/_internal/components/legend/discrete/index.spec.js

JavaScript Data Visualisation Library

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _index=_interopRequireDefault(require("../../../../../../fusioncharts/core/index"));var _doughnut2d=_interopRequireDefault(require("../../../../../../fusioncharts/viz/doughnut2d"));var _scrollcombi2d=_interopRequireDefault(require("../../../../../../fusioncharts/viz/scrollcombi2d"));var _line=_interopRequireDefault(require("../../../../../../fusioncharts/viz/line"));var _area2d=_interopRequireDefault(require("../../../../../../fusioncharts/viz/area2d"));var _utitilies=require("../../../../../../../dev-tests/viz/utitilies");var _data=_interopRequireDefault(require("./data.js"));function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach((function(r){(0,_defineProperty2.default)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}_index.default.addDep(_doughnut2d.default);_index.default.addDep(_line.default);_index.default.addDep(_area2d.default);_index.default.addDep(_scrollcombi2d.default);describe("Labels inline styles test",(function(){var chartObj,defaultData={chart:{caption:"<span style='stroke:green;'>Sales<br> of Top <u>Brands</u></span>",showlegend:1},data:[{label:"<span style='stroke: lightskyblue;'>LABEL: Sales <br> of Top <u>Brands</u></span>",value:"0",displayValue:"<span style='stroke:orange;'>Sales<br> of Top <u>Brands</u></span>"},{label:"<span style='stroke:orange;'>Sales<br> of Top <u>Brands</u></span>, 42%",value:"42",displayValue:"10<sup>2</sup>, 42%, 50.00%"},{label:"<H<span style='font-size:75%'>2</span>O, 42%, 50.00%, 42%",value:"42",displayValue:"H<sub style='font-size:75%'>2</sub>O, 42%, 50.00%"}]};beforeEach((function(){chartObj=(0,_utitilies.setup)(_index.default,{type:"doughnut2d",renderAt:_utitilies.CONTAINER_ID,width:"600",height:"350",dataFormat:"json",dataSource:defaultData})}));afterEach((function(){chartObj&&!chartObj.disposed&&chartObj.dispose()}));it("Inline styles should be applied on labels even when there is a linebreak",(function(done){chartObj.addEventListener("renderComplete",(function(){var nodeEls=document.querySelectorAll('[class*="legendGroup"] text');defaultData.data.forEach((function(val,index){var label=val.label;var tempDiv=document.createElement("div");tempDiv.innerHTML=label;var lineBreaks=tempDiv.querySelectorAll("br");var spanEl=tempDiv.querySelector("span");var hasStyleAttribute=label.includes("style=");if(!!lineBreaks.length&&!!spanEl&&hasStyleAttribute){var textEl=nodeEls[index];expect(/<br>|<span>|style=/.test(textEl.textContent)).toBe(false);var tspansWithDy=Array.from(textEl.querySelectorAll("tspan[dy]"));expect(tspansWithDy.length===lineBreaks.length).toBe(true);var innerTspans=Array.from(textEl.querySelectorAll("tspan tspan"));var unmatchedStrokeTspans=innerTspans.filter((function(el){return!!el.getAttribute("stroke")})).filter((function(tspan){return tspan.getAttribute("stroke")!==spanEl.style.stroke}));expect(unmatchedStrokeTspans.length).toBe(0)}}));done()}));chartObj.render()}))}));describe("Legend group scroll tests",(function(){var chartObj,defaultData=_data.default,cloneDataSource=function cloneDataSource(){return JSON.parse(JSON.stringify(defaultData))},commonConfig={type:"scrollcombi2d",renderAt:_utitilies.CONTAINER_ID,width:"500",height:"400",dataFormat:"json"};afterEach((function(){chartObj&&!chartObj.disposed&&chartObj.dispose()}));it("legends to show scroll when items count is more than chart cont and legendnumlength is set to 1",(function(done){var dataSource=cloneDataSource();dataSource.chart.legendNumRows="1";chartObj=(0,_utitilies.setup)(_index.default,_objectSpread(_objectSpread({},commonConfig),{},{dataSource:dataSource}));chartObj.addEventListener("renderComplete",(function(){var canvas=document.querySelector('[class*="-canvas"]');var canvasWidth=canvas.getBoundingClientRect().width;var legendGroup=document.querySelector('[class*="-legendGroup"]');var legendWidth=legendGroup.getBoundingClientRect().width;var scrollGroup=document.querySelector('[class*="scrollGroup"]');expect(dataSource.chart.legendNumRows).toBe("1");expect(legendWidth).toBeGreaterThan(canvasWidth);expect(scrollGroup).not.toBeNull();expect(scrollGroup.getBoundingClientRect().width).toBeGreaterThan(0);done()}));chartObj.render()}));it("should NOT show scroll when legendNumRows is undefined (legend wraps)",(function(done){var dataSource=cloneDataSource();dataSource.chart.legendNumRows=undefined;chartObj=(0,_utitilies.setup)(_index.default,_objectSpread(_objectSpread({},commonConfig),{},{dataSource:dataSource}));chartObj.addEventListener("renderComplete",(function(){var scrollGroup=document.querySelector('g[class*="legendGroup"] > g[class*="scrollGroup"]');expect(dataSource.chart.legendNumRows).toBeUndefined();expect(scrollGroup).toBeNull();done()}));chartObj.render()}));it("should NOT show scroll when items fit within canvas and legendNumRows=1",(function(done){var dataSource=cloneDataSource();dataSource.chart.legendNumRows="1";dataSource.dataset.splice(0,6);chartObj=(0,_utitilies.setup)(_index.default,_objectSpread(_objectSpread({},commonConfig),{},{dataSource:dataSource}));chartObj.addEventListener("renderComplete",(function(){var canvasWidth=document.querySelector('[class*="-canvas"]').getBoundingClientRect().width;var legendGroup=document.querySelector('[class*="legendGroup"]');var legendWidth=legendGroup==null?void 0:legendGroup.getBoundingClientRect().width;var scrollGroup=document.querySelector('[class*="scrollGroup"]');expect(dataSource.chart.legendNumRows).toBe("1");expect(legendWidth).toBeLessThanOrEqual(canvasWidth);expect(scrollGroup).toBeNull();done()}));chartObj.render()}));it("should NOT render legend scroll when legend is disabled",(function(done){var dataSource=cloneDataSource();dataSource.chart.showLegend=false;chartObj=(0,_utitilies.setup)(_index.default,_objectSpread(_objectSpread({},commonConfig),{},{dataSource:dataSource}));chartObj.addEventListener("renderComplete",(function(){chartObj&&chartObj.dispose();var refreshedDataSource=cloneDataSource();refreshedDataSource.chart.showLegend=false;chartObj=(0,_utitilies.setup)(_index.default,{type:"scrollcombi2d",renderAt:_utitilies.CONTAINER_ID,width:"500",height:"400",dataFormat:"json",dataSource:refreshedDataSource});var legendGroup=document.querySelector('g[class*="legendGroup"]');var scrollGroup=document.querySelector('g[class*="scrollGroup"]');expect(legendGroup).toBeNull();expect(scrollGroup).toBeNull();done()}));chartObj.render()}));it("should wrap into multiple rows and NOT show scroll when legendNumRows=2",(function(done){var dataSource=cloneDataSource();dataSource.chart.legendNumRows="3";chartObj=(0,_utitilies.setup)(_index.default,_objectSpread(_objectSpread({},commonConfig),{},{dataSource:dataSource}));chartObj.addEventListener("renderComplete",(function(){try{var legendGroup=document.querySelector('g[class*="legendGroup"]');var scrollGroup=document.querySelector('g[class*="scrollGroup"]');expect(legendGroup).not.toBeNull();var legendHeight=legendGroup.getBoundingClientRect().height;expect(legendHeight).toBeGreaterThan(25);expect(scrollGroup).toBeNull();done()}catch(e){done.fail(e)}}));chartObj.render()}));it("should render exactly one scrollGroup when scroll is enabled",(function(done){var dataSource=cloneDataSource();dataSource.chart.legendNumRows="1";chartObj=(0,_utitilies.setup)(_index.default,_objectSpread(_objectSpread({},commonConfig),{},{width:"300",dataSource:dataSource}));chartObj.addEventListener("renderComplete",(function(){try{var scrollGroups=document.querySelectorAll('g[class*="scrollGroup"]');expect(scrollGroups.length).toBe(1);expect(scrollGroups[0].getBoundingClientRect().width).toBeGreaterThan(0);done()}catch(e){done.fail(e)}}));chartObj.render()}));it("scrollGroup should be inside legendGroup when visible",(function(done){var dataSource=cloneDataSource();dataSource.chart.legendNumRows="1";chartObj=(0,_utitilies.setup)(_index.default,_objectSpread(_objectSpread({},commonConfig),{},{width:"300",dataSource:dataSource}));chartObj.addEventListener("renderComplete",(function(){try{var legendGroup=document.querySelector('g[class*="legendGroup"]');var scrollGroup=document.querySelector('g[class*="scrollGroup"]');expect(legendGroup).not.toBeNull();expect(scrollGroup).not.toBeNull();expect(legendGroup.contains(scrollGroup)).toBeTrue();done()}catch(e){done.fail(e)}}));chartObj.render()}));it("should NOT show scroll for invalid legendNumRows value and let legend wrap",(function(done){var dataSource=cloneDataSource();dataSource.chart.legendNumRows="abc";chartObj=(0,_utitilies.setup)(_index.default,_objectSpread(_objectSpread({},commonConfig),{},{dataSource:dataSource}));chartObj.addEventListener("renderComplete",(function(){try{var legendGroup=document.querySelector('g[class*="legendGroup"]');var scrollGroup=document.querySelector('g[class*="scrollGroup"]');expect(legendGroup).not.toBeNull();expect(scrollGroup).toBeNull();done()}catch(e){done.fail(e)}}));chartObj.render()}))}));