feat(chart): implementa testes unitarios e ajustes

Author: arthur-polidorio

projects/ui/src/lib/components/po-chart-new/po-chart-new.component.spec.ts

@@ -376,6 +376,54 @@ describe('PoChartNewComponent', () => {
     });
   });
 
+  describe('checkShowCEcharts', () => {
+    it('should call initECharts and disconnect observer when element is visible and hideDomEchartsDiv is true', () => {
+      const chartElement = document.createElement('div');
+      chartElement.id = 'chart-id';
+
+      (component['el'].nativeElement.querySelector as jasmine.Spy).and.returnValue(chartElement);
+      component['hideDomEchartsDiv'] = true;
+
+      spyOn(component as any, 'initECharts');
+
+      const observeSpy = jasmine.createSpy('observe');
+      const disconnectSpy = jasmine.createSpy('disconnect');
+
+      let callback: (entries: Array<IntersectionObserverEntry>) => void;
+
+      (window as any).IntersectionObserver = function (cb: any) {
+        callback = cb;
+        return {
+          observe: observeSpy,
+          disconnect: disconnectSpy
+        };
+      };
+
+      (component as any).checkShowCEcharts();
+
+      callback([{ isIntersecting: true }] as any);
+
+      expect((component as any).initECharts).toHaveBeenCalled();
+      expect(observeSpy).toHaveBeenCalledWith(chartElement);
+      expect(disconnectSpy).toHaveBeenCalled();
+    });
+  });
+
+  it('should set showPopup to false when hideExportCsv, hideExportImage are true and there are no customActions', () => {
+    component['options'] = {
+      header: {
+        hideExportCsv: true,
+        hideExportImage: true
+      }
+    };
+
+    component['customActions'] = [];
+
+    (component as any).setInitialPopupActions();
+
+    expect(component['showPopup']).toBeFalse();
+  });
+
   describe('initECHarts:', () => {
     it('should not initialize the chart if #chart-id is not found', () => {
       const originalQuerySelector = component['el'].nativeElement.querySelector;
@@ -394,24 +442,24 @@ describe('PoChartNewComponent', () => {
 
     it('should emit seriesClick event when clicking on the chart', () => {
       const onSpy = jasmine.createSpy('on');
+
       component['chartInstance'] = {
         on: onSpy
-      } as Partial<EChartsType> as EChartsType;
+      } as any;
 
       spyOn(component.seriesClick, 'emit');
       spyOn(component.seriesHover, 'emit');
 
       component['initEChartsEvents']();
 
-      expect(component['chartInstance'].on).toHaveBeenCalledWith('click', jasmine.any(Function));
+      expect(onSpy).toHaveBeenCalledWith('click', jasmine.any(Function));
 
       const clickCallback = onSpy.calls.argsFor(0)[1];
 
       const mockParams = { seriesName: 'Exemplo', value: 100, name: 'Categoria X' };
       clickCallback(mockParams);
 
       const mouseoverCallback = onSpy.calls.argsFor(1)[1];
-
       const mockParamsMouse = {};
       mouseoverCallback(mockParamsMouse);
 
@@ -420,6 +468,7 @@ describe('PoChartNewComponent', () => {
         data: 100,
         category: 'Categoria X'
       });
+
       expect(component.seriesHover.emit).not.toHaveBeenCalled();
     });
 
@@ -701,29 +750,31 @@ describe('PoChartNewComponent', () => {
       expect(result.yAxis.splitLine.show).toBeTrue();
     });
 
-    it('should apply correct axis configurations if type is Bar', () => {
-      const categories = ['Mon', 'Tue', 'Wed'];
+    it('should configure axes correctly when isTypeBar is true', () => {
       component.isTypeBar = true;
-      component.options.axis = {
-        minRange: 10,
-        maxRange: 100,
-        gridLines: 7,
-        showXAxis: false,
-        showYAxis: true,
-        paddingLeft: 60
+
+      component.options = {
+        axis: {
+          showXAxis: undefined,
+          showYAxis: false
+        }
       };
-      component.categories = categories;
 
-      const result = component['setOptions']() as any;
-      expect(result.yAxis.min).toBe(10);
-      expect(result.yAxis.max).toBe(100);
-      expect(result.yAxis.splitNumber).toBe(7);
-      expect(result.yAxis.type).toBe('category');
-      expect(result.yAxis.data).toEqual(categories);
-      expect(result.grid.left).toBe(60);
-      expect(result.xAxis.type).toBe('value');
-      expect(result.xAxis.splitLine.show).toBeFalse();
-      expect(result.yAxis.splitLine.show).toBeTrue();
+      component.categories = ['Jan', 'Feb', 'Mar'];
+
+      const options: any = {};
+
+      component['chartGridUtils'].setOptionsAxis(options);
+
+      expect(options.xAxis.type).toBe('value');
+
+      expect(options.xAxis.splitLine.show).toBeTrue();
+
+      expect(options.yAxis.type).toBe('category');
+
+      expect(options.yAxis.splitLine.show).toBeFalse();
+
+      expect(options.yAxis.data).toEqual(['Jan', 'Feb', 'Mar']);
     });
 
     it('should apply number formatting when labelType is Number', () => {
@@ -784,12 +835,13 @@ describe('PoChartNewComponent', () => {
   });
 
   describe('setShowAxisDetails: ', () => {
-    it('deve adicionar tooltip com axisPointer quando showAxisDetails for true', () => {
+    it('should add tooltip with axisPointer when showAxisDetails is true', () => {
       component['options'] = {
         axis: {
           showAxisDetails: true
         }
       };
+      spyOn(component, 'getCSSVariable').and.returnValue('#4a5c60');
 
       const options: any = {};
 
@@ -800,13 +852,34 @@ describe('PoChartNewComponent', () => {
         axisPointer: {
           type: 'cross',
           label: {
-            backgroundColor: '#6a7985'
+            backgroundColor: '#4a5c60'
           }
         }
       });
     });
   });
 
+  it('should set splitNumber on xAxis when isTypeBar is true', () => {
+    component.isTypeBar = true;
+    component.options = {
+      axis: {
+        gridLines: 7,
+        minRange: 0,
+        maxRange: 100
+      }
+    };
+
+    const options: any = {
+      xAxis: {
+        axisLabel: {}
+      }
+    };
+
+    (component as any).formatLabelOption(options);
+
+    expect(options.xAxis.splitNumber).toBe(7);
+  });
+
   describe('setSeries:', () => {
     let mockSeriesWithColor: Array<PoChartSerie>;
 
@@ -1371,7 +1444,7 @@ describe('PoChartNewComponent', () => {
       spyOn(document, 'createElement').and.callFake((tag: string) => {
         if (tag === 'canvas') return canvas;
         if (tag === 'a') return link;
-        return originalCreateElement.call(document, tag); // aqui corrigido
+        return originalCreateElement.call(document, tag);
       });
 
       spyOn(canvas, 'toDataURL').and.returnValue('data:image/png;base64,fakeImageData');

projects/ui/src/lib/components/po-chart-new/po-chart-new.component.ts

@@ -58,7 +58,9 @@ use([
 ]);
 
 /**
- * @docsExtends PoChartBaseComponent
+ * @docsPrivate
+ *
+ * Componente de uso interno.
  */
 
 /* @ToDo - Foi retirado o exemplo do sample pois causava problema no build:package da pipe */
@@ -229,10 +231,7 @@ export class PoChartNewComponent
     const hideExportCsv = this.options?.header?.hideExportCsv;
     const hideExportImage = this.options?.header?.hideExportImage;
 
-    if (hideExportCsv && hideExportImage && !this.customActions?.length) {
-      this.showPopup = false;
-      this.cdr.detectChanges();
-    }
+    this.showPopup = !(hideExportCsv && hideExportImage && !this.customActions?.length);
 
     this.popupActions = [
       {