[REF] store: merge actions and mutations

closes #256
This commit is contained in:
Géry Debongnie
2019-08-25 21:38:16 +02:00
parent 9843d16585
commit bb4c2506c0
4 changed files with 150 additions and 472 deletions
+38 -39
View File
@@ -35,19 +35,19 @@ describe("connecting a component to store", () => {
}
class Todo extends Component<any, any, any> {}
const state = { todos: [] };
const mutations = {
const actions = {
addTodo({ state }, msg) {
state.todos.push({ msg });
}
};
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
(<any>env).store = store;
const app = new App(env);
await app.mount(fixture);
expect(fixture.innerHTML).toMatchSnapshot();
store.commit("addTodo", "hello");
store.dispatch("addTodo", "hello");
await nextTick();
expect(fixture.innerHTML).toMatchSnapshot();
});
@@ -63,12 +63,12 @@ describe("connecting a component to store", () => {
</templates>
`);
const state = { todos: [{ title: "Kasteel" }] };
const mutations = {
const actions = {
edit({ state }, title) {
state.todos[0].title = title;
}
};
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
class App extends ConnectedComponent<any, any, any> {
static mapStoreToProps(s) {
@@ -94,7 +94,7 @@ describe("connecting a component to store", () => {
expect(fixture.innerHTML).toMatchSnapshot();
expect(shallowFix.innerHTML).toMatchSnapshot();
store.commit("edit", "Bertinchamps");
store.dispatch("edit", "Bertinchamps");
await nextTick();
expect(fixture.innerHTML).toMatchSnapshot();
expect(shallowFix.innerHTML).toMatchSnapshot();
@@ -113,10 +113,9 @@ describe("connecting a component to store", () => {
`);
class Todo extends Component<any, any, any> {}
(<any>env).store = new Store({});
const store = new Store({
state: { todos: [] },
mutations: {
actions: {
addTodo({ state }, msg) {
state.todos.push({ msg });
}
@@ -136,7 +135,7 @@ describe("connecting a component to store", () => {
await app.mount(fixture);
expect(fixture.innerHTML).toMatchSnapshot();
(<any>app.__owl__).store.commit("addTodo", "hello");
(<any>app.__owl__).store.dispatch("addTodo", "hello");
await nextTick();
expect(fixture.innerHTML).toMatchSnapshot();
});
@@ -187,12 +186,12 @@ describe("connecting a component to store", () => {
test("mapStoreToProps receives ownprops as second argument", async () => {
const state = { todos: [{ id: 1, text: "jupiler" }] };
let nextId = 2;
const mutations = {
const actions = {
addTodo({ state }, text) {
state.todos.push({ text, id: nextId++ });
}
};
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
env.qweb.addTemplates(`
<templates>
@@ -224,7 +223,7 @@ describe("connecting a component to store", () => {
await app.mount(fixture);
expect(fixture.innerHTML).toBe("<div><span>jupiler</span></div>");
store.commit("addTodo", "hoegaarden");
store.dispatch("addTodo", "hoegaarden");
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>jupiler</span><span>hoegaarden</span></div>");
});
@@ -333,14 +332,14 @@ describe("connecting a component to store", () => {
}
}
const mutations = {
const actions = {
addBeer({ state }, name) {
state.beers.push({ name });
}
};
const state = { beers: [{ name: "jupiler" }] };
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
(<any>env).store = store;
const app = new App(env);
@@ -348,7 +347,7 @@ describe("connecting a component to store", () => {
await app.mount(fixture);
expect(fixture.innerHTML).toBe("<div><span>jupiler</span></div>");
store.commit("addBeer", "kwak");
store.dispatch("addBeer", "kwak");
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>jupiler</span><span>kwak</span></div>");
});
@@ -382,7 +381,7 @@ describe("connecting a component to store", () => {
state = { beerId: 0 };
}
const mutations = {
const actions = {
consume({ state }, beerId) {
state.consumedID = beerId;
}
@@ -394,7 +393,7 @@ describe("connecting a component to store", () => {
consumedID: null,
taster: "aaron"
};
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
(<any>env).store = store;
const app = new App(env);
@@ -407,7 +406,7 @@ describe("connecting a component to store", () => {
"<div><div><span>taster:aaron</span><span>selected:jupiler</span></div></div>"
);
store.commit("consume", 1);
store.dispatch("consume", 1);
await nextTick();
expect(fixture.innerHTML).toBe(
"<div><div><span>taster:aaron</span><span>selected:jupiler</span><span>consumed:jupiler</span></div></div>"
@@ -449,7 +448,7 @@ describe("connecting a component to store", () => {
state = { beerId: 0 };
}
const mutations = {
const actions = {
changeTaster({ state }, newTaster) {
state.taster = newTaster;
},
@@ -467,7 +466,7 @@ describe("connecting a component to store", () => {
consumedID: null,
taster: "aaron"
};
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
(<any>env).store = store;
const app = new App(env);
@@ -480,13 +479,13 @@ describe("connecting a component to store", () => {
"<div><div><span>taster:aaron</span><span>selected:jupiler</span></div></div>"
);
store.commit("renameBeer", { beerId: 1, name: "kwak" });
store.dispatch("renameBeer", { beerId: 1, name: "kwak" });
await nextTick();
expect(fixture.innerHTML).toBe(
"<div><div><span>taster:aaron</span><span>selected:kwak</span></div></div>"
);
store.commit("consume", 1);
store.dispatch("consume", 1);
await nextTick();
expect(fixture.innerHTML).toBe(
"<div><div><span>taster:aaron</span><span>selected:kwak</span><span>consumed:kwak</span></div></div>"
@@ -498,13 +497,13 @@ describe("connecting a component to store", () => {
"<div><div><span>taster:aaron</span><span>consumed:kwak</span></div></div>"
);
store.commit("renameBeer", { beerId: 1, name: "jupiler" });
store.dispatch("renameBeer", { beerId: 1, name: "jupiler" });
await nextTick();
expect(fixture.innerHTML).toBe(
"<div><div><span>taster:aaron</span><span>consumed:jupiler</span></div></div>"
);
store.commit("changeTaster", "matthieu");
store.dispatch("changeTaster", "matthieu");
await nextTick();
expect(fixture.innerHTML).toBe(
"<div><div><span>taster:matthieu</span><span>consumed:jupiler</span></div></div>"
@@ -539,13 +538,13 @@ describe("connecting a component to store", () => {
}
const state = { current: "a", msg: { a: "a", b: "b" } };
const mutations = {
const actions = {
setCurrent({ state }, c) {
state.current = c;
}
};
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
(<any>env).store = store;
const app = new Parent(env);
@@ -553,14 +552,14 @@ describe("connecting a component to store", () => {
expect(fixture.innerHTML).toBe("<div><span>a</span></div>");
expect(steps).toEqual(["parent", "child"]);
store.commit("setCurrent", "b");
store.dispatch("setCurrent", "b");
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>b</span></div>");
expect(steps).toEqual(["parent", "child", "parent", "child"]);
});
test("connected parent/children: no double rendering", async () => {
const mutations = {
const actions = {
editTodo({ state }) {
state.todos[1].title = "abc";
}
@@ -571,7 +570,7 @@ describe("connecting a component to store", () => {
};
const store = new Store({
state,
mutations
actions
});
env.qweb.addTemplates(`
@@ -611,7 +610,7 @@ describe("connecting a component to store", () => {
}
editTodo() {
this.env.store.commit("editTodo");
this.env.store.dispatch("editTodo");
}
__render(...args) {
renderCount++;
@@ -639,7 +638,7 @@ describe("connecting a component to store", () => {
});
test("connected parent/children: no rendering if child is destroyed", async () => {
const mutations = {
const actions = {
removeTodo({ state }) {
delete state.todos[1];
}
@@ -650,7 +649,7 @@ describe("connecting a component to store", () => {
};
const store = new Store({
state,
mutations
actions
});
env.qweb.addTemplates(`
@@ -690,7 +689,7 @@ describe("connecting a component to store", () => {
};
}
removeTodo() {
this.env.store.commit("removeTodo");
this.env.store.dispatch("removeTodo");
}
__render(...args) {
renderCount++;
@@ -737,20 +736,20 @@ describe("connecting a component to store", () => {
}
const state = { msg: "a" };
const mutations = {
const actions = {
setMsg({ state }, c) {
state.msg = c;
}
};
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
(<any>env).store = store;
const app = new App(env);
await app.mount(fixture);
expect(fixture.innerHTML).toBe("<div>a</div>");
store.commit("setMsg", "b");
store.dispatch("setMsg", "b");
await nextTick();
expect(fixture.innerHTML).toBe("<div>b</div>");
expect(steps).toEqual(["willpatch", "patched"]);
@@ -889,13 +888,13 @@ describe("connected components and default values", () => {
}
};
const mutations = {
const actions = {
changeMessageContent({ state }, messageId, newContent) {
state.messages[messageId].content = newContent;
}
};
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
(<any>env).store = store;
const app = new App(env);
@@ -908,7 +907,7 @@ describe("connected components and default values", () => {
await app.render();
expect(fixture.innerHTML).toBe("<div><div><div>200Message200</div></div></div>");
store.commit("changeMessageContent", 200, "UpdatedMessage200");
store.dispatch("changeMessageContent", 200, "UpdatedMessage200");
await nextTick();
expect(fixture.innerHTML).toBe("<div><div><div>200UpdatedMessage200</div></div></div>");
});
+74 -324
View File
@@ -1,57 +1,33 @@
import { Env } from "../../src/component/component";
import { Store } from "../../src/store/store";
import { nextMicroTick, nextTick } from "../helpers";
import { Store, Getter } from "../../src/store/store";
import { nextTick, nextMicroTick } from "../helpers";
describe("basic use", () => {
test("commit a mutation", () => {
const state = { n: 1 };
const mutations = {
inc({ state }, delta) {
state.n += delta;
}
};
const store = new Store({ state, mutations });
expect(store.state.n).toBe(1);
store.commit("inc", 14);
expect(store.state.n).toBe(15);
});
test("dispatch an action", () => {
const state = { n: 1 };
const mutations = {
const actions = {
inc({ state }, delta) {
state.n += delta;
}
};
const actions = {
inc({ commit }, delta) {
commit("inc", delta);
}
};
const store = new Store({ state, mutations, actions });
const store = new Store({ state, actions });
expect(store.state.n).toBe(1);
store.dispatch("inc", 14);
expect(store.state.n).toBe(15);
});
test("dispatch an action + commit a mutation with positional arguments", () => {
test("dispatch an action with positional arguments", () => {
const state = { n1: 1, n2: 1, n3: 1 };
const mutations = {
const actions = {
batchInc({ state }, delta1, delta2, delta3) {
state.n1 += delta1;
state.n2 += delta2;
state.n3 += delta3;
}
};
const actions = {
batchInc({ commit }, delta1, delta2, delta3) {
commit("batchInc", delta1, delta2, delta3);
}
};
const store = new Store({ state, mutations, actions });
const store = new Store({ state, actions });
expect(store.state.n1).toBe(1);
expect(store.state.n2).toBe(1);
@@ -62,96 +38,58 @@ describe("basic use", () => {
expect(store.state.n3).toBe(89);
});
test("modifying state outside of mutations trigger error", () => {
const state = { n: 1 };
const actions = {
inc({ state }) {
state.n++;
}
};
const store = new Store({ state, mutations: {}, actions });
expect(() => store.dispatch("inc")).toThrow();
expect(() => (store.state.n = 15)).toThrow();
});
test("can dispatch an action in an action", () => {
const state = { n: 1 };
const mutations = {
const actions = {
inc({ state }, delta) {
state.n += delta;
}
};
const actions = {
inc({ commit }, delta) {
commit("inc", delta);
},
inc100({ dispatch }) {
dispatch("inc", 100);
}
};
const store = new Store({ state, mutations, actions });
const store = new Store({ state, actions });
expect(store.state.n).toBe(1);
store.dispatch("inc100");
expect(store.state.n).toBe(101);
});
test("can commit a mutation in a mutation", () => {
test("return data from dispatching an action", () => {
const state = { n: 1 };
const mutations = {
inc({ state }) {
state.n++;
},
inc10({ commit }) {
for (let i = 0; i < 10; i++) {
commit("inc");
}
}
};
const store = new Store({ state, mutations });
expect(store.state.n).toBe(1);
store.commit("inc10");
expect(store.state.n).toBe(11);
});
test("return data from committing a mutation", () => {
const state = { n: 1 };
const mutations = {
const actions = {
inc({ state }) {
return ++state.n;
}
};
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
expect(store.state.n).toBe(1);
const res = store.commit("inc");
const res = store.dispatch("inc");
expect(store.state.n).toBe(2);
expect(res).toBe(2);
});
test("dispatch allow synchronizing between actions", async () => {
const state = { n: 1 };
const mutations = {
const actions = {
inc({ state }, delta) {
state.n += delta;
},
setN({ state }, n) {
state.n = n;
}
};
const actions = {
async dosomething({ commit, dispatch }) {
await dispatch("setTo10");
commit("inc", 3);
},
async setTo10({ commit }) {
async dosomething({ dispatch }) {
await dispatch("setTo10");
dispatch("inc", 3);
},
async setTo10({ dispatch }) {
await Promise.resolve();
commit("setN", 10);
dispatch("setN", 10);
}
};
const store = new Store({ state, mutations, actions });
const store = new Store({ state, actions });
expect(store.state.n).toBe(1);
store.dispatch("dosomething");
@@ -162,26 +100,24 @@ describe("basic use", () => {
test("return data from dispatching an action", async () => {
const state = { n: 1 };
const mutations = {
const actions = {
inc({ state }, delta) {
state.n += delta;
},
setN({ state }, n) {
state.n = n;
}
};
const actions = {
async dosomething({ commit, dispatch }) {
const val = await dispatch("setTo10");
commit("inc", val);
},
async setTo10({ commit }) {
async dosomething({ dispatch }) {
const val = await dispatch("setTo10");
dispatch("inc", val);
},
async setTo10({ dispatch }) {
await Promise.resolve();
commit("setN", 10);
dispatch("setN", 10);
return 5;
}
};
const store = new Store({ state, mutations, actions });
const store = new Store({ state, actions });
expect(store.state.n).toBe(1);
store.dispatch("dosomething");
@@ -219,7 +155,7 @@ describe("basic use", () => {
}
}
};
const getters = {
const getters: { [key: string]: Getter } = {
beerTasterName({ state }, beerID) {
return state.tasters[state.beers[beerID].tasterID].name;
},
@@ -227,161 +163,12 @@ describe("basic use", () => {
return state.beers[1].name;
}
};
const store = new Store({ state, mutations: {}, actions: {}, getters });
const store = new Store({ state, actions: {}, getters });
expect(store.getters).toBeDefined();
expect((<any>store.getters).bestBeerName()).toBe("bertinchamps");
expect((<any>store.getters).beerTasterName(1)).toBe("aaron");
});
test("getters are memoized", async () => {
const state = {
beers: {
1: {
id: 1,
name: "bertinchamps",
tasterID: 1
}
},
tasters: {
1: {
id: 1,
name: "aaron"
}
}
};
let n = 0;
const getters = {
beerTasterName({ state }, beerID) {
n++;
return state.tasters[state.beers[beerID].tasterID].name;
},
bestBeerName({ state }) {
n++;
return state.beers[1].name;
}
};
const store = new Store({ state, mutations: {}, actions: {}, getters });
expect((<any>store.getters).bestBeerName()).toBe("bertinchamps");
expect((<any>store.getters).beerTasterName(1)).toBe("aaron");
expect(n).toBe(2);
expect((<any>store.getters).bestBeerName()).toBe("bertinchamps");
expect((<any>store.getters).beerTasterName(1)).toBe("aaron");
expect(n).toBe(2);
});
test("getters taking Array as argument aren't memoized", async () => {
const state = {
beers: {
1: {
id: 1,
name: "bertinchamps",
tasterID: 1
}
}
};
let n = 0;
const getters = {
getBeerNames({ state }, beerIDs) {
n++;
return beerIDs.map(beerID => {
return state.beers[beerID].name;
});
}
};
const store = new Store({ state, mutations: {}, actions: {}, getters });
expect((<any>store.getters).getBeerNames([1])).toEqual(["bertinchamps"]);
expect(n).toBe(1);
expect((<any>store.getters).getBeerNames([1])).toEqual(["bertinchamps"]);
expect(n).toBe(2);
});
test("getters cache is nuked on store changes", async () => {
const state = {
beers: {
1: {
id: 1,
name: "bertinchamps",
tasterID: 1
}
},
tasters: {
1: {
id: 1,
name: "aaron"
},
2: {
id: 2,
name: "gery"
}
}
};
const mutations = {
changeTaster({ state }, { beerID, tasterID }) {
state.beers[beerID].tasterID = tasterID;
}
};
let n = 0;
const getters = {
beerTasterName({ state }, beerID) {
n++;
return state.tasters[state.beers[beerID].tasterID].name;
}
};
const store = new Store({
state,
mutations: mutations,
actions: {},
getters
});
expect((<any>store.getters).beerTasterName(1)).toBe("aaron");
expect(n).toBe(1);
expect((<any>store.getters).beerTasterName(1)).toBe("aaron");
expect(n).toBe(1);
store.commit("changeTaster", { beerID: 1, tasterID: 2 });
await nextTick();
expect((<any>store.getters).beerTasterName(1)).toBe("gery");
expect(n).toBe(2);
});
test("getters cache is disabled during a mutation", async () => {
const state = {
beers: {
1: {
id: 1,
name: "bertinchamps"
}
}
};
const mutations = {
renameBeer({ state, getters }, beerID) {
expect(getters.beerName(beerID)).toBe("bertinchamps");
state.beers[1].name = "chouffe";
expect(getters.beerName(beerID)).toBe("chouffe");
}
};
let n = 0;
const getters = {
beerName({ state }, beerID) {
n++;
return state.beers[beerID].name;
}
};
const store = new Store({
state,
mutations: mutations,
actions: {},
getters
});
store.commit("renameBeer", 1);
expect((<any>store.getters).beerName(1)).toBe("chouffe");
await nextTick();
expect(n).toBe(3);
});
test("getters given to actions", async () => {
expect.assertions(3);
const state = {
@@ -414,46 +201,10 @@ describe("basic use", () => {
expect(getters.beerTasterName(1)).toBe("aaron");
}
};
const store = new Store({ state, mutations: {}, actions, getters });
const store = new Store({ state, actions, getters });
store.dispatch("action");
});
test("getters given to mutations", async () => {
expect.assertions(3);
const state = {
beers: {
1: {
id: 1,
name: "bertinchamps",
tasterID: 1
}
},
tasters: {
1: {
id: 1,
name: "aaron"
}
}
};
const getters = {
beerTasterName({ state }, beerID) {
return state.tasters[state.beers[beerID].tasterID].name;
},
bestBeerName({ state }) {
return state.beers[1].name;
}
};
const mutations = {
mutation({ getters }) {
expect(getters).toBeDefined();
expect(getters.bestBeerName()).toBe("bertinchamps");
expect(getters.beerTasterName(1)).toBe("aaron");
}
};
const store = new Store({ state, mutations, actions: {}, getters });
store.commit("mutation");
});
test("can use getters inside a getter", () => {
const getters = {
a({ getters }) {
@@ -466,7 +217,7 @@ describe("basic use", () => {
return `c${i}`;
}
};
const store = new Store({ getters });
const store = new Store({ getters, state: {}, actions: {} });
expect(store.getters.a()).toBe("bc1");
});
@@ -474,73 +225,73 @@ describe("basic use", () => {
describe("advanced state properties", () => {
test("state in the store is reference equal after mutation", async () => {
const mutations = {
const actions = {
donothing() {}
};
const store = new Store({ state:{}, mutations });
const store = new Store({ state: {}, actions });
const state = store.state;
store.commit("donothing");
store.dispatch("donothing");
expect(store.state).toBe(state);
});
test("can use array properties in mutations", () => {
expect.assertions(3);
const state = { a: [1, 2, 3] };
const mutations = {
const actions = {
m({ state }) {
expect(state.a.length).toBe(3);
const l = state.a.push(53);
expect(l).toBe(4);
}
};
const store = new Store({ state, mutations });
store.commit("m");
const store = new Store({ state, actions });
store.dispatch("m");
expect(store.state.a).toEqual([1, 2, 3, 53]);
});
test("can use object assign in store", async () => {
const mutations = {
dosomething({ state }) {
Object.assign(state.westmalle, { a: 3, b: 4 });
}
};
const store = new Store({
state: { westmalle: { a: 1, b: 2 } },
mutations
test("can use object assign in store", async () => {
const actions = {
dosomething({ state }) {
Object.assign(state.westmalle, { a: 3, b: 4 });
}
};
const store = new Store({
state: { westmalle: { a: 1, b: 2 } },
actions
});
store.dispatch("dosomething");
expect(store.state.westmalle).toEqual({ a: 3, b: 4 });
});
store.commit("dosomething");
expect(store.state.westmalle).toEqual({ a: 3, b: 4 });
});
test("aku reactive store state 1", async () => {
const mutations = {
inc({ state }) {
state.counter++;
}
};
const state = { counter: 0 };
const store = new Store({ state, mutations });
expect(store.state.counter).toBe(0);
store.commit("inc", {});
expect(store.state.counter).toBe(1);
});
test("aku reactive store state 1", async () => {
const actions = {
inc({ state }) {
state.counter++;
}
};
const state = { counter: 0 };
const store = new Store({ state, actions });
expect(store.state.counter).toBe(0);
store.dispatch("inc", {});
expect(store.state.counter).toBe(1);
});
});
describe("updates triggered by the store", () => {
test("multiple commits trigger one update", async () => {
let updateCounter = 0;
const state = { n: 1 };
const mutations = {
const actions = {
inc({ state }, delta) {
state.n += delta;
}
};
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
store.on("update", null, () => updateCounter++);
store.commit("inc", 14);
store.dispatch("inc", 14);
expect(updateCounter).toBe(0);
store.commit("inc", 50);
store.dispatch("inc", 50);
expect(updateCounter).toBe(0);
await nextMicroTick();
expect(updateCounter).toBe(1);
@@ -549,7 +300,7 @@ describe("updates triggered by the store", () => {
test("empty commits do not trigger updates", async () => {
let updateCounter = 0;
const state = { n: 1 };
const mutations = {
const actions = {
inc({ state }, delta) {
state.n += delta;
},
@@ -559,20 +310,19 @@ describe("updates triggered by the store", () => {
state.n = val;
}
};
const store = new Store({ state, mutations });
const store = new Store({ state, actions });
store.on("update", null, () => updateCounter++);
store.commit("noop");
store.dispatch("noop");
await nextMicroTick();
expect(updateCounter).toBe(0);
store.commit("inc", 50);
store.dispatch("inc", 50);
await nextMicroTick();
expect(updateCounter).toBe(1);
store.commit("noop2");
store.dispatch("noop2");
await nextMicroTick();
expect(updateCounter).toBe(1);
});
});