From 90b96aa61aaeab12178e3857f018f882db7a7bdb Mon Sep 17 00:00:00 2001 From: Steve Kinney Date: Wed, 2 Oct 2024 08:48:44 -0500 Subject: [PATCH] Remove all of the solutions from rehearsal --- .../accident-counter/src/counter.test.jsx | 35 +++++---- .../element-factory/src/alert-button.test.jsx | 30 ++------ examples/element-factory/src/button.test.js | 18 +---- .../element-factory/src/login-form.test.js | 29 +------- examples/element-factory/src/notification.jsx | 30 -------- .../element-factory/src/notification.test.jsx | 73 ------------------- .../element-factory/src/secret-input.test.js | 39 ++-------- examples/element-factory/src/tabs.test.js | 31 ++------ examples/scratchpad/fake-time.test.js | 10 +-- .../utility-belt/src/string-to-number.test.js | 7 +- 10 files changed, 43 insertions(+), 259 deletions(-) delete mode 100644 examples/element-factory/src/notification.jsx delete mode 100644 examples/element-factory/src/notification.test.jsx 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}

} -
- ); -}; diff --git a/examples/element-factory/src/notification.test.jsx b/examples/element-factory/src/notification.test.jsx deleted file mode 100644 index 15f886c..0000000 --- a/examples/element-factory/src/notification.test.jsx +++ /dev/null @@ -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(); - 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(); - }); -}); diff --git a/examples/element-factory/src/secret-input.test.js b/examples/element-factory/src/secret-input.test.js index 376a167..464a28b 100644 --- a/examples/element-factory/src/secret-input.test.js +++ b/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 () => {}); }); diff --git a/examples/element-factory/src/tabs.test.js b/examples/element-factory/src/tabs.test.js index 1eb9bde..780b963 100644 --- a/examples/element-factory/src/tabs.test.js +++ b/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 () => {}); }); diff --git a/examples/scratchpad/fake-time.test.js b/examples/scratchpad/fake-time.test.js index fd1dca5..748dfc6 100644 --- a/examples/scratchpad/fake-time.test.js +++ b/examples/scratchpad/fake-time.test.js @@ -9,13 +9,5 @@ function delay(callback) { } describe('delay function', () => { - it('should call callback after delay', () => { - const callback = vi.fn(); - - delay(callback); - - vi.advanceTimersByTime(1000); - - expect(callback).toHaveBeenCalledWith('Delayed'); - }); + it.todo('should call callback after delay', () => {}); }); diff --git a/examples/utility-belt/src/string-to-number.test.js b/examples/utility-belt/src/string-to-number.test.js index 95c252d..a1a2eb5 100644 --- a/examples/utility-belt/src/string-to-number.test.js +++ b/examples/utility-belt/src/string-to-number.test.js @@ -6,10 +6,5 @@ describe('stringToNumber', () => { expect(stringToNumber('42')).toBe(42); }); - it('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`, - ); - }); + it.todo('throws an error if given a string that is not a number', () => {}); });