Add another example

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

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+export const AlertButton = ({}) => {
+  const [message, setMessage] = useState('Alert!');
+
+  return (
+    <div>
+      <label>
+        Message
+        <input
+          type="text"
+          value={message}
+          onChange={(event) => setMessage(event.target.value)}
+        />
+      </label>
+
+      <button onClick={() => alert(message)}>Trigger Alert</button>
+    </div>
+  );
+};

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

@@ -0,0 +1,34 @@
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { AlertButton } from './alert-button';
+
+describe('AlertButton', () => {
+  beforeEach(() => {
+    vi.spyOn(window, 'alert').mockImplementation(() => {});
+    render(<AlertButton />);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  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 () => {
+    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!');
+  });
+});