cerchez07/introduction-to-testing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove all of the solutions from rehearsal

Browse Source
This commit is contained in:
Steve Kinney
2024-10-02 08:48:44 -05:00
parent 4b025e2a07
commit 90b96aa61a
10 changed files with 43 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
examples/accident-counter/src/counter.test.jsx
View File

@@ -5,37 +5,40 @@ import { Counter } from './counter';
import '@testing-library/jest-dom/vitest'; import '@testing-library/jest-dom/vitest';
describe('Counter ', () => { describe.todo('Counter ', () => {
beforeEach(() => { beforeEach(() => {
render(<Counter />); render(<Counter />);
}); });
it('renders with an initial count of 0', () => { it('renders with an initial count of 0');
const countElement = screen.getByTestId('counter-count');
expect(countElement).toHaveTextContent('0');
});
it('disables the "Decrement" and "Reset" buttons when the count is 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.todo('displays "days" 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('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('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 () => {}); it.todo('updates the document title based on the count', async () => {});
}); });

30
examples/element-factory/src/alert-button.test.jsx
View File

@@ -3,32 +3,12 @@ import userEvent from '@testing-library/user-event';
import { AlertButton } from './alert-button'; import { AlertButton } from './alert-button';
describe('AlertButton', () => { describe.todo('AlertButton', () => {
beforeEach(() => { beforeEach(() => {});
vi.spyOn(window, 'alert').mockImplementation(() => {});
render(<AlertButton />);
});
afterEach(() => { afterEach(() => {});
vi.restoreAllMocks();
});
it('should render an alert button', async () => { it('should render an alert button', async () => {});
const button = screen.getByRole('button', { name: /trigger alert/i });
expect(button).toBeInTheDocument(); it('should trigger an alert', async () => {});
});
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!');
});
}); });

18
examples/element-factory/src/button.test.js
View File

@@ -1,19 +1,9 @@
import { createButton } from './button.js'; import { createButton } from './button.js';
describe('createButton', () => { describe.todo('createButton', () => {
it('should create a button element', () => { it('should create a button element', () => {});
const button = createButton();
expect(button.tagName).toBe('BUTTON');
});
it('should have the text "Click Me"', () => { it('should have the text "Click Me"', () => {});
const button = createButton();
expect(button.textContent).toBe('Click Me');
});
it('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!');
});
}); });

29
examples/element-factory/src/login-form.test.js
View File

@@ -2,45 +2,20 @@ import { screen } from '@testing-library/dom';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import { createLoginForm } from './login-form'; import { createLoginForm } from './login-form';
describe('LoginForm', async () => { describe.todo('Login Form', async () => {
it('should render a login form', async () => { it('should render a login form', async () => {});
document.body.replaceChildren(createLoginForm());
const form = screen.getByRole('form', { name: /login/i });
expect(form).toBeInTheDocument();
});
it('should render a login form with a custom action', 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'? // 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 () => { 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'? // 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 () => { 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. // We'll do this one later. Don't worry about it for now.
// If it *is* later, then you should worry about it. // 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? // 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();
}); });
}); });

30
examples/element-factory/src/notification.jsx
View File

@@ -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>
);
};

73
examples/element-factory/src/notification.test.jsx
View File

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

45
examples/element-factory/src/secret-input.test.js
View File

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

37
examples/element-factory/src/tabs.test.js
View File

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
import Tabs from './tabs.svelte'; import Tabs from './tabs.svelte';
describe('Tabs', () => { describe.todo('Tabs', () => {
beforeEach(() => { beforeEach(() => {
render(Tabs, { render(Tabs, {
tabs: [ tabs: [
@@ -14,32 +14,11 @@ describe('Tabs', () => {
}); });
}); });
it('should render three tabs', async () => { it('should render three tabs', async () => {});
const tabs = screen.getAllByRole('tab');
expect(tabs).toHaveLength(3); it('should switch tabs', async () => {});
});
it('should render the content of the selected tab', async () => {});
it('should switch tabs', async () => {
const tabs = screen.getAllByRole('tab'); it('should render the content of the first tab by default', async () => {});
const secondTab = tabs[1];
await userEvent.click(secondTab);
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!');
});
}); });

10
examples/scratchpad/fake-time.test.js
View File

@@ -9,13 +9,5 @@ function delay(callback) {
} }
describe('delay function', () => { describe('delay function', () => {
it('should call callback after delay', () => { it.todo('should call callback after delay', () => {});
const callback = vi.fn();
delay(callback);
vi.advanceTimersByTime(1000);
expect(callback).toHaveBeenCalledWith('Delayed');
});
}); });

7
examples/utility-belt/src/string-to-number.test.js
View File

@@ -6,10 +6,5 @@ describe('stringToNumber', () => {
expect(stringToNumber('42')).toBe(42); expect(stringToNumber('42')).toBe(42);
}); });
it('throws an error if given a string that is not a number', () => { it.todo('throws an error if given a string that is not a number', () => {});
const value = 'foo';
expect(() => stringToNumber(value)).toThrowError(
`cannot be parsed as a number`,
);
});
}); });