Placeholder improvement (#673)

jest.config.mjs

@@ -16,7 +16,7 @@ const config = {
   coverageThreshold: {
     global: {
       lines: 92,
-      branches: 85,
+      branches: 86,
     },
   },
   testEnvironment: 'jest-environment-jsdom',

src/__tests__/components/charts/NetWorthHistogram.test.tsx

@@ -40,7 +40,7 @@ describe('NetWorthHistogram', () => {
 
     expect(Bar).toBeCalledWith(
       {
-        height: '400',
+        height: 400,
         data: {
           datasets: [
             {

src/__tests__/components/forms/account/AccountForm.test.tsx

@@ -54,20 +54,23 @@ describe('AccountForm', () => {
     root = await Account.create({
       name: 'Root',
       type: 'ROOT',
+      placeholder: true,
     }).save();
 
     assetAccount = await Account.create({
       name: 'Assets',
       type: 'ASSET',
       fk_commodity: eur,
       parent: root,
+      placeholder: true,
     }).save();
 
     expenseAccount = await Account.create({
       name: 'Expenses',
       type: 'EXPENSE',
       fk_commodity: eur,
       parent: root,
+      placeholder: true,
     }).save();
 
     root.path = 'Root';
@@ -222,9 +225,9 @@ describe('AccountForm', () => {
 
     const fieldsets = screen.getAllByRole('group');
     // Can't check with toBeVisible due tailwindcss not being understood by jest
-    expect(fieldsets[2]).toHaveClass('hidden');
     expect(fieldsets[3]).toHaveClass('hidden');
-    expect(fieldsets[5]).toHaveClass('hidden');
+    expect(fieldsets[4]).toHaveClass('hidden');
+    expect(fieldsets[6]).toHaveClass('hidden');
   });
 
   it('button is disabled when form not valid', async () => {
@@ -242,25 +245,18 @@ describe('AccountForm', () => {
     expect(button).toBeDisabled();
   });
 
-  /**
-   * INVESTMENT accounts can't have children
-   */
-  it('filters stock/mutual accounts as parents', async () => {
+  it('filters non placeholders as parents', async () => {
     const user = userEvent.setup();
-    const commodity = await Commodity.create({
-      mnemonic: 'TICKER',
-      namespace: 'STOCK',
-    }).save();
 
     const stockAccount = await Account.create({
-      guid: 'stock_guid_1',
-      name: 'Stock',
-      type: 'INVESTMENT',
-      fk_commodity: commodity,
+      guid: 'guid_1',
+      name: 'A',
+      type: 'ASSET',
+      fk_commodity: eur,
       parent: assetAccount,
     }).save();
 
-    stockAccount.path = 'Assets:Stock';
+    stockAccount.path = 'Assets:A';
 
     jest.spyOn(apiHook, 'useAccounts').mockReturnValue({
       data: [
@@ -280,8 +276,7 @@ describe('AccountForm', () => {
     await user.click(screen.getByRole('combobox', { name: 'parentInput' }));
     screen.getByText('Assets');
     screen.getByText('Expenses');
-    expect(screen.queryByText('Stock')).toBeNull();
-    expect(screen.queryByText('Mutual')).toBeNull();
+    expect(screen.queryByText('Assets:A')).toBeNull();
   });
 
   it('creates account with expected params and saves', async () => {
@@ -483,6 +478,7 @@ describe('AccountForm', () => {
       type: 'INCOME',
       fk_commodity: eur,
       parent: root,
+      placeholder: true,
     }).save();
     incomeAccount.path = 'Income';
 
@@ -492,6 +488,7 @@ describe('AccountForm', () => {
       type: 'BANK',
       fk_commodity: eur,
       parent: assetAccount,
+      placeholder: true,
     }).save();
     bankAccount.path = 'Assets:Bank';
 

src/__tests__/components/forms/account/__snapshots__/AccountForm.test.tsx.snap

@@ -47,7 +47,32 @@ exports[`AccountForm renders as expected with add 1`] = `
           type="checkbox"
         />
       </fieldset>
+      <fieldset
+        class="col-start-10 col-span-2"
+      >
+        <label
+          class="inline-block mb-2"
+          for="placeholderInput"
+        >
+          Parent
+        </label>
+        <span
+          class="badge ml-0.5"
+          data-tooltip-id="placeholder-help"
+        >
+          ?
+        </span>
+        <input
+          class="block m-0"
+          id="placeholderInput"
+          name="placeholder"
+          type="checkbox"
+        />
+      </fieldset>
     </div>
+    <p
+      class="invalid-feedback"
+    />
     <fieldset
       class="text-sm my-5"
     >
@@ -499,7 +524,33 @@ exports[`AccountForm renders as expected with delete 1`] = `
           type="checkbox"
         />
       </fieldset>
+      <fieldset
+        class="col-start-10 col-span-2"
+      >
+        <label
+          class="inline-block mb-2"
+          for="placeholderInput"
+        >
+          Parent
+        </label>
+        <span
+          class="badge ml-0.5"
+          data-tooltip-id="placeholder-help"
+        >
+          ?
+        </span>
+        <input
+          class="block m-0"
+          disabled=""
+          id="placeholderInput"
+          name="placeholder"
+          type="checkbox"
+        />
+      </fieldset>
     </div>
+    <p
+      class="invalid-feedback"
+    />
     <fieldset
       class="text-sm my-5"
     >
@@ -944,7 +995,32 @@ exports[`AccountForm renders as expected with update 1`] = `
           type="checkbox"
         />
       </fieldset>
+      <fieldset
+        class="col-start-10 col-span-2"
+      >
+        <label
+          class="inline-block mb-2"
+          for="placeholderInput"
+        >
+          Parent
+        </label>
+        <span
+          class="badge ml-0.5"
+          data-tooltip-id="placeholder-help"
+        >
+          ?
+        </span>
+        <input
+          class="block m-0"
+          id="placeholderInput"
+          name="placeholder"
+          type="checkbox"
+        />
+      </fieldset>
     </div>
+    <p
+      class="invalid-feedback"
+    />
     <fieldset
       class="text-sm my-5"
     >

src/__tests__/components/pages/account/AssetInfo.test.tsx

@@ -7,7 +7,9 @@ import { AssetInfo } from '@/components/pages/account';
 import { NetWorthHistogram } from '@/components/charts';
 import StatisticsWidget from '@/components/StatisticsWidget';
 import * as apiHook from '@/hooks/api';
+import Money from '@/book/Money';
 import type { Account } from '@/book/entities';
+import type { AccountsTotals } from '@/types/book';
 
 jest.mock('@/hooks/api', () => ({
   __esModule: true,
@@ -25,7 +27,7 @@ jest.mock('@/components/StatisticsWidget', () => jest.fn(
 describe('AssetInfo', () => {
   let account: Account;
   beforeEach(() => {
-    jest.spyOn(apiHook, 'useAccountTotal').mockReturnValue({ data: undefined } as UseQueryResult<number>);
+    jest.spyOn(apiHook, 'useAccountsTotals').mockReturnValue({ data: undefined } as UseQueryResult<AccountsTotals>);
     jest.spyOn(DateTime, 'now').mockReturnValue(DateTime.fromISO('2023-03-01') as DateTime<true>);
     account = {
       guid: 'guid',
@@ -48,6 +50,7 @@ describe('AssetInfo', () => {
 
     expect(NetWorthHistogram).toBeCalledWith(
       {
+        height: 300,
         assetsGuid: 'guid',
         assetsLabel: 'Assets',
         hideAssets: true,
@@ -62,18 +65,18 @@ describe('AssetInfo', () => {
       {
         className: 'mr-2',
         title: 'Total',
-        description: '',
         stats: '€0.00',
+        description: expect.anything(),
       },
       {},
     );
     expect(container).toMatchSnapshot();
   });
 
   it('renders as expected with splits', () => {
-    jest.spyOn(apiHook, 'useAccountTotal').mockReturnValue({
-      data: 100,
-    } as UseQueryResult<number>);
+    jest.spyOn(apiHook, 'useAccountsTotals').mockReturnValue({
+      data: { guid: new Money(100, 'EUR') } as AccountsTotals,
+    } as UseQueryResult<AccountsTotals>);
 
     render(
       <AssetInfo account={account} />,
@@ -84,7 +87,7 @@ describe('AssetInfo', () => {
       {
         className: 'mr-2',
         title: 'Total',
-        description: '',
+        description: expect.anything(),
         stats: '€100.00',
       },
       {},

src/__tests__/components/pages/account/__snapshots__/AssetInfo.test.tsx.snap

@@ -21,19 +21,18 @@ exports[`AssetInfo renders as expected when no splits 1`] = `
         <div
           class="col-span-8"
         />
+        <div
+          class="card col-span-12"
+        >
+          <div
+            data-testid="NetWorthHistogram"
+          />
+        </div>
       </div>
     </div>
     <div
       class="card col-span-6"
-    >
-      <div
-        class="flex h-full items-center"
-      >
-        <div
-          data-testid="NetWorthHistogram"
-        />
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;

src/__tests__/components/pages/account/__snapshots__/Header.test.tsx.snap

@@ -12,8 +12,6 @@ exports[`Header renders as expected with account 1`] = `
         class="text-xl font-medium badge"
       >
         path
-         
-        account
       </span>
     </span>
     <div
@@ -23,11 +21,15 @@ exports[`Header renders as expected with account 1`] = `
         class="flex gap-1"
       >
         <div
-          data-testid="FormButton"
+          class=""
         >
           <div
-            data-testid="TransactionForm"
-          />
+            data-testid="FormButton"
+          >
+            <div
+              data-testid="TransactionForm"
+            />
+          </div>
         </div>
         <div
           data-testid="FormButton"

src/__tests__/components/pages/accounts/AccountsTable.test.tsx

@@ -324,38 +324,6 @@ describe('AccountsTable', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('renders Name column as expected when not expandable', async () => {
-    render(<AccountsTable guids={['a1']} />);
-
-    await screen.findByTestId('Table');
-    expect(Table).toBeCalledTimes(1);
-    const nameCol = TableMock.mock.calls[0][0].columns[0];
-
-    expect(nameCol.cell).not.toBeUndefined();
-    const { container } = render(
-      // @ts-ignore
-      nameCol.cell({
-        row: {
-          original: {
-            account: {
-              guid: 'assets',
-              name: 'Assets',
-              type: 'ASSET',
-              childrenIds: ['a1'],
-              placeholder: true,
-            } as Account,
-            total: new Money(100, 'EUR'),
-            children: [],
-          },
-          getCanExpand: () => false,
-        },
-      }),
-    );
-
-    await screen.findByText('Assets');
-    expect(container).toMatchSnapshot();
-  });
-
   it('renders Total column as expected', async () => {
     render(<AccountsTable guids={['a1']} />);