Skip to content

Commit

Permalink
Merge pull request #54 from tur-nr/fixing-ready-state
Browse files Browse the repository at this point in the history 
fixes #47 #53 moved action creators into created callback
  • Loading branch information
@tur-nr
tur-nr authored Feb 11, 2017
2 parents b2bbc47 + b29dec7 commit e21af41
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 26 deletions.
94 changes: 94 additions & 0 deletions demo/ready-state.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!doctype html>
<html>
<head>
<title>Polymer Redux, Ready State</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../node_modules/redux/dist/redux.js"></script>

<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../vaadin-combo-box/vaadin-combo-box.html">

<link rel="import" href="../polymer-redux.html">

<style is="custom-style" include="demo-pages-shared-styles">
</style>
</head>
<body>

<div class="vertical-section-container">
<h3>Polymer Redux, Ready State</h3>
<demo-snippet>
<template>
<!-- redux setup -->
<script>
const initialState = {
friends: ['Adam', 'Beth', 'Carl', 'Denise'],
choosenFriend: 'Beth',
};
const reducer = (state, action) => {
if (!state) return initialState;

switch (action.type) {
case 'CHOOSE_FRIEND':
return Object.assign({}, state, {
chooseFriend: action.friend
});
}

return state;
}
const store = Redux.createStore(reducer);
const ReduxBehavior = PolymerRedux(store);
</script>

<!-- friends list module -->
<dom-module id="friend-picker">
<template>
<h3>Choose a Friend:</h3>
<vaadin-combo-box id="friend-list"
items="[[list]]"
on-change="onFriendChange">
</vaadin-combo-box>
<template is="dom-if" if="[[friend]]">
<p>You choose: [[friend]].</p>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'friend-picker',
behaviors: [ ReduxBehavior ],
properties: {
list: {
type: Array,
statePath: 'friends'
},
friend: {
type: String,
statePath: 'chooseFriend'
}
},
actions: {
chooseFriend: function(friend) {
return {
type: 'CHOOSE_FRIEND',
friend: friend
};
}
},
onFriendChange: function() {
this.dispatch('chooseFriend', this.$['friend-list'].value);
}
});
</script>

<!-- demo -->
<friend-picker></friend-picker>
</template>
</demo-snippet>
</div>
</body>
</html>
9 changes: 6 additions & 3 deletions polymer-redux.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
}

// redux listener
return function() {
return function reduxListener() {
var state = store.getState();
props.forEach(function(property) {
var propName = property.name;
Expand Down Expand Up @@ -303,14 +303,17 @@
* @param {*} state
*/

created: function() {
compileActionCreators(this);
},

ready: function() {
bindReduxListener(this, store);
compileActionCreators(this);
},

attached: function() {
compileActionCreators(this); // not sure if we need to this again???
bindReduxListener(this, store);
compileActionCreators(this);
},

detached: function() {
Expand Down
116 changes: 93 additions & 23 deletions test/polymer-redux.unit-spec.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,43 +290,113 @@
assert.strictEqual(this.returnedState, this.state);
});
});

describe('#created', function () {
it('should compile redux action creators', function() {
var element = {
actions: {
foo: function() {}
}
};
this.behavior.created.call(element);

describe('polyfill Object.assign for IE11', function() {
var assign = Object.assign;
assert.deepEqual(element._reduxActions, {
foo: element.actions.foo
})
});

before(function() {
Object.assign = undefined;
it('should include behavior action creators', function() {
var behavior = {
actions: {
bar: function() {}
}
};
var element = {
behaviors: [ behavior ],
actions: {
foo: function() {}
}
};
this.behavior.created.call(element);

assert.deepEqual(element._reduxActions, {
foo: element.actions.foo,
bar: behavior.actions.bar,
})
});

after(function() {
Object.assign = assign;
it('should maintain action creators priority', function() {
var one = {
actions: {
foo: function() {},
bar: function() {},
}
};
var two = {
actions: {
foo: function() {},
bar: function() {},
baz: function () {},
}
};
var element = {
behaviors: [ one, two ],
actions: {
foo: function() {}
}
};
this.behavior.created.call(element);

assert.deepEqual(element._reduxActions, {
foo: element.actions.foo,
bar: one.actions.bar,
baz: two.actions.baz,
})
});

it('should not throw when Object.assign is undefined', function() {
var ready = this.behavior.ready;
assert.doesNotThrow(function() {
ready.apply({
fire: function() {},
describe('polyfill Object.assign for IE11', function() {
var assign = Object.assign;

before(function() {
Object.assign = undefined;
});

after(function() {
Object.assign = assign;
});

it('should only assign own props', function() {
var element = {
actions: {
foo: function() {}
}
};

element.actions.__proto__.bar = function() {};

this.behavior.created.apply(element);

assert.deepEqual(element._reduxActions, {
foo: element.actions.foo,
});
});
});

it('should only assign own props', function() {
var actions = {};
actions.__proto__.foo = function() {};

var ready = this.behavior.ready.apply({
fire: function() {},
actions: actions
it('should not throw when Object.assign is undefined', function() {
var created = this.behavior.created;
assert.doesNotThrow(function() {
created.call({
actions: {}
});
});
});
});

it('should not assign nulls/undefineds', function() {
var ready = this.behavior.ready.apply({
fire: function() {},
it('should not assign null/undefined actions', function() {
var element = {
actions: null,
};
this.behavior.created.call(element);

assert.deepEqual(element._reduxActions, {});
});
});
});
Expand Down

0 comments on commit e21af41

Please sign in to comment.