Merge branch 'master' into feature/totp-generator

Added vitest and broke up components

src/style.css

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

src/tokenList.ts

@@ -1,3 +1,10 @@
+import { displayTokenListItem } from "./TokenListItem";
+import { tokens } from "./tokens";
+
 export function tokenList() {
-    return `<form id="tokens"></form>`
+  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

@@ -1,12 +1,24 @@
 // @vitest-environment jsdom
 
-import { expect, test } from 'vitest'
-import { tokenListitem } from './tokenListItem'
+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 correct account name', () => {
-    const div: HTMLDivElement = document.createElement('div')
-    tokenListitem('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

@@ -1,14 +1,14 @@
+import {displayToken} from './token'
+export function displayTokenListItem(account: string, secret: string, element: HTMLDivElement){
 
-export function tokenListitem(account: string, secret: string, element: HTMLDivElement){
-
-    element.innerHTML += `<div class="fieldset-wrapper">
+    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">${token}</p>
+      <p data-test-id="secret">${displayToken(secret)}</p>
     </fieldset>
     </div>`;
 }