Create Grid & GridEmpty test

test/Grid.spec.js

@@ -0,0 +1,29 @@
+import { mount } from "@vue/test-utils";
+import Grid from "@/components/Grid";
+
+describe("Grid", () => {
+  it("should display an error message on empty data source.", () => {
+    const wrapper = mount(Grid, {
+      propsData: {
+        dataSource: []
+      }
+    });
+    expect(wrapper.findComponent({ name: "GridEmpty" }).exists()).toBe(true);
+  });
+
+  it("should display data in grid.", () => {
+    const wrapper = mount(Grid, {
+      dataSource: [
+        {
+          img: "aluna-festival.png",
+          link: "aluna-festival.fr",
+          title: "Aluna Festival",
+          subtitle: "2017 / 2018 / 2019 / 2020",
+          tags: ["wordpress", "sketch", "amazonS3", "acf", "svg"],
+          type: "freelance"
+        }
+      ]
+    });
+    expect(wrapper.findComponent({ name: "GridEmpty" }).exists()).toBe(false);
+  });
+});

test/GridEmpty.spec.js

@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+import GridEmpty from "@/components/GridEmpty";
+
+describe("GridEmpty", () => {
+  it("has default error message.", () => {
+    const wrapper = mount(GridEmpty);
+    expect(wrapper.find("p").text()).toBe("0 items to be shown.");
+  });
+
+  it("has custom error message.", () => {
+    const wrapper = mount(GridEmpty, {
+      propsData: {
+        message: "test message"
+      }
+    });
+    expect(wrapper.find("p").text()).toBe("test message");
+  });
+});

test/Logo.spec.js

@@ -1,9 +0,0 @@
-import { mount } from '@vue/test-utils'
-import Logo from '@/components/Logo.vue'
-
-describe('Logo', () => {
-  test('is a Vue instance', () => {
-    const wrapper = mount(Logo)
-    expect(wrapper.vm).toBeTruthy()
-  })
-})