From 2ee3bd50b545c58ea5d7f9ae58bda0ef8a292493 Mon Sep 17 00:00:00 2001
From: Edd <edd@vega.xyz>
Date: Wed, 10 May 2023 16:40:10 +0100
Subject: [PATCH] feat(explorer): tests for vote icon

---
 .../txs/txs-infinite-list-item.spec.tsx       |  2 +-
 .../components/txs/txs-infinite-list-item.tsx |  2 +-
 .../components/vote-icon/vote-icon.spec.tsx   | 37 +++++++++++++++++++
 .../app/components/vote-icon/vote-icon.tsx    |  4 +-
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/apps/explorer/src/app/components/txs/txs-infinite-list-item.spec.tsx b/apps/explorer/src/app/components/txs/txs-infinite-list-item.spec.tsx
index 56bf8f445..b83eb4fc9 100644
--- a/apps/explorer/src/app/components/txs/txs-infinite-list-item.spec.tsx
+++ b/apps/explorer/src/app/components/txs/txs-infinite-list-item.spec.tsx
@@ -98,6 +98,6 @@ describe('Txs infinite list item', () => {
     expect(screen.getByTestId('pub-key')).toHaveTextContent('testPubKey');
     expect(screen.getByTestId('tx-type')).toHaveTextContent('testType');
     expect(screen.getByTestId('tx-block')).toHaveTextContent('1');
-    expect(screen.getByTestId('tx-success')).toHaveTextContent('Success: ✅');
+    expect(screen.getByTestId('tx-success')).toHaveTextContent('Success');
   });
 });
diff --git a/apps/explorer/src/app/components/txs/txs-infinite-list-item.tsx b/apps/explorer/src/app/components/txs/txs-infinite-list-item.tsx
index b45a170be..8f761b01c 100644
--- a/apps/explorer/src/app/components/txs/txs-infinite-list-item.tsx
+++ b/apps/explorer/src/app/components/txs/txs-infinite-list-item.tsx
@@ -83,7 +83,7 @@ export const TxsInfiniteListItem = ({
         data-testid="tx-success"
       >
         <span className="md:hidden uppercase text-vega-dark-300">
-          Success:&nbsp;
+          Success&nbsp;
         </span>
         {isNumber(code) ? (
           <ChainResponseCode code={code} hideLabel={true} />
diff --git a/apps/explorer/src/app/components/vote-icon/vote-icon.spec.tsx b/apps/explorer/src/app/components/vote-icon/vote-icon.spec.tsx
index e69de29bb..b26323803 100644
--- a/apps/explorer/src/app/components/vote-icon/vote-icon.spec.tsx
+++ b/apps/explorer/src/app/components/vote-icon/vote-icon.spec.tsx
@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import { VoteIcon } from './vote-icon';
+
+describe('Vote TX icon', () => {
+  it('should use the text For by default for yes votes', () => {
+    const yes = render(<VoteIcon vote={true} />);
+    expect(yes.getByTestId('label')).toHaveTextContent('For');
+  });
+
+  it('should use the yesText for yes votes if specified', () => {
+    const yes = render(<VoteIcon vote={true} yesText="Test" />);
+    expect(yes.getByTestId('label')).toHaveTextContent('Test');
+  });
+
+  it('should display the tick icon for yes votes', () => {
+    const no = render(<VoteIcon vote={true} />);
+    expect(no.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'tick-circle icon'
+    );
+  });
+
+  it('should use the text Against by default for no votes', () => {
+    const no = render(<VoteIcon vote={false} />);
+    expect(no.getByTestId('label')).toHaveTextContent('Against');
+  });
+
+  it('should use the noText for no votes if specified', () => {
+    const no = render(<VoteIcon vote={false} noText="Test" />);
+    expect(no.getByTestId('label')).toHaveTextContent('Test');
+  });
+
+  it('should display the delete icon for no votes', () => {
+    const no = render(<VoteIcon vote={false} />);
+    expect(no.getByRole('img')).toHaveAttribute('aria-label', 'delete icon');
+  });
+});
diff --git a/apps/explorer/src/app/components/vote-icon/vote-icon.tsx b/apps/explorer/src/app/components/vote-icon/vote-icon.tsx
index 217558be6..f7b29e6d7 100644
--- a/apps/explorer/src/app/components/vote-icon/vote-icon.tsx
+++ b/apps/explorer/src/app/components/vote-icon/vote-icon.tsx
@@ -32,7 +32,9 @@ export function VoteIcon({
       className={`voteicon inline-block my-1 py-1 px-2 py rounded-md text-white leading-one sm align-top ${bg}`}
     >
       <Icon name={icon} size={3} className={`mr-2 p-0 fill-${fill}`} />
-      <span className={`text-base text-${text}`}>{label}</span>
+      <span className={`text-base text-${text}`} data-testid="label">
+        {label}
+      </span>
     </div>
   );
 }