Added vitest and broke up components

src/main.ts

@@ -1,11 +1,8 @@
 import "./style.css";
 
-import {setupTokenList} from './tokens'
+import { tokenList } from "./tokenList";
 document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
-  <div>
-    <form id="tokens">
-    </form>
-  </div>
+  ${tokenList()}
 `;
 
-setupTokenList(document.querySelector<HTMLDivElement>("#tokens")!);
+// setupTokenList(document.querySelector<HTMLDivElement>("#tokens")!);

src/token.test.ts

@@ -0,0 +1,14 @@
+// @vitest-environment jsdom
+
+import { assert, expect, test } from 'vitest'
+import {displayToken} from './token'
+
+test('a 6 digit token is displayed', () => {
+    const token = displayToken('ABCDEFGHIJKLMNOP')
+    expect(token.length).toBe(6)
+})
+
+test('displayed totp token is numeric only', () => {
+    const token = displayToken('ABCDEFGHIJKLMNOP')
+    expect(isNaN(+token)).toBeFalsy()
+})

src/token.ts

@@ -1,23 +1,11 @@
-import { tokens } from "./tokens";
+import totp from 'totp-generator'
+const period = 30
+const digits = 6
 
-let tokenListHtml: HTMLDivElement = document.createElement("div");
-function displayTokenListItem(account: string, secret: string) {
-  tokenListHtml.innerHTML += `<div class="fieldset-wrapper">
-  <fieldset>
-    <label>Account</label>
-      <p>${account}</p>
-  </fieldset>
-  <fieldset>
-    <label>Code</label>
-    <p>${secret}</p>
-  </fieldset>
-  </div>`;
-}
-tokens.map((token) => {
-  displayTokenListItem(token.account, token.secret);
-});
-export function setupTokenList(element: HTMLDivElement) {
-  element.innerHTML = `<div class="fieldset-wrapper">`;
-  element.appendChild(tokenListHtml);
-  element.append("</div>");
+export function displayToken(secret) {
+  const token = totp(secret.replace(/ /g, '').trim(), {
+    digits,
+    period,
+  })
+  return `${token}`
 }

src/tokenList.test.ts

@@ -0,0 +1,9 @@
+// @vitest-environment jsdom
+
+import { expect, test } from 'vitest'
+import { tokenList } from './tokenList'
+const tokenListElement = tokenList();
+
+test('displays an empty list', () => {
+    expect(tokenListElement).toBeDefined()
+})

src/tokenList.ts

@@ -0,0 +1,3 @@
+export function tokenList(){
+    return `<form id="tokens"></form>`
+}

src/tokenListItem.test.ts

@@ -0,0 +1,12 @@
+// @vitest-environment jsdom
+
+import { expect, test } from 'vitest'
+import { tokenListitem } from './tokenListItem'
+
+
+test('displays correct account name', () => {
+    const div: HTMLDivElement = document.createElement('div')
+    tokenListitem('Github', 'ABCDEFGHIJKLMNOP', div);
+    expect(div.innerHTML).toContain('Github')
+})
+

src/tokenListItem.ts

@@ -0,0 +1,14 @@
+
+export function tokenListitem(account: string, secret: string, element: HTMLDivElement){
+
+    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>
+    </fieldset>
+    </div>`;
+}