// @flow
import React from 'react';
import { expect } from 'chai';
import { mount } from 'enzyme';
import sinon from 'sinon';
import { spies } from '@test';

import C from './ToolchainConnection.jsx';

describe('<ToolchainConnection />', () => {
	let wrapper;

	afterEach(() => {
		if(wrapper && wrapper.unmount)
			wrapper.unmount();
	});

	const testLocMap = {
		block1: {
			inputs: {
				input1: {
					x: 1,
					y: 1,
					width: 0,
					height: 0,
				},
			},
			outputs: {
				output1: {
					x: 5,
					y: 1,
					width: 0,
					height: 0,
				},
			},
		},
		block2: {
			inputs: {
				input2: {
					x: 1,
					y: 6,
					width: 0,
					height: 0,
				},
			},
			outputs: {
				output2: {
					x: 5,
					y: 6,
					width: 0,
					height: 0,
				},
			},
		},
	};

	const testConn = {
		from: 'block1.output1',
		to: 'block2.input2',
		channel: 'testChannel',
	};

	const testChannelColor = 'pink';
	const fromLocMap = testLocMap.block1.outputs.output1;
	const toLocMap = testLocMap.block2.inputs.input2;

	it('accepts the test connection with the right props', () => {
		wrapper = mount(
			<svg width='10' height='10'>
				<C
					fromLocMap={fromLocMap}
					toLocMap={toLocMap}
					connection={testConn}
					channelColor={testChannelColor}
					errors={[]}
				/>
			</svg>
		);
		const c = wrapper.children();

		expect(c).to.have.props(
			['fromLocMap', 'toLocMap', 'connection', 'channelColor']
		).deep.equal(
			[fromLocMap, toLocMap, testConn, testChannelColor]
		);
	});

	it('correctly styles the visible line', () => {
		wrapper = mount(
			<svg width='10' height='10'>
				<C
					fromLocMap={fromLocMap}
					toLocMap={toLocMap}
					connection={testConn}
					channelColor={testChannelColor}
					errors={[]}
				/>
			</svg>
		);
		const c = wrapper.children().find('line + line');

		const expectedProps = {
			stroke: 'pink',
			strokeWidth: 2,
			x1: 5 + 2,
			y1: 1 + 6,
			x2: 1 + 2,
			y2: 6 + 6,
		};

		expect(c).to.have.props(
			Object.keys(expectedProps)
		).deep.equal(
			Object.values(expectedProps)
		);
	});
});
