@mx-cartographer/experiences 4.0.14-alpha.JB0 → 4.0.14-alpha.JB1

package/src/accounts/__tests__/Accounts.test.tsx

@@ -0,0 +1,561 @@
+import React, { act } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, RenderResult, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import members from '../../../mock/data/Members.json'
+
+import AccountsFullView from '../AccountsWidget'
+import DataProvider from '../../common/context/__mocks__/GlobalDataProvider'
+
+import { GlobalStore } from '../../common/stores/GlobalStore'
+
+const globalStore = new GlobalStore()
+
+vi.mock('@mui/x-charts', () => ({
+  ResponsiveChartContainer: vi.fn().mockImplementation(({ children }) => children),
+  LinePlot: vi.fn().mockImplementation(({ children }) => children),
+  AreaPlot: vi.fn().mockImplementation(({ children }) => children),
+  BarPlot: vi.fn().mockImplementation(({ children }) => children),
+  MarkPlot: vi.fn().mockImplementation(({ children }) => children),
+  ChartsLegend: vi.fn().mockImplementation(({ children }) => children),
+  ChartsReferenceLine: vi.fn().mockImplementation(({ children }) => children),
+  ChartsXAxis: vi.fn().mockImplementation(({ children }) => children),
+  ChartsYAxis: vi.fn().mockImplementation(({ children }) => children),
+}))
+
+describe('AccountsFullView', () => {
+  let docBody: RenderResult
+
+  act(() => {
+    if (!globalStore.isInitialized) {
+      globalStore.initialize('/', 'sessionToken')
+    }
+  })
+
+  beforeEach(() => {
+    docBody = render(
+      <DataProvider globalStore={globalStore}>
+        <AccountsFullView />
+      </DataProvider>,
+    )
+  })
+
+  it('renders correct heading and subtitles in correct order', () => {
+    const listItems = docBody.queryAllByRole('listitem')
+    const mainChecking = listItems[0]
+    expect(within(mainChecking).queryByText('Available balance')).toBeTruthy()
+    expect(within(mainChecking).queryByText('Current balance')).toBeTruthy()
+    expect(within(mainChecking).queryByText('Gringotts Checking *5768')).toBeTruthy()
+
+    const manualAccount = listItems[1]
+    expect(within(manualAccount).queryByText('Available balance')).toBeFalsy()
+    expect(within(manualAccount).queryByText('Current balance')).toBeTruthy()
+    expect(within(manualAccount).queryByText('Manual account')).toBeTruthy()
+
+    const otherChecking = listItems[2]
+    expect(within(otherChecking).queryByText('Available balance')).toBeTruthy()
+    expect(within(otherChecking).queryByText('Current balance')).toBeTruthy()
+    expect(within(otherChecking).queryByText('Other Checking *1234')).toBeTruthy()
+
+    const emergencySavings = listItems[3]
+    expect(within(emergencySavings).queryByText('Available balance')).toBeFalsy()
+    expect(within(emergencySavings).queryByText('Current balance')).toBeTruthy()
+    expect(within(emergencySavings).queryByText('Emergency Savings 1')).toBeTruthy()
+
+    const healthSavings = listItems[4]
+    expect(within(healthSavings).queryByText('Available balance')).toBeTruthy()
+    expect(within(healthSavings).queryByText('Current balance')).toBeTruthy()
+    expect(within(healthSavings).queryByText('Health Savings *1098')).toBeTruthy()
+
+    const rainyDaySavings = listItems[5]
+    expect(within(rainyDaySavings).queryByText('Available balance')).toBeFalsy()
+    expect(within(rainyDaySavings).queryByText('Current balance')).toBeTruthy()
+    expect(within(rainyDaySavings).queryByText('Rainy Day Savings *5432')).toBeTruthy()
+
+    const creditCard1 = listItems[6]
+    expect(creditCard1.querySelector('strong')).toBeTruthy()
+    expect(within(creditCard1).queryByText('Available balance')).toBeFalsy()
+    expect(within(creditCard1).queryByText('Current balance')).toBeTruthy()
+    expect(within(creditCard1).queryByText('Credit Card')).toBeTruthy()
+
+    const creditCard2 = listItems[7]
+    expect(within(creditCard2).queryByText('Available credit')).toBeTruthy()
+    expect(within(creditCard2).queryByText('Current balance')).toBeTruthy()
+    expect(within(creditCard2).queryByText('Credit Card 2')).toBeTruthy()
+
+    const investments = listItems[8]
+    expect(within(investments).queryByText('Available balance')).toBeFalsy()
+    expect(within(investments).queryByText('Current balance')).toBeTruthy()
+    expect(within(investments).queryByText('Investments *7654')).toBeTruthy()
+
+    const mortgage = listItems[9]
+    expect(within(mortgage).queryByText('Available balance')).toBeFalsy()
+    expect(within(mortgage).queryByText('Current balance')).toBeTruthy()
+    expect(within(mortgage).queryByText('Loan Number: *1738')).toBeTruthy()
+
+    const property = listItems[10]
+    expect(within(property).queryByText('Available balance')).toBeFalsy()
+    expect(within(property).queryByText('Current balance')).toBeTruthy()
+    expect(within(property).queryByText('Hope Diamond')).toBeTruthy()
+  })
+
+  it('correctly filters accounts', async () => {
+    // 1. Ensure it's in the DOM (since we'll test that it gets filtered out)
+    expect(screen.queryByText('Gringotts Checking *5768')).toBeTruthy()
+
+    // 2. Trigger the account filter popover
+    const filterAccountsButton = screen.queryAllByRole('button')[0]
+    await act(() => userEvent.click(filterAccountsButton))
+
+    // 3. De-select Main Checking
+    const mainCheckingToggle = screen.queryAllByRole('checkbox')[0]
+    await act(() => userEvent.click(mainCheckingToggle))
+
+    // 4. Apply the filter
+    const filterButton = screen.queryAllByRole('button')[13]
+    await act(() => userEvent.click(filterButton))
+
+    expect(screen.queryByText('Main Checking *5768')).toBeFalsy()
+  })
+
+  describe('account details chart', () => {
+    it('1st account (checking)', async () => {
+      const mainChecking = docBody.queryAllByRole('listitem')[0].firstChild
+      await act(() => userEvent.click(mainChecking))
+      expect(screen.getByTestId('TrendsChart')).toBeInTheDocument()
+    })
+    it('2nd account (manual)', async () => {
+      const manualAccount = docBody.queryAllByRole('listitem')[1].firstChild
+      await act(() => userEvent.click(manualAccount))
+      expect(screen.getByTestId('TrendsChart')).toBeInTheDocument()
+    })
+    it('3rd account (checking)', async () => {
+      const otherChecking = docBody.queryAllByRole('listitem')[2].firstChild
+      await act(() => userEvent.click(otherChecking))
+      expect(screen.queryByTestId('TrendsChart')).toBeInTheDocument()
+    })
+    it('4th account (savings)', async () => {
+      const emergencySavings = docBody.queryAllByRole('listitem')[3].firstChild
+      await act(() => userEvent.click(emergencySavings))
+      expect(screen.queryByTestId('TrendsChart')).toBeInTheDocument()
+    })
+    it('5th account (savings)', async () => {
+      const healthSavings = docBody.queryAllByRole('listitem')[4].firstChild
+      await act(() => userEvent.click(healthSavings))
+      expect(screen.queryByTestId('TrendsChart')).toBeInTheDocument()
+    })
+    it('6th account (savings)', async () => {
+      const rainyDaySavings = docBody.queryAllByRole('listitem')[5].firstChild
+      await act(() => userEvent.click(rainyDaySavings))
+      expect(screen.queryByTestId('TrendsChart')).toBeInTheDocument()
+    })
+    it('7th account (credit card)', async () => {
+      const creditCard1 = docBody.queryAllByRole('listitem')[6].firstChild
+      await act(() => userEvent.click(creditCard1))
+      expect(screen.queryByTestId('TrendsChart')).toBeInTheDocument()
+    })
+    it('8th account (credit card)', async () => {
+      const creditCard2 = docBody.queryAllByRole('listitem')[7].firstChild
+      await act(() => userEvent.click(creditCard2))
+      expect(screen.queryByTestId('TrendsChart')).toBeInTheDocument()
+    })
+    it('9th account (investments)', async () => {
+      const investments = docBody.queryAllByRole('listitem')[8].firstChild
+      await act(() => userEvent.click(investments))
+      expect(screen.queryByTestId('TrendsChart')).not.toBeInTheDocument()
+    })
+    it('10th account (mortgage)', async () => {
+      const mortgage = docBody.queryAllByRole('listitem')[9].firstChild
+      await act(() => userEvent.click(mortgage))
+      expect(screen.queryByTestId('TrendsChart')).toBeInTheDocument()
+    })
+    it('11th account (property)', async () => {
+      const property = docBody.queryAllByRole('listitem')[10].firstChild
+      await act(() => userEvent.click(property))
+      expect(screen.queryByTestId('TrendsChart')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('account details tab', () => {
+    describe('main details', () => {
+      it('1st account', async () => {
+        expect(screen.queryByText('Account Details')).toBeFalsy()
+
+        // find first account button and click it
+        const account1 = docBody.queryAllByRole('listitem')[0].firstChild
+        await act(() => userEvent.click(account1))
+
+        expect(screen.queryAllByText('Account Details')).toBeTruthy()
+        expect(screen.getByText('Connection failed')).toBeInTheDocument()
+        expect(screen.getByRole('alert')).toBeInTheDocument()
+        expect(screen.getByText(members[3].institution_url)).toBeInTheDocument()
+        expect(screen.getByText('Hide Account')).toBeInTheDocument()
+        expect(screen.getByText('Mark as Closed')).toBeInTheDocument()
+      })
+
+      it('2nd account', async () => {
+        expect(screen.queryByText('Account Details')).toBeFalsy()
+
+        // find first account button and click it
+        const account2 = docBody.queryAllByRole('listitem')[1].firstChild
+        await act(() => userEvent.click(account2))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        expect(screen.queryAllByText('Account Details')).toBeTruthy()
+        expect(screen.getByText('Connected')).toBeInTheDocument()
+        expect(screen.queryByText('Tap to resolve')).toBeFalsy()
+        expect(screen.queryByRole('alert')).toBeFalsy()
+      })
+
+      it('3rd account', async () => {
+        expect(screen.queryByText('Account Details')).toBeFalsy()
+
+        // find first account button and click it
+        const account3 = docBody.queryAllByRole('listitem')[2].firstChild
+        await act(() => userEvent.click(account3))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        expect(screen.queryAllByText('Account Details')).toBeTruthy()
+        expect(screen.getByText('Connected')).toBeInTheDocument()
+        expect(screen.queryByText('Tap to resolve')).toBeFalsy()
+        expect(screen.queryByRole('alert')).toBeFalsy()
+        expect(screen.getByText(members[2].institution_url)).toBeInTheDocument()
+      })
+
+      it('4th account', async () => {
+        expect(screen.queryByText('Account Details')).toBeFalsy()
+
+        // find first account button and click it
+        const account4 = docBody.queryAllByRole('listitem')[3].firstChild
+        await act(() => userEvent.click(account4))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        expect(screen.queryAllByText('Account Details')).toBeTruthy()
+        expect(screen.getByText('Connected')).toBeInTheDocument()
+        expect(screen.queryByText('Tap to resolve')).toBeFalsy()
+        expect(screen.queryByRole('alert')).toBeFalsy()
+        expect(screen.getByText(members[0].institution_url)).toBeInTheDocument()
+      })
+
+      it('5th account', async () => {
+        expect(screen.queryByText('Account Details')).toBeFalsy()
+
+        // find first account button and click it
+        const account5 = docBody.queryAllByRole('listitem')[4].firstChild
+        await act(() => userEvent.click(account5))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        expect(screen.queryAllByText('Account Details')).toBeTruthy()
+        expect(screen.getByText('Connected')).toBeInTheDocument()
+        expect(screen.queryByText('Tap to resolve')).toBeFalsy()
+        expect(screen.queryByRole('alert')).toBeFalsy()
+        expect(screen.getByText(members[4].institution_url)).toBeInTheDocument()
+      })
+
+      it('6th account', async () => {
+        expect(screen.queryByText('Account Details')).toBeFalsy()
+
+        // find first account button and click it
+        const account6 = docBody.queryAllByRole('listitem')[5].firstChild
+        await act(() => userEvent.click(account6))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        expect(screen.queryAllByText('Account Details')).toBeTruthy()
+        expect(screen.getByText('Challenged')).toBeInTheDocument()
+        expect(screen.getByRole('alert')).toBeInTheDocument()
+        expect(screen.getByText(members[1].institution_url)).toBeInTheDocument()
+      })
+
+      it('7th account', async () => {
+        expect(screen.queryByText('Account Details')).toBeFalsy()
+
+        // find first account button and click it
+        const account7 = docBody.queryAllByRole('listitem')[6].firstChild
+        await act(() => userEvent.click(account7))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        expect(screen.queryAllByText('Account Details')).toBeTruthy()
+        expect(screen.getByText('Connected')).toBeInTheDocument()
+        expect(screen.queryByText('Tap to resolve')).toBeFalsy()
+        expect(screen.queryByRole('alert')).toBeFalsy()
+        expect(screen.getByText(members[2].institution_url)).toBeInTheDocument()
+      })
+
+      it('8th account', async () => {
+        expect(screen.queryByText('Account Details')).toBeFalsy()
+
+        // find first account button and click it
+        const account8 = docBody.queryAllByRole('listitem')[5].firstChild
+        await act(() => userEvent.click(account8))
+
+        expect(screen.queryAllByText('Account Details')).toBeTruthy()
+        expect(screen.getByText('Challenged')).toBeInTheDocument()
+        expect(screen.getByRole('alert')).toBeInTheDocument()
+        expect(screen.getByText(members[1].institution_url)).toBeInTheDocument()
+      })
+
+      it('9th account', async () => {
+        expect(screen.queryByText('Account Details')).toBeFalsy()
+
+        // find first account button and click it
+        const account9 = docBody.queryAllByRole('listitem')[8].firstChild
+        await act(() => userEvent.click(account9))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        expect(screen.queryAllByText('Account Details')).toBeTruthy()
+        expect(screen.getByText('Credentials expired')).toBeInTheDocument()
+        expect(screen.queryAllByText('Tap to resolve')).toBeTruthy()
+        expect(screen.queryByRole('alert')).toBeTruthy()
+        expect(screen.getByText(members[5].institution_url)).toBeInTheDocument()
+      })
+
+      it('10th account', async () => {
+        expect(screen.queryByText('Account Details')).toBeFalsy()
+
+        // find first account button and click it
+        const account10 = docBody.queryAllByRole('listitem')[9].firstChild
+        await act(() => userEvent.click(account10))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        expect(screen.queryAllByText('Account Details')).toBeTruthy()
+        expect(screen.getByText('Connected')).toBeInTheDocument()
+        expect(screen.queryByText('Tap to resolve')).toBeFalsy()
+        expect(screen.queryByRole('alert')).toBeFalsy()
+        expect(screen.getByText(members[8].institution_url)).toBeInTheDocument()
+      })
+
+      it('11th account', async () => {
+        expect(screen.queryByText('Account Details')).toBeFalsy()
+
+        // find first account button and click it
+        const account11 = docBody.queryAllByRole('listitem')[10].firstChild
+        await act(() => userEvent.click(account11))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        expect(screen.queryAllByText('Account Details')).toBeTruthy()
+        expect(screen.getByText('Incorrect information')).toBeInTheDocument()
+        expect(screen.queryAllByText('Tap to resolve')).toBeTruthy()
+        expect(screen.queryByRole('alert')).toBeTruthy()
+        expect(screen.getByText(members[3].institution_url)).toBeInTheDocument()
+      })
+    })
+    describe('account actions', () => {
+      it('1st account', async () => {
+        const account1 = docBody.queryAllByRole('listitem')[0].firstChild
+        await act(() => userEvent.click(account1))
+
+        const hideAccountButton = screen.queryAllByRole('button')[3]
+        const markAsClosedButton = screen.queryAllByRole('button')[4]
+
+        // Hide/unhide account
+        await act(() => userEvent.click(hideAccountButton))
+        expect(screen.getByText('Unhide Account')).toBeInTheDocument()
+
+        await act(() => userEvent.click(hideAccountButton))
+        expect(screen.getByText('Hide Account')).toBeInTheDocument()
+
+        // Close/open account
+        await act(() => userEvent.click(markAsClosedButton))
+        expect(screen.getByText('Mark as Closed')).toBeInTheDocument()
+        expect(screen.getByText('Confirm Mark as Closed')).toBeInTheDocument()
+        // console.log('buttons', screen.queryAllByRole('button'));
+
+        const confirmButton = screen.queryAllByRole('button')[2]
+        await act(() => userEvent.click(confirmButton))
+
+        // await userEvent.click(markAsClosedButton)
+        expect(screen.getByText('Mark as Open')).toBeInTheDocument()
+        expect(screen.queryByText('Confirm Mark as Closed')).not.toBeInTheDocument()
+
+        // Duplicate/merge account
+        expect(screen.queryByText('Mark as Duplicate')).not.toBeInTheDocument()
+      })
+      it('2nd account', async () => {
+        const account2 = docBody.queryAllByRole('listitem')[1].firstChild
+        await act(() => userEvent.click(account2))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        const hideAccountButton = screen.queryAllByRole('button')[5]
+        const markAsClosedButton = screen.queryAllByRole('button')[6]
+
+        // Hide/unhide account
+        await userEvent.click(hideAccountButton)
+
+        // Close/open account
+        await act(() => userEvent.click(markAsClosedButton))
+        expect(screen.getByText('Mark as Closed')).toBeInTheDocument()
+        expect(screen.getByText('Confirm Mark as Closed')).toBeInTheDocument()
+
+        const confirmButton = screen.queryAllByRole('button')[2]
+        await act(() => userEvent.click(confirmButton))
+
+        // await userEvent.click(markAsClosedButton)
+        expect(screen.getByText('Mark as Open')).toBeInTheDocument()
+        expect(screen.queryByText('Confirm Mark as Closed')).not.toBeInTheDocument()
+
+        // Duplicate/merge account
+        expect(screen.queryByText('Mark as Duplicate')).not.toBeInTheDocument()
+      })
+      it('3rd account', async () => {
+        const account3 = docBody.queryAllByRole('listitem')[2].firstChild
+        await act(() => userEvent.click(account3))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        const hideAccountButton = screen.queryAllByRole('button')[1]
+        const markAsClosedButton = screen.queryAllByRole('button')[2]
+        const markAsDuplicateButton = screen.queryAllByRole('button')[3]
+
+        // Hide/unhide account
+        await act(() => userEvent.click(hideAccountButton))
+        expect(screen.getByText('Unhide Account')).toBeInTheDocument()
+
+        await act(() => userEvent.click(hideAccountButton))
+
+        expect(screen.getByText('Hide Account')).toBeInTheDocument()
+
+        // Close/open account
+        await act(() => userEvent.click(markAsClosedButton))
+        expect(screen.getByText('Mark as Closed')).toBeInTheDocument()
+        expect(screen.getByText('Confirm Mark as Closed')).toBeInTheDocument()
+
+        const confirmButton = screen.queryAllByRole('button')[2]
+        await act(() => userEvent.click(confirmButton))
+
+        // await userEvent.click(markAsClosedButton)
+        expect(screen.getByText('Mark as Open')).toBeInTheDocument()
+        expect(screen.queryByText('Confirm Mark as Closed')).not.toBeInTheDocument()
+
+        // Duplicate/merge account
+        await act(() => userEvent.click(markAsDuplicateButton))
+        await act(() => userEvent.click(screen.queryAllByRole('button')[1]))
+        expect(screen.queryByText('Confirm merge')).toBeInTheDocument()
+      })
+      it('4th account', async () => {
+        const account4 = docBody.queryAllByRole('listitem')[3].firstChild
+        await act(() => userEvent.click(account4))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        const hideAccountButton = screen.queryAllByRole('button')[1]
+        const markAsClosedButton = screen.queryAllByRole('button')[2]
+
+        // Hide/unhide account
+        await act(() => userEvent.click(hideAccountButton))
+        expect(screen.getByText('Unhide Account')).toBeInTheDocument()
+
+        await act(() => userEvent.click(hideAccountButton))
+
+        expect(screen.getByText('Hide Account')).toBeInTheDocument()
+
+        // Close/open account
+        await act(() => userEvent.click(markAsClosedButton))
+        expect(screen.getByText('Mark as Closed')).toBeInTheDocument()
+        expect(screen.getByText('Confirm Mark as Closed')).toBeInTheDocument()
+
+        const confirmButton = screen.queryAllByRole('button')[2]
+        await act(() => userEvent.click(confirmButton))
+
+        // await userEvent.click(markAsClosedButton)
+        expect(screen.getByText('Mark as Open')).toBeInTheDocument()
+        expect(screen.queryByText('Confirm Mark as Closed')).not.toBeInTheDocument()
+
+        // Duplicate/merge account
+        expect(screen.queryByText('Mark as Duplicate')).not.toBeInTheDocument()
+      })
+      it('5th account', async () => {
+        const account5 = docBody.queryAllByRole('listitem')[4].firstChild
+        await act(() => userEvent.click(account5))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        const hideAccountButton = screen.queryAllByRole('button')[3]
+        const markAsClosedButton = screen.queryAllByRole('button')[4]
+
+        // Hide/unhide account
+        await act(() => userEvent.click(hideAccountButton))
+        expect(screen.getByText('Unhide Account')).toBeInTheDocument()
+
+        await act(() => userEvent.click(hideAccountButton))
+
+        expect(screen.getByText('Hide Account')).toBeInTheDocument()
+
+        // Close/open account
+        await act(() => userEvent.click(markAsClosedButton))
+        expect(screen.getByText('Mark as Closed')).toBeInTheDocument()
+        expect(screen.getByText('Confirm Mark as Closed')).toBeInTheDocument()
+
+        const confirmButton = screen.queryAllByRole('button')[2]
+        await act(() => userEvent.click(confirmButton))
+
+        // await userEvent.click(markAsClosedButton)
+        expect(screen.getByText('Mark as Open')).toBeInTheDocument()
+        expect(screen.queryByText('Confirm Mark as Closed')).not.toBeInTheDocument()
+
+        // Duplicate/merge account
+        expect(screen.queryByText('Mark as Duplicate')).not.toBeInTheDocument()
+      })
+      it('6th account', async () => {
+        const account6 = docBody.queryAllByRole('listitem')[5].firstChild
+        await act(() => userEvent.click(account6))
+
+        const accountDetailsTab = docBody.queryAllByRole('tab')[1]
+        await act(() => userEvent.click(accountDetailsTab))
+
+        const hideAccountButton = screen.queryAllByRole('button')[4]
+        const markAsClosedButton = screen.queryAllByRole('button')[5]
+        const markAsDuplicateButton = screen.queryAllByRole('button')[6]
+
+        // Hide/unhide account
+        await act(() => userEvent.click(hideAccountButton))
+        // docBody.debug(undefined, Infinity)
+        expect(screen.getByText('Unhide Account')).toBeInTheDocument()
+
+        await act(() => userEvent.click(hideAccountButton))
+
+        expect(screen.getByText('Hide Account')).toBeInTheDocument()
+
+        // Close/open account
+        await act(() => userEvent.click(markAsClosedButton))
+        expect(screen.getByText('Mark as Closed')).toBeInTheDocument()
+        expect(screen.getByText('Confirm Mark as Closed')).toBeInTheDocument()
+
+        const confirmButton = screen.queryAllByRole('button')[2]
+        await act(() => userEvent.click(confirmButton))
+
+        // await userEvent.click(markAsClosedButton)
+        expect(screen.getByText('Mark as Open')).toBeInTheDocument()
+        expect(screen.queryByText('Confirm Mark as Closed')).not.toBeInTheDocument()
+
+        // Duplicate/merge account
+        await act(() => userEvent.click(markAsDuplicateButton))
+        await act(() => userEvent.click(screen.queryAllByRole('button')[1]))
+        expect(screen.queryByText('Confirm merge')).toBeInTheDocument()
+      })
+    })
+  })
+})

package/src/accounts/api/AccountApi.ts

@@ -0,0 +1,74 @@
+import Fetch from '../../common/utils/Fetch'
+
+import { ApiEndpoints } from '../../common/constants'
+import type { Account } from '../../common'
+
+export class AccountApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  createAccount = async (account: Account) => {
+    return this.fetchInstance
+      .post(ApiEndpoints.ACCOUNTS, account)
+      .then((data) => data.account)
+      .catch((error) => error)
+  }
+
+  deleteAccount = async (accountGuid: string) => {
+    return this.fetchInstance
+      .delete(`${ApiEndpoints.ACCOUNTS}/${accountGuid}`)
+      .catch((error) => error)
+  }
+
+  getAccounts = async () => {
+    return this.fetchInstance
+      .get(ApiEndpoints.ACCOUNTS)
+      .then((data) => data.accounts)
+      .catch((error) => error)
+  }
+
+  getInstitutions = async () => {
+    return this.fetchInstance
+      .get(ApiEndpoints.INSTITUTIONS)
+      .then((data) => data)
+      .catch((error) => error)
+  }
+
+  getMembers = async () => {
+    return this.fetchInstance
+      .get(ApiEndpoints.MEMBERS)
+      .then((data) => data.members)
+      .catch((error) => error)
+  }
+
+  getMonthlyAccountBalances = async (guid: string) => {
+    return this.fetchInstance
+      .get(`${ApiEndpoints.ACCOUNTS}/${guid}/monthly_account_balances`)
+      .then((data) => data.monthly_account_balances)
+      .catch((error) => error)
+  }
+
+  mergeAccounts = async (accountGuids: string[]) => {
+    return this.fetchInstance
+      .put(`${ApiEndpoints.ACCOUNTS}/merge`, { accounts: accountGuids })
+      .then((data) => data)
+      .catch((error) => error)
+  }
+
+  refreshAllMembers = async () => {
+    return this.fetchInstance
+      .get(`${ApiEndpoints.MEMBERS}/refresh_all`)
+      .then((data) => data)
+      .catch((error) => error)
+  }
+
+  updateAccount = async (account: Account) => {
+    return this.fetchInstance
+      .put(`${ApiEndpoints.ACCOUNTS}/${account.guid}`, account)
+      .then((data) => data.account)
+      .catch((error) => error)
+  }
+}

package/src/accounts/api/__mocks__/AccountApi.ts

@@ -0,0 +1,46 @@
+import accounts from '../../../../mock/Accounts'
+import institutions from '../../../../mock/data/Institutions.json'
+import members from '../../../../mock/data/Members.json'
+import balances from '../../../../mock/data/MonthlyAccountBalances.json'
+
+export class AccountApi {
+  createAccount(account) {
+    return account
+  }
+
+  deleteAccount() {
+    return null
+  }
+
+  getAccounts() {
+    return accounts
+  }
+
+  getInstitutions() {
+    return institutions
+  }
+
+  getMembers() {
+    return members
+  }
+
+  getMonthlyAccountBalances() {
+    return balances
+  }
+
+  mergeAccounts(accountGuids: string[]) {
+    const firstAccount = accounts.findIndex((account) => account.guid === accountGuids[0])
+    return accounts[firstAccount]
+  }
+
+  refreshAllMembers() {
+    return null
+  }
+
+  updateAccount(account) {
+    return {
+      ...account,
+      name: account.user_name,
+    }
+  }
+}