Responsive side bar (#957)

maffin-io · Jun 14, 2024 · c166279 · c166279
1 parent ddf1ec9
commit c166279
Show file tree

Hide file tree

Showing 22 changed files with 2,458 additions and 3,174 deletions.
diff --git a/public/books/demo.sqlite.gz b/public/books/demo.sqlite.gz
diff --git a/src/__tests__/app/dashboard/__snapshots__/layout.test.tsx.snap b/src/__tests__/app/dashboard/__snapshots__/layout.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`DashboardLayout renders as expected when datasource available 1`] = `
       data-testid="LeftSidebar"
     />
     <div
-      class="mt-20 ml-20 p-3 pb-7"
+      class="mt-20 md:ml-20 p-3 pb-7"
     >
       <div
         data-testid="DashboardPage"

diff --git a/src/__tests__/components/buttons/FormButton.test.tsx b/src/__tests__/components/buttons/FormButton.test.tsx
@@ -4,14 +4,14 @@ import {
   screen,
   fireEvent,
 } from '@testing-library/react';
-import Modal from 'react-modal';
 import { BiPlusCircle } from 'react-icons/bi';
 
 import FormButton from '@/components/buttons/FormButton';
 import { DataSourceContext } from '@/hooks';
+import Modal from '@/components/ui/Modal';
 import type { DataSourceContextType } from '@/hooks';
 
-jest.mock('react-modal', () => jest.fn(
+jest.mock('@/components/ui/Modal', () => jest.fn(
   (props: React.PropsWithChildren) => (
     <div data-testid="Modal">
       {props.children}
@@ -24,102 +24,7 @@ describe('FormButton', () => {
     jest.clearAllMocks();
   });
 
-  it('renders hidden modal on mount', async () => {
-    const mockClone = jest.spyOn(React, 'cloneElement');
-    const c = <TestComponent />;
-    const { container } = render(
-      <FormButton
-        modalTitle="Add"
-        buttonContent={(
-          <>
-            <BiPlusCircle className="mr-1" />
-            New
-          </>
-        )}
-      >
-        {c}
-      </FormButton>,
-    );
-
-    expect(Modal).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        isOpen: false,
-      }),
-      {},
-    );
-
-    expect(mockClone).toBeCalledWith(c, { onSave: expect.any(Function) });
-    expect(container).toMatchSnapshot();
-  });
-
-  it('opens modal when clicking the button', async () => {
-    render(
-      <FormButton
-        modalTitle="Add"
-        buttonContent={(
-          <>
-            <BiPlusCircle className="mr-1" />
-            New
-          </>
-        )}
-      >
-        <TestComponent />
-      </FormButton>,
-    );
-
-    const button = await screen.findByRole('button', { name: /new/i });
-    fireEvent.click(button);
-
-    await screen.findByText('submit form');
-    const modal = await screen.findByTestId('Modal');
-    expect(Modal).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        isOpen: true,
-      }),
-      {},
-    );
-    expect(modal).toMatchSnapshot();
-  });
-
-  it('closes modal when clicking the X button', async () => {
-    render(
-      <FormButton
-        modalTitle="Add"
-        buttonContent={(
-          <>
-            <BiPlusCircle className="mr-1" />
-            New
-          </>
-        )}
-      >
-        <TestComponent />
-      </FormButton>,
-    );
-
-    const button = await screen.findByRole('button', { name: /new/i });
-    fireEvent.click(button);
-
-    await screen.findByText('submit form');
-    await screen.findByTestId('Modal');
-    expect(Modal).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        isOpen: true,
-      }),
-      {},
-    );
-
-    const xButton = screen.getByRole('button', { name: 'X' });
-    fireEvent.click(xButton);
-
-    expect(Modal).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        isOpen: false,
-      }),
-      {},
-    );
-  });
-
-  it('on form save closes modal and saves', async () => {
+  it('renders as expected', async () => {
     const mockSave = jest.fn(() => Promise.resolve());
     render(
       <DataSourceContext.Provider value={{ save: mockSave as Function } as DataSourceContextType}>
@@ -137,17 +42,17 @@ describe('FormButton', () => {
       </DataSourceContext.Provider>,
     );
 
-    // open modal to prove that onSave closes it
-    const button = await screen.findByRole('button', { name: /new/i });
-    fireEvent.click(button);
-
     fireEvent.click(screen.getByText('submit form'));
-    expect(mockSave).toBeCalledTimes(1);
-
-    expect(Modal).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        isOpen: false,
-      }),
+    expect(mockSave).toHaveBeenCalledTimes(1);
+
+    expect(Modal).toHaveBeenCalledWith(
+      {
+        showClose: true,
+        className: 'modal card',
+        triggerClassName: 'btn btn-primary',
+        triggerContent: expect.anything(),
+        children: expect.anything(),
+      },
       {},
     );
   });

diff --git a/src/__tests__/components/buttons/ImportButton.test.tsx b/src/__tests__/components/buttons/ImportButton.test.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 import {
   render,
-  screen,
-  fireEvent,
 } from '@testing-library/react';
-import Modal from 'react-modal';
 
 import ImportButton from '@/components/buttons/ImportButton';
+import Modal from '@/components/ui/Modal';
 
-jest.mock('react-modal', () => jest.fn(
+jest.mock('@/components/ui/Modal', () => jest.fn(
   (props: React.PropsWithChildren) => (
     <div data-testid="Modal">
       {props.children}
@@ -29,51 +27,20 @@ describe('ImportButton', () => {
     jest.clearAllMocks();
   });
 
-  it('renders hidden modal on mount', async () => {
+  it('renders as expected', async () => {
     const { container } = render(<ImportButton />);
 
-    expect(Modal).toBeCalledWith(
-      expect.objectContaining({
-        isOpen: false,
-      }),
+    expect(Modal).toHaveBeenCalledWith(
+      {
+        showClose: true,
+        className: 'modal bg-background-800',
+        triggerClassName: 'btn btn-primary',
+        triggerContent: expect.anything(),
+        children: expect.anything(),
+      },
       {},
     );
 
     expect(container).toMatchSnapshot();
   });
-
-  it('opens modal when clicking the button', async () => {
-    render(<ImportButton />);
-
-    const button = await screen.findByRole('button', { name: 'Import' });
-    fireEvent.click(button);
-
-    const modal = await screen.findByTestId('Modal');
-    expect(Modal).toBeCalledWith(
-      expect.objectContaining({
-        isOpen: true,
-      }),
-      {},
-    );
-    expect(modal).toMatchSnapshot();
-  });
-
-  it('closes modal when clicking the X button', async () => {
-    render(<ImportButton />);
-
-    const button = await screen.findByRole('button', { name: 'Import' });
-    fireEvent.click(button);
-
-    await screen.findByTestId('Modal');
-
-    const xButton = screen.getByRole('button', { name: 'X' });
-    fireEvent.click(xButton);
-
-    expect(Modal).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        isOpen: false,
-      }),
-      {},
-    );
-  });
 });
diff --git a/src/__tests__/components/buttons/__snapshots__/FormButton.test.tsx.snap b/src/__tests__/components/buttons/__snapshots__/FormButton.test.tsx.snap
diff --git a/src/__tests__/components/buttons/__snapshots__/ImportButton.test.tsx.snap b/src/__tests__/components/buttons/__snapshots__/ImportButton.test.tsx.snap
@@ -1,39 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ImportButton opens modal when clicking the button 1`] = `
-<div
-  data-testid="Modal"
->
-  <button
-    class="float-right"
-    type="button"
-  >
-    X
-  </button>
-  <div
-    class="grid grid-cols-2 justify-center mt-5"
-  >
-    <div
-      data-testid="DBImportButton"
-    />
-    <div
-      data-testid="PlaidImportButton"
-    />
-  </div>
-</div>
-`;
-
-exports[`ImportButton renders hidden modal on mount 1`] = `
+exports[`ImportButton renders as expected 1`] = `
 <div>
   <div
     data-testid="Modal"
   >
-    <button
-      class="float-right"
-      type="button"
-    >
-      X
-    </button>
     <div
       class="grid grid-cols-2 justify-center mt-5"
     >
@@ -45,33 +16,5 @@ exports[`ImportButton renders hidden modal on mount 1`] = `
       />
     </div>
   </div>
-  <button
-    class="btn btn-primary"
-    id="import-button"
-    type="button"
-  >
-    <svg
-      class="inline-block align-middle mr-1"
-      fill="currentColor"
-      height="1em"
-      stroke="currentColor"
-      stroke-width="0"
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="m12 18 4-5h-3V2h-2v11H8z"
-      />
-      <path
-        d="M19 9h-4v2h4v9H5v-9h4V9H5c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-9c0-1.103-.897-2-2-2z"
-      />
-    </svg>
-    <span
-      class="inline-block align-middle"
-    >
-      Import
-    </span>
-  </button>
 </div>
 `;