From 7d608728233b48cdd524af37d265888d1bd2ac25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 17 Dec 2020 13:42:06 +0100
Subject: [PATCH 01/25] Vuex store init

---
 store/index.js | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 store/index.js

diff --git a/store/index.js b/store/index.js
new file mode 100644
index 0000000..5597adf
--- /dev/null
+++ b/store/index.js
@@ -0,0 +1,7 @@
+export const state = () => ({});
+
+export const mutations = {};
+
+export const actions = {};
+
+export const getters = {};

From 6941293c145019c026e4ddc2f4e354c333dda9c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 17 Dec 2020 14:29:26 +0100
Subject: [PATCH 02/25] Collect films data in AsyncData method.

---
 pages/index.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 353f350..dccdbc5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,13 +8,9 @@
 <script>
 export default {
   name: "Movies",
-  data() {
-    return {
-      films: []
-    };
-  },
-  async mounted() {
-    this.films = await this.$axios.$get("/api/films");
+  async asyncData({ $axios }) {
+    const films = await $axios.$get("/api/films");
+    return { films };
   }
 };
 </script>

From 23595f0e5830003ed8d11abd84f85dbabe424823 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 17 Dec 2020 17:07:22 +0100
Subject: [PATCH 03/25] Test asyncData method.

---
 pages/index.vue      |   6 +-
 test/fake-films.json | 464 +++++++++++++++++++++++++++++++++++++++++++
 test/index.spec.js   |  37 ++++
 3 files changed, 504 insertions(+), 3 deletions(-)
 create mode 100644 test/fake-films.json
 create mode 100644 test/index.spec.js

diff --git a/pages/index.vue b/pages/index.vue
index dccdbc5..6a2127d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,13 +1,13 @@
 <template>
   <section>
-    <h1>Ghibli movies</h1>
-    {{ films }}
+    <h1>Ghibli films</h1>
+    <div class="films">{{ films }}</div>
   </section>
 </template>
 
 <script>
 export default {
-  name: "Movies",
+  name: "Films",
   async asyncData({ $axios }) {
     const films = await $axios.$get("/api/films");
     return { films };
diff --git a/test/fake-films.json b/test/fake-films.json
new file mode 100644
index 0000000..ba54b24
--- /dev/null
+++ b/test/fake-films.json
@@ -0,0 +1,464 @@
+[
+  {
+    "id": "2baf70d1-42bb-4437-b551-e5fed5a87abe",
+    "title": "Castle in the Sky",
+    "description": "The orphan Sheeta inherited a mysterious crystal that links her to the mythical sky-kingdom of Laputa. With the help of resourceful Pazu and a rollicking band of sky pirates, she makes her way to the ruins of the once-great civilization. Sheeta and Pazu must outwit the evil Muska, who plans to use Laputa's science to make himself ruler of the world.",
+    "director": "Hayao Miyazaki",
+    "producer": "Isao Takahata",
+    "release_date": "1986",
+    "rt_score": "95",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+  },
+  {
+    "id": "12cfb892-aac0-4c5b-94af-521852e46d6a",
+    "title": "Grave of the Fireflies",
+    "description": "In the latter part of World War II, a boy and his sister, orphaned when their mother is killed in the firebombing of Tokyo, are left to survive on their own in what remains of civilian life in Japan. The plot follows this boy and his sister as they do their best to survive in the Japanese countryside, battling hunger, prejudice, and pride in their own quiet, personal battle.",
+    "director": "Isao Takahata",
+    "producer": "Toru Hara",
+    "release_date": "1988",
+    "rt_score": "97",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/12cfb892-aac0-4c5b-94af-521852e46d6a"
+  },
+  {
+    "id": "58611129-2dbc-4a81-a72f-77ddfc1b1b49",
+    "title": "My Neighbor Totoro",
+    "description": "Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by Totoros, magical spirits of the forest. When the youngest runs away from home, the older sister seeks help from the spirits to find her.",
+    "director": "Hayao Miyazaki",
+    "producer": "Hayao Miyazaki",
+    "release_date": "1988",
+    "rt_score": "93",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/986faac6-67e3-4fb8-a9ee-bad077c2e7fe",
+      "https://ghibliapi.herokuapp.com/people/d5df3c04-f355-4038-833c-83bd3502b6b9",
+      "https://ghibliapi.herokuapp.com/people/3031caa8-eb1a-41c6-ab93-dd091b541e11",
+      "https://ghibliapi.herokuapp.com/people/87b68b97-3774-495b-bf80-495a5f3e672d",
+      "https://ghibliapi.herokuapp.com/people/d39deecb-2bd0-4770-8b45-485f26e1381f",
+      "https://ghibliapi.herokuapp.com/people/591524bc-04fe-4e60-8d61-2425e42ffb2a",
+      "https://ghibliapi.herokuapp.com/people/c491755a-407d-4d6e-b58a-240ec78b5061",
+      "https://ghibliapi.herokuapp.com/people/f467e18e-3694-409f-bdb3-be891ade1106",
+      "https://ghibliapi.herokuapp.com/people/08ffbce4-7f94-476a-95bc-76d3c3969c19",
+      "https://ghibliapi.herokuapp.com/people/0f8ef701-b4c7-4f15-bd15-368c7fe38d0a"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+      "https://ghibliapi.herokuapp.com/species/603428ba-8a86-4b0b-a9f1-65df6abef3d3",
+      "https://ghibliapi.herokuapp.com/species/74b7f547-1577-4430-806c-c358c8b6bcf5"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+  },
+  {
+    "id": "ea660b10-85c4-4ae3-8a5f-41cea3648e3e",
+    "title": "Kiki's Delivery Service",
+    "description": "A young witch, on her mandatory year of independent life, finds fitting into a new community difficult while she supports herself by running an air courier service.",
+    "director": "Hayao Miyazaki",
+    "producer": "Hayao Miyazaki",
+    "release_date": "1989",
+    "rt_score": "96",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/ea660b10-85c4-4ae3-8a5f-41cea3648e3e"
+  },
+  {
+    "id": "4e236f34-b981-41c3-8c65-f8c9000b94e7",
+    "title": "Only Yesterday",
+    "description": "It’s 1982, and Taeko is 27 years old, unmarried, and has lived her whole life in Tokyo. She decides to visit her family in the countryside, and as the train travels through the night, memories flood back of her younger years: the first immature stirrings of romance, the onset of puberty, and the frustrations of math and boys. At the station she is met by young farmer Toshio, and the encounters with him begin to reconnect her to forgotten longings. In lyrical switches between the present and the past, Taeko contemplates the arc of her life, and wonders if she has been true to the dreams of her childhood self.",
+    "director": "Isao Takahata",
+    "producer": "Toshio Suzuki",
+    "release_date": "1991",
+    "rt_score": "100",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/4e236f34-b981-41c3-8c65-f8c9000b94e7"
+  },
+  {
+    "id": "ebbb6b7c-945c-41ee-a792-de0e43191bd8",
+    "title": "Porco Rosso",
+    "description": "Porco Rosso, known in Japan as Crimson Pig (Kurenai no Buta) is the sixth animated film by Hayao Miyazaki and released in 1992. You're introduced to an Italian World War I fighter ace, now living as a freelance bounty hunter chasing 'air pirates' in the Adriatic Sea. He has been given a curse that changed his head to that of a pig. Once called Marco Pagot, he is now known to the world as 'Porco Rosso', Italian for 'Red Pig.'",
+    "director": "Hayao Miyazaki",
+    "producer": "Toshio Suzuki",
+    "release_date": "1992",
+    "rt_score": "94",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/ebbb6b7c-945c-41ee-a792-de0e43191bd8"
+  },
+  {
+    "id": "1b67aa9a-2e4a-45af-ac98-64d6ad15b16c",
+    "title": "Pom Poko",
+    "description": "As the human city development encroaches on the raccoon population's forest and meadow habitat, the raccoons find themselves faced with the very real possibility of extinction. In response, the raccoons engage in a desperate struggle to stop the construction and preserve their home.",
+    "director": "Isao Takahata",
+    "producer": "Toshio Suzuki",
+    "release_date": "1994",
+    "rt_score": "78",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/1b67aa9a-2e4a-45af-ac98-64d6ad15b16c"
+  },
+  {
+    "id": "ff24da26-a969-4f0e-ba1e-a122ead6c6e3",
+    "title": "Whisper of the Heart",
+    "description": "Shizuku lives a simple life, dominated by her love for stories and writing. One day she notices that all the library books she has have been previously checked out by the same person: 'Seiji Amasawa'. Curious as to who he is, Shizuku meets a boy her age whom she finds infuriating, but discovers to her shock that he is her 'Prince of Books'. As she grows closer to him, she realises that he merely read all those books to bring himself closer to her. The boy Seiji aspires to be a violin maker in Italy, and it is his dreams that make Shizuku realise that she has no clear path for her life. Knowing that her strength lies in writing, she tests her talents by writing a story about Baron, a cat statuette belonging to Seiji's grandfather.",
+    "director": "Yoshifumi Kondō",
+    "producer": "Toshio Suzuki",
+    "release_date": "1995",
+    "rt_score": "91",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/ff24da26-a969-4f0e-ba1e-a122ead6c6e3"
+  },
+  {
+    "id": "0440483e-ca0e-4120-8c50-4c8cd9b965d6",
+    "title": "Princess Mononoke",
+    "description": "Ashitaka, a prince of the disappearing Ainu tribe, is cursed by a demonized boar god and must journey to the west to find a cure. Along the way, he encounters San, a young human woman fighting to protect the forest, and Lady Eboshi, who is trying to destroy it. Ashitaka must find a way to bring balance to this conflict.",
+    "director": "Hayao Miyazaki",
+    "producer": "Toshio Suzuki",
+    "release_date": "1997",
+    "rt_score": "92",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/ba924631-068e-4436-b6de-f3283fa848f0",
+      "https://ghibliapi.herokuapp.com/people/ebe40383-aad2-4208-90ab-698f00c581ab",
+      "https://ghibliapi.herokuapp.com/people/030555b3-4c92-4fce-93fb-e70c3ae3df8b",
+      "https://ghibliapi.herokuapp.com/people/ca568e87-4ce2-4afa-a6c5-51f4ae80a60b",
+      "https://ghibliapi.herokuapp.com/people/e9356bb5-4d4a-4c93-aadc-c83e514bffe3",
+      "https://ghibliapi.herokuapp.com/people/34277bec-7401-43fa-a00a-5aee64b45b08",
+      "https://ghibliapi.herokuapp.com/people/91939012-90b9-46e5-a649-96b898073c82",
+      "https://ghibliapi.herokuapp.com/people/20e3bd33-b35d-41e6-83a4-57ca7f028d38",
+      "https://ghibliapi.herokuapp.com/people/8bccdc78-545b-49f4-a4c8-756163a38c91",
+      "https://ghibliapi.herokuapp.com/people/116bfe1b-3ba8-4fa0-8f72-88537a493cb9"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+      "https://ghibliapi.herokuapp.com/species/6bc92fdd-b0f4-4286-ad71-1f99fb4a0d1e",
+      "https://ghibliapi.herokuapp.com/species/f25fa661-3073-414d-968a-ab062e3065f7"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+  },
+  {
+    "id": "45204234-adfd-45cb-a505-a8e7a676b114",
+    "title": "My Neighbors the Yamadas",
+    "description": "The Yamadas are a typical middle class Japanese family in urban Tokyo and this film shows us a variety of episodes of their lives. With tales that range from the humourous to the heartbreaking, we see this family cope with life's little conflicts, problems and joys in their own way.",
+    "director": "Isao Takahata",
+    "producer": "Toshio Suzuki",
+    "release_date": "1999",
+    "rt_score": "75",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/45204234-adfd-45cb-a505-a8e7a676b114"
+  },
+  {
+    "id": "dc2e6bd1-8156-4886-adff-b39e6043af0c",
+    "title": "Spirited Away",
+    "description": "Spirited Away is an Oscar winning Japanese animated film about a ten year old girl who wanders away from her parents along a path that leads to a world ruled by strange and unusual monster-like animals. Her parents have been changed into pigs along with others inside a bathhouse full of these creatures. Will she ever see the world how it once was?",
+    "director": "Hayao Miyazaki",
+    "producer": "Toshio Suzuki",
+    "release_date": "2001",
+    "rt_score": "97",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/dc2e6bd1-8156-4886-adff-b39e6043af0c"
+  },
+  {
+    "id": "90b72513-afd4-4570-84de-a56c312fdf81",
+    "title": "The Cat Returns",
+    "description": "Haru, a schoolgirl bored by her ordinary routine, saves the life of an unusual cat and suddenly her world is transformed beyond anything she ever imagined. The Cat King rewards her good deed with a flurry of presents, including a very shocking proposal of marriage to his son! Haru embarks on an unexpected journey to the Kingdom of Cats where her eyes are opened to a whole other world.",
+    "director": "Hiroyuki Morita",
+    "producer": "Toshio Suzuki",
+    "release_date": "2002",
+    "rt_score": "89",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/90b72513-afd4-4570-84de-a56c312fdf81"
+  },
+  {
+    "id": "cd3d059c-09f4-4ff3-8d63-bc765a5184fa",
+    "title": "Howl's Moving Castle",
+    "description": "When Sophie, a shy young woman, is cursed with an old body by a spiteful witch, her only chance of breaking the spell lies with a self-indulgent yet insecure young wizard and his companions in his legged, walking home.",
+    "director": "Hayao Miyazaki",
+    "producer": "Toshio Suzuki",
+    "release_date": "2004",
+    "rt_score": "87",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/cd3d059c-09f4-4ff3-8d63-bc765a5184fa"
+  },
+  {
+    "id": "112c1e67-726f-40b1-ac17-6974127bb9b9",
+    "title": "Tales from Earthsea",
+    "description": "Something bizarre has come over the land. The kingdom is deteriorating. People are beginning to act strange... What's even more strange is that people are beginning to see dragons, which shouldn't enter the world of humans. Due to all these bizarre events, Ged, a wandering wizard, is investigating the cause. During his journey, he meets Prince Arren, a young distraught teenage boy. While Arren may look like a shy young teen, he has a severe dark side, which grants him strength, hatred, ruthlessness and has no mercy, especially when it comes to protecting Teru. For the witch Kumo this is a perfect opportunity. She can use the boy's 'fears' against the very one who would help him, Ged.",
+    "director": "Gorō Miyazaki",
+    "producer": "Toshio Suzuki",
+    "release_date": "2006",
+    "rt_score": "41",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/112c1e67-726f-40b1-ac17-6974127bb9b9"
+  },
+  {
+    "id": "758bf02e-3122-46e0-884e-67cf83df1786",
+    "title": "Ponyo",
+    "description": "The son of a sailor, 5-year old Sosuke lives a quiet life on an oceanside cliff with his mother Lisa. One fateful day, he finds a beautiful goldfish trapped in a bottle on the beach and upon rescuing her, names her Ponyo. But she is no ordinary goldfish. The daughter of a masterful wizard and a sea goddess, Ponyo uses her father's magic to transform herself into a young girl and quickly falls in love with Sosuke, but the use of such powerful sorcery causes a dangerous imbalance in the world. As the moon steadily draws nearer to the earth and Ponyo's father sends the ocean's mighty waves to find his daughter, the two children embark on an adventure of a lifetime to save the world and fulfill Ponyo's dreams of becoming human.",
+    "director": "Hayao Miyazaki",
+    "producer": "Toshio Suzuki",
+    "release_date": "2008",
+    "rt_score": "92",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/758bf02e-3122-46e0-884e-67cf83df1786"
+  },
+  {
+    "id": "2de9426b-914a-4a06-a3a0-5e6d9d3886f6",
+    "title": "Arrietty",
+    "description": "14-year-old Arrietty and the rest of the Clock family live in peaceful anonymity as they make their own home from items 'borrowed' from the house's human inhabitants. However, life changes for the Clocks when a human boy discovers Arrietty.",
+    "director": "Hiromasa Yonebayashi",
+    "producer": "Toshio Suzuki",
+    "release_date": "2010",
+    "rt_score": "95",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/2de9426b-914a-4a06-a3a0-5e6d9d3886f6"
+  },
+  {
+    "id": "45db04e4-304a-4933-9823-33f389e8d74d",
+    "title": "From Up on Poppy Hill",
+    "description": "The story is set in 1963 in Yokohama. Kokuriko Manor sits on a hill overlooking the harbour. A 16 year-old girl, Umi, lives in that house. Every morning she raises a signal flag facing the sea. The flag means “I pray for safe voyages”. A 17 year-old boy, Shun, always sees this flag from the sea as he rides a tugboat to school. Gradually the pair are drawn to each other but they are faced with a sudden trial. Even so, they keep going without running from facing the hardships of reality.",
+    "director": "Gorō Miyazaki",
+    "producer": "Toshio Suzuki",
+    "release_date": "2011",
+    "rt_score": "83",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/45db04e4-304a-4933-9823-33f389e8d74d"
+  },
+  {
+    "id": "67405111-37a5-438f-81cc-4666af60c800",
+    "title": "The Wind Rises",
+    "description": "A lifelong love of flight inspires Japanese aviation engineer Jiro Horikoshi, whose storied career includes the creation of the A-6M World War II fighter plane.",
+    "director": "Hayao Miyazaki",
+    "producer": "Toshio Suzuki",
+    "release_date": "2013",
+    "rt_score": "89",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/67405111-37a5-438f-81cc-4666af60c800"
+  },
+  {
+    "id": "578ae244-7750-4d9f-867b-f3cd3d6fecf4",
+    "title": "The Tale of the Princess Kaguya",
+    "description": "A bamboo cutter named Sanuki no Miyatsuko discovers a miniature girl inside a glowing bamboo shoot. Believing her to be a divine presence, he and his wife decide to raise her as their own, calling her 'Princess'.",
+    "director": "Isao Takahata",
+    "producer": "Yoshiaki Nishimura",
+    "release_date": "2013",
+    "rt_score": "100",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/578ae244-7750-4d9f-867b-f3cd3d6fecf4"
+  },
+  {
+    "id": "5fdfb320-2a02-49a7-94ff-5ca418cae602",
+    "title": "When Marnie Was There",
+    "description": "The film follows Anna Sasaki living with her relatives in the seaside town. Anna comes across a nearby abandoned mansion, where she meets Marnie, a mysterious girl who asks her to promise to keep their secrets from everyone. As the summer progresses, Anna spends more time with Marnie, and eventually Anna learns the truth about her family and foster care.",
+    "director": "Hiromasa Yonebayashi",
+    "producer": "Yoshiaki Nishimura",
+    "release_date": "2014",
+    "rt_score": "92",
+    "people": [
+      "https://ghibliapi.herokuapp.com/people/"
+    ],
+    "species": [
+      "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2"
+    ],
+    "locations": [
+      "https://ghibliapi.herokuapp.com/locations/"
+    ],
+    "vehicles": [
+      "https://ghibliapi.herokuapp.com/vehicles/"
+    ],
+    "url": "https://ghibliapi.herokuapp.com/films/5fdfb320-2a02-49a7-94ff-5ca418cae602"
+  }
+]
\ No newline at end of file
diff --git a/test/index.spec.js b/test/index.spec.js
new file mode 100644
index 0000000..09a71a7
--- /dev/null
+++ b/test/index.spec.js
@@ -0,0 +1,37 @@
+import { mount } from "@vue/test-utils";
+import axios from "axios";
+import FilmsView from "@/pages/index";
+import mockFilms from "./fake-films.json";
+
+jest.mock("axios", () => ({
+  $get: jest.fn(() => mockFilms)
+}));
+
+describe("Films page", () => {
+  it("should render Films page instance", () => {
+    const wrapper = mount(FilmsView);
+    expect(wrapper.find("h1").text()).toBe("Ghibli films");
+  });
+
+  it("should get films from Ghibli API", async () => {
+    let wrapper = mount(FilmsView, {
+      mocks: {
+        $axios: axios
+      }
+    });
+
+    expect((await wrapper.vm.$options.asyncData(wrapper.vm)).films).toEqual(
+      mockFilms
+    );
+
+    // Init page with mocked asyncData
+    wrapper = mount(FilmsView, {
+      mocks: {
+        films: (await wrapper.vm.$options.asyncData(wrapper.vm)).films,
+        $axios: axios
+      }
+    });
+
+    expect(JSON.parse(wrapper.find(".films").text())).toEqual(mockFilms);
+  });
+});

From 9394950263ee5412d45b94f3f6626557d33ec66a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 17 Dec 2020 17:15:16 +0100
Subject: [PATCH 04/25] Add proper styles to handle Header's fixed position and
 main tag to display correctly.

---
 components/Header.vue | 6 +++---
 layouts/default.vue   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Header.vue b/components/Header.vue
index ac36c38..9872ff1 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,11 +1,11 @@
 <template>
   <header
     id="header"
-    class="fixed top-0 left-0 w-screen bg-white px-4 py-3 shadow-md"
+    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 py-3 shadow-md"
   >
-    <router-link to="/" class="flex items-center">
+    <router-link to="/" class="flex w-auto h-full items-center">
       <img
-        class="w-12 mr-4"
+        class="h-full mr-4"
         src="https://avatars2.githubusercontent.com/u/1080062?s=200&v=4"
         alt="PeopleDoc - Icon"
       />
diff --git a/layouts/default.vue b/layouts/default.vue
index 6fac89f..a942dce 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <Header />
-    <main>
+    <main class="mt-16 px-4">
       <Nuxt />
     </main>
   </div>

From 111558309e39c88f4c9d3d337b351255d987a868 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 17 Dec 2020 18:15:40 +0100
Subject: [PATCH 05/25] Create Footer component with styles

---
 components/Footer.vue | 18 ++++++++++++++++++
 layouts/default.vue   |  7 ++-----
 test/index.spec.js    |  2 +-
 3 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 components/Footer.vue

diff --git a/components/Footer.vue b/components/Footer.vue
new file mode 100644
index 0000000..59999a5
--- /dev/null
+++ b/components/Footer.vue
@@ -0,0 +1,18 @@
+<template>
+  <footer
+    class="bg-gray-900 text-gray-300 flex items-center justify-center h-16"
+  >
+    <p>
+      ©2020 Made with <span style="color: red;">&#9829;</span> by
+      <a href="https://wazo-lab.io" target="_blank">Wazo Lab</a>
+    </p>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "Footer"
+};
+</script>
+
+<style></style>
diff --git a/layouts/default.vue b/layouts/default.vue
index a942dce..db092db 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,15 +4,12 @@
     <main class="mt-16 px-4">
       <Nuxt />
     </main>
+    <Footer />
   </div>
 </template>
 
 <script>
-import Header from "@/components/Header";
-
-export default {
-  components: { Header }
-};
+export default {};
 </script>
 
 <style>
diff --git a/test/index.spec.js b/test/index.spec.js
index 09a71a7..87f5ec1 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -1,6 +1,6 @@
 import { mount } from "@vue/test-utils";
 import axios from "axios";
-import FilmsView from "@/pages/index";
+import FilmsView from "@/pages";
 import mockFilms from "./fake-films.json";
 
 jest.mock("axios", () => ({

From a7a30c37df8e7ccea2385f7ef2356f70b4559a28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 17 Dec 2020 17:23:17 +0100
Subject: [PATCH 06/25] Add styles to H2

---
 pages/index.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 6a2127d..ce16e57 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,8 @@
 <template>
-  <section>
-    <h1>Ghibli films</h1>
+  <section class="py-4">
+    <h2 class="text-3xl font-normal mx-auto block text-center mb-4">
+      Ghibli films
+    </h2>
     <div class="films">{{ films }}</div>
   </section>
 </template>

From a413b6f63761a002132f8ad967b064354a0ff4d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 17 Dec 2020 18:28:32 +0100
Subject: [PATCH 07/25] Improve Page structure and create a redirect middleware
 to set /films as homepage

---
 layouts/default.vue         | 4 +++-
 middleware/redirect.js      | 3 +++
 pages/{ => films}/index.vue | 0
 test/index.spec.js          | 4 ++--
 4 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 middleware/redirect.js
 rename pages/{ => films}/index.vue (100%)

diff --git a/layouts/default.vue b/layouts/default.vue
index db092db..d72ab30 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -9,7 +9,9 @@
 </template>
 
 <script>
-export default {};
+export default {
+  middleware: ["redirect"]
+};
 </script>
 
 <style>
diff --git a/middleware/redirect.js b/middleware/redirect.js
new file mode 100644
index 0000000..15fca05
--- /dev/null
+++ b/middleware/redirect.js
@@ -0,0 +1,3 @@
+export default function({ redirect, route }) {
+  if (route.path === "/") redirect("/films");
+}
diff --git a/pages/index.vue b/pages/films/index.vue
similarity index 100%
rename from pages/index.vue
rename to pages/films/index.vue
diff --git a/test/index.spec.js b/test/index.spec.js
index 87f5ec1..3158fc5 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -1,6 +1,6 @@
 import { mount } from "@vue/test-utils";
 import axios from "axios";
-import FilmsView from "@/pages";
+import FilmsView from "@/pages/films";
 import mockFilms from "./fake-films.json";
 
 jest.mock("axios", () => ({
@@ -10,7 +10,7 @@ jest.mock("axios", () => ({
 describe("Films page", () => {
   it("should render Films page instance", () => {
     const wrapper = mount(FilmsView);
-    expect(wrapper.find("h1").text()).toBe("Ghibli films");
+    expect(wrapper.find("h2").text()).toBe("Ghibli films");
   });
 
   it("should get films from Ghibli API", async () => {

From baed9969b221027a64c16aeaf5b09634ad7d074f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 17 Dec 2020 18:31:55 +0100
Subject: [PATCH 08/25] Add head property

---
 pages/films/index.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pages/films/index.vue b/pages/films/index.vue
index ce16e57..9c5480e 100644
--- a/pages/films/index.vue
+++ b/pages/films/index.vue
@@ -10,6 +10,9 @@
 <script>
 export default {
   name: "Films",
+  head: {
+    titleTemplate: "%s - Films"
+  },
   async asyncData({ $axios }) {
     const films = await $axios.$get("/api/films");
     return { films };

From 10808b66b2e8571d5bd9f7223c750c0d31acd885 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 17 Dec 2020 19:31:25 +0100
Subject: [PATCH 09/25] Create Grid component + Test. Index test adaptations

---
 components/Grid.vue   | 19 +++++++++++++++++++
 pages/films/index.vue |  8 +++++++-
 test/Grid.spec.js     | 23 +++++++++++++++++++++++
 test/index.spec.js    |  8 ++++----
 4 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 components/Grid.vue
 create mode 100644 test/Grid.spec.js

diff --git a/components/Grid.vue b/components/Grid.vue
new file mode 100644
index 0000000..a991e15
--- /dev/null
+++ b/components/Grid.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="grid">
+    {{ dataSource }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Grid",
+  props: {
+    dataSource: {
+      type: Array,
+      required: true
+    }
+  }
+};
+</script>
+
+<style></style>
diff --git a/pages/films/index.vue b/pages/films/index.vue
index 9c5480e..73805ef 100644
--- a/pages/films/index.vue
+++ b/pages/films/index.vue
@@ -3,19 +3,25 @@
     <h2 class="text-3xl font-normal mx-auto block text-center mb-4">
       Ghibli films
     </h2>
-    <div class="films">{{ films }}</div>
+    <Grid :dataSource="films" />
   </section>
 </template>
 
 <script>
 export default {
   name: "Films",
+  components: { Grid: () => import("@/components/Grid") },
   head: {
     titleTemplate: "%s - Films"
   },
   async asyncData({ $axios }) {
     const films = await $axios.$get("/api/films");
     return { films };
+  },
+  data() {
+    return {
+      films: []
+    };
   }
 };
 </script>
diff --git a/test/Grid.spec.js b/test/Grid.spec.js
new file mode 100644
index 0000000..4f012fd
--- /dev/null
+++ b/test/Grid.spec.js
@@ -0,0 +1,23 @@
+import { mount } from "@vue/test-utils";
+import Grid from "@/components/Grid";
+import mockFilms from "./fake-films.json";
+
+describe("Grid", () => {
+  it("tests props", () => {
+    expect(Grid.props).toMatchObject({
+      dataSource: {
+        type: Array,
+        required: true
+      }
+    });
+  });
+
+  it("should render Grid instance", () => {
+    const wrapper = mount(Grid, {
+      propsData: {
+        dataSource: mockFilms
+      }
+    });
+    expect(JSON.parse(wrapper.text())).toEqual(mockFilms);
+  });
+});
diff --git a/test/index.spec.js b/test/index.spec.js
index 3158fc5..0c72af5 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -1,4 +1,4 @@
-import { mount } from "@vue/test-utils";
+import { mount, shallowMount } from "@vue/test-utils";
 import axios from "axios";
 import FilmsView from "@/pages/films";
 import mockFilms from "./fake-films.json";
@@ -14,7 +14,7 @@ describe("Films page", () => {
   });
 
   it("should get films from Ghibli API", async () => {
-    let wrapper = mount(FilmsView, {
+    let wrapper = shallowMount(FilmsView, {
       mocks: {
         $axios: axios
       }
@@ -25,13 +25,13 @@ describe("Films page", () => {
     );
 
     // Init page with mocked asyncData
-    wrapper = mount(FilmsView, {
+    wrapper = shallowMount(FilmsView, {
       mocks: {
         films: (await wrapper.vm.$options.asyncData(wrapper.vm)).films,
         $axios: axios
       }
     });
 
-    expect(JSON.parse(wrapper.find(".films").text())).toEqual(mockFilms);
+    expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
   });
 });

From 214921a6e8dbefe133640bd586d89da340515c16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 01:22:17 +0100
Subject: [PATCH 10/25] Add Tailwind Typography plugin

---
 package-lock.json  | 5 +++++
 package.json       | 1 +
 tailwind.config.js | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 6799378..df55065 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2362,6 +2362,11 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@tailwindcss/typography": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.3.1.tgz",
+      "integrity": "sha512-HyZ+3Eay8SGaPq7kcFoANZLr4EjeXQ19yjjb9fp6B0PHHpvZoe00jdsnpnooMEbx9J5rQ93nxPUG3MQmXVxGMQ=="
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
diff --git a/package.json b/package.json
index 221e2f0..ee34bfb 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@nuxtjs/axios": "^5.12.4",
+    "@tailwindcss/typography": "^0.3.1",
     "core-js": "^3.6.5",
     "nuxt": "^2.14.6"
   },
diff --git a/tailwind.config.js b/tailwind.config.js
index cc41527..fe4fb38 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,5 +16,5 @@ module.exports = {
   variants: {
     extend: {}
   },
-  plugins: []
+  plugins: [require("@tailwindcss/typography")]
 };

From ab465bbe16807b083ee6cbe1405192dc33f0235d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 01:31:09 +0100
Subject: [PATCH 11/25] Create Film component

---
 assets/svg/rotten-tomatoes.svg |  56 +++++++++++++++++
 components/Film.vue            | 111 +++++++++++++++++++++++++++++++++
 components/Grid.vue            |   5 +-
 test/Grid.spec.js              |  11 ++--
 4 files changed, 178 insertions(+), 5 deletions(-)
 create mode 100644 assets/svg/rotten-tomatoes.svg
 create mode 100644 components/Film.vue

diff --git a/assets/svg/rotten-tomatoes.svg b/assets/svg/rotten-tomatoes.svg
new file mode 100644
index 0000000..0276848
--- /dev/null
+++ b/assets/svg/rotten-tomatoes.svg
@@ -0,0 +1,56 @@
+<svg
+  width="80px"
+  height="80px"
+  viewBox="0 0 80 80"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+  <title>Icons/Tomatometer &amp; AS/fresh</title>
+  <desc>Created with Sketch.</desc>
+  <defs>
+    <polygon
+      id="path-1"
+      points="0.000109100102 0.246970954 77.0827837 0.246970954 77.0827837 63.7145228 0.000109100102 63.7145228"
+    />
+  </defs>
+  <g
+    id="Icons/Tomatometer-&amp;-AS/fresh"
+    stroke="none"
+    stroke-width="1"
+    fill="none"
+    fill-rule="evenodd"
+  >
+    <g id="Group">
+      <rect
+        id="Rectangle-Copy-2"
+        fill="#000000"
+        opacity="0"
+        x="0"
+        y="0"
+        width="80"
+        height="80"
+      />
+      <g id="RT_Fresh_Tomato_RGB-(1)" transform="translate(1.327801, 0.000000)">
+        <g id="Group-3" transform="translate(0.000000, 16.265560)">
+          <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1" />
+          </mask>
+          <g id="Clip-2" />
+          <path
+            d="M77.0137759,27.0426556 C76.2423237,14.6741909 69.9521992,5.42041494 60.4876349,0.246970954 C60.5414108,0.548381743 60.273195,0.925145228 59.9678008,0.791701245 C53.7772614,-1.91634855 43.2753527,6.84780083 35.9365975,2.25825726 C35.9917012,3.90539419 35.6700415,11.940249 24.3515353,12.4063071 C24.0843154,12.4172614 23.9372614,12.1443983 24.1062241,11.9512033 C25.619917,10.2247303 27.1482158,5.85360996 24.9507054,3.5233195 C20.2446473,7.74041494 17.5117012,9.32746888 8.48829876,7.23319502 C2.71103734,13.2740249 -0.562655602,21.5419087 0.08,31.8413278 C1.39120332,52.86639 21.0848133,64.8846473 40.9165145,63.6471369 C60.746888,62.4106224 78.3253112,48.0677178 77.0137759,27.0426556"
+            id="Fill-1"
+            fill="#FA320A"
+            mask="url(#mask-2)"
+          />
+        </g>
+        <path
+          d="M40.8717012,11.4648963 C44.946722,10.49361 56.6678838,11.3702905 60.4232365,16.3518672 C60.6486307,16.6506224 60.3312863,17.2159336 59.9678008,17.0572614 C53.7772614,14.3492116 43.2753527,23.113361 35.9365975,18.5238174 C35.9917012,20.1709544 35.6700415,28.2058091 24.3515353,28.6718672 C24.0843154,28.6828216 23.9372614,28.4099585 24.1062241,28.2167635 C25.619917,26.4902905 27.1478838,22.1191701 24.9507054,19.7888797 C19.8243983,24.3827386 17.0453112,25.8589212 5.91900415,22.8514523 C5.55485477,22.753195 5.67900415,22.1679668 6.06639004,22.020249 C8.16929461,21.2165975 12.933444,17.6965975 17.4406639,16.1450622 C18.2987552,15.8499585 19.1541909,15.6209129 19.9890456,15.4878008 C15.02639,15.0443154 12.7893776,14.3541909 9.63286307,14.8302075 C9.28697095,14.8823237 9.05195021,14.479668 9.26639004,14.2034855 C13.5193361,8.7253112 21.3540249,7.07087137 26.1878838,9.98107884 C23.2082988,6.28912863 20.8743568,3.34473029 20.8743568,3.34473029 L26.4046473,0.203485477 C26.4046473,0.203485477 28.6894606,5.30821577 30.3518672,9.02340249 C34.4657261,2.94506224 42.119834,2.38406639 45.3536929,6.69676349 C45.5455602,6.95302905 45.3450622,7.31751037 45.0247303,7.30987552 C42.3926971,7.24580913 40.9434025,9.63983402 40.833527,11.4605809 L40.8717012,11.4648963"
+          id="Fill-4"
+          fill="#00912D"
+        />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/components/Film.vue b/components/Film.vue
new file mode 100644
index 0000000..987538b
--- /dev/null
+++ b/components/Film.vue
@@ -0,0 +1,111 @@
+<template>
+  <article
+    class="film bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
+  >
+    <header class="p-4 rounded-t-md">
+      <h1>
+        {{ film.title + " (" + film.release_date + ")" }}
+      </h1>
+      <h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
+    </header>
+
+    <main class="inline-block px-4">
+      <h3>Summary</h3>
+      <p>{{ excerptOfDescription }}</p>
+    </main>
+
+    <footer class="px-4 flex items-center justify-between">
+      <p
+        class="film-score font-bold text-lg"
+        :class="{
+          'text-green-600': film.rt_score >= 75,
+          'text-orange-600': film.rt_score >= 50 && film.rt_score < 75,
+          'text-yellow-600': film.rt_score >= 25 && film.rt_score < 50,
+          'text-red-600': film.rt_score >= 0 && film.rt_score < 25
+        }"
+      >
+        {{ film.rt_score + "%" }}
+      </p>
+      <router-link
+        class="rounded font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
+        :to="`/film/${film.id}`"
+        tag="button"
+      >
+        Read more
+      </router-link>
+    </footer>
+  </article>
+</template>
+
+<script>
+export default {
+  name: "Film",
+  props: {
+    film: {
+      type: Object,
+      default: () => {},
+      required: true
+    }
+  },
+  computed: {
+    excerptOfDescription: function() {
+      return this.film.description.substring(0, 300) + "...";
+    }
+  }
+};
+</script>
+
+<style lang="css" scoped>
+/* .film {
+  flex: 1 1 calc(50% - 2rem);
+}
+
+@media screen and (min-width: 600px) {
+  .card {
+    flex: 1 1 calc(50% - 2rem);
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .card {
+    flex: 1 1 calc(33% - 2rem);
+  }
+} */
+
+header {
+  background-color: #85ffbd;
+  background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
+}
+
+.film:nth-child(2n) header {
+  background-color: #ff9a8b;
+  background-image: linear-gradient(
+    90deg,
+    #ff9a8b 0%,
+    #ff6a88 55%,
+    #ff99ac 100%
+  );
+}
+
+.film:nth-child(4n) header {
+  background-color: #fee140;
+  background-image: linear-gradient(90deg, #fee140 0%, #fa709a 100%);
+}
+
+.film:nth-child(5n) header {
+  background-color: #a9c9ff;
+  background-image: linear-gradient(180deg, #a9c9ff 0%, #ffbbec 100%);
+}
+
+.film-score::before {
+  content: "";
+  background: url(~assets/svg/rotten-tomatoes.svg);
+  background-repeat: no-repeat;
+  background-size: 100%;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-block;
+  vertical-align: sub;
+  margin-right: 0.5rem;
+}
+</style>
diff --git a/components/Grid.vue b/components/Grid.vue
index a991e15..69396da 100644
--- a/components/Grid.vue
+++ b/components/Grid.vue
@@ -1,11 +1,14 @@
 <template>
   <div class="grid">
-    {{ dataSource }}
+    <Film :key="film.id" v-for="film in dataSource" :film="film" />
   </div>
 </template>
 
 <script>
+import Film from "./Film";
+
 export default {
+  components: { Film },
   name: "Grid",
   props: {
     dataSource: {
diff --git a/test/Grid.spec.js b/test/Grid.spec.js
index 4f012fd..61e7bfb 100644
--- a/test/Grid.spec.js
+++ b/test/Grid.spec.js
@@ -1,4 +1,4 @@
-import { mount } from "@vue/test-utils";
+import { shallowMount } from "@vue/test-utils";
 import Grid from "@/components/Grid";
 import mockFilms from "./fake-films.json";
 
@@ -12,12 +12,15 @@ describe("Grid", () => {
     });
   });
 
-  it("should render Grid instance", () => {
-    const wrapper = mount(Grid, {
+  it("should render Grid instance with expected Film components", () => {
+    const wrapper = shallowMount(Grid, {
       propsData: {
         dataSource: mockFilms
       }
     });
-    expect(JSON.parse(wrapper.text())).toEqual(mockFilms);
+
+    expect(wrapper.findAllComponents({ name: "Film" }).length).toBe(
+      mockFilms.length
+    );
   });
 });

From f937bfcf4ceb08c68e64349d590cc92c91ed5d13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 01:47:06 +0100
Subject: [PATCH 12/25] Test Film component

---
 components/Film/Film.spec.js   | 30 ++++++++++++++++++++++++++++++
 components/{ => Film}/Film.vue | 18 +-----------------
 components/Grid.vue            |  2 +-
 3 files changed, 32 insertions(+), 18 deletions(-)
 create mode 100644 components/Film/Film.spec.js
 rename components/{ => Film}/Film.vue (90%)

diff --git a/components/Film/Film.spec.js b/components/Film/Film.spec.js
new file mode 100644
index 0000000..522577e
--- /dev/null
+++ b/components/Film/Film.spec.js
@@ -0,0 +1,30 @@
+import { mount, RouterLinkStub } from "@vue/test-utils";
+import Film from "@/components/Film/Film";
+import mockFilms from "@/test/fake-films.json";
+
+describe("Film", () => {
+  it("tests props", () => {
+    expect(Film.props).toMatchObject({
+      film: {
+        type: Object,
+        default: {},
+        required: true
+      }
+    });
+  });
+
+  it("renders proper link to details", () => {
+    const wrapper = mount(Film, {
+      propsData: {
+        film: mockFilms[0]
+      },
+      stubs: {
+        RouterLink: RouterLinkStub
+      }
+    });
+
+    expect(wrapper.findComponent(RouterLinkStub).props().to).toBe(
+      `/film/${mockFilms[0].id}`
+    );
+  });
+});
diff --git a/components/Film.vue b/components/Film/Film.vue
similarity index 90%
rename from components/Film.vue
rename to components/Film/Film.vue
index 987538b..69471e9 100644
--- a/components/Film.vue
+++ b/components/Film/Film.vue
@@ -43,7 +43,7 @@ export default {
   props: {
     film: {
       type: Object,
-      default: () => {},
+      default: {},
       required: true
     }
   },
@@ -56,22 +56,6 @@ export default {
 </script>
 
 <style lang="css" scoped>
-/* .film {
-  flex: 1 1 calc(50% - 2rem);
-}
-
-@media screen and (min-width: 600px) {
-  .card {
-    flex: 1 1 calc(50% - 2rem);
-  }
-}
-
-@media screen and (min-width: 900px) {
-  .card {
-    flex: 1 1 calc(33% - 2rem);
-  }
-} */
-
 header {
   background-color: #85ffbd;
   background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
diff --git a/components/Grid.vue b/components/Grid.vue
index 69396da..ac1a141 100644
--- a/components/Grid.vue
+++ b/components/Grid.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Film from "./Film";
+import Film from "./Film/Film";
 
 export default {
   components: { Film },

From 0408b8bf63da9b0116aec011aeb0e8b5267dfb40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 02:00:39 +0100
Subject: [PATCH 13/25] Refactor Grid module

---
 components/Film/Film.spec.js            | 2 +-
 components/Film/{Film.vue => index.vue} | 0
 {test => components/Grid}/Grid.spec.js  | 4 ++--
 components/{Grid.vue => Grid/index.vue} | 4 ++--
 pages/films/index.vue                   | 4 +++-
 5 files changed, 8 insertions(+), 6 deletions(-)
 rename components/Film/{Film.vue => index.vue} (100%)
 rename {test => components/Grid}/Grid.spec.js (86%)
 rename components/{Grid.vue => Grid/index.vue} (82%)

diff --git a/components/Film/Film.spec.js b/components/Film/Film.spec.js
index 522577e..51046f6 100644
--- a/components/Film/Film.spec.js
+++ b/components/Film/Film.spec.js
@@ -1,5 +1,5 @@
 import { mount, RouterLinkStub } from "@vue/test-utils";
-import Film from "@/components/Film/Film";
+import Film from "./";
 import mockFilms from "@/test/fake-films.json";
 
 describe("Film", () => {
diff --git a/components/Film/Film.vue b/components/Film/index.vue
similarity index 100%
rename from components/Film/Film.vue
rename to components/Film/index.vue
diff --git a/test/Grid.spec.js b/components/Grid/Grid.spec.js
similarity index 86%
rename from test/Grid.spec.js
rename to components/Grid/Grid.spec.js
index 61e7bfb..22f4bba 100644
--- a/test/Grid.spec.js
+++ b/components/Grid/Grid.spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from "@vue/test-utils";
-import Grid from "@/components/Grid";
-import mockFilms from "./fake-films.json";
+import Grid from "./";
+import mockFilms from "@/test/fake-films.json";
 
 describe("Grid", () => {
   it("tests props", () => {
diff --git a/components/Grid.vue b/components/Grid/index.vue
similarity index 82%
rename from components/Grid.vue
rename to components/Grid/index.vue
index ac1a141..feb1bf8 100644
--- a/components/Grid.vue
+++ b/components/Grid/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="grid">
+  <div class="flex flex-wrap">
     <Film :key="film.id" v-for="film in dataSource" :film="film" />
   </div>
 </template>
 
 <script>
-import Film from "./Film/Film";
+import Film from "../Film";
 
 export default {
   components: { Film },
diff --git a/pages/films/index.vue b/pages/films/index.vue
index 73805ef..0d55a9a 100644
--- a/pages/films/index.vue
+++ b/pages/films/index.vue
@@ -8,9 +8,11 @@
 </template>
 
 <script>
+import Grid from "@/components/Grid";
+
 export default {
   name: "Films",
-  components: { Grid: () => import("@/components/Grid") },
+  components: { Grid },
   head: {
     titleTemplate: "%s - Films"
   },

From 8a5958dde032d98857d409e342606db4ad8a23bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 02:03:04 +0100
Subject: [PATCH 14/25] Refactor Header module

---
 {test => components/Header}/Header.spec.js  | 2 +-
 components/{Header.vue => Header/index.vue} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename {test => components/Header}/Header.spec.js (92%)
 rename components/{Header.vue => Header/index.vue} (100%)

diff --git a/test/Header.spec.js b/components/Header/Header.spec.js
similarity index 92%
rename from test/Header.spec.js
rename to components/Header/Header.spec.js
index 60ef6a3..616b0c7 100644
--- a/test/Header.spec.js
+++ b/components/Header/Header.spec.js
@@ -1,5 +1,5 @@
 import { mount, RouterLinkStub } from "@vue/test-utils";
-import Header from "@/components/Header";
+import Header from "./";
 
 describe("Header", () => {
   it("should render Header instance", () => {
diff --git a/components/Header.vue b/components/Header/index.vue
similarity index 100%
rename from components/Header.vue
rename to components/Header/index.vue

From 5787c9d8db664266a7059e1d5f8e76eff2c10df9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 02:07:15 +0100
Subject: [PATCH 15/25] Refactor Footer module + Add basic tesst file

---
 components/Footer/Footer.spec.js            | 9 +++++++++
 components/{Footer.vue => Footer/index.vue} | 0
 2 files changed, 9 insertions(+)
 create mode 100644 components/Footer/Footer.spec.js
 rename components/{Footer.vue => Footer/index.vue} (100%)

diff --git a/components/Footer/Footer.spec.js b/components/Footer/Footer.spec.js
new file mode 100644
index 0000000..0e6012c
--- /dev/null
+++ b/components/Footer/Footer.spec.js
@@ -0,0 +1,9 @@
+import { mount } from "@vue/test-utils";
+import Footer from "./";
+
+describe("Footer", () => {
+  it("should render Footer instance", () => {
+    const wrapper = mount(Footer);
+    expect(wrapper.exists()).toBe(true);
+  });
+});
diff --git a/components/Footer.vue b/components/Footer/index.vue
similarity index 100%
rename from components/Footer.vue
rename to components/Footer/index.vue

From 0ea1c855d27640c4d33517a1162bef9a82811d62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 02:17:55 +0100
Subject: [PATCH 16/25] Replace films page H2 by Studio Ghibli logo

---
 assets/images/logo.png | Bin 0 -> 23101 bytes
 pages/films/index.vue  |   8 +++++---
 test/index.spec.js     |   2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)
 create mode 100644 assets/images/logo.png

diff --git a/assets/images/logo.png b/assets/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..b88c0975e6080a0a67450553cc9da5dfdef472ef
GIT binary patch
literal 23101
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
LNkvXXu0mjfHMFua

literal 0
HcmV?d00001

diff --git a/pages/films/index.vue b/pages/films/index.vue
index 0d55a9a..6ff11f2 100644
--- a/pages/films/index.vue
+++ b/pages/films/index.vue
@@ -1,8 +1,10 @@
 <template>
   <section class="py-4">
-    <h2 class="text-3xl font-normal mx-auto block text-center mb-4">
-      Ghibli films
-    </h2>
+    <img
+      class="w-full max-w-md mx-auto mb-8"
+      src="~/assets/images/logo.png"
+      alt="Studio Ghibli"
+    />
     <Grid :dataSource="films" />
   </section>
 </template>
diff --git a/test/index.spec.js b/test/index.spec.js
index 0c72af5..b55b5d7 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -10,7 +10,7 @@ jest.mock("axios", () => ({
 describe("Films page", () => {
   it("should render Films page instance", () => {
     const wrapper = mount(FilmsView);
-    expect(wrapper.find("h2").text()).toBe("Ghibli films");
+    expect(wrapper.find("img").exists()).toBe(true);
   });
 
   it("should get films from Ghibli API", async () => {

From f2ba114d26d193f01fcb47abd2f514f1cc1b1505 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 02:27:15 +0100
Subject: [PATCH 17/25] Add description in Header + Change title

---
 components/Header/Header.spec.js |  2 +-
 components/Header/index.vue      | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/components/Header/Header.spec.js b/components/Header/Header.spec.js
index 616b0c7..d2ec6b6 100644
--- a/components/Header/Header.spec.js
+++ b/components/Header/Header.spec.js
@@ -4,7 +4,7 @@ import Header from "./";
 describe("Header", () => {
   it("should render Header instance", () => {
     const wrapper = mount(Header, { stubs: ["router-link"] });
-    expect(wrapper.find("h1").text()).toBe("Ghibli");
+    expect(wrapper.find("h1").text()).toBe("PeopleDoc");
   });
 
   it("should redirect to Home page when clicking on brand logo", () => {
diff --git a/components/Header/index.vue b/components/Header/index.vue
index 9872ff1..0146da7 100644
--- a/components/Header/index.vue
+++ b/components/Header/index.vue
@@ -1,7 +1,7 @@
 <template>
   <header
     id="header"
-    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 py-3 shadow-md"
+    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 py-3 shadow-md flex items-center justify-between"
   >
     <router-link to="/" class="flex w-auto h-full items-center">
       <img
@@ -9,14 +9,22 @@
         src="https://avatars2.githubusercontent.com/u/1080062?s=200&v=4"
         alt="PeopleDoc - Icon"
       />
-      <h1 class="text-2xl font-light tracking-wide">Ghibli</h1>
+      <h1 class="text-2xl font-light tracking-wide">PeopleDoc</h1>
     </router-link>
+    <h2 class="font-medium hidden sm:block">{{ description }}</h2>
   </header>
 </template>
 
 <script>
+import pkg from "@/package.json";
+
 export default {
-  name: "Header"
+  name: "Header",
+  computed: {
+    description: function() {
+      return pkg.description;
+    }
+  }
 };
 </script>
 

From 3782c90647777591a6f15f71e821066a122df512 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 02:37:32 +0100
Subject: [PATCH 18/25] Handle responsivness on Grid + Film components

---
 components/Film/index.vue   | 15 ++++++++++++++-
 components/Grid/index.vue   |  2 +-
 components/Header/index.vue |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/Film/index.vue b/components/Film/index.vue
index 69471e9..2ff90ee 100644
--- a/components/Film/index.vue
+++ b/components/Film/index.vue
@@ -1,6 +1,6 @@
 <template>
   <article
-    class="film bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
+    class="film flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
   >
     <header class="p-4 rounded-t-md">
       <h1>
@@ -56,6 +56,19 @@ export default {
 </script>
 
 <style lang="css" scoped>
+@media screen and (min-width: 640px) {
+  .film {
+    margin: 1rem;
+    flex: 1 1 calc(50% - 2rem);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .film {
+    flex: 1 1 calc(33% - 2rem);
+  }
+}
+
 header {
   background-color: #85ffbd;
   background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
diff --git a/components/Grid/index.vue b/components/Grid/index.vue
index feb1bf8..20acd47 100644
--- a/components/Grid/index.vue
+++ b/components/Grid/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap">
+  <div class="flex flex-wrap justify-center">
     <Film :key="film.id" v-for="film in dataSource" :film="film" />
   </div>
 </template>
diff --git a/components/Header/index.vue b/components/Header/index.vue
index 0146da7..c89e0c6 100644
--- a/components/Header/index.vue
+++ b/components/Header/index.vue
@@ -1,7 +1,7 @@
 <template>
   <header
     id="header"
-    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 py-3 shadow-md flex items-center justify-between"
+    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 md:px-8 py-3 shadow-md flex items-center justify-between"
   >
     <router-link to="/" class="flex w-auto h-full items-center">
       <img

From cf59911c4c5d1cea0e8429fd2226f92955ac0c02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 03:04:27 +0100
Subject: [PATCH 19/25] Create basic film page

---
 components/Film/Film.spec.js |  2 +-
 components/Film/index.vue    |  2 +-
 pages/films/_id.vue          | 28 ++++++++++++++++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 pages/films/_id.vue

diff --git a/components/Film/Film.spec.js b/components/Film/Film.spec.js
index 51046f6..71aa0d2 100644
--- a/components/Film/Film.spec.js
+++ b/components/Film/Film.spec.js
@@ -24,7 +24,7 @@ describe("Film", () => {
     });
 
     expect(wrapper.findComponent(RouterLinkStub).props().to).toBe(
-      `/film/${mockFilms[0].id}`
+      `/films/${mockFilms[0].id}`
     );
   });
 });
diff --git a/components/Film/index.vue b/components/Film/index.vue
index 2ff90ee..8818ad9 100644
--- a/components/Film/index.vue
+++ b/components/Film/index.vue
@@ -28,7 +28,7 @@
       </p>
       <router-link
         class="rounded font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
-        :to="`/film/${film.id}`"
+        :to="`/films/${film.id}`"
         tag="button"
       >
         Read more
diff --git a/pages/films/_id.vue b/pages/films/_id.vue
new file mode 100644
index 0000000..58d8af4
--- /dev/null
+++ b/pages/films/_id.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    {{ film }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Film",
+  head: {
+    titleTemplate: "%s - Film"
+  },
+  validate({ params }) {
+    return /([\w]{8}-[\w]{4}-[\w]{4}-[\w]{4}-[\w]{12})/.test(params.id);
+  },
+  async asyncData({ $axios, params }) {
+    const film = await $axios.$get(`/api/films/${params.id}`);
+    return { film };
+  },
+  data() {
+    return {
+      film: {}
+    };
+  }
+};
+</script>
+
+<style></style>

From 1cf3dba078e7c2b57e87c532a29b24c2e6891f6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 03:41:47 +0100
Subject: [PATCH 20/25] Add param validation + Test for Film page

---
 pages/films/_id.spec.js | 66 +++++++++++++++++++++++++++++++++++++++++
 pages/films/_id.vue     |  5 +++-
 2 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 pages/films/_id.spec.js

diff --git a/pages/films/_id.spec.js b/pages/films/_id.spec.js
new file mode 100644
index 0000000..18c23f7
--- /dev/null
+++ b/pages/films/_id.spec.js
@@ -0,0 +1,66 @@
+import { mount } from "@vue/test-utils";
+import axios from "axios";
+import Film from "./_id";
+import mockFilms from "@/test/fake-films.json";
+
+let $route = {
+  path: "/films",
+  params: {
+    id: "2baf70d1-42bb-4437-b551-e5fed5a87abe"
+  }
+};
+
+const mockFilm = mockFilms.filter(o => o.id === $route.params.id);
+
+jest.mock("axios", () => ({
+  $get: jest.fn(() => mockFilm)
+}));
+
+describe("Film page", () => {
+  it("should render Film page instance", () => {
+    const wrapper = mount(Film);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it("tests params validation", () => {
+    expect(Film.validate({ params: $route.params })).toBe(true);
+    expect(
+      Film.validate({
+        params: { id: "2baf70d1-42bb-4437-b551-e5fed5a87abe-1234" }
+      })
+    ).toBe(false);
+    expect(
+      Film.validate({
+        params: { id: "2baf7e0d1-42bb-4437-b551-e5fed5a87abe" }
+      })
+    ).toBe(false);
+  });
+
+  it("should get film from Ghibli API", async () => {
+    let wrapper = mount(Film, {
+      mocks: {
+        $route,
+        $axios: axios
+      }
+    });
+
+    expect(
+      (
+        await wrapper.vm.$options.asyncData({
+          $axios: axios,
+          params: $route.params
+        })
+      ).film
+    ).toEqual(mockFilm);
+
+    // // Init page with mocked asyncData
+    // wrapper = shallowMount(Film, {
+    //   mocks: {
+    //     films: (await wrapper.vm.$options.asyncData(wrapper.vm)).films,
+    //     $axios: axios
+    //   }
+    // });
+
+    // expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
+  });
+});
diff --git a/pages/films/_id.vue b/pages/films/_id.vue
index 58d8af4..7602e89 100644
--- a/pages/films/_id.vue
+++ b/pages/films/_id.vue
@@ -11,7 +11,10 @@ export default {
     titleTemplate: "%s - Film"
   },
   validate({ params }) {
-    return /([\w]{8}-[\w]{4}-[\w]{4}-[\w]{4}-[\w]{12})/.test(params.id);
+    const uuid = new RegExp(
+      /^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
+    );
+    return uuid.test(params.id);
   },
   async asyncData({ $axios, params }) {
     const film = await $axios.$get(`/api/films/${params.id}`);

From 432ff2ac1489cc6f697211c298ec5b58e267c427 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 03:43:22 +0100
Subject: [PATCH 21/25] Add dynamic head for Film page

---
 pages/films/_id.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/pages/films/_id.vue b/pages/films/_id.vue
index 7602e89..b5c19af 100644
--- a/pages/films/_id.vue
+++ b/pages/films/_id.vue
@@ -7,8 +7,10 @@
 <script>
 export default {
   name: "Film",
-  head: {
-    titleTemplate: "%s - Film"
+  head() {
+    return {
+      titleTemplate: `%s - ${this.film.title}`
+    };
   },
   validate({ params }) {
     const uuid = new RegExp(

From 24d3a962bd489fbc596914334d22a3bbe17dbdc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 03:44:26 +0100
Subject: [PATCH 22/25] Refactor films module

---
 {test => pages/films}/index.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename {test => pages/films}/index.spec.js (91%)

diff --git a/test/index.spec.js b/pages/films/index.spec.js
similarity index 91%
rename from test/index.spec.js
rename to pages/films/index.spec.js
index b55b5d7..1fd3f16 100644
--- a/test/index.spec.js
+++ b/pages/films/index.spec.js
@@ -1,7 +1,7 @@
 import { mount, shallowMount } from "@vue/test-utils";
 import axios from "axios";
-import FilmsView from "@/pages/films";
-import mockFilms from "./fake-films.json";
+import FilmsView from "./";
+import mockFilms from "@/test/fake-films.json";
 
 jest.mock("axios", () => ({
   $get: jest.fn(() => mockFilms)

From 734b9243904050c4ebbb47b276252147067929e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 04:28:14 +0100
Subject: [PATCH 23/25] Use Vuex store to handle films

---
 pages/films/index.vue | 12 +++++-------
 store/index.js        | 17 ++++++++++++++---
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/pages/films/index.vue b/pages/films/index.vue
index 6ff11f2..e00de3a 100644
--- a/pages/films/index.vue
+++ b/pages/films/index.vue
@@ -11,6 +11,7 @@
 
 <script>
 import Grid from "@/components/Grid";
+import { mapState } from "vuex";
 
 export default {
   name: "Films",
@@ -18,14 +19,11 @@ export default {
   head: {
     titleTemplate: "%s - Films"
   },
-  async asyncData({ $axios }) {
-    const films = await $axios.$get("/api/films");
-    return { films };
+  async asyncData({ store }) {
+    await store.dispatch("getFilms");
   },
-  data() {
-    return {
-      films: []
-    };
+  computed: {
+    ...mapState(["films"])
   }
 };
 </script>
diff --git a/store/index.js b/store/index.js
index 5597adf..5d2de3a 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,7 +1,18 @@
-export const state = () => ({});
+export const state = () => ({
+  films: []
+});
 
-export const mutations = {};
+export const mutations = {
+  setFilms: (state, films) => {
+    state.films = films;
+  }
+};
 
-export const actions = {};
+export const actions = {
+  async getFilms({ commit }) {
+    const films = await this.$axios.$get("/api/films");
+    commit("setFilms", films);
+  }
+};
 
 export const getters = {};

From 18be371f39363998f0b87ad955350e2e2ca85669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 05:44:23 +0100
Subject: [PATCH 24/25] Test mutation + actions

---
 jest.config.js            | 23 +++++++++----------
 pages/films/index.spec.js | 47 +++++++++++++++++++--------------------
 store/index.js            |  8 +++++--
 test/actions.spec.js      | 35 +++++++++++++++++++++++++++++
 test/mutations.spec.js    |  9 ++++++++
 5 files changed, 83 insertions(+), 39 deletions(-)
 create mode 100644 test/actions.spec.js
 create mode 100644 test/mutations.spec.js

diff --git a/jest.config.js b/jest.config.js
index e2d6751..be3f8be 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,21 +1,18 @@
 module.exports = {
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/$1',
-    '^~/(.*)$': '<rootDir>/$1',
-    '^vue$': 'vue/dist/vue.common.js'
+    "^@/(.*)$": "<rootDir>/$1",
+    "^~/(.*)$": "<rootDir>/$1",
+    "^vue$": "vue/dist/vue.common.js"
   },
-  moduleFileExtensions: [
-    'js',
-    'vue',
-    'json'
-  ],
+  moduleFileExtensions: ["js", "vue", "json"],
   transform: {
-    '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest'
+    "^.+\\.js$": "babel-jest",
+    ".*\\.(vue)$": "vue-jest"
   },
+  coverageDirectory: "<rootDir>/coverage",
   collectCoverage: true,
   collectCoverageFrom: [
-    '<rootDir>/components/**/*.vue',
-    '<rootDir>/pages/**/*.vue'
+    "<rootDir>/components/**/*.vue",
+    "<rootDir>/pages/**/*.vue"
   ]
-}
+};
diff --git a/pages/films/index.spec.js b/pages/films/index.spec.js
index 1fd3f16..6e80121 100644
--- a/pages/films/index.spec.js
+++ b/pages/films/index.spec.js
@@ -1,37 +1,36 @@
-import { mount, shallowMount } from "@vue/test-utils";
-import axios from "axios";
-import FilmsView from "./";
-import mockFilms from "@/test/fake-films.json";
+import { mount, shallowMount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Films from "./";
 
-jest.mock("axios", () => ({
-  $get: jest.fn(() => mockFilms)
-}));
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
 describe("Films page", () => {
+  let state, actions, store;
+
+  beforeEach(() => {
+    state = {
+      films: []
+    };
+    actions = {
+      getFilms: jest.fn()
+    };
+    store = new Vuex.Store({ state, actions });
+  });
+
   it("should render Films page instance", () => {
-    const wrapper = mount(FilmsView);
+    const wrapper = mount(Films, { store, localVue });
     expect(wrapper.find("img").exists()).toBe(true);
   });
 
   it("should get films from Ghibli API", async () => {
-    let wrapper = shallowMount(FilmsView, {
-      mocks: {
-        $axios: axios
-      }
-    });
-
-    expect((await wrapper.vm.$options.asyncData(wrapper.vm)).films).toEqual(
-      mockFilms
-    );
-
-    // Init page with mocked asyncData
-    wrapper = shallowMount(FilmsView, {
-      mocks: {
-        films: (await wrapper.vm.$options.asyncData(wrapper.vm)).films,
-        $axios: axios
-      }
+    let wrapper = shallowMount(Films, {
+      store,
+      localVue
     });
 
+    await wrapper.vm.$options.asyncData({ store });
+    expect(actions.getFilms).toHaveBeenCalled();
     expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
   });
 });
diff --git a/store/index.js b/store/index.js
index 5d2de3a..985bbdd 100644
--- a/store/index.js
+++ b/store/index.js
@@ -10,8 +10,12 @@ export const mutations = {
 
 export const actions = {
   async getFilms({ commit }) {
-    const films = await this.$axios.$get("/api/films");
-    commit("setFilms", films);
+    try {
+      const films = await this.$axios.$get("/api/films");
+      commit("setFilms", films);
+    } catch (e) {
+      throw Error("API Error occurred.");
+    }
   }
 };
 
diff --git a/test/actions.spec.js b/test/actions.spec.js
new file mode 100644
index 0000000..427e64c
--- /dev/null
+++ b/test/actions.spec.js
@@ -0,0 +1,35 @@
+import { actions, mutations } from "@/store";
+import axios from "axios";
+import mockFilms from "@/test/fake-films.json";
+
+let url = "";
+
+jest.mock("axios", () => ({
+  $get: _url => {
+    return new Promise(resolve => {
+      url = _url;
+      resolve(mockFilms);
+    });
+  }
+}));
+
+describe("Vuex actions.", () => {
+  it("tests getFilms action.", async () => {
+    const commit = jest.fn();
+
+    actions.$axios = axios;
+    await actions.getFilms({ commit });
+
+    expect(url).toBe("/api/films");
+    expect(commit).toHaveBeenCalledWith("setFilms", mockFilms);
+  });
+
+  it("catches errors.", async () => {
+    const commit = jest.fn();
+
+    actions.$axios = null;
+    await expect(actions.getFilms({ commit })).rejects.toThrow(
+      "API Error occurred."
+    );
+  });
+});
diff --git a/test/mutations.spec.js b/test/mutations.spec.js
new file mode 100644
index 0000000..eaee579
--- /dev/null
+++ b/test/mutations.spec.js
@@ -0,0 +1,9 @@
+import { state, mutations } from "@/store";
+import mockFilms from "./fake-films.json";
+
+describe("Vuex mutations.", () => {
+  it("tests setFilms mutation.", () => {
+    mutations.setFilms(state, mockFilms);
+    expect(state.films[0].id).toBe(mockFilms[0].id);
+  });
+});

From e1619de1cd85111c7ba36749f60ab4b4d83cd06e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 06:12:39 +0100
Subject: [PATCH 25/25] Refactor films/_id to use vuex

---
 pages/films/_id.spec.js   | 54 ++++++++++++++++-----------------------
 pages/films/_id.vue       | 13 +++++-----
 pages/films/index.spec.js |  2 +-
 store/index.js            | 14 +++++++++-
 4 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/pages/films/_id.spec.js b/pages/films/_id.spec.js
index 18c23f7..7f975c2 100644
--- a/pages/films/_id.spec.js
+++ b/pages/films/_id.spec.js
@@ -1,7 +1,6 @@
-import { mount } from "@vue/test-utils";
-import axios from "axios";
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
 import Film from "./_id";
-import mockFilms from "@/test/fake-films.json";
 
 let $route = {
   path: "/films",
@@ -10,15 +9,24 @@ let $route = {
   }
 };
 
-const mockFilm = mockFilms.filter(o => o.id === $route.params.id);
-
-jest.mock("axios", () => ({
-  $get: jest.fn(() => mockFilm)
-}));
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
 describe("Film page", () => {
+  let state, actions, store;
+
+  beforeEach(() => {
+    state = {
+      film: {}
+    };
+    actions = {
+      getFilm: jest.fn()
+    };
+    store = new Vuex.Store({ state, actions });
+  });
+
   it("should render Film page instance", () => {
-    const wrapper = mount(Film);
+    const wrapper = mount(Film, { localVue, store });
     expect(wrapper.exists()).toBe(true);
   });
 
@@ -36,31 +44,13 @@ describe("Film page", () => {
     ).toBe(false);
   });
 
-  it("should get film from Ghibli API", async () => {
+  it("should dispatch getFilm action", async () => {
     let wrapper = mount(Film, {
-      mocks: {
-        $route,
-        $axios: axios
-      }
+      localVue,
+      store
     });
 
-    expect(
-      (
-        await wrapper.vm.$options.asyncData({
-          $axios: axios,
-          params: $route.params
-        })
-      ).film
-    ).toEqual(mockFilm);
-
-    // // Init page with mocked asyncData
-    // wrapper = shallowMount(Film, {
-    //   mocks: {
-    //     films: (await wrapper.vm.$options.asyncData(wrapper.vm)).films,
-    //     $axios: axios
-    //   }
-    // });
-
-    // expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getFilm).toHaveBeenCalled();
   });
 });
diff --git a/pages/films/_id.vue b/pages/films/_id.vue
index b5c19af..7c60859 100644
--- a/pages/films/_id.vue
+++ b/pages/films/_id.vue
@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
   name: "Film",
   head() {
@@ -18,14 +20,11 @@ export default {
     );
     return uuid.test(params.id);
   },
-  async asyncData({ $axios, params }) {
-    const film = await $axios.$get(`/api/films/${params.id}`);
-    return { film };
+  async asyncData({ params, store }) {
+    await store.dispatch("getFilm", params.id);
   },
-  data() {
-    return {
-      film: {}
-    };
+  computed: {
+    ...mapState(["film"])
   }
 };
 </script>
diff --git a/pages/films/index.spec.js b/pages/films/index.spec.js
index 6e80121..cb1bc49 100644
--- a/pages/films/index.spec.js
+++ b/pages/films/index.spec.js
@@ -23,7 +23,7 @@ describe("Films page", () => {
     expect(wrapper.find("img").exists()).toBe(true);
   });
 
-  it("should get films from Ghibli API", async () => {
+  it("should dispatch getFilms action", async () => {
     let wrapper = shallowMount(Films, {
       store,
       localVue
diff --git a/store/index.js b/store/index.js
index 985bbdd..685a29e 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,10 +1,14 @@
 export const state = () => ({
-  films: []
+  films: [],
+  film: {}
 });
 
 export const mutations = {
   setFilms: (state, films) => {
     state.films = films;
+  },
+  setFilm: (state, film) => {
+    state.film = film;
   }
 };
 
@@ -16,6 +20,14 @@ export const actions = {
     } 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.");
+    }
   }
 };