Add basic component test for ImportHistoryPage

app/javascript/components/import/ImportHistoryPage.tsx

@@ -18,9 +18,11 @@ const ImportHistoryPage = () => {
     { skip: !currentAccount },
   )
 
+  const isLoading = !currentAccount || !bankStatements
+
   return (
     <div className="import-history">
-      <PageHeader title="import history" apiStatus={{}} />
+      <PageHeader title="import history" isLoading={isLoading} />
       <SearchCriteria filters={[{ name: ACCOUNT_FILTER }]} />
       {bankStatements && (
         <div className="container">

spec/javascript/components/import/ImportHIstoryPage.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { expect, test, beforeAll, afterEach, afterAll } from 'vitest'
+
+import store from 'stores/store'
+import { accountsMock, accountTypesMock } from 'mocks/accountMocks'
+import { bankStatementsMock } from 'mocks/bankStatementMocks'
+import ImportHistoryPage from 'components/import/ImportHistoryPage'
+
+const handlers = [
+  http.get('/api/account_types', async () => {
+    return HttpResponse.json(accountTypesMock)
+  }),
+  http.get('/api/accounts', async () => {
+    return HttpResponse.json(accountsMock)
+  }),
+  http.get('/api/accounts/1/bank_statements', async () => {
+    return HttpResponse.json(bankStatementsMock)
+  }),
+]
+const server = setupServer(...handlers)
+
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())
+
+test('renders a list of accounts', async () => {
+  render(
+    <Provider store={store}>
+      <ImportHistoryPage />
+    </Provider>,
+  )
+
+  // page header
+  const pageTitle = screen.getByRole('heading', { level: 1 })
+  expect(pageTitle.textContent).toEqual('import history')
+
+  await waitFor(() => {
+    // delete button for each row
+    expect(screen.getAllByText('Delete').length).toEqual(2)
+
+    // bank statement 1
+    expect(screen.getByText('19-Oct-2001')).toBeDefined()
+    expect(screen.getByText('one.ofx')).toBeDefined()
+    expect(screen.getByText('6')).toBeDefined()
+
+    // bank statement 2
+    expect(screen.getByText('20-Oct-2001')).toBeDefined()
+    expect(screen.getByText('two.ofx')).toBeDefined()
+    expect(screen.getByText('8')).toBeDefined()
+  })
+})

spec/javascript/mocks/bankStatementMocks.ts

@@ -1,3 +1,6 @@
+import { BankStatementResponse } from 'types/api'
+import { BankStatement } from 'types/models'
+
 export const ofxTransactions = [
   {
     accountId: 1,
@@ -22,3 +25,24 @@ export const ofxTransactions = [
     subcategoryId: 46,
   },
 ]
+
+const bankStatements: BankStatementResponse[] = [
+  {
+    id: 123,
+    account_id: 1,
+    date: '2001-10-19',
+    file_name: 'one.ofx',
+    transaction_count: 6,
+  },
+  {
+    id: 456,
+    account_id: 1,
+    date: '2001-10-20',
+    file_name: 'two.ofx',
+    transaction_count: 8,
+  },
+]
+
+export const bankStatementsMock = {
+  bank_statements: bankStatements,
+}