Play with time

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

@@ -1,7 +1,10 @@
 import { useState } from 'react';
 
-export const AlertButton = ({}) => {
+export const AlertButton = ({
-  const [message, setMessage] = useState('Alert!');
+  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.
+    expect(handleSubmit).toHaveBeenCalled();
-    // Look and see if alert() was called with the message.
+    expect(handleSubmit).toHaveBeenCalledWith('Hello');
   });
 });

examples/logjam/src/log.js

@@ -6,11 +6,14 @@ import { sendToServer } from './send-to-server';
  * Log a message to the console in development mode or send it to the server in production mode.
  * @param  {string} message
  */
-export function log(message) {
+export function log(
-  if (import.meta.env.MODE !== 'production') {
+  message,
+  { productionCallback = () => {}, mode = import.meta.env.MODE } = {},
+) {
+  if (mode !== 'production') {
     console.log(message);
   } else {
-    sendToServer('info', message);
+    productionCallback('info', message);
   }
 }
 

examples/logjam/src/log.test.js

@@ -1,4 +1,33 @@
 import { expect, it, vi, beforeEach, afterEach, describe } from 'vitest';
 import { log } from './log';
 
-describe.todo('logger', () => {});
+describe('logger', () => {
+  describe('development', () => {
+    it('logs to the console in development mode', () => {
+      const logSpy = vi.fn();
+
+      log('Hello World');
+
+      expect(logSpy).toHaveBeenCalledWith('Hello World');
+    });
+  });
+
+  describe('production', () => {
+    beforeEach(() => {
+      vi.stubEnv('MODE', 'production');
+    });
+
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
+    it('should not call console.log in production', () => {
+      const logSpy = vi.spyOn(console, 'log');
+
+      log('Hello World', { mode: 'production', productionCallback: logSpy });
+
+      expect(logSpy).not.toHaveBeenCalled();
+      expect(sendToServer).toHaveBeenCalled();
+    });
+  });
+});

examples/logjam/src/send-to-server.js

@@ -4,5 +4,6 @@
  * @param {string} message
  */
 export const sendToServer = (level, message) => {
+  throw new Error('I should not run!');
   return `You must mock this function: sendToServer(${level}, ${message})`;
 };

examples/scratchpad/fake-time.test.js

@@ -1,6 +1,4 @@
-import { vi, describe, it, expect } from 'vitest';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
-
-vi.useFakeTimers();
 
 function delay(callback) {
   setTimeout(() => {
@@ -9,5 +7,22 @@ function delay(callback) {
 }
 
 describe('delay function', () => {
-  it.todo('should call callback after delay', () => {});
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime('2024-02-29');
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should call callback after delay', () => {
+    const callback = vi.fn();
+
+    delay(callback);
+    vi.advanceTimersToNextTimer();
+
+    expect(callback).toHaveBeenCalled();
+    expect(new Date()).toBe(null);
+  });
 });