From 9b639a52d14aaba0219ee85a70ddb4796832a18a Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Fri, 20 Sep 2019 12:48:57 +0200
Subject: [PATCH] Fix tests

---
 jest.config.js                               |  2 +-
 src/testing/index.ts                         |  1 +
 src/testing/sync-utils.ts                    |  5 +++++
 src/tests/unit/components/CardPicker.spec.ts | 21 +++++++++++++++++---
 4 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 src/testing/sync-utils.ts

diff --git a/jest.config.js b/jest.config.js
index c1b9492..6f67976 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,7 +2,7 @@ module.exports = {
   moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx"],
   transform: {
     "^.+\\.vue$": "vue-jest",
-    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
+    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2|webp)$":
       "jest-transform-stub",
     "^.+\\.tsx?$": "ts-jest"
   },
diff --git a/src/testing/index.ts b/src/testing/index.ts
index a9aa129..f3ad69d 100644
--- a/src/testing/index.ts
+++ b/src/testing/index.ts
@@ -3,3 +3,4 @@ export * from "./MockPeer";
 export * from "./MockHelper";
 export * from "./EventHook";
 export * from "./IDBShim";
+export * from "./sync-utils";
diff --git a/src/testing/sync-utils.ts b/src/testing/sync-utils.ts
new file mode 100644
index 0000000..0bfc811
--- /dev/null
+++ b/src/testing/sync-utils.ts
@@ -0,0 +1,5 @@
+export function seconds(ms: number): Promise<void> {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms * 1000);
+  });
+}
diff --git a/src/tests/unit/components/CardPicker.spec.ts b/src/tests/unit/components/CardPicker.spec.ts
index 6a93cd6..d5ce123 100644
--- a/src/tests/unit/components/CardPicker.spec.ts
+++ b/src/tests/unit/components/CardPicker.spec.ts
@@ -1,5 +1,7 @@
 import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
-import { shallowMount } from "@vue/test-utils";
+import CardImage from "@/components/Cards/CardImage.vue";
+import { shallowMount, mount } from "@vue/test-utils";
+import { seconds } from "@/testing";
 
 // Generate 10 test cards
 const testCards = new Array(10)
@@ -8,8 +10,8 @@ const testCards = new Array(10)
 const testSlots = testCards.map(c => ({ data: c, limit: 3, howmany: 1 }));
 
 describe("components/DeckBuilder/CardPicker", () => {
-  test("CardPicker correctly creates images for each card", () => {
-    const wrapper = shallowMount(CardPicker, {
+  test("CardPicker correctly instances images for each card", () => {
+    const wrapper = mount(CardPicker, {
       propsData: {
         rows: 2,
         columns: 5,
@@ -20,6 +22,19 @@ describe("components/DeckBuilder/CardPicker", () => {
     expect(cards.contains("img")).toBe(true);
   });
 
+  test("CardImage correctly resolves to an URL after a while", async () => {
+    const wrapper = mount(CardImage, {
+      propsData: {
+        id: "sb1"
+      }
+    });
+    let src = wrapper.attributes("src");
+    expect(src).toBe(""); // Should be placeholder but it gets stubbed
+    await seconds(0.5);
+    src = wrapper.attributes("src");
+    expect(src).toMatch(/^https?:|^blob:/);
+  });
+
   test("CardPicker correctly aligns items in a grid", () => {
     const wrapper = shallowMount(CardPicker, {
       propsData: {