Fix tests

coinbase · Aug 26, 2024 · bd5d323 · bd5d323
1 parent 5f7f9af
commit bd5d323
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/src/swap/components/SwapSettings.test.tsx b/src/swap/components/SwapSettings.test.tsx
@@ -1,20 +1,30 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
+import { useBreakpoints } from '../../useBreakpoints';
 import { SwapSettings } from './SwapSettings';
 
+vi.mock('../../useBreakpoints', () => ({
+  useBreakpoints: vi.fn(),
+}));
+
+const useBreakpointsMock = useBreakpoints as vi.Mock;
+
 describe('SwapSettings', () => {
   it('renders with default title', () => {
+    useBreakpointsMock.mockReturnValue('md');
     render(<SwapSettings />);
     const settingsContainer = screen.getByTestId('ockSwapSettings_Settings');
     expect(settingsContainer.textContent).toBe('');
   });
 
   it('renders with custom title', () => {
+    useBreakpointsMock.mockReturnValue('md');
     render(<SwapSettings text="Custom" />);
     expect(screen.getByText('Custom')).toBeInTheDocument();
   });
 
   it('renders custom icon when provided', () => {
+    useBreakpointsMock.mockReturnValue('md');
     const CustomIcon = () => (
       <svg data-testid="custom-icon" aria-hidden="true" focusable="false">
         <title>Custom Icon</title>
@@ -25,6 +35,7 @@ describe('SwapSettings', () => {
   });
 
   it('applies correct classes to the button', () => {
+    useBreakpointsMock.mockReturnValue('md');
     render(<SwapSettings />);
     const button = screen.getByRole('button', {
       name: /toggle swap settings/i,

diff --git a/src/swap/components/SwapSettings.tsx b/src/swap/components/SwapSettings.tsx
@@ -1,14 +1,14 @@
+import { useCallback, useState } from 'react';
 import {
-  cn,
-  text as themeText,
   background,
-  pressable,
+  cn,
   color,
+  pressable,
+  text as themeText,
 } from '../../styles/theme';
+import { useBreakpoints } from '../../useBreakpoints';
 import { useIcon } from '../../wallet/hooks/useIcon';
 import type { SwapSettingsReact } from '../types';
-import { useCallback, useState } from 'react';
-import { useBreakpoints } from '../../useBreakpoints';
 
 export function SwapSettings({
   className,
@@ -65,18 +65,18 @@ export function SwapSettings({
             data-testid="ockSwapSettingsDropdown"
           >
             <div className="p-4">
-              <h3 className={cn(themeText.caption, 'text-base mb-2')}>
+              <h3 className={cn(themeText.caption, 'mb-2 text-base')}>
                 Max. slippage
               </h3>
               <p className={cn(themeText.body, color.foregroundMuted, 'mb-2')}>
                 Your swap will revert if the prices change by more than the
                 selected percentage.
               </p>
-              <div className="flex items-center justify-between mb-4">
-                <div className="flex space-x-2 py-2 px-1">
+              <div className="mb-4 flex items-center justify-between">
+                <div className="flex space-x-2 px-1 py-2">
                   <button
                     className={cn(
-                      'font-sans leading-5 py-2 px-4 items-center gap-1 rounded-xl text-base',
+                      'items-center gap-1 rounded-xl px-4 py-2 font-sans text-base leading-5',
                       slippageMode === 'Auto'
                         ? 'bg-blue-100 text-blue-600'
                         : 'bg-gray-100 text-gray-600',
@@ -88,7 +88,7 @@ export function SwapSettings({
                   <button
                     className={cn(
                       themeText.label1,
-                      'py-2 px-4 items-center gap-1 rounded-xl text-base',
+                      'items-center gap-1 rounded-xl px-4 py-2 text-base',
                       slippageMode === 'Custom'
                         ? 'bg-blue-100 text-blue-600'
                         : 'bg-gray-100 text-gray-600',
@@ -105,14 +105,14 @@ export function SwapSettings({
                     onChange={(e) => setCustomSlippage(e.target.value)}
                     className={cn(
                       background.default,
-                      'w-16 px-2 py-1 text-left border-t border-b border-l rounded-l-md',
+                      'w-16 rounded-l-md border-t border-b border-l px-2 py-1 text-left',
                     )}
                     disabled={slippageMode === 'Auto'}
                   />
                   <span
                     className={cn(
                       background.default,
-                      'px-2 py-1 border border-l-0 rounded-r-md focus:outline-none',
+                      'rounded-r-md border border-l-0 px-2 py-1 focus:outline-none',
                     )}
                   >
                     %