test: begin the switch to RTL

package.json

@@ -60,6 +60,8 @@
     "@babel/eslint-parser": "^7.22.6",
     "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.22.15",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
     "@types/create-hash": "^1.2.2",
     "@types/enzyme": "^3.10.12",
     "@types/jest": "^26.0.24",
@@ -68,6 +70,8 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.9",
     "@types/react-redux": "^7.1.22",
+    "@types/react-router-dom": "^5.1.8",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^6.18.0",
     "@typescript-eslint/parser": "^6.21.0",
     "babel-jest": "^29.7.0",
@@ -148,5 +152,8 @@
   "engines": {
     "node": ">=18.0.0 <19",
     "npm": ">=7.14.0 <10.0.0"
+  },
+  "optionalDependencies": {
+    "@esbuild/linux-x64": "^0.20.0"
   }
 }

src/containers/Amendments/amendmentsTable.scss

@@ -1,7 +1,7 @@
 @import '../shared/css/variables';
 @import '../shared/css/table';
 
-.amendments-page{
+.amendments-page {
   .summary {
     padding: 0 16px;
     margin-top: 100px;
@@ -100,7 +100,9 @@
       }
     }
 
-    .version, .enabled, .consensus {
+    .version,
+    .enabled,
+    .consensus {
       max-width: 70px;
       overflow-wrap: break-word;
       @include for-size(tablet-portrait-up) {

src/containers/Amendments/test/mockAmendments.json

@@ -1,4 +1,3 @@
-
 {
   "amendments": [
     {

src/containers/Network/ValidatorsTable.jsx

@@ -146,7 +146,7 @@ class ValidatorsTable extends Component {
 }
 
 ValidatorsTable.propTypes = {
-  validators: PropTypes.arrayOf(PropTypes.shape({})),
+  validators: PropTypes.shape({}),
   t: PropTypes.func.isRequired,
   metrics: PropTypes.shape({}).isRequired,
 }

src/containers/Transactions/test/Meta.test.tsx

@@ -34,35 +34,35 @@ describe('TransactionMeta container', () => {
     expect(w.find('li').length).toBe(23)
 
     expect(w.find('li').at(0).html()).toBe(
-      '<li class="meta-line">owned_account_root <a title="rUmustd4TbkjaEuS7S1damozpBEREgRz9z" class="account" href="/accounts/rUmustd4TbkjaEuS7S1damozpBEREgRz9z">rUmustd4TbkjaEuS7S1damozpBEREgRz9z</a><ul class="meta-line"><li>Balance decreased by<b>-\uE90050.324316<small>XRP</small></b>from<b>\uE9002,910.704988<small>XRP</small></b>to<b>\uE9002,860.380672<small>XRP</small></b></li></ul></li>',
+      '<li class="meta-line">owned_account_root <a data-testid="account" title="rUmustd4TbkjaEuS7S1damozpBEREgRz9z" class="account" href="/accounts/rUmustd4TbkjaEuS7S1damozpBEREgRz9z">rUmustd4TbkjaEuS7S1damozpBEREgRz9z</a><ul class="meta-line"><li>Balance decreased by<b>-\uE90050.324316<small>XRP</small></b>from<b>\uE9002,910.704988<small>XRP</small></b>to<b>\uE9002,860.380672<small>XRP</small></b></li></ul></li>',
     )
 
     expect(w.find('li').at(1).html()).toBe(
       '<li>Balance decreased by<b>-\uE90050.324316<small>XRP</small></b>from<b>\uE9002,910.704988<small>XRP</small></b>to<b>\uE9002,860.380672<small>XRP</small></b></li>',
     )
 
     expect(w.find('li').at(2).html()).toBe(
-      '<li class="meta-line">owned_account_root <a title="rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh" class="account" href="/accounts/rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh">rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh</a><ul class="meta-line"><li>Balance decreased by<b>-\uE9000.000012<small>XRP</small></b>from<b>\uE90098.595124<small>XRP</small></b>to<b>\uE90098.595112<small>XRP</small></b></li></ul></li>',
+      '<li class="meta-line">owned_account_root <a data-testid="account" title="rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh" class="account" href="/accounts/rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh">rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh</a><ul class="meta-line"><li>Balance decreased by<b>-\uE9000.000012<small>XRP</small></b>from<b>\uE90098.595124<small>XRP</small></b>to<b>\uE90098.595112<small>XRP</small></b></li></ul></li>',
     )
 
     expect(w.find('li').at(3).html()).toBe(
       '<li>Balance decreased by<b>-\uE9000.000012<small>XRP</small></b>from<b>\uE90098.595124<small>XRP</small></b>to<b>\uE90098.595112<small>XRP</small></b></li>',
     )
 
     expect(w.find('li').at(4).html()).toBe(
-      '<li class="meta-line">owned_account_root <a title="rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq" class="account" href="/accounts/rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq">rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq</a><ul class="meta-line"><li>Balance increased by<b>\uE90050.324316<small>XRP</small></b>from<b>\uE9005,703.912258<small>XRP</small></b>to<b>\uE9005,754.236574<small>XRP</small></b></li></ul></li>',
+      '<li class="meta-line">owned_account_root <a data-testid="account" title="rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq" class="account" href="/accounts/rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq">rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq</a><ul class="meta-line"><li>Balance increased by<b>\uE90050.324316<small>XRP</small></b>from<b>\uE9005,703.912258<small>XRP</small></b>to<b>\uE9005,754.236574<small>XRP</small></b></li></ul></li>',
     )
 
     expect(w.find('li').at(5).html()).toBe(
       '<li>Balance increased by<b>\uE90050.324316<small>XRP</small></b>from<b>\uE9005,703.912258<small>XRP</small></b>to<b>\uE9005,754.236574<small>XRP</small></b></li>',
     )
 
     expect(w.find('li').at(6).html()).toBe(
-      '<li class="meta-line">transaction_owned_directory<span> <a title="rETx8GBiH6fxhTcfHM9fGeyShqxozyD3xe" class="account" href="/accounts/rETx8GBiH6fxhTcfHM9fGeyShqxozyD3xe">rETx8GBiH6fxhTcfHM9fGeyShqxozyD3xe</a></span></li>',
+      '<li class="meta-line">transaction_owned_directory<span> <a data-testid="account" title="rETx8GBiH6fxhTcfHM9fGeyShqxozyD3xe" class="account" href="/accounts/rETx8GBiH6fxhTcfHM9fGeyShqxozyD3xe">rETx8GBiH6fxhTcfHM9fGeyShqxozyD3xe</a></span></li>',
     )
 
     expect(w.find('li').at(7).html()).toBe(
-      '<li class="meta-line">It modified a <b>XRP/CNY</b>owned by<a title="rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq" class="account" href="/accounts/rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq">rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq</a>with sequence # <b>1181517</b><ul><li class="meta-line">offer_partially_filled</li><li class="meta-line"><span class="field">TakerPays </span><b>XRP</b> decreased by<b>\uE90050.324316</b>from<b>\uE900470.31823</b>to<b>\uE900419.993914</b></li><li class="meta-line"><span class="field">TakerGets </span><b>CNY</b>.<a title="rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y" class="account" href="/accounts/rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y">rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y</a> decreased by<b>CN¥224.7141103</b>from<b>CN¥2,100.12079671</b>to<b>CN¥1,875.40668641</b></li></ul></li>',
+      '<li class="meta-line">It modified a <b>XRP/CNY</b>owned by<a data-testid="account" title="rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq" class="account" href="/accounts/rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq">rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq</a>with sequence # <b>1181517</b><ul><li class="meta-line">offer_partially_filled</li><li class="meta-line"><span class="field">TakerPays </span><b>XRP</b> decreased by<b>\uE90050.324316</b>from<b>\uE900470.31823</b>to<b>\uE900419.993914</b></li><li class="meta-line"><span class="field">TakerGets </span><b>CNY</b>.<a data-testid="account" title="rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y" class="account" href="/accounts/rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y">rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y</a> decreased by<b>CN¥224.7141103</b>from<b>CN¥2,100.12079671</b>to<b>CN¥1,875.40668641</b></li></ul></li>',
     )
 
     expect(w.find('li').at(8).html()).toBe(
@@ -74,51 +74,51 @@ describe('TransactionMeta container', () => {
     )
 
     expect(w.find('li').at(10).html()).toBe(
-      '<li class="meta-line"><span class="field">TakerGets </span><b>CNY</b>.<a title="rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y" class="account" href="/accounts/rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y">rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y</a> decreased by<b>CN¥224.7141103</b>from<b>CN¥2,100.12079671</b>to<b>CN¥1,875.40668641</b></li>',
+      '<li class="meta-line"><span class="field">TakerGets </span><b>CNY</b>.<a data-testid="account" title="rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y" class="account" href="/accounts/rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y">rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y</a> decreased by<b>CN¥224.7141103</b>from<b>CN¥2,100.12079671</b>to<b>CN¥1,875.40668641</b></li>',
     )
 
     expect(w.find('li').at(11).html()).toBe(
-      '<li class="meta-line">It modified a <b>XRP/CNY</b>owned by<a title="rUmustd4TbkjaEuS7S1damozpBEREgRz9z" class="account" href="/accounts/rUmustd4TbkjaEuS7S1damozpBEREgRz9z">rUmustd4TbkjaEuS7S1damozpBEREgRz9z</a>with sequence # <b>5804</b><ul><li class="meta-line">offer_partially_filled</li><li class="meta-line"><span class="field">TakerPays </span><b>CNY</b>.<a title="razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA" class="account" href="/accounts/razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA">razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA</a> decreased by<b>CN¥225.45293634</b>from<b>CN¥12,589.58241408</b>to<b>CN¥12,364.12947774</b></li><li class="meta-line"><span class="field">TakerGets </span><b>XRP</b> decreased by<b>\uE90050.324316</b>from<b>\uE9002,810.174646</b>to<b>\uE9002,759.85033</b></li></ul></li>',
+      '<li class="meta-line">It modified a <b>XRP/CNY</b>owned by<a data-testid="account" title="rUmustd4TbkjaEuS7S1damozpBEREgRz9z" class="account" href="/accounts/rUmustd4TbkjaEuS7S1damozpBEREgRz9z">rUmustd4TbkjaEuS7S1damozpBEREgRz9z</a>with sequence # <b>5804</b><ul><li class="meta-line">offer_partially_filled</li><li class="meta-line"><span class="field">TakerPays </span><b>CNY</b>.<a data-testid="account" title="razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA" class="account" href="/accounts/razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA">razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA</a> decreased by<b>CN¥225.45293634</b>from<b>CN¥12,589.58241408</b>to<b>CN¥12,364.12947774</b></li><li class="meta-line"><span class="field">TakerGets </span><b>XRP</b> decreased by<b>\uE90050.324316</b>from<b>\uE9002,810.174646</b>to<b>\uE9002,759.85033</b></li></ul></li>',
     )
 
     expect(w.find('li').at(12).html()).toBe(
       '<li class="meta-line">offer_partially_filled</li>',
     )
 
     expect(w.find('li').at(13).html()).toBe(
-      '<li class="meta-line"><span class="field">TakerPays </span><b>CNY</b>.<a title="razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA" class="account" href="/accounts/razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA">razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA</a> decreased by<b>CN¥225.45293634</b>from<b>CN¥12,589.58241408</b>to<b>CN¥12,364.12947774</b></li>',
+      '<li class="meta-line"><span class="field">TakerPays </span><b>CNY</b>.<a data-testid="account" title="razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA" class="account" href="/accounts/razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA">razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA</a> decreased by<b>CN¥225.45293634</b>from<b>CN¥12,589.58241408</b>to<b>CN¥12,364.12947774</b></li>',
     )
 
     expect(w.find('li').at(14).html()).toBe(
       '<li class="meta-line"><span class="field">TakerGets </span><b>XRP</b> decreased by<b>\uE90050.324316</b>from<b>\uE9002,810.174646</b>to<b>\uE9002,759.85033</b></li>',
     )
 
     expect(w.find('li').at(15).html()).toBe(
-      '<li class="meta-line">It modified a <b>CNY</b>ripplestate node between<a title="rUmustd4TbkjaEuS7S1damozpBEREgRz9z" class="account" href="/accounts/rUmustd4TbkjaEuS7S1damozpBEREgRz9z">rUmustd4TbkjaEuS7S1damozpBEREgRz9z</a>and<a title="razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA" class="account" href="/accounts/razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA">razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA</a><ul class="meta-line"><li>Balance changed by<b>CN¥225.45293634</b>from<b>CN¥187,682.19557797</b>to<b>CN¥187,907.64851431</b></li></ul></li>',
+      '<li class="meta-line">It modified a <b>CNY</b>ripplestate node between<a data-testid="account" title="rUmustd4TbkjaEuS7S1damozpBEREgRz9z" class="account" href="/accounts/rUmustd4TbkjaEuS7S1damozpBEREgRz9z">rUmustd4TbkjaEuS7S1damozpBEREgRz9z</a>and<a data-testid="account" title="razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA" class="account" href="/accounts/razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA">razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA</a><ul class="meta-line"><li>Balance changed by<b>CN¥225.45293634</b>from<b>CN¥187,682.19557797</b>to<b>CN¥187,907.64851431</b></li></ul></li>',
     )
 
     expect(w.find('li').at(16).html()).toBe(
       '<li>Balance changed by<b>CN¥225.45293634</b>from<b>CN¥187,682.19557797</b>to<b>CN¥187,907.64851431</b></li>',
     )
 
     expect(w.find('li').at(17).html()).toBe(
-      '<li class="meta-line">It modified a <b>CNY</b>ripplestate node between<a title="rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh" class="account" href="/accounts/rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh">rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh</a>and<a title="rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y" class="account" href="/accounts/rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y">rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y</a><ul class="meta-line"><li>Balance changed by<b>CN¥224.7141103</b>from<b>CN¥68,093.01974027</b>to<b>CN¥68,317.73385057</b></li></ul></li>',
+      '<li class="meta-line">It modified a <b>CNY</b>ripplestate node between<a data-testid="account" title="rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh" class="account" href="/accounts/rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh">rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh</a>and<a data-testid="account" title="rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y" class="account" href="/accounts/rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y">rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y</a><ul class="meta-line"><li>Balance changed by<b>CN¥224.7141103</b>from<b>CN¥68,093.01974027</b>to<b>CN¥68,317.73385057</b></li></ul></li>',
     )
 
     expect(w.find('li').at(18).html()).toBe(
       '<li>Balance changed by<b>CN¥224.7141103</b>from<b>CN¥68,093.01974027</b>to<b>CN¥68,317.73385057</b></li>',
     )
 
     expect(w.find('li').at(19).html()).toBe(
-      '<li class="meta-line">It modified a <b>CNY</b>ripplestate node between<a title="rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq" class="account" href="/accounts/rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq">rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq</a>and<a title="rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y" class="account" href="/accounts/rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y">rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y</a><ul class="meta-line"><li>Balance changed by<b>-CN¥224.7141103</b>from<b>CN¥9,605.02284129</b>to<b>CN¥9,380.30873099</b></li></ul></li>',
+      '<li class="meta-line">It modified a <b>CNY</b>ripplestate node between<a data-testid="account" title="rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq" class="account" href="/accounts/rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq">rEGoBvzusE2MkDn3yrgZc817XiwRofqoJq</a>and<a data-testid="account" title="rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y" class="account" href="/accounts/rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y">rKiCet8SdvWxPXnAgYarFUXMh1zCPz432Y</a><ul class="meta-line"><li>Balance changed by<b>-CN¥224.7141103</b>from<b>CN¥9,605.02284129</b>to<b>CN¥9,380.30873099</b></li></ul></li>',
     )
 
     expect(w.find('li').at(20).html()).toBe(
       '<li>Balance changed by<b>-CN¥224.7141103</b>from<b>CN¥9,605.02284129</b>to<b>CN¥9,380.30873099</b></li>',
     )
 
     expect(w.find('li').at(21).html()).toBe(
-      '<li class="meta-line">It modified a <b>CNY</b>ripplestate node between<a title="razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA" class="account" href="/accounts/razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA">razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA</a>and<a title="rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh" class="account" href="/accounts/rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh">rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh</a><ul class="meta-line"><li>Balance changed by<b>CN¥225.90384221</b>from<b>-CN¥225.90384221</b>to<b>CN¥0.00</b></li></ul></li>',
+      '<li class="meta-line">It modified a <b>CNY</b>ripplestate node between<a data-testid="account" title="razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA" class="account" href="/accounts/razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA">razqQKzJRdB4UxFPWf5NEpEG3WMkmwgcXA</a>and<a data-testid="account" title="rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh" class="account" href="/accounts/rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh">rPt8rwFrsucmjdKfjwRHGz9iZGxxN2cLYh</a><ul class="meta-line"><li>Balance changed by<b>CN¥225.90384221</b>from<b>-CN¥225.90384221</b>to<b>CN¥0.00</b></li></ul></li>',
     )
 
     expect(w.find('li').at(22).html()).toBe(

src/containers/Validators/test/mock_data/validator.json

@@ -1,12 +1,8 @@
 {
-  "master_key":
-    "nHUvzia57LRXr9zqnYpyFUFeKvis2tqn4DkXBVGSppt5M4nNq43C",
-  "signing_key":
-    "n9KNmrXo9gK3ucZy8KHKFM113ENGv6uyukS6Bb7TtuvEx98SdwMS",
-  "validation_public_key":
-    "nHUvzia57LRXr9zqnYpyFUFeKvis2tqn4DkXBVGSppt5M4nNq43C",
-  "ledger_hash":
-    "D498209A1B1BBACB9D7C8419F9A4136E7F7748E66B7936D2F92249A2C1AFBCB9",
+  "master_key": "nHUvzia57LRXr9zqnYpyFUFeKvis2tqn4DkXBVGSppt5M4nNq43C",
+  "signing_key": "n9KNmrXo9gK3ucZy8KHKFM113ENGv6uyukS6Bb7TtuvEx98SdwMS",
+  "validation_public_key": "nHUvzia57LRXr9zqnYpyFUFeKvis2tqn4DkXBVGSppt5M4nNq43C",
+  "ledger_hash": "D498209A1B1BBACB9D7C8419F9A4136E7F7748E66B7936D2F92249A2C1AFBCB9",
   "current_index": 55764842,
   "partial": false,
   "chain": "main",

src/containers/Validators/votingTab.scss

@@ -66,7 +66,7 @@
     &.nay {
       background-color: $black-30;
     }
-}
+  }
 
   .no-match {
     &.no-match-amendments {

src/containers/shared/components/Account.tsx

@@ -16,6 +16,7 @@ export const Account = (props: AccountProps) => {
     <>
       {link ? (
         <RouteLink
+          data-testid="account"
           className="account"
           title={parts[0]}
           to={ACCOUNT_ROUTE}
@@ -24,11 +25,15 @@ export const Account = (props: AccountProps) => {
           {parts[0]}
         </RouteLink>
       ) : (
-        <span className="account" title={parts[0]}>
+        <span data-testid="account" className="account" title={parts[0]}>
           {parts[0]}
         </span>
       )}
-      {computedTag && <span className="dt">:{computedTag}</span>}
+      {computedTag && (
+        <span className="dt" data-testid="dt">
+          :{computedTag}
+        </span>
+      )}
     </>
   )
 }

src/containers/shared/components/Transaction/DepositPreauth/test/DepositPreauthDescription.test.tsx

@@ -12,15 +12,15 @@ describe('DepositPreauth: Description', () => {
   it('renders description for authorize', () => {
     const wrapper = createWrapper(mockDepositPreaut)
     expect(wrapper.html()).toBe(
-      `<div>It authorizes <a title="rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM" class="account" href="/accounts/rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM">rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM</a> to send payments to this account</div>`,
+      `<div>It authorizes <a data-testid="account" title="rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM" class="account" href="/accounts/rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM">rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM</a> to send payments to this account</div>`,
     )
     wrapper.unmount()
   })
 
   it('renders description for unauthorize', () => {
     const wrapper = createWrapper(mockDepositPreauthUnauthorize)
     expect(wrapper.html()).toBe(
-      `<div>It removes the authorization for <a title="rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM" class="account" href="/accounts/rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM">rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM</a> to send payments to this account</div>`,
+      `<div>It removes the authorization for <a data-testid="account" title="rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM" class="account" href="/accounts/rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM">rDJFnv5sEfp42LMFiX3mVQKczpFTdxYDzM</a> to send payments to this account</div>`,
     )
     wrapper.unmount()
   })