wazolab/ghibli-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create vuex modules for Films/Vehicles/Locations/People + Test adaptation

Browse Source
This commit is contained in:
Noé Viricel
2020-12-21 12:01:36 +01:00
parent d8cfe69fa0
commit fffbc87964
12 changed files with 172 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
pages/films/_id.spec.js
View File

@@ -13,7 +13,7 @@ const localVue = createLocalVue();
localVue.use(Vuex);
describe("Film page", () => {
let state, actions, store;
let state, actions, getters, store;
beforeEach(() => {
state = {
@@ -22,7 +22,19 @@ describe("Film page", () => {
actions = {
getFilm: jest.fn()
};
store = new Vuex.Store({ state, actions });
getters = {
film: jest.fn()
};
store = new Vuex.Store({
modules: {
films: {
namespaced: true,
state,
actions,
getters
}
}
});
});
it("should render Film page instance", () => {

8
pages/films/_id.vue
View File

@@ -5,7 +5,7 @@
</template>
<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";
export default {
name: "Film",
@@ -21,10 +21,12 @@ export default {
return uuid.test(params.id);
},
async asyncData({ params, store }) {
await store.dispatch("getFilm", params.id);
await store.dispatch("films/getFilm", params.id);
},
computed: {
...mapState(["film"])
...mapGetters({
film: "films/film"
})
}
};
</script>

26
pages/films/index.spec.js
View File

@@ -6,31 +6,43 @@ const localVue = createLocalVue();
localVue.use(Vuex);
describe("Films page", () => {
let state, actions, store;
let state, actions, getters, store;
beforeEach(() => {
state = {
films: []
list: []
};
actions = {
getFilms: jest.fn()
getList: jest.fn()
};
store = new Vuex.Store({ state, actions });
getters = {
list: jest.fn()
};
store = new Vuex.Store({
modules: {
films: {
namespaced: true,
state,
actions,
getters
}
}
});
});
it("should render Films page instance", () => {
const wrapper = mount(Films, { store, localVue });
const wrapper = shallowMount(Films, { store, localVue });
expect(wrapper.find("img").exists()).toBe(true);
});
it("should dispatch getFilms action", async () => {
it("should dispatch films/getList action", async () => {
let wrapper = shallowMount(Films, {
store,
localVue
});
await wrapper.vm.$options.asyncData({ store });
expect(actions.getFilms).toHaveBeenCalled();
expect(actions.getList).toHaveBeenCalled();
expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
});
});

8
pages/films/index.vue
View File

@@ -11,7 +11,7 @@
<script>
import Grid from "@/components/Grid";
import { mapState } from "vuex";
import { mapGetters } from "vuex";
export default {
name: "Films",
@@ -20,10 +20,12 @@ export default {
titleTemplate: "%s - Films"
},
async asyncData({ store }) {
await store.dispatch("getFilms");
if (!store.state.films.list.length) await store.dispatch("films/getList");
},
computed: {
...mapState(["films"])
...mapGetters({
films: "films/list"
})
}
};
</script>

10
store/actions.spec.js → store/films/actions.spec.js
View File

@@ -1,4 +1,4 @@
import { actions } from "@/store";
import { actions } from "./";
import axios from "axios";
import mockFilms from "@/test/fake-films.json";
@@ -14,21 +14,21 @@ jest.mock("axios", () => ({
}));
describe("Vuex actions.", () => {
it("tests getFilms action.", async () => {
it("tests films/getList action.", async () => {
const commit = jest.fn();
actions.$axios = axios;
await actions.getFilms({ commit });
await actions.getList({ commit });
expect(url).toBe("/api/films");
expect(commit).toHaveBeenCalledWith("setFilms", mockFilms);
expect(commit).toHaveBeenCalledWith("setList", mockFilms);
});
it("catches errors.", async () => {
const commit = jest.fn();
actions.$axios = null;
await expect(actions.getFilms({ commit })).rejects.toThrow(
await expect(actions.getList({ commit })).rejects.toThrow(
"API Error occurred."
);
});

37
store/films/index.js Normal file
View File

@@ -0,0 +1,37 @@
export const state = () => ({
list: [],
film: {}
});
export const mutations = {
setList: (state, films) => {
state.list = films;
},
setFilm: (state, film) => {
state.film = film;
}
};
export const actions = {
async getList({ commit }) {
try {
const films = await this.$axios.$get("/api/films");
commit("setList", films);
} catch (e) {
throw Error("API Error occurred.");
}
},
async getFilm({ commit }, id) {
try {
const film = await this.$axios.$get(`/api/films/${id}`);
commit("setFilm", film);
} catch (e) {
throw Error("API Error occurred.");
}
}
};
export const getters = {
list: state => state.list,
film: state => state.film
};

9
store/films/mutations.spec.js Normal file
View File

@@ -0,0 +1,9 @@
import { state, mutations } from "./";
import mockFilms from "@/test/fake-films.json";
describe("Vuex mutations.", () => {
it("tests setFilms mutation.", () => {
mutations.setList(state, mockFilms);
expect(state.list[0].id).toBe(mockFilms[0].id);
});
});

69
store/index.js
View File

@@ -1,70 +1,7 @@
export const state = () => ({
films: [],
film: {},
location: {},
person: {},
vehicle: {}
});
export const state = () => ({});
export const mutations = {
setFilms: (state, films) => {
state.films = films;
},
setFilm: (state, film) => {
state.film = film;
},
setLocation: (state, location) => {
state.location = location;
},
setPerson: (state, person) => {
state.person = person;
},
setVehicle: (state, vehicle) => {
state.vehicle = vehicle;
}
};
export const mutations = {};
export const actions = {
async getFilms({ commit }) {
try {
const films = await this.$axios.$get("/api/films");
commit("setFilms", films);
} catch (e) {
throw Error("API Error occurred.");
}
},
async getFilm({ commit }, id) {
try {
const film = await this.$axios.$get(`/api/films/${id}`);
commit("setFilm", film);
} catch (e) {
throw Error("API Error occurred.");
}
},
async getLocation({ commit }, id) {
try {
const location = await this.$axios.$get(`/api/locations/${id}`);
commit("setLocation", location);
} catch (e) {
throw Error("API Error occurred.");
}
},
async getPerson({ commit }, id) {
try {
const person = await this.$axios.$get(`/api/people/${id}`);
commit("setPerson", person);
} catch (e) {
throw Error("API Error occurred.");
}
},
async getVehicle({ commit }, id) {
try {
const vehicle = await this.$axios.$get(`/api/vehicles/${id}`);
commit("setVehicle", vehicle);
} catch (e) {
throw Error("API Error occurred.");
}
}
};
export const actions = {};
export const getters = {};

25
store/locations/index.js Normal file
View File

@@ -0,0 +1,25 @@
export const state = () => ({
location: {}
});
export const mutations = {
setlocation: (state, location) => {
state.location = location;
}
};
export const actions = {
async getLocation({ commit }, { id, callback = false }) {
try {
const location = await this.$axios.$get(`/api/locations/${id}`);
if (callback) return location;
commit("setLocation", location);
} catch (e) {
throw Error("API Error occurred.");
}
}
};
export const getters = {
location: state => state.location
};

9
store/mutations.spec.js
View File

@@ -1,9 +0,0 @@
import { state, mutations } from "@/store";
import mockFilms from "@/test/fake-films.json";
describe("Vuex mutations.", () => {
it("tests setFilms mutation.", () => {
mutations.setFilms(state, mockFilms);
expect(state.films[0].id).toBe(mockFilms[0].id);
});
});

25
store/people/index.js Normal file
View File

@@ -0,0 +1,25 @@
export const state = () => ({
person: {}
});
export const mutations = {
setPerson: (state, person) => {
state.person = person;
}
};
export const actions = {
async getPerson({ commit }, { id, callback = false }) {
try {
const person = await this.$axios.$get(`/api/people/${id}`);
if (callback) return person;
commit("setPerson", person);
} catch (e) {
throw Error("API Error occurred.");
}
}
};
export const getters = {
person: state => state.person
};

25
store/vehicles/index.js Normal file
View File

@@ -0,0 +1,25 @@
export const state = () => ({
vehicle: {}
});
export const mutations = {
setVehicle: (state, vehicle) => {
state.vehicle = vehicle;
}
};
export const actions = {
async getvehicle({ commit }, { id, callback = false }) {
try {
const vehicle = await this.$axios.$get(`/api/vehicles/${id}`);
if (callback) return vehicle;
commit("setVehicle", vehicle);
} catch (e) {
throw Error("API Error occurred.");
}
}
};
export const getters = {
vehicle: state => state.vehicle
};