Added totp-generator dependency

src/style.css

@@ -96,6 +96,7 @@ fieldset {
   flex: 1;
   font-weight: bold;
   border: none;
+  min-width: 200px;
 }
 
 label {

src/tokenList.ts

@@ -0,0 +1,10 @@
+import { displayTokenListItem } from "./TokenListItem";
+import { tokens } from "./tokens";
+
+export function tokenList() {
+  const element = document.createElement("div");
+  element.classList.add("test");
+  return `<form id="tokens">${tokens.map((token) =>
+    displayTokenListItem(token.account, token.secret, element)
+  )}</form>`;
+}

src/tokenListItem.test.ts

@@ -0,0 +1,24 @@
+// @vitest-environment jsdom
+
+import { expect, test } from "vitest";
+import { displayTokenListItem } from "./tokenListItem";
+
+test("displays correct account name", () => {
+  const div: HTMLDivElement = document.createElement("div");
+  displayTokenListItem("Github", "ABCDEFGHIJKLMNOP", div);
+  expect(div.innerHTML).toContain("Github");
+});
+
+test("displays multiple list items", () => {
+  const div: HTMLDivElement = document.createElement("div");
+  displayTokenListItem("Github", "ABCDEFGHIJKLMNOP", div);
+  displayTokenListItem("Gmail", "ABCDEFGHIJKLMNOP", div);
+  const tokens = [
+    { account: "Github", secret: "blahblahblah" },
+    { account: "Gmail", secret: "blahblahblah" },
+  ];
+  tokens.map((token) => displayTokenListItem(token.account, token.secret, div));
+  console.log("dv", div.innerHTML);
+  expect(div.innerHTML).toContain("Github");
+  expect(div.innerHTML).toContain("Gmail");
+});

src/tokenListItem.ts

@@ -0,0 +1,14 @@
+import {displayToken} from './token'
+export function displayTokenListItem(account: string, secret: string, element: HTMLDivElement){
+
+    return element.innerHTML = `<div class="fieldset-wrapper">
+    <fieldset>
+      <label>Account</label>
+        <p data-test-id="account">${account}</p>
+    </fieldset>
+    <fieldset>
+      <label>Code</label>
+      <p data-test-id="secret">${displayToken(secret)}</p>
+    </fieldset>
+    </div>`;
+}