111 lines
3.4 KiB
JavaScript
111 lines
3.4 KiB
JavaScript
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'});
|
|
});
|
|
});
|
|
});
|