Replace films page H2 by Studio Ghibli logo

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);
+  });
+});

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", () => {

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>

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 () => {