[WIP] Ledger page test

Author: mvadari

src/containers/Ledger/LedgerTransactionTable.tsx

@@ -17,7 +17,10 @@ export const LedgerTransactionTable = ({
   return (
     <>
       <ol className="transaction-table">
-        <li className="transaction-li transaction-li-header">
+        <li
+          className="transaction-li transaction-li-header"
+          data-testid="transaction-li-header"
+        >
           <div className="col col-type">{t('transaction_type')}</div>
           <div className="col col-account">{t('account')}</div>
           <div className="col col-sequence">{t('sequence_number_short')}</div>

src/containers/Ledger/index.tsx

@@ -93,7 +93,7 @@ export const Ledger = () => {
     const nextIndex = LedgerIndex + 1
     const date = new Date(data.close_time)
     return (
-      <div className="ledger-header">
+      <div className="ledger-header" data-testid="ledger-header">
         <div className="ledger-nav">
           <RouteLink to={LEDGER_ROUTE} params={{ identifier: previousIndex }}>
             <div className="previous">

src/containers/Ledger/test/Ledger.test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme'
+import { render, screen, cleanup } from '@testing-library/react'
 import { Route } from 'react-router'
 import mockLedger from './storedLedger.json'
 import i18n from '../../../i18n/testConfig'
@@ -20,127 +20,117 @@ jest.mock('../../../rippled', () => {
 const mockedGetLedger = getLedger
 
 describe('Ledger container', () => {
-  const createWrapper = (identifier = 38079857) =>
-    mount(
+  const renderComponent = (identifier = 38079857) =>
+    render(
       <QuickHarness i18n={i18n} initialEntries={[`/ledgers/${identifier}`]}>
         <Route path="/ledgers/:identifier" element={<Ledger />} />
       </QuickHarness>,
     )
 
   afterEach(() => {
+    cleanup()
     mockedGetLedger.mockReset()
   })
 
   it('renders without crashing', () => {
-    const wrapper = createWrapper()
-    wrapper.unmount()
+    renderComponent()
   })
 
   it('renders loading', () => {
-    const wrapper = createWrapper()
-    expect(wrapper.find('.loader').length).toBe(1)
-    wrapper.unmount()
+    renderComponent()
+    expect(screen.queryAllByTestId('loader')).toBeDefined()
   })
 
   it('renders ledger navbar', async () => {
     mockedGetLedger.mockImplementation(() => Promise.resolve(mockLedger))
 
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
-    wrapper.update()
 
-    const header = wrapper.find('.ledger-header')
-    expect(header.length).toBe(1)
-    expect(header.find('.ledger-nav').length).toBe(1)
-    expect(header.find('.ledger-nav a').length).toBe(2)
-    wrapper.unmount()
+    const header = screen.queryAllByTestId('ledger-header')
+    expect(header).toBeDefined()
+    expect(header.queryByTestId('ledger-nav')).toBeDefined()
+    expect(header.queryByTestId('ledger-nav a')).toHaveLength(2)
   })
 
   it('renders ledger summary', async () => {
     mockedGetLedger.mockImplementation(() => Promise.resolve(mockLedger))
 
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
-    wrapper.update()
 
-    const summary = wrapper.find('.ledger-header .ledger-info')
+    const summary = screen.queryAllByTestId('ledger-info')
 
-    expect(summary.length).toBe(1)
-    expect(summary.find('.ledger-cols').length).toBe(1)
-    expect(summary.find('.ledger-col').length).toBe(3)
-    expect(summary.find('.ledger-index').length).toBe(1)
-    expect(summary.find('.closed-date').length).toBe(1)
-    expect(summary.find('.ledger-hash').length).toBe(1)
-
-    wrapper.unmount()
+    expect(summary).toBeDefined()
+    expect(summary.queryByTestId('ledger-cols')).toBeDefined()
+    expect(summary.queryByTestId('ledger-col')).toHaveLength(3)
+    expect(summary.queryByTestId('ledger-index')).toBeDefined()
+    expect(summary.queryByTestId('closed-date')).toBeDefined()
+    expect(summary.queryByTestId('ledger-hash')).toBeDefined()
   })
 
   it('renders transaction table header', async () => {
     mockedGetLedger.mockImplementation(() => Promise.resolve(mockLedger))
 
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
-    wrapper.update()
-
-    const table = wrapper.find('.transaction-table')
-    expect(table.length).toBe(1)
-    expect(table.find('.transaction-li-header').length).toBe(1)
-    expect(table.find('.transaction-li-header .col-type').length).toBe(1)
-    expect(table.find('.transaction-li-header .col-account').length).toBe(1)
-    wrapper.unmount()
+
+    const table = screen.queryByTitle('transaction-table')
+    expect(table).toBeDefined()
+    expect(table.queryByTestId('transaction-li-header')).toBeDefined()
+    expect(table.queryByTestId('transaction-li-header .col-type')).toHaveLength(
+      1,
+    )
+    expect(
+      table.queryByTestId('transaction-li-header .col-account'),
+    ).toBeDefined()
   })
 
   it('renders all transactions', async () => {
     mockedGetLedger.mockImplementation(() => Promise.resolve(mockLedger))
 
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
-    wrapper.update()
 
-    const table = wrapper.find('.transaction-table')
-    expect(table.length).toBe(1)
-    expect(table.find('.transaction-li').length).toBe(
+    const table = screen.queryByTitle('transaction-table')
+    expect(table).toBeDefined()
+    expect(table.queryByTestId('transaction-li')).toHaveLength(
       mockLedger.transactions.length + 1, // include the header
     )
-    wrapper.unmount()
   })
 
   it('renders 404 page on no match', async () => {
     mockedGetLedger.mockImplementation(() =>
       Promise.reject(new RippledError('ledger not found', 404)),
     )
 
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
-    wrapper.update()
 
-    expect(wrapper.find('.no-match .title').text()).toEqual('ledger_not_found')
-    wrapper.unmount()
+    expect(screen.queryByTitle('no-match')).toHaveTextContent(
+      'ledger_not_found',
+    )
   })
 
   it('renders server error', async () => {
     mockedGetLedger.mockImplementation(() =>
       Promise.reject(new RippledError('ledger failed', 500)),
     )
 
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
-    wrapper.update()
 
-    expect(wrapper.find('.no-match .title').text()).toEqual('generic_error')
-    wrapper.unmount()
+    expect(screen.getByTitle('no-match')).toHaveTextContent('generic_error')
   })
 
   it('renders invalid id error', async () => {
     mockedGetLedger.mockImplementation(() =>
       Promise.reject(new RippledError('invalid ledger index/hash', 400)),
     )
 
-    const wrapper = createWrapper('aaaa')
+    renderComponent('aaaa')
     await flushPromises()
-    wrapper.update()
 
-    expect(wrapper.find('.no-match .title').text()).toEqual('invalid_ledger_id')
-    wrapper.unmount()
+    expect(screen.getByTitle('no-match')).toHaveTextContent('invalid_ledger_id')
   })
 })

src/containers/shared/components/Loader.tsx

@@ -6,7 +6,7 @@ import '../css/loader.scss'
 export const Loader: FC<{ className?: string }> = ({ className }) => {
   const { t } = useTranslation()
   return (
-    <div className={`loader ${className}`}>
+    <div className={`loader ${className}`} data-testid="loader">
       <img src={LoaderPath} alt={t('loading')} title="loader" />
     </div>
   )