test: swap modal footer unit test (#6353)

* swap footer modal test

* remove empty test

* init

* merge main and jordan comment

* init

* use test constants

* use constants

* change address

* more comprehensive tests

* merge constants

* fix errors

* remove dual import noop

* update snapshot

* Update src/components/swap/SwapModalFooter.test.tsx
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* update snapshot

---------
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

src/components/swap/SwapModalFooter.test.tsx

+import { TEST_ALLOWED_SLIPPAGE, TEST_TRADE_EXACT_INPUT } from 'test-utils/constants'
+import { render, screen } from 'test-utils/render'
+
+import SwapModalFooter from './SwapModalFooter'
+
+const swapErrorMessage = 'swap error'
+const fiatValue = { data: 123, isLoading: false }
+
+describe('SwapModalFooter.tsx', () => {
+  it('renders with a disabled button with no account', () => {
+    const { asFragment } = render(
+      <SwapModalFooter
+        trade={TEST_TRADE_EXACT_INPUT}
+        allowedSlippage={TEST_ALLOWED_SLIPPAGE}
+        hash={undefined}
+        onConfirm={() => null}
+        disabledConfirm
+        swapErrorMessage={swapErrorMessage}
+        swapQuoteReceivedDate={undefined}
+        fiatValueInput={fiatValue}
+        fiatValueOutput={fiatValue}
+      />
+    )
+    expect(asFragment()).toMatchSnapshot()
+    expect(screen.getByTestId('confirm-swap-button')).toBeDisabled()
+  })
+})

src/components/swap/SwapModalFooter.tsx

@@ -147,6 +147,7 @@ export default function SwapModalFooter({
           })}
         >
           <ButtonError
+            data-testid="confirm-swap-button"
             onClick={onConfirm}
             disabled={disabledConfirm}
             style={{ margin: '10px 0 0 0' }}
@@ -157,7 +158,6 @@ export default function SwapModalFooter({
             </Text>
           </ButtonError>
         </TraceEvent>
-
         {swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
       </AutoRow>
     </>

src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SwapModalFooter.tsx renders with a disabled button with no account 1`] = `
+<DocumentFragment>
+  .c0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
+.c3 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: inline-block;
+  text-align: center;
+  line-height: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: inherit;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: white;
+  background-color: primary;
+  border: 0;
+  border-radius: 4px;
+}
+
+.c1 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.c2 {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.c2 > * {
+  margin: !important;
+}
+
+.c4 {
+  padding: 16px;
+  width: 100%;
+  font-weight: 500;
+  text-align: center;
+  border-radius: 20px;
+  outline: none;
+  border: 1px solid transparent;
+  color: #0D111C;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  will-change: transform;
+  -webkit-transition: -webkit-transform 450ms ease;
+  -webkit-transition: transform 450ms ease;
+  transition: transform 450ms ease;
+  -webkit-transform: perspective(1px) translateZ(0);
+  -ms-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+}
+
+.c4:disabled {
+  opacity: 50%;
+  cursor: auto;
+  pointer-events: none;
+}
+
+.c4 > * {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c4 > a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c5 {
+  background-color: #FB118E;
+  font-size: 20px;
+  font-weight: 600;
+  padding: 16px;
+  color: #F5F6FC;
+}
+
+.c5:focus {
+  box-shadow: 0 0 0 1pt #ee0481;
+  background-color: #ee0481;
+}
+
+.c5:hover {
+  background-color: #ee0481;
+}
+
+.c5:active {
+  box-shadow: 0 0 0 1pt #d50474;
+  background-color: #d50474;
+}
+
+.c5:disabled {
+  background-color: #E8ECFB;
+  color: #7780A0;
+  cursor: auto;
+  box-shadow: none;
+  border: 1px solid transparent;
+  outline: none;
+}
+
+.c6 {
+  background-color: rgba(250,43,57,0.1);
+  border-radius: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 0.825rem;
+  width: 100%;
+  padding: 3rem 1.25rem 1rem 1rem;
+  margin-top: -2rem;
+  color: #FA2B39;
+  z-index: -1;
+}
+
+.c6 p {
+  padding: 0;
+  margin: 0;
+  font-weight: 500;
+}
+
+.c7 {
+  background-color: rgba(250,43,57,0.1);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-right: 12px;
+  border-radius: 12px;
+  min-width: 48px;
+  height: 48px;
+}
+
+<div
+    class="c0 c1 c2"
+  >
+    <button
+      class="c3 c4 c5"
+      data-testid="confirm-swap-button"
+      disabled=""
+      id="confirm-swap-or-send"
+      style="margin: 10px 0px 0px 0px;"
+    >
+      <div
+        class="css-10ob8xa"
+      >
+        Confirm Swap
+      </div>
+    </button>
+    <div
+      class="c6"
+    >
+      <div
+        class="c7"
+      >
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+          />
+          <line
+            x1="12"
+            x2="12"
+            y1="9"
+            y2="13"
+          />
+          <line
+            x1="12"
+            x2="12.01"
+            y1="17"
+            y2="17"
+          />
+        </svg>
+      </div>
+      <p
+        style="word-break: break-word;"
+      >
+        swap error
+      </p>
+    </div>
+  </div>
+</DocumentFragment>
+`;