@transferwise/components 46.115.1 → 46.116.1

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.spec.tsx

@@ -0,0 +1,160 @@
+import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../../test-utils';
+
+import { CurrencySelector } from './CurrencySelector';
+
+mockMatchMedia();
+mockResizeObserver();
+
+describe('CurrencySelector', () => {
+  it('can change currency', async () => {
+    const onChange = jest.fn();
+    render(
+      <CurrencySelector
+        options={mockCurrencies}
+        id="id"
+        currency="USD"
+        labelId="labelId"
+        onChange={onChange}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('combobox', { name: 'Select currency' }));
+
+    await userEvent.click(
+      screen.getByRole('option', {
+        name: /aed united arab emirates dirham/iu,
+      }),
+    );
+
+    expect(onChange).toHaveBeenCalledWith('AED');
+  });
+
+  it('locks the input when no onChange is provided', async () => {
+    render(<CurrencySelector options={mockCurrencies} id="id" currency="USD" labelId="labelId" />);
+
+    await userEvent.click(screen.getByRole('combobox', { name: 'Select currency' }));
+
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it('enables currency selection when just one group with multiple currencies', async () => {
+    render(
+      <CurrencySelector
+        options={[
+          {
+            title: 'Popular',
+            currencies: [
+              {
+                code: 'USD',
+                label: 'US Dollar',
+                keywords: ['USD', 'US Dollar'],
+              },
+              {
+                code: 'EUR',
+                label: 'Euro',
+                keywords: ['EUR', 'Euro'],
+              },
+            ],
+          },
+        ]}
+        id="id"
+        currency="USD"
+        labelId="labelId"
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(screen.getByRole('combobox')).toBeEnabled();
+  });
+
+  it('disables currency selection when just one currency', async () => {
+    render(
+      <CurrencySelector
+        options={[
+          {
+            title: 'Popular',
+            currencies: [
+              {
+                code: 'USD',
+                label: 'US Dollar',
+                keywords: ['USD', 'US Dollar'],
+              },
+            ],
+          },
+        ]}
+        id="id"
+        currency="USD"
+        labelId="labelId"
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it('deduplicates currencies while searching', async () => {
+    render(
+      <CurrencySelector
+        options={mockCurrencies}
+        id="id"
+        currency="USD"
+        labelId="labelId"
+        onChange={jest.fn()}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('combobox', { name: 'Select currency' }));
+
+    await userEvent.type(
+      screen.getByRole('combobox', {
+        name: /type a currency \/ country/iu,
+      }),
+      'EUR',
+    );
+
+    expect(screen.getAllByRole('option')).toHaveLength(1);
+  });
+});
+
+const mockCurrencies = [
+  {
+    title: 'Popular',
+    currencies: [
+      {
+        code: 'USD',
+        label: 'US Dollar',
+        keywords: ['USD'],
+      },
+      {
+        code: 'EUR',
+        label: 'Euro',
+        keywords: ['EUR'],
+      },
+    ],
+  },
+  {
+    title: 'All',
+    currencies: [
+      {
+        code: 'AED',
+        label: 'United Arab Emirates Dirham',
+        keywords: ['AED'],
+      },
+      {
+        code: 'AFN',
+        label: 'Afghan Afghani',
+        keywords: ['AFN'],
+      },
+      {
+        code: 'EUR',
+        label: 'Euro',
+        keywords: ['EUR', 'saudi arabia'],
+      },
+      {
+        code: 'AUD',
+        label: 'Australian Dollar',
+        keywords: ['AUD', 'australia'],
+      },
+    ],
+  },
+];

package/src/inputs/Input.css

@@ -108,8 +108,7 @@
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -125,8 +124,7 @@
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

package/src/inputs/SelectInput.spec.tsx

@@ -1,13 +1,19 @@
 import { screen, waitFor, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
-import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
+import {
+  render,
+  mockMatchMedia,
+  mockResizeObserver,
+  mockRequestAnimationFrame,
+} from '../test-utils';
 
 import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
 import { Field } from '../field/Field';
 
 mockMatchMedia();
 mockResizeObserver();
+mockRequestAnimationFrame();
 
 describe('SelectInput', () => {
   it('renders placeholder', () => {

package/src/inputs/TextArea.css

@@ -108,8 +108,7 @@
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -125,8 +124,7 @@
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }