import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from 'echarts';
import { CircularGraphComponent } from './circular-graph.component';
import { EventEmitter } from '@angular/core';
import {SEGMENTS_DATA} from '../../../../mockup';
const SEGMENTS_CHART = {
	seriesProperties: {
		center: ['35%', '45%'],
		radius: ['55%', '65%'],
		height: '100%',
		width: '100%',
		label: {
			show: false,
			position: 'center',
		},
		labelLine: {
			show: false,
		},
	},
	colors: ['#F2994A', '#4679A1', '#BBD6EC'],
};

const SEGMENT_CHART_OPTIONS = {
	legend: {
		orient: 'vertical',
		right: '0',
		top: '30%',
		icon: 'circle',
		textStyle: { fontWeight: 'bold', fontFamily: 'NotosansFont' },
	},
};
let eChart = {};
const eventCallback = event => {
	eChart = event;
};

describe('CircularGraphsComponent', () => {
	let component: CircularGraphComponent;
	let fixture: ComponentFixture<CircularGraphComponent>;

	beforeEach(waitForAsync(() => {
		TestBed.configureTestingModule({
			imports: [
				NgxEchartsModule.forRoot({
					echarts,
				}),
			],
			declarations: [CircularGraphComponent],
		}).compileComponents();
	}));

	beforeEach(() => {
		fixture = TestBed.createComponent(CircularGraphComponent);
		component = fixture.componentInstance;
		component.type = 'pie';
		component.title = 'Segments';
		component.tooltip = {
			trigger: 'item',
			formatter: 'High',
		};
		component.seriesProperties = SEGMENTS_CHART.seriesProperties;
		component.data = SEGMENTS_DATA;
		component.chartOptions = SEGMENT_CHART_OPTIONS;
		component.eChartClick = new EventEmitter();
		component.eChartInit = new EventEmitter();
		fixture.detectChanges();
	});

	it('should create', () => {
		expect(component).toBeTruthy();
	});

	it('should call getCircularChartOptions', () => {
		component.ngOnInit();
		expect(component.eChartOptions.title['text']).toEqual('Segments');
	});

	it('should call getSeriesData', () => {
		const seriesCase1 = component.getData();
		expect(seriesCase1).toStrictEqual(component.data);
		component.data = undefined;
		const seriesCase2 = component.getData();
		expect(seriesCase2).toStrictEqual([]);
	});

	it('should get chartOptions', () => {
		const chartOptions = component.getCircularChartOptions();
		expect(chartOptions).toStrictEqual(SEGMENT_CHART_OPTIONS);
	});

	it('should call onEChartClick', () => {
		component.eChartClick.emit = jest.fn();
		component.onEChartClick({});
		expect(component.eChartClick.emit).toHaveBeenCalled();
	});

	it('should call onEchartInit', () => {
		component.eChartInit.emit = jest.fn();
		component.onEchartInit({});
		expect(component.eChartInit.emit).toHaveBeenCalled();
	});
});