Minor fixes from version upgrade (#1093)

maffin-io · Dec 19, 2024 · 145b50e · 145b50e
1 parent 1617c0b
commit 145b50e
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 22 deletions.
diff --git a/src/__tests__/components/charts/Pie.test.tsx b/src/__tests__/components/charts/Pie.test.tsx
@@ -32,11 +32,7 @@ describe('Pie', () => {
               borderWidth: 0,
             },
           },
-          plugins: {
-            autocolors: {
-              mode: 'data',
-            },
-          },
+          plugins: {},
         },
         type: 'doughnut',
       },
@@ -73,9 +69,6 @@ describe('Pie', () => {
             title: {
               display: true,
             },
-            autocolors: {
-              mode: 'data',
-            },
           },
         },
         type: 'doughnut',

diff --git a/src/__tests__/components/charts/TotalsPie.test.tsx b/src/__tests__/components/charts/TotalsPie.test.tsx
@@ -77,6 +77,10 @@ describe('TotalsPie', () => {
                 label: expect.any(Function),
               },
             },
+            autocolors: {
+              mode: 'data',
+              enabled: false,
+            },
           },
         },
       },
@@ -147,6 +151,14 @@ describe('TotalsPie', () => {
           ],
           labels: ['Assets', 'Liabilities'],
         },
+        options: expect.objectContaining({
+          plugins: expect.objectContaining({
+            autocolors: {
+              mode: 'data',
+              enabled: true,
+            },
+          }),
+        }),
       }),
       undefined,
     );

diff --git a/src/__tests__/components/pages/account/IEInfo.test.tsx b/src/__tests__/components/pages/account/IEInfo.test.tsx
@@ -51,38 +51,43 @@ describe('IEInfo', () => {
       <IEInfo account={account} />,
     );
 
-    expect(MonthlyTotalHistogram).toBeCalledWith(
+    expect(MonthlyTotalHistogram).toHaveBeenCalledWith(
       {
         guids: [account.guid],
         title: '',
       },
       undefined,
     );
-    expect(TotalWidget).toBeCalledWith(
+    expect(TotalWidget).toHaveBeenCalledWith(
       { account },
       undefined,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('renders as expected when placeholder', () => {
+  it.each([
+    ['INCOME', 'Total earned'],
+    ['EXPENSE', 'Total spent'],
+    ['EQUITY', 'Total'],
+  ])('renders as expected when placeholder with %s', (type, title) => {
     account.placeholder = true;
     account.childrenIds = ['1', '2'];
+    account.type = type;
     const { container } = render(
       <IEInfo account={account} />,
     );
 
-    expect(AccountsTable).toBeCalledWith({ guids: ['1', '2'] }, undefined);
-    expect(TotalsPie).toBeCalledWith(
+    expect(AccountsTable).toHaveBeenCalledWith({ guids: ['1', '2'] }, undefined);
+    expect(TotalsPie).toHaveBeenCalledWith(
       {
         guids: ['1', '2'],
         showDataLabels: false,
         showTooltip: true,
-        title: 'Total spent',
+        title,
       },
       undefined,
     );
-    expect(MonthlyTotalHistogram).toBeCalledWith(
+    expect(MonthlyTotalHistogram).toHaveBeenCalledWith(
       {
         guids: ['1', '2'],
         title: '',

diff --git a/src/__tests__/components/pages/account/__snapshots__/IEInfo.test.tsx.snap b/src/__tests__/components/pages/account/__snapshots__/IEInfo.test.tsx.snap
@@ -37,7 +37,95 @@ exports[`IEInfo renders as expected when not placeholder 1`] = `
 </div>
 `;
 
-exports[`IEInfo renders as expected when placeholder 1`] = `
+exports[`IEInfo renders as expected when placeholder with EQUITY 1`] = `
+<div>
+  <div
+    class="grid md:grid-cols-12 items-start"
+  >
+    <div
+      class="grid md:grid-cols-12 auto-cols-fr items-start col-span-6"
+    >
+      <div
+        class="card md:col-span-6"
+      >
+        <div
+          data-testid="TotalsPie"
+        />
+        <div
+          class="mt-4"
+        >
+          <div
+            data-testid="AccountsTable"
+          />
+        </div>
+      </div>
+      <div
+        class="card md:col-span-6"
+      />
+    </div>
+    <div
+      class="col-span-6"
+    >
+      <div
+        class="card"
+      >
+        <div
+          data-testid="MonthlyTotalHistogram"
+        />
+      </div>
+      <div
+        class="col-span-12"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`IEInfo renders as expected when placeholder with EXPENSE 1`] = `
+<div>
+  <div
+    class="grid md:grid-cols-12 items-start"
+  >
+    <div
+      class="grid md:grid-cols-12 auto-cols-fr items-start col-span-6"
+    >
+      <div
+        class="card md:col-span-6"
+      >
+        <div
+          data-testid="TotalsPie"
+        />
+        <div
+          class="mt-4"
+        >
+          <div
+            data-testid="AccountsTable"
+          />
+        </div>
+      </div>
+      <div
+        class="card md:col-span-6"
+      />
+    </div>
+    <div
+      class="col-span-6"
+    >
+      <div
+        class="card"
+      >
+        <div
+          data-testid="MonthlyTotalHistogram"
+        />
+      </div>
+      <div
+        class="col-span-12"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`IEInfo renders as expected when placeholder with INCOME 1`] = `
 <div>
   <div
     class="grid md:grid-cols-12 items-start"

diff --git a/src/components/charts/Pie.tsx b/src/components/charts/Pie.tsx
@@ -19,11 +19,6 @@ export const OPTIONS: ChartOptions<'doughnut'> = {
       borderWidth: 0,
     },
   },
-  plugins: {
-    autocolors: {
-      mode: 'data',
-    },
-  },
 };
 
 export default function Doughnut({

diff --git a/src/components/charts/TotalsPie.tsx b/src/components/charts/TotalsPie.tsx
@@ -94,6 +94,10 @@ export default function TotalsPie({
               ),
               padding: 6,
             },
+            autocolors: {
+              mode: 'data',
+              enabled: (backgroundColor?.length || 0) > 0,
+            },
           },
         }}
       />

diff --git a/src/components/pages/account/IEInfo.tsx b/src/components/pages/account/IEInfo.tsx
@@ -28,7 +28,7 @@ export default function IEInfo({
               && (
                 <>
                   <TotalsPie
-                    title={account.type === 'EXPENSE' ? 'Total spent' : 'Total earned'}
+                    title={getTitle(account.type)}
                     guids={account.childrenIds}
                     showTooltip
                     showDataLabels={false}
@@ -64,3 +64,15 @@ export default function IEInfo({
     </div>
   );
 }
+
+function getTitle(type: string): string {
+  if (type === 'INCOME') {
+    return 'Total earned';
+  }
+
+  if (type === 'EXPENSE') {
+    return 'Total spent';
+  }
+
+  return 'Total';
+}