import React from "react";
import { shallow, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { findClosestXValue, mapTimestampAndValuePropToXY, FlexibleGraph } from "../../app/src/components/FlexibleGraph";
configure({ adapter: new Adapter() });

describe("FlexibleGraph", () => {
	let testData = {
		tags: [
			{name: "test1", value: 100},
			{name: "test2", value: 120}
		],

		tagHistory: [
			[{value: 101.1, timestamp: new Date(0)}, {value: 102.2, timestamp: new Date(10)}, {value: 103.3, timestamp: new Date(25)}, {value: 104.4, timestamp:new Date(37)}],
			[{value: 202.2, timestamp: new Date(0)}, {value: 203.3, timestamp: new Date(10)}, {value: 204.4, timestamp: new Date(25)}, {value: 205.5, timestamp:new Date(37)}]
		],
		tagDescriptions: [
			"Test 1",
			"Test 2"
		],
		units: [
			"unit1",
			"unit2"
		],
		round: [2, 4]
	};

	it("should find the closest X value", () => {
		expect(findClosestXValue(testData.tagHistory[0], 11)).toEqual({x: 11, y: 102.2});
	});

	it("should map timestamp and value to x and y", () => {
		const expected = [
			{y: 101.1, x: 0},
			{y: 102.2, x: 10},
			{y: 103.3, x: 25},
			{y: 104.4, x: 37}
		];
		expect(mapTimestampAndValuePropToXY(testData.tagHistory[0])).toEqual(expected);
	});

	it("should render an empty div with no tags", () => {
		const wrapper = shallow(<FlexibleGraph />);
		expect(wrapper.find(".flexible-graph-notags")).toHaveLength(1);
	});

	describe("rendered FlexibleGraph", () => {
		let wrapper;
		beforeEach(() => {
			wrapper = shallow(<FlexibleGraph 
				tags={testData.tags} 
				tagHistory={testData.tagHistory} 
				tagDescriptions={testData.tagDescriptions}
				units={testData.units}
				round={testData.round}
			/>);
		});

		it("should render a flexible-graph class", () => {
			expect(wrapper.find(".flexible-graph")).toHaveLength(1);
		});

	});

	



});