diff --git a/examples/button-factory/src/secret-input.js b/examples/button-factory/src/secret-input.js index d561e12..6cc7501 100644 --- a/examples/button-factory/src/secret-input.js +++ b/examples/button-factory/src/secret-input.js @@ -1,3 +1,11 @@ +function getStoredSecret() { + try { + return localStorage.getItem('secret') || ''; + } catch { + return ''; + } +} + export function createSecretInput() { const id = 'secret-input'; @@ -10,6 +18,7 @@ export function createSecretInput() { input.type = 'password'; input.name = 'secret'; input.placeholder = 'Enter your secret…'; + input.value = getStoredSecret(); label.htmlFor = id; label.textContent = 'Secret'; diff --git a/examples/button-factory/src/secret-input.test.js b/examples/button-factory/src/secret-input.test.js index 1d558b8..13add1c 100644 --- a/examples/button-factory/src/secret-input.test.js +++ b/examples/button-factory/src/secret-input.test.js @@ -1,6 +1,36 @@ -import { describe, expect, it, beforeEach } from 'vitest'; +import { describe, expect, it, beforeEach, vi, afterEach } from 'vitest'; import { screen } from '@testing-library/dom'; import userEvent from '@testing-library/user-event'; import { createSecretInput } from './secret-input.js'; -describe.todo('createSecretInput', async () => {}); +import '@testing-library/jest-dom/vitest'; + +describe('createSecretInput', async () => { + beforeEach(() => { + vi.spyOn(localStorage, 'getItem').mockReturnValue('test secret'); + vi.spyOn(localStorage, 'setItem'); + + document.body.innerHTML = ''; + document.body.appendChild(createSecretInput()); + }); + + afterEach(() => { + vi.restoreAllMocks(); + }); + + it('should have loaded the secret from localStorage', async () => { + expect(screen.getByLabelText('Secret')).toHaveValue('test secret'); + expect(localStorage.getItem).toHaveBeenCalledWith('secret'); + }); + + it('should save the secret to localStorage', async () => { + const input = screen.getByLabelText('Secret'); + const button = screen.getByText('Store Secret'); + + await userEvent.clear(input); + await userEvent.type(input, 'new secret'); + await userEvent.click(button); + + expect(localStorage.setItem).toHaveBeenCalledWith('secret', 'new secret'); + }); +}); diff --git a/examples/tic-tac-toe/package.json b/examples/tic-tac-toe/package.json deleted file mode 100644 index b0fed70..0000000 --- a/examples/tic-tac-toe/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "tic-tac-toe", - "version": "1.0.0", - "description": "The classic game of Tic-Tac-Toe, but this time it's less fun because we're testing it.", - "main": "index.js", - "type": "module", - "scripts": { - "test": "vitest" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/stevekinney/testing-javascript.git" - }, - "author": "Steve Kinney ", - "license": "MIT", - "bugs": { - "url": "https://github.com/stevekinney/testing-javascript/issues" - }, - "homepage": "https://github.com/stevekinney/testing-javascript#readme", - "devDependencies": { - "@vitest/ui": "^2.1.1", - "vite": "^5.4.5", - "vitest": "^2.1.1" - } -} diff --git a/examples/tic-tac-toe/vitest.config.js b/examples/tic-tac-toe/vitest.config.js deleted file mode 100644 index 33ec9e2..0000000 --- a/examples/tic-tac-toe/vitest.config.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - test: { - environment: 'node', - }, -}; diff --git a/package-lock.json b/package-lock.json index 3259b87..6943b94 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,6 @@ "workspaces": [ "packages/css-configuration", "examples/calculator", - "examples/tic-tac-toe", "examples/task-list", "examples/authentication", "examples/guess-the-number", @@ -131,8 +130,12 @@ }, "examples/logjam": { "version": "1.0.0", - "license": "ISC", - "devDependencies": {} + "license": "MIT", + "devDependencies": { + "@vitest/ui": "^2.1.1", + "vite": "^5.4.5", + "vitest": "^2.1.1" + } }, "examples/scratchpad": { "extraneous": true @@ -182,6 +185,7 @@ }, "examples/tic-tac-toe": { "version": "1.0.0", + "extraneous": true, "license": "MIT", "devDependencies": { "@vitest/ui": "^2.1.1", @@ -4754,10 +4758,6 @@ "node": ">=0.8" } }, - "node_modules/tic-tac-toe": { - "resolved": "examples/tic-tac-toe", - "link": true - }, "node_modules/tinybench": { "version": "2.9.0", "dev": true, diff --git a/package.json b/package.json index 6b920b1..753b9b0 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "workspaces": [ "packages/css-configuration", "examples/calculator", - "examples/tic-tac-toe", "examples/task-list", "examples/authentication", "examples/guess-the-number",