src/components/DeckBuilder/DeckList.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="decklist">
     <article v-for="(card, i) in cards" :key="i">
-      <div class="name">{{ cardFullName(card) }}</div>
+      <div class="name">{{ fullName(card) }}</div>
     </article>
   </section>
 </template>
@@ -22,5 +22,9 @@ import { Card, cardFullName } from "@/mlpccg";
 export default class DeckList extends Vue {
   @Prop()
   public cards!: Card[];
+
+  private fullName(card: Card): string {
+    return cardFullName(card);
+  }
 }
 </script>

src/mlpccg/card.ts

@@ -6,3 +6,8 @@ export function cardFullName(card: Card): string {
   }
   return card.Name;
 }
+
+export function createPonyheadURL(cards: Card[]): string {
+  const cardlist = cards.map(c => `${c.ID}x1`);
+  return "https://ponyhead.com/deckbuilder?v1code=" + cardlist.join("-");
+}

src/tests/unit/cards.spec.ts

@@ -0,0 +1,16 @@
+import { Card, createPonyheadURL, cardFullName } from "@/mlpccg";
+
+describe("mlpccg/cards", () => {
+  test("Card full names are correctly generated in all cases", () => {
+    const card1 = { Name: "Name", Subname: "" };
+    const card2 = { Name: "Name1", Subname: "the Name2" };
+    expect(cardFullName(card1 as Card)).toEqual("Name");
+    expect(cardFullName(card2 as Card)).toEqual("Name1, the Name2");
+  });
+
+  test("Ponyhead URL is generated correctly", () => {
+    const cards: any[] = [{ ID: "pr10" }, { ID: "pr12" }, { ID: "pr13" }];
+    const url = "https://ponyhead.com/deckbuilder?v1code=pr10x1-pr12x1-pr13x1";
+    expect(createPonyheadURL(cards!)).toEqual(url);
+  });
+});