From 66cd67b37c1586da4778dbb6898bf9a516e736b6 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Mon, 23 Dec 2024 14:53:03 +0300
Subject: [PATCH] Add tests

---
 .../transactions/TxSummary/styles.module.css  |  6 ++---
 .../UpdateSafe/index.test.tsx                 | 26 +++++++++++++++++++
 .../confirmation-views/UpdateSafe/index.tsx   | 26 +++++++++++++++----
 3 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 apps/web/src/components/tx/confirmation-views/UpdateSafe/index.test.tsx

diff --git a/apps/web/src/components/transactions/TxSummary/styles.module.css b/apps/web/src/components/transactions/TxSummary/styles.module.css
index fc8ed69fac..bba12e11e3 100644
--- a/apps/web/src/components/transactions/TxSummary/styles.module.css
+++ b/apps/web/src/components/transactions/TxSummary/styles.module.css
@@ -29,9 +29,9 @@
 }
 
 .gridContainer.conflictGroup {
-  grid-template-columns: var(--grid-type) var(--grid-info) var(--grid-date) var(--grid-confirmations) var(--grid-status) var(
-      --grid-actions
-    );
+  grid-template-columns:
+    var(--grid-type) var(--grid-info) var(--grid-date) var(--grid-confirmations) var(--grid-status)
+    var(--grid-actions);
   grid-template-areas: 'type info date confirmations status actions';
 }
 
diff --git a/apps/web/src/components/tx/confirmation-views/UpdateSafe/index.test.tsx b/apps/web/src/components/tx/confirmation-views/UpdateSafe/index.test.tsx
new file mode 100644
index 0000000000..b3989d8570
--- /dev/null
+++ b/apps/web/src/components/tx/confirmation-views/UpdateSafe/index.test.tsx
@@ -0,0 +1,26 @@
+import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { _UpdateSafe as UpdateSafe } from './index'
+import { render } from '@/tests/test-utils'
+
+const chain = {
+  recommendedMasterCopyVersion: '1.4.1',
+} as ChainInfo
+
+const warningText = 'This upgrade will invalidate all queued transactions!'
+
+describe('Container', () => {
+  it('renders correctly with a queue warning', async () => {
+    const container = render(<UpdateSafe safeVersion="1.1.1" queueSize="10+" chain={chain} />)
+    await expect(container.findByText(warningText)).resolves.not.toBeNull()
+  })
+
+  it('renders correctly without a queue warning because no queue', async () => {
+    const container = render(<UpdateSafe safeVersion="1.1.1" queueSize="" chain={chain} />)
+    await expect(container.findByText(warningText)).rejects.toThrowError(Error)
+  })
+
+  it('renders correctly without a queue warning because of compatible Safe version', async () => {
+    const container = render(<UpdateSafe safeVersion="1.3.0" queueSize="10" chain={chain} />)
+    await expect(container.findByText(warningText)).rejects.toThrowError(Error)
+  })
+})
diff --git a/apps/web/src/components/tx/confirmation-views/UpdateSafe/index.tsx b/apps/web/src/components/tx/confirmation-views/UpdateSafe/index.tsx
index 9a8af7605a..520b6be0fd 100644
--- a/apps/web/src/components/tx/confirmation-views/UpdateSafe/index.tsx
+++ b/apps/web/src/components/tx/confirmation-views/UpdateSafe/index.tsx
@@ -7,6 +7,7 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import { useQueuedTxsLength } from '@/hooks/useTxQueue'
 import ExternalLink from '@/components/common/ExternalLink'
 import { maybePlural } from '@/utils/formatters'
+import madProps from '@/utils/mad-props'
 
 const QUEUE_WARNING_VERSION = '<1.3.0'
 
@@ -26,11 +27,15 @@ function BgBox({ children, light }: { children: ReactNode; light?: boolean }) {
   )
 }
 
-function UpdateSafe() {
-  const { safe } = useSafeInfo()
-  const chain = useCurrentChain()
-  const queueSize = useQueuedTxsLength()
-  const safeVersion = safe?.version || ''
+export function _UpdateSafe({
+  safeVersion,
+  queueSize,
+  chain,
+}: {
+  safeVersion: string
+  queueSize: string
+  chain: ReturnType<typeof useCurrentChain>
+}) {
   const showQueueWarning = queueSize && semverSatisfies(safeVersion, QUEUE_WARNING_VERSION)
   const latestSafeVersion = chain?.recommendedMasterCopyVersion || LATEST_SAFE_VERSION
 
@@ -62,4 +67,15 @@ function UpdateSafe() {
   )
 }
 
+function useSafeVersion() {
+  const { safe } = useSafeInfo()
+  return safe?.version || ''
+}
+
+const UpdateSafe = madProps(_UpdateSafe, {
+  chain: useCurrentChain,
+  safeVersion: useSafeVersion,
+  queueSize: useQueuedTxsLength,
+})
+
 export default UpdateSafe