style(wallet): Fix Arrow Icon on Buy Screen Android (#29095)

2025-05-19 08:08:26 -05:00
parent 289cb027c4
commit bd16da0b56
3 changed files with 88 additions and 14 deletions
@@ -24,6 +24,8 @@ export const StyledWrapper = styled.div<{ isOpen?: boolean }>`
    ${(p) => (p.isOpen ? color.button.background : color.divider.subtle)};
  background-color: ${color.container.background};
  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
 `

 export const ProviderName = styled.p`
@@ -0,0 +1,61 @@
+// Copyright (c) 2025 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+
+// Mock Data
+import {
+  mockMeldCryptoQuotes,
+  mockServiceProviders
+} from '../../../../../common/constants/mocks'
+
+// Components
+import { BuyQuote } from './buy_quote'
+
+describe('buy quote option', () => {
+  it('renders buy quote option and handles click', () => {
+    const clickHandler = jest.fn()
+    const { container } = render(
+      <BuyQuote
+        quote={mockMeldCryptoQuotes[0]}
+        serviceProviders={mockServiceProviders}
+        isCreatingWidget={false}
+        isBestOption={true}
+        isOpenOverride={true}
+        onBuy={clickHandler}
+      />
+    )
+
+    // Test Text
+    expect(screen.getByText('Transak')).toBeInTheDocument()
+    expect(screen.getByText('braveWalletBestOption')).toBeInTheDocument()
+
+    // Test Styles
+    const styledWrapper = container.querySelector(
+      '[data-key="buy-quote-wrapper"]'
+    )
+    expect(styledWrapper).toBeInTheDocument()
+    expect(styledWrapper).toHaveStyle({
+      boxSizing: 'border-box',
+      overflow: 'hidden'
+    })
+
+    // Test Carat Icon
+    const caratIcon = container.querySelector('leo-icon[name="carat-down"]')
+    expect(caratIcon).toBeInTheDocument()
+    expect(caratIcon).toBeVisible()
+    expect(caratIcon).toHaveAttribute('name', 'carat-down')
+
+    // Test Buy Button Click
+    const buyButton: any = document.querySelector('leo-button')
+    expect(buyButton).toBeInTheDocument()
+    expect(buyButton).toBeVisible()
+
+    // Button is a leo-button, we we trigger the click from the shadowRoot
+    buyButton?.shadowRoot?.querySelector('button').click()
+    expect(clickHandler).toHaveBeenCalledWith(mockMeldCryptoQuotes[0])
+  })
+})
@@ -109,7 +109,10 @@ export const BuyQuote = ({
    : quoteServiceProvider?.logoImages?.lightShortUrl

  return (
-    <StyledWrapper isOpen={isOpen}>
+    <StyledWrapper
+      isOpen={isOpen}
+      data-key='buy-quote-wrapper'
+    >
      <Row
        justifyContent='space-between'
        width='100%'
@@ -134,23 +137,31 @@ export const BuyQuote = ({
          gap='8px'
          justifyContent='flex-end'
        >
-          {isBestOption ? (
-            <BestOptionLabel>
-              <div slot='icon-before'>
-                <Icon name='thumb-up' />
-              </div>
-              {getLocale('braveWalletBestOption')}
-            </BestOptionLabel>
-          ) : null}
-          <PaymentMethodsWrapper>
-            {isDeditCardSupported ? <PaymentMethodIcon name='bank' /> : null}
-            {isCreditCardSupported ? (
-              <PaymentMethodIcon name='credit-card' />
+          <Row
+            width='unset'
+            gap='8px'
+            justifyContent='flex-end'
+            flexWrap='wrap'
+          >
+            {isBestOption ? (
+              <BestOptionLabel>
+                <div slot='icon-before'>
+                  <Icon name='thumb-up' />
+                </div>
+                {getLocale('braveWalletBestOption')}
+              </BestOptionLabel>
            ) : null}
-          </PaymentMethodsWrapper>
+            <PaymentMethodsWrapper>
+              {isDeditCardSupported ? <PaymentMethodIcon name='bank' /> : null}
+              {isCreditCardSupported ? (
+                <PaymentMethodIcon name='credit-card' />
+              ) : null}
+            </PaymentMethodsWrapper>
+          </Row>
          <CaratIcon
            isOpen={isOpen}
            name='carat-down'
+            data-key='carat-icon'
          />
        </Row>
      </Row>