Add some more example tests

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!');
+  });
 });

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();
+});

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();
+  });
 });

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`;
+  submitButton.id = `${id}-button`;
-  button.textContent = 'Store Secret';
+  submitButton.textContent = 'Store Secret';
-  button.addEventListener('click', () => {
+  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;
 }

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');
+  });
 });