update new tests

ripple · Jul 5, 2024 · d81b252 · d81b252
1 parent c662fbb
commit d81b252
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 49 deletions.
diff --git a/src/containers/shared/components/Transaction/OracleDelete/TableDetail.tsx b/src/containers/shared/components/Transaction/OracleDelete/TableDetail.tsx
@@ -7,7 +7,7 @@ export const TableDetail = ({
 }: TransactionTableDetailProps<OracleDelete>) => {
   const { t } = useTranslation()
   return (
-    <div className="oracle-document-id">
+    <div className="oracle-document-id" data-testid="oracle-document-id">
       <span className="label">{t('oracle_document_id')}: </span>
       <span className="case-sensitive">{tx.OracleDocumentID}</span>
     </div>

diff --git a/src/containers/shared/components/Transaction/OracleDelete/test/OracleDeleteSimple.test.tsx b/src/containers/shared/components/Transaction/OracleDelete/test/OracleDeleteSimple.test.tsx
@@ -1,12 +1,13 @@
-import { createSimpleWrapperFactory, expectSimpleRowText } from '../../test'
+import { screen, cleanup } from '@testing-library/react'
+import { createSimpleRenderFactory, expectSimpleRowText } from '../../test'
 import { Simple } from '../Simple'
 import OracleDelete from './mock_data/OracleDelete.json'
 
-const createWrapper = createSimpleWrapperFactory(Simple)
+const renderComponent = createSimpleRenderFactory(Simple)
 describe('OracleDelete: Simple', () => {
+  afterEach(cleanup)
   it('renders', () => {
-    const wrapper = createWrapper(OracleDelete)
-    expectSimpleRowText(wrapper, 'oracle-document-id', '1')
-    wrapper.unmount()
+    renderComponent(OracleDelete)
+    expectSimpleRowText(screen, 'oracle-document-id', '1')
   })
 })
diff --git a/...ntainers/shared/components/Transaction/OracleDelete/test/OracleDeleteTableDetail.test.tsx b/...ntainers/shared/components/Transaction/OracleDelete/test/OracleDeleteTableDetail.test.tsx
@@ -1,13 +1,16 @@
-import { createTableDetailWrapperFactory } from '../../test'
+import { screen, cleanup } from '@testing-library/react'
+import { createTableDetailRenderFactory } from '../../test'
 import { TableDetail } from '../TableDetail'
 import OracleDelete from './mock_data/OracleDelete.json'
 
-const createWrapper = createTableDetailWrapperFactory(TableDetail)
+const renderComponent = createTableDetailRenderFactory(TableDetail)
 
 describe('OracleDelete: TableDetail', () => {
+  afterEach(cleanup)
   it('renders', () => {
-    const wrapper = createWrapper(OracleDelete)
-    expect(wrapper).toHaveText('oracle_document_id: 1')
-    wrapper.unmount()
+    renderComponent(OracleDelete)
+    expect(screen.getByTestId('oracle-document-id')).toHaveTextContent(
+      `oracle_document_id: 1`,
+    )
   })
 })
diff --git a/src/containers/shared/components/Transaction/OracleSet/TableDetail.tsx b/src/containers/shared/components/Transaction/OracleSet/TableDetail.tsx
@@ -12,35 +12,31 @@ export const TableDetail = ({
   const { t } = useTranslation()
   const language = useLanguage()
   return (
-    <>
+    <div data-testid="table-detail">
       <div className="oracle-document-id">
         <span className="label">{t('oracle_document_id')}: </span>
         <span className="case-sensitive">{tx.oracleDocumentID}</span>
       </div>
-      <>
-        {tx.provider && (
-          <>
-            <span className="label">{t('provider')}: </span>
-            <span className="case-sensitive">{tx.provider}</span>
-          </>
-        )}
-        {tx.assetClass && (
-          <>
-            <span className="label">{t('asset_class')}: </span>
-            <span className="case-sensitive">{tx.assetClass}</span>
-          </>
-        )}
+      {tx.provider && (
+        <>
+          <span className="label">{t('provider')}: </span>
+          <span className="case-sensitive">{tx.provider}</span>
+        </>
+      )}
+      {tx.assetClass && (
         <>
-          <span className="label">{t('last_update_time')}: </span>
-          <span className="case-sensitive">
-            {localizeDate(
-              new Date(tx.lastUpdateTime * MILLIS_PER_SECOND),
-              language,
-              DATE_OPTIONS,
-            )}
-          </span>
+          <span className="label">{t('asset_class')}: </span>
+          <span className="case-sensitive">{tx.assetClass}</span>
         </>
-      </>
+      )}
+      <span className="label">{t('last_update_time')}: </span>
+      <span className="case-sensitive">
+        {localizeDate(
+          new Date(tx.lastUpdateTime * MILLIS_PER_SECOND),
+          language,
+          DATE_OPTIONS,
+        )}
+      </span>
       <div className="trading-pair">
         <span className="label">{t('trading_pairs')}: </span>
         {tx.priceDataSeries.map((priceDataObj, index) => (
@@ -58,6 +54,6 @@ export const TableDetail = ({
           </>
         ))}
       </div>
-    </>
+    </div>
   )
 }
diff --git a/src/containers/shared/components/Transaction/OracleSet/test/OracleSetSimple.test.tsx b/src/containers/shared/components/Transaction/OracleSet/test/OracleSetSimple.test.tsx
@@ -1,24 +1,25 @@
-import { createSimpleWrapperFactory, expectSimpleRowText } from '../../test'
+import { cleanup, screen } from '@testing-library/react'
+import { createSimpleRenderFactory, expectSimpleRowText } from '../../test'
 import { Simple } from '../Simple'
 import OracleSet from './mock_data/OracleSet.json'
 
-const createWrapper = createSimpleWrapperFactory(Simple)
+const renderComponent = createSimpleRenderFactory(Simple)
 describe('OracleSet: Simple', () => {
+  afterEach(cleanup)
   it('renders', () => {
-    const wrapper = createWrapper(OracleSet)
-    expectSimpleRowText(wrapper, 'oracle-document-id', '1')
-    expectSimpleRowText(wrapper, 'provider', 'provider')
+    renderComponent(OracleSet)
+    expectSimpleRowText(screen, 'oracle-document-id', '1')
+    expectSimpleRowText(screen, 'provider', 'provider')
     expectSimpleRowText(
-      wrapper,
+      screen,
       'last-update-time',
       'May 13, 2024 at 9:05:10 PM',
     )
-    expectSimpleRowText(wrapper, 'asset-class', 'currency')
+    expectSimpleRowText(screen, 'asset-class', 'currency')
     expectSimpleRowText(
-      wrapper,
+      screen,
       'trading-pairs',
       '74.2\uE900 XRP/USD1.03BTC/AUDT',
     )
-    wrapper.unmount()
   })
 })
diff --git a/src/containers/shared/components/Transaction/OracleSet/test/OracleSetTableDetail.test.tsx b/src/containers/shared/components/Transaction/OracleSet/test/OracleSetTableDetail.test.tsx
@@ -1,19 +1,20 @@
-import { createTableDetailWrapperFactory } from '../../test'
+import { cleanup, screen } from '@testing-library/react'
+import { createTableDetailRenderFactory } from '../../test'
 import { TableDetail } from '../TableDetail'
 import OracleSet from './mock_data/OracleSet.json'
 
-const createWrapper = createTableDetailWrapperFactory(TableDetail)
+const renderComponent = createTableDetailRenderFactory(TableDetail)
 
 describe('OracleDelete: TableDetail', () => {
+  afterEach(cleanup)
   it('renders', () => {
-    const wrapper = createWrapper(OracleSet)
-    expect(wrapper).toHaveText(
+    renderComponent(OracleSet)
+    expect(screen.getByTestId('table-detail')).toHaveTextContent(
       'oracle_document_id: 1' +
         'provider: provider' +
         'asset_class: currency' +
         'last_update_time: May 13, 2024 at 9:05:10 PM' +
         'trading_pairs: 74.2\uE900 XRP/USD, 1.03BTC/AUDT',
     )
-    wrapper.unmount()
   })
 })