Play with time

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

@@ -1,7 +1,10 @@
 import { useState } from 'react';
 
-export const AlertButton = ({}) => {
-  const [message, setMessage] = useState('Alert!');
+export const AlertButton = ({
+  onSubmit = () => {},
+  defaultMessage = 'Alert!',
+}) => {
+  const [message, setMessage] = useState(defaultMessage);
 
   return (
     <div>
@@ -14,7 +17,7 @@ export const AlertButton = ({}) => {
         />
       </label>
 
-      <button onClick={() => alert(message)}>Trigger Alert</button>
+      <button onClick={() => onSubmit(message)}>Trigger Alert</button>
     </div>
   );
 };

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

@@ -11,17 +11,20 @@ describe('AlertButton', () => {
   it('should render an alert button', async () => {});
 
   it.only('should trigger an alert', async () => {
-    // const logSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+    const handleSubmit = vi.fn();
+
+    render(<AlertButton onSubmit={handleSubmit} message="Default Message" />);
 
-    render(<AlertButton />);
     const input = screen.getByLabelText('Message');
     const button = screen.getByRole('button', { name: /trigger alert/i });
 
     await act(async () => {
+      await userEvent.clear(input);
       await userEvent.type(input, 'Hello');
+      await userEvent.click(button);
     });
 
-    // Click on the button.
-    // Look and see if alert() was called with the message.
+    expect(handleSubmit).toHaveBeenCalled();
+    expect(handleSubmit).toHaveBeenCalledWith('Hello');
   });
 });