diff --git a/examples/accident-counter/src/counter.test.jsx b/examples/accident-counter/src/counter.test.jsx
index 0519d21..4fe79f8 100644
--- a/examples/accident-counter/src/counter.test.jsx
+++ b/examples/accident-counter/src/counter.test.jsx
@@ -5,37 +5,40 @@ import { Counter } from './counter';
import '@testing-library/jest-dom/vitest';
-describe('Counter ', () => {
+describe.todo('Counter ', () => {
beforeEach(() => {
render();
});
- it('renders with an initial count of 0', () => {
- const countElement = screen.getByTestId('counter-count');
- expect(countElement).toHaveTextContent('0');
- });
+ it('renders with an initial count of 0');
- it('disables the "Decrement" and "Reset" buttons when the count is 0', () => {
- const decrementButton = screen.getByRole('button', { name: 'Decrement' });
- const resetButton = screen.getByRole('button', { name: 'Reset' });
-
- expect(decrementButton).toBeDisabled();
- expect(resetButton).toBeDisabled();
- });
+ it('disables the "Decrement" and "Reset" buttons when the count is 0');
it.todo('displays "days" when the count is 0', () => {});
- it.todo('increments the count when the "Increment" button is clicked', async () => {});
+ it.todo(
+ 'increments the count when the "Increment" button is clicked',
+ async () => {},
+ );
it.todo('displays "day" when the count is 1', async () => {});
- it.todo('decrements the count when the "Decrement" button is clicked', async () => {});
+ it.todo(
+ 'decrements the count when the "Decrement" button is clicked',
+ async () => {},
+ );
it.todo('does not allow decrementing below 0', async () => {});
- it.todo('resets the count when the "Reset" button is clicked', async () => {});
+ it.todo(
+ 'resets the count when the "Reset" button is clicked',
+ async () => {},
+ );
- it.todo('disables the "Decrement" and "Reset" buttons when the count is 0', () => {});
+ it.todo(
+ 'disables the "Decrement" and "Reset" buttons when the count is 0',
+ () => {},
+ );
it.todo('updates the document title based on the count', async () => {});
});
diff --git a/examples/element-factory/src/alert-button.test.jsx b/examples/element-factory/src/alert-button.test.jsx
index 72c0d04..424a3ca 100644
--- a/examples/element-factory/src/alert-button.test.jsx
+++ b/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();
- });
+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 () => {});
});
diff --git a/examples/element-factory/src/button.test.js b/examples/element-factory/src/button.test.js
index 5c941c1..08bb92e 100644
--- a/examples/element-factory/src/button.test.js
+++ b/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 () => {});
});
diff --git a/examples/element-factory/src/login-form.test.js b/examples/element-factory/src/login-form.test.js
index b714389..e420229 100644
--- a/examples/element-factory/src/login-form.test.js
+++ b/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();
});
});
diff --git a/examples/element-factory/src/notification.jsx b/examples/element-factory/src/notification.jsx
deleted file mode 100644
index 8dff5f1..0000000
--- a/examples/element-factory/src/notification.jsx
+++ /dev/null
@@ -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 (
-
-
-
-
-
- {message &&
{message}
}
-