wallet-core/thirdparty/preact/test/browser/linked-state.js

import { Component } from '../../src/preact';
import { createLinkedState } from '../../src/linked-state';

describe('linked-state', () => {
	class TestComponent extends Component {	}
	let testComponent, linkFunction;

	before( () => {
		testComponent = new TestComponent();
		sinon.spy(TestComponent.prototype, 'setState');
	});

	describe('createLinkedState without eventPath argument', () => {

		before( () => {
			linkFunction = createLinkedState(testComponent,'testStateKey');
			expect(linkFunction).to.be.a('function');
		});

		beforeEach( () => {
			TestComponent.prototype['setState'].reset();
		});

		it('should use value attribute on text input when no eventPath is supplied', () => {
			let element = document.createElement('input');
			element.type= 'text';
			element.value = 'newValue';

			linkFunction({
				currentTarget: element,
				target: element
			});

			expect(TestComponent.prototype.setState).to.have.been.calledOnce;
			expect(TestComponent.prototype.setState).to.have.been.calledWith({'testStateKey': 'newValue'});

			linkFunction.call(element);

			expect(TestComponent.prototype.setState).to.have.been.calledTwice;
			expect(TestComponent.prototype.setState.secondCall).to.have.been.calledWith({'testStateKey': 'newValue'});
		});

		it('should use checked attribute on checkbox input when no eventPath is supplied', () => {
			let checkboxElement = document.createElement('input');
			checkboxElement.type= 'checkbox';
			checkboxElement.checked = true;

			linkFunction({
				currentTarget: checkboxElement,
				target: checkboxElement
			});

			expect(TestComponent.prototype.setState).to.have.been.calledOnce;
			expect(TestComponent.prototype.setState).to.have.been.calledWith({'testStateKey': true});
		});

		it('should use checked attribute on radio input when no eventPath is supplied', () => {
			let radioElement = document.createElement('input');
			radioElement.type= 'radio';
			radioElement.checked = true;

			linkFunction({
				currentTarget: radioElement,
				target: radioElement
			});

			expect(TestComponent.prototype.setState).to.have.been.calledOnce;
			expect(TestComponent.prototype.setState).to.have.been.calledWith({'testStateKey': true});
		});


		it('should set dot notated state key appropriately', () => {
			linkFunction = createLinkedState(testComponent,'nested.state.key');
			let element = document.createElement('input');
			element.type= 'text';
			element.value = 'newValue';

			linkFunction({
				currentTarget: element,
				target: element
			});

			expect(TestComponent.prototype.setState).to.have.been.calledOnce;
			expect(TestComponent.prototype.setState).to.have.been.calledWith({nested: {state: {key: 'newValue'}}});
		});

	});

	describe('createLinkedState with eventPath argument', () => {

		before( () => {
			linkFunction = createLinkedState(testComponent,'testStateKey', 'nested.path');
			expect(linkFunction).to.be.a('function');
		});

		beforeEach( () => {
			TestComponent.prototype['setState'].reset();
		});

		it('should give precedence to nested.path on event over nested.path on component', () => {
			let event = {nested: {path: 'nestedPathValueFromEvent'}};
			let component = {_component: {nested: {path: 'nestedPathValueFromComponent'}}};

			linkFunction.call(component, event);

			expect(TestComponent.prototype.setState).to.have.been.calledOnce;
			expect(TestComponent.prototype.setState).to.have.been.calledWith({'testStateKey': 'nestedPathValueFromEvent'});
		});
	});
});