feat: Timeline UI (#2830)

web/src/components/__tests__/Dialog.test.jsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import Dialog from '../Dialog';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { render, screen } from '@testing-library/preact';
 
 describe('Dialog', () => {
   let portal;
@@ -16,23 +16,8 @@ describe('Dialog', () => {
   });
 
   test('renders to a portal', async () => {
-    render(<Dialog title="Tacos" text="This is the dialog" />);
-    expect(screen.getByText('Tacos')).toBeInTheDocument();
+    render(<Dialog>Sample</Dialog>);
+    expect(screen.getByText('Sample')).toBeInTheDocument();
     expect(screen.getByRole('modal').closest('#dialogs')).not.toBeNull();
   });
-
-  test('renders action buttons', async () => {
-    const handleClick = jest.fn();
-    render(
-      <Dialog
-        actions={[
-          { color: 'red', text: 'Delete' },
-          { text: 'Okay', onClick: handleClick },
-        ]}
-        title="Tacos"
-      />
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Okay' }));
-    expect(handleClick).toHaveBeenCalled();
-  });
 });

web/src/components/__tests__/Prompt.test.jsx

@@ -0,0 +1,38 @@
+import { h } from 'preact';
+import Prompt from '../Prompt';
+import { fireEvent, render, screen } from '@testing-library/preact';
+
+describe('Prompt', () => {
+  let portal;
+
+  beforeAll(() => {
+    portal = document.createElement('div');
+    portal.id = 'dialogs';
+    document.body.appendChild(portal);
+  });
+
+  afterAll(() => {
+    document.body.removeChild(portal);
+  });
+
+  test('renders to a portal', async () => {
+    render(<Prompt title='Tacos' text='This is the dialog' />);
+    expect(screen.getByText('Tacos')).toBeInTheDocument();
+    expect(screen.getByRole('modal').closest('#dialogs')).not.toBeNull();
+  });
+
+  test('renders action buttons', async () => {
+    const handleClick = jest.fn();
+    render(
+      <Prompt
+        actions={[
+          { color: 'red', text: 'Delete' },
+          { text: 'Okay', onClick: handleClick },
+        ]}
+        title='Tacos'
+      />
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Okay' }));
+    expect(handleClick).toHaveBeenCalled();
+  });
+});