Remove all of the solutions from rehearsal

examples/element-factory/src/alert-button.test.jsx

@@ -3,32 +3,12 @@ import userEvent from '@testing-library/user-event';
 
 import { AlertButton } from './alert-button';
 
-describe('AlertButton', () => {
-  beforeEach(() => {
-    vi.spyOn(window, 'alert').mockImplementation(() => {});
-    render(<AlertButton />);
-  });
+describe.todo('AlertButton', () => {
+  beforeEach(() => {});
 
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
+  afterEach(() => {});
 
-  it('should render an alert button', async () => {
-    const button = screen.getByRole('button', { name: /trigger alert/i });
+  it('should render an alert button', async () => {});
 
-    expect(button).toBeInTheDocument();
-  });
-
-  it('should trigger an alert', async () => {
-    const button = screen.getByRole('button', { name: /trigger alert/i });
-    const messageInput = screen.getByLabelText(/message/i);
-
-    await act(async () => {
-      await userEvent.clear(messageInput);
-      await userEvent.type(messageInput, 'Hello, world!');
-      await userEvent.click(button);
-    });
-
-    expect(window.alert).toHaveBeenCalledWith('Hello, world!');
-  });
+  it('should trigger an alert', async () => {});
 });

examples/element-factory/src/button.test.js

@@ -1,19 +1,9 @@
 import { createButton } from './button.js';
 
-describe('createButton', () => {
-  it('should create a button element', () => {
-    const button = createButton();
-    expect(button.tagName).toBe('BUTTON');
-  });
+describe.todo('createButton', () => {
+  it('should create a button element', () => {});
 
-  it('should have the text "Click Me"', () => {
-    const button = createButton();
-    expect(button.textContent).toBe('Click Me');
-  });
+  it('should have the text "Click Me"', () => {});
 
-  it('should change the text to "Clicked!" when clicked', async () => {
-    const button = createButton();
-    button.click();
-    expect(button.textContent).toBe('Clicked!');
-  });
+  it('should change the text to "Clicked!" when clicked', async () => {});
 });

examples/element-factory/src/login-form.test.js

@@ -2,45 +2,20 @@ import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { createLoginForm } from './login-form';
 
-describe('LoginForm', async () => {
-  it('should render a login form', async () => {
-    document.body.replaceChildren(createLoginForm());
-
-    const form = screen.getByRole('form', { name: /login/i });
-
-    expect(form).toBeInTheDocument();
-  });
+describe.todo('Login Form', async () => {
+  it('should render a login form', async () => {});
 
   it('should render a login form with a custom action', async () => {
     // Can you make sure that the form we render has an `action` attribute set to '/custom'?
-    document.body.replaceChildren(createLoginForm({ action: '/custom' }));
-
-    const form = screen.getByRole('form', { name: /login/i });
-
-    expect(form).toHaveAttribute('action', '/custom');
   });
 
   it('should render a login form with a custom method', async () => {
     // Can you make sure that the form we render has a `method` attribute set to 'get'?
-    document.body.replaceChildren(createLoginForm({ method: 'get' }));
-
-    const form = screen.getByRole('form', { name: /login/i });
-
-    expect(form).toHaveAttribute('method', 'get');
   });
 
   it('should render a login form with a custom submit handler', async () => {
     // We'll do this one later. Don't worry about it for now.
     // If it *is* later, then you should worry about it.
     // Can you make sure that the form we render has a submit handler that calls a custom function?
-    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/notification.jsx

@@ -1,30 +0,0 @@
-import { useState } from 'react';
-
-export const Notification = () => {
-  const [content, setContent] = useState('');
-  const [message, setMessage] = useState('');
-
-  const showNotification = () => {
-    console.log({ content });
-    if (!content) return;
-    setMessage(content);
-    setTimeout(() => setMessage(''), 3000);
-  };
-
-  return (
-    <div>
-      <label>
-        Message Content
-        <input
-          type="text"
-          value={content}
-          onChange={(event) => setContent(event.target.value)}
-        />
-      </label>
-
-      <button onClick={showNotification}>Show Notification</button>
-
-      {message && <p data-testid="message">{message}</p>}
-    </div>
-  );
-};

examples/element-factory/src/notification.test.jsx

@@ -1,73 +0,0 @@
-import { vi } from 'vitest';
-import { render, screen, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { Notification } from './notification';
-
-describe('Notification', () => {
-  beforeEach(() => {
-    render(<Notification />);
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('should render a notification', async () => {
-    const input = screen.getByRole('textbox', { name: /message content/i });
-    const button = screen.getByRole('button', { name: /show notification/i });
-
-    expect(input).toBeInTheDocument();
-    expect(button).toBeInTheDocument();
-  });
-
-  it.only('should show a notification', async () => {
-    const input = screen.getByRole('textbox', { name: /message content/i });
-    const button = screen.getByRole('button', { name: /show notification/i });
-
-    await act(async () => {
-      await userEvent.type(input, 'Hello, world!');
-    });
-
-    await act(async () => {
-      await userEvent.click(button);
-    });
-
-    const message = await screen.findByTestId('message');
-
-    expect(message).toHaveTextContent('Hello, world!');
-  });
-
-  it('should not show a notification if there is no content', async () => {
-    const button = screen.getByRole('button', { name: /show notification/i });
-
-    await act(async () => {
-      await userEvent.click(button);
-    });
-
-    const message = screen.queryByTestId('message');
-
-    expect(message).not.toBeInTheDocument();
-  });
-
-  it('should hide a notification after 5 seconds', async () => {
-    const input = screen.getByRole('textbox', { name: /message content/i });
-    const button = screen.getByRole('button', { name: /show notification/i });
-
-    await act(async () => {
-      await userEvent.type(input, 'Hello, world!');
-      await userEvent.click(button);
-    });
-
-    const message = screen.getByTestId('message');
-
-    expect(message).toHaveTextContent('Hello, world!');
-
-    await act(async () => {
-      vi.advanceTimersByTime(5000);
-    });
-
-    expect(message).not.toBeInTheDocument();
-  });
-});

examples/element-factory/src/secret-input.test.js

@@ -4,41 +4,14 @@ import '@testing-library/jest-dom/vitest';
 
 import { createSecretInput } from './secret-input.js';
 
-describe('createSecretInput', async () => {
-  beforeEach(() => {
-    vi.spyOn(localStorage, 'getItem').mockReturnValue('test secret');
-    vi.spyOn(localStorage, 'setItem');
-    vi.spyOn(localStorage, 'removeItem');
+describe.todo('createSecretInput', async () => {
+  beforeEach(() => {});
 
-    document.body.innerHTML = '';
-    document.body.appendChild(createSecretInput());
-  });
+  afterEach(() => {});
 
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
+  it('should have loaded the secret from localStorage', async () => {});
 
-  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 () => {});
 
-  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');
-  });
-
-  it('should clear the secret from localStorage', async () => {
-    const button = screen.getByText('Clear Secret');
-
-    await userEvent.click(button);
-
-    expect(localStorage.removeItem).toHaveBeenCalledWith('secret');
-  });
+  it('should clear the secret from localStorage', async () => {});
 });

examples/element-factory/src/tabs.test.js

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import Tabs from './tabs.svelte';
 
-describe('Tabs', () => {
+describe.todo('Tabs', () => {
   beforeEach(() => {
     render(Tabs, {
       tabs: [
@@ -14,32 +14,11 @@ describe('Tabs', () => {
     });
   });
 
-  it('should render three tabs', async () => {
-    const tabs = screen.getAllByRole('tab');
-    expect(tabs).toHaveLength(3);
-  });
+  it('should render three tabs', async () => {});
 
-  it('should switch tabs', async () => {
-    const tabs = screen.getAllByRole('tab');
-    const secondTab = tabs[1];
+  it('should switch tabs', async () => {});
 
-    await userEvent.click(secondTab);
+  it('should render the content of the selected tab', async () => {});
 
-    expect(secondTab).toHaveAttribute('aria-selected', 'true');
-  });
-
-  it('should render the content of the selected tab', async () => {
-    const tabs = screen.getAllByRole('tab');
-    const secondTab = tabs[1];
-
-    await userEvent.click(secondTab);
-
-    const content = screen.getByRole('tabpanel', { hidden: false });
-    expect(content).toHaveTextContent('lineup');
-  });
-
-  it('should render the content of the first tab by default', async () => {
-    const content = screen.getByRole('tabpanel', { hidden: false });
-    expect(content).toHaveTextContent('We will be at this place!');
-  });
+  it('should render the content of the first tab by default', async () => {});
 });