Add some additional examples

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

@@ -12,6 +12,7 @@ describe('LoginForm', 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 });
@@ -20,6 +21,7 @@ describe('LoginForm', 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'?
     document.body.replaceChildren(createLoginForm({ method: 'get' }));
 
     const form = screen.getByRole('form', { name: /login/i });
@@ -28,6 +30,9 @@ describe('LoginForm', 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.
+    // 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 }));
 

examples/element-factory/src/notification.jsx

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,73 @@
+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/vitest.config.ts

@@ -5,8 +5,8 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   plugins: [svelte(), react()],
   test: {
-    environment: 'happy-dom',
     globals: true,
+    environment: 'happy-dom',
     setupFiles: ['@testing-library/jest-dom/vitest'],
   },
 });