Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure every page has a basic component test #46

Merged
merged 6 commits into from
Oct 2, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/javascript/components/accounts/AccountList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import '../../stylesheets/common.scss'
import '../../stylesheets/accounts.scss'

const AccountList = () => {
const { activeGroupedAccounts } = useGroupedAccounts()
const { isLoading, activeGroupedAccounts } = useGroupedAccounts()

const renderAccountGroups = () => {
if (activeGroupedAccounts == undefined) return <></>
Expand All @@ -29,7 +29,7 @@ const AccountList = () => {

return (
<div>
<PageHeader title="my accounts">
<PageHeader title="my accounts" isLoading={isLoading}>
<NewModelButtons
modelTypes={[
ModelType.AccountSavings,
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/components/common/PageHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import '../../stylesheets/common.scss'

type PageHeaderProps = {
isLoading: boolean
errorString: string | undefined
errorString?: string
title: string
children?: ReactNode
}
Expand Down
4 changes: 3 additions & 1 deletion app/javascript/components/import/ImportHistoryPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
40 changes: 23 additions & 17 deletions app/javascript/components/import/ImportPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ const ImportPage = () => {
const [toTransactions, setToTransaction] = useState(false)
const [createBankStatement] = useCreateBankStatementMutation()

const isLoading =
!currentAccount || !transactions || !groupedCategories || !subcategories

const importTransactions = () => {
const ofXTransactions = transactions.filter((t) => t.import)
createBankStatement({
Expand All @@ -38,23 +41,13 @@ const ImportPage = () => {
return <Navigate to="/transactions" />
}

if (
!currentAccount ||
!transactions ||
!groupedCategories ||
!subcategories
) {
return <div />
}
const renderImportTable = () => {
if (isLoading) {
return <div />
}

return (
<div>
<PageHeader title="import transactions" apiStatus={{}}>
<Button onClick={importTransactions}>
<i className="fa fa-file-text-o" /> Import
</Button>
</PageHeader>
<div className="container import">
return (
<>
<h5 data-testid="import-title">
into <strong>{currentAccount.name}</strong> account
</h5>
Expand All @@ -63,7 +56,20 @@ const ImportPage = () => {
groupedCategories={groupedCategories}
subcategories={subcategories}
/>
</div>
</>
)
}

return (
<div>
<PageHeader title="import transactions" isLoading={isLoading}>
{!isLoading && (
<Button onClick={importTransactions}>
<i className="fa fa-file-text-o" /> Import
</Button>
)}
</PageHeader>
<div className="container import">{renderImportTable()}</div>
</div>
)
}
Expand Down
14 changes: 7 additions & 7 deletions app/javascript/components/patterns/PatternList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@ import { showFormModal } from 'stores/formSlice'
import { useGetPatternsQuery } from 'stores/patternApi'
import { useGroupedCategories } from 'hooks/useGroupedCategories'
import { ModelType } from 'types/models'
import { RootState } from 'stores/store'

import '../../stylesheets/common.scss'
import '../../stylesheets/patterns.scss'
import { RootState } from 'stores/store'

export const PatternList = () => {
const currentAccount = useSelector(
(state: RootState) => state.currentStore.currentAccount,
)
const {
data: patterns,
isLoading,
} = useGetPatternsQuery(currentAccount?.id || 0, { skip: !currentAccount })
const { data: patterns, isLoading } = useGetPatternsQuery(
currentAccount?.id || 0,
{ skip: !currentAccount },
)
const { groupedCategories, isSuccess: isSuccessGC } = useGroupedCategories()
const dispatch = useDispatch()

Expand All @@ -40,7 +40,7 @@ export const PatternList = () => {

return (
<div>
<PageHeader title="my patterns" apiStatus={isLoading ? 'loading' : ''}>
<PageHeader title="my patterns" isLoading={isLoading}>
<Button onClick={newPattern}>
<i className="fas fa-plus" /> New
</Button>
Expand All @@ -57,7 +57,7 @@ export const PatternList = () => {
/>
)}
</div>
{groupedCategories && isSuccessGC &&(
{groupedCategories && isSuccessGC && (
<PatternModal groupedCategories={groupedCategories} />
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/components/transactions/TransactionList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const TransactionList = () => {

return (
<div>
<PageHeader title="my transactions" apiStatus={{}}>
<PageHeader title="my transactions" isLoading={false}>
<Button onClick={() => setShowImportModal(true)}>
<i className="fa fa-file-text-o" /> Import
</Button>
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/stores/errorMiddleware.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const rtkQueryErrorLogger: Middleware =
if (action?.payload) {
const errorPayload: ErrorPayload = action.payload as ErrorPayload
console.log(
`Api Error: (${errorPayload.data.status}) ${errorPayload.data.error}`,
`Api Error: (${errorPayload.data?.status}) ${errorPayload.data?.error}`,
)
// api.dispatch()
} else {
Expand Down
18 changes: 9 additions & 9 deletions app/javascript/types/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ type BankStatementTransaction = {
account_id: number
date: string
amount: number
category_id: number
subcategory_id: number
category_id?: number
subcategory_id?: number
notes?: string
memo: string
}
Expand Down Expand Up @@ -105,21 +105,21 @@ export type TransactionRequest = {
account_id: number
date: string
amount: number
category_id: number
subcategory_id: number
category_id?: number
subcategory_id?: number
notes?: string
memo: string
memo?: string
transaction_type: string
matching_transaction_id?: number
}

export type OfxTransactionResponse = {
account_id: number
date: string
memo: string
memo?: string
amount: number
category_id: number
subcategory_id: number
category_id?: number
subcategory_id?: number
notes?: string
import: boolean
duplicate: boolean
Expand All @@ -135,7 +135,7 @@ export type MatchingTransactionResponse = {
export type TransactionResponse = TransactionRequest & {
id: number
balance: number
matching_transaction: MatchingTransactionResponse
matching_transaction?: MatchingTransactionResponse
}

export type IncomeExpenseReportResponse = {
Expand Down
8 changes: 4 additions & 4 deletions app/javascript/types/models.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export type AccountFormInput = AccountBase & {
}

export type AccountType = {
id: string
id: number
code: string
name: string
}
Expand Down Expand Up @@ -117,10 +117,10 @@ export type SubcategoryFormInput = SubcategoryBase & {
export type OfxTransaction = {
accountId: number
date: string
memo: string
memo?: string
amount: number
categoryId: number
subcategoryId: number
categoryId?: number
subcategoryId?: number
notes?: string
import: boolean
duplicate: boolean
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"private": true,
"scripts": {
"test": "jest",
"test:components": "vitest run spec/javascript/components/categories/CategoryList.test.tsx && jest spec/javascript/components/common/date-picker",
"test:components": "vitest run spec/javascript/components/*/*.test.tsx && jest spec/javascript/components/common/date-picker",
"test:utils": "jest spec/javascript/actions && jest spec/javascript/stores && jest spec/javascript/transformers && jest spec/javascript/util"
},
"jest": {
Expand Down
54 changes: 54 additions & 0 deletions spec/javascript/components/accounts/AccountList.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from 'react'
import store from 'stores/store'
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 { accountsMock, accountTypesMock } from 'mocks/accountMocks'

import AccountList from 'components/accounts/AccountList'

const handlers = [
http.get('/api/account_types', async () => {
return HttpResponse.json(accountTypesMock)
}),
http.get('/api/accounts', async () => {
return HttpResponse.json(accountsMock)
}),
]
const server = setupServer(...handlers)

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

test('renders a list of accounts', async () => {
render(
<Provider store={store}>
<AccountList />
</Provider>,
)

// page header
const pageTitle = screen.getByRole('heading', { level: 1 })
expect(pageTitle.textContent).toEqual('my accounts')

// new button
expect(screen.getByText('New')).toBeDefined()

await waitFor(() => {
// account types
const categoryTypeHeadings = screen.getAllByRole('heading', { level: 5 })
expect(categoryTypeHeadings.length).toEqual(2)
expect(categoryTypeHeadings.at(0)?.textContent).toEqual('Savings Accounts')
expect(categoryTypeHeadings.at(1)?.textContent).toEqual('Loan Accounts')

// accounts 1
expect(screen.getByText('AccountOne')).toBeDefined()
expect(screen.getByText('BankOne')).toBeDefined()

// account 2
expect(screen.getByText('AccountTwo')).toBeDefined()
})
})
62 changes: 0 additions & 62 deletions spec/javascript/components/accounts/account-list.test.js

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
categoryTypesMock,
categoriesMock,
subcategoriesMock,
} from './categoryMocks'
} from 'mocks/categoryMocks'

import { CategoryList } from 'components/categories/CategoryList.tsx'

Expand Down
Loading