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"
   },

src/testing/index.ts

@@ -3,3 +3,4 @@ export * from "./MockPeer";
 export * from "./MockHelper";
 export * from "./EventHook";
 export * from "./IDBShim";
+export * from "./sync-utils";

src/testing/sync-utils.ts

@@ -0,0 +1,5 @@
+export function seconds(ms: number): Promise<void> {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms * 1000);
+  });
+}

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", () => {
+  test("CardPicker correctly instances images for each card", () => {
-    const wrapper = shallowMount(CardPicker, {
+    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: {