diff --git a/examples/element-factory/src/button.test.js b/examples/element-factory/src/button.test.js index 2f6de6b..5c941c1 100644 --- a/examples/element-factory/src/button.test.js +++ b/examples/element-factory/src/button.test.js @@ -11,5 +11,9 @@ describe('createButton', () => { expect(button.textContent).toBe('Click Me'); }); - it.todo('should change the text to "Clicked!" when clicked', async () => {}); + it('should change the text to "Clicked!" when clicked', async () => { + const button = createButton(); + button.click(); + expect(button.textContent).toBe('Clicked!'); + }); }); diff --git a/examples/element-factory/src/local-storage.test.js b/examples/element-factory/src/local-storage.test.js index aa5f12a..41bea0d 100644 --- a/examples/element-factory/src/local-storage.test.js +++ b/examples/element-factory/src/local-storage.test.js @@ -5,3 +5,13 @@ it('should properly assign to localStorage', () => { localStorage.setItem(key, message); expect(localStorage.getItem(key)).toBe(message); }); + +it('should properly clear localStorage', () => { + const key = 'secret'; + const message = "It's a secret to everybody."; + + localStorage.setItem(key, message); + localStorage.clear(); + + expect(localStorage.getItem(key)).toBeNull(); +}); diff --git a/examples/element-factory/src/login-form.test.js b/examples/element-factory/src/login-form.test.js index e7bcb5e..4aa6538 100644 --- a/examples/element-factory/src/login-form.test.js +++ b/examples/element-factory/src/login-form.test.js @@ -1,4 +1,5 @@ import { screen } from '@testing-library/dom'; +import userEvent from '@testing-library/user-event'; import { createLoginForm } from './login-form'; describe('LoginForm', async () => { @@ -25,4 +26,16 @@ describe('LoginForm', async () => { expect(form).toHaveAttribute('method', 'get'); }); + + it('should render a login form with a custom submit handler', async () => { + const onSubmit = vi.fn(); + document.body.replaceChildren(createLoginForm({ onSubmit })); + + const form = screen.getByRole('form', { name: /login/i }); + const submitButton = screen.getByRole('button', { name: /login/i }); + + await userEvent.click(submitButton); + + expect(onSubmit).toHaveBeenCalled(); + }); }); diff --git a/examples/element-factory/src/secret-input.js b/examples/element-factory/src/secret-input.js index 6cc7501..2789a1b 100644 --- a/examples/element-factory/src/secret-input.js +++ b/examples/element-factory/src/secret-input.js @@ -12,7 +12,8 @@ export function createSecretInput() { const container = document.createElement('div'); const input = document.createElement('input'); const label = document.createElement('label'); - const button = document.createElement('button'); + const submitButton = document.createElement('button'); + const clearButton = document.createElement('button'); input.id = id; input.type = 'password'; @@ -23,16 +24,24 @@ export function createSecretInput() { label.htmlFor = id; label.textContent = 'Secret'; - button.id = `${id}-button`; - button.textContent = 'Store Secret'; - button.addEventListener('click', () => { + submitButton.id = `${id}-button`; + submitButton.textContent = 'Store Secret'; + submitButton.addEventListener('click', () => { localStorage.setItem('secret', input.value); input.value = ''; }); + clearButton.id = `${id}-clear-button`; + clearButton.textContent = 'Clear Secret'; + clearButton.addEventListener('click', () => { + localStorage.removeItem('secret'); + input.value = ''; + }); + container.appendChild(label); container.appendChild(input); - container.appendChild(button); + container.appendChild(submitButton); + container.appendChild(clearButton); return container; } diff --git a/examples/element-factory/src/secret-input.test.js b/examples/element-factory/src/secret-input.test.js index 3eeacc0..376a167 100644 --- a/examples/element-factory/src/secret-input.test.js +++ b/examples/element-factory/src/secret-input.test.js @@ -8,6 +8,7 @@ describe('createSecretInput', async () => { beforeEach(() => { vi.spyOn(localStorage, 'getItem').mockReturnValue('test secret'); vi.spyOn(localStorage, 'setItem'); + vi.spyOn(localStorage, 'removeItem'); document.body.innerHTML = ''; document.body.appendChild(createSecretInput()); @@ -32,4 +33,12 @@ describe('createSecretInput', async () => { expect(localStorage.setItem).toHaveBeenCalledWith('secret', 'new secret'); }); + + it('should clear the secret from localStorage', async () => { + const button = screen.getByText('Clear Secret'); + + await userEvent.click(button); + + expect(localStorage.removeItem).toHaveBeenCalledWith('secret'); + }); });