add tests for form submit

dev.html

@@ -31,7 +31,8 @@
     </style>
 
     <form>
-      <go-board></go-board>
+      <button>submit</button>
+      <go-board name="board"></go-board>
     </form>
 
     <script src="./target/register.js" type="module"></script>

src/board.element.spec.ts

@@ -80,4 +80,58 @@ describe(GoBoardElement.name, () => {
 
     expect(board.getSpace("C18")).to.be.null;
   });
+
+  it("should submit the default key value to a form", async () => {
+    const board = await fixture<HTMLFormElement>(html`
+      <form>
+        <go-board name="game"></go-board>
+
+        <button>submit</button>
+      </form>
+    `);
+
+    return new Promise((resolve) => {
+      board.addEventListener("submit", (e) => {
+        e.preventDefault();
+
+        const form = new FormData(board);
+
+        expect(form.get("game")).to.equal(
+          "*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************"
+        );
+
+        resolve();
+      });
+
+      board.querySelector("button")?.click();
+    });
+  });
+
+  it("should submit updated key when stones are added", async () => {
+    const board = await fixture<HTMLFormElement>(html`
+      <form>
+        <go-board name="game">
+          <go-stone slot="A1" color="black"></go-stone>
+        </go-board>
+
+        <button>submit</button>
+      </form>
+    `);
+
+    return new Promise((resolve) => {
+      board.addEventListener("submit", (e) => {
+        e.preventDefault();
+
+        const form = new FormData(board);
+
+        expect(form.get("game")).to.equal(
+          "******************************************************************************************************************************************************************************************************************************************************************************************************************************************************BA1******************"
+        );
+
+        resolve();
+      });
+
+      board.querySelector("button")?.click();
+    });
+  });
 });

src/board.element.ts

@@ -225,7 +225,15 @@ export class GoBoardElement extends HTMLElement {
   #spaces = new Map<string, GoStoneElement | null>();
   #header = this.dom.query("#header")!;
   #prevKey = "";
-  #currentKey = this.key();
+  #currentKey = Array.from({ length: this.rows * this.cols })
+    .map(() => "*")
+    .join("");
+
+  constructor() {
+    super();
+
+    this.#internals.setFormValue(this.#currentKey);
+  }
 
   attributeChangedCallback(attr: string, old: string, val: string) {
     if (this.debug) {
@@ -275,13 +283,13 @@ export class GoBoardElement extends HTMLElement {
 
     for (let [space, stone] of this.#spaces) {
       if (stone !== null) {
-        key += space + stone.color[0].toUpperCase();
+        key += stone.color[0].toUpperCase() + space;
       } else {
         key += "*";
       }
     }
 
-    return btoa(key);
+    return key;
   }
 
   reset() {