1099-improve-the-list-of-available-tokens-in-a-dropdown (#1191)

tokens-studio · Aug 22, 2022 · 31e3c60 · 31e3c60
1 parent 3eabc04
commit 31e3c60
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 4 deletions.
diff --git a/src/app/components/DownshiftInput/DownShiftInput.test.tsx b/src/app/components/DownshiftInput/DownShiftInput.test.tsx
@@ -1,3 +1,63 @@
+import React from 'react';
+import { DownshiftInput } from './DownshiftInput';
+import { render } from '../../../../tests/config/setupTest';
+import { SingleToken } from '@/types/tokens';
+
+const resolvedTokens = [
+  {
+    internal__Parent: 'core',
+    name: 'border-radius.0',
+    rawValue: '64px',
+    type: 'borderRadius',
+    value: '64px',
+  },
+  {
+    internal__Parent: 'core',
+    name: 'border-radius.1',
+    rawValue: '1px',
+    type: 'borderRadius',
+    value: '1px',
+  },
+  {
+    internal__Parent: 'core',
+    name: 'border-radius.2',
+    rawValue: '2px',
+    type: 'borderRadius',
+    value: '2px',
+  },
+  {
+    internal__Parent: 'core',
+    name: 'color.slate.200',
+    rawValue: '#e2e8f0',
+    type: 'color',
+    value: '#e2e8f0',
+  },
+  {
+    internal__Parent: 'core',
+    name: 'color.slate.300',
+    rawValue: '#cbd5e1',
+    type: 'color',
+    value: '#cbd5e1',
+  },
+  {
+    internal__Parent: 'core',
+    name: 'size.0',
+    rawValue: '0',
+    type: 'sizing',
+    value: 0,
+  },
+  {
+    internal__Parent: 'core',
+    name: 'size.12',
+    rawValue: '1',
+    type: 'sizing',
+    value: 1,
+  },
+] as SingleToken[];
+
+const mockSetInputValue = jest.fn();
+const mockHandleChange = jest.fn();
+
 describe('DownShiftInput', () => {
   it('filteredValue should only replace {} or $ and remain all letters', () => {
     const dataStore = [
@@ -30,4 +90,20 @@ describe('DownShiftInput', () => {
       expect(data.input.replace(/[{}$]/g, '')).toBe(data.output);
     });
   });
+
+  it('should return matching tokens', () => {
+    const result = render(
+      <DownshiftInput
+        type="color"
+        resolvedTokens={resolvedTokens}
+        setInputValue={mockSetInputValue}
+        handleChange={mockHandleChange}
+        value="{"
+        suffix
+      />,
+    );
+    result.getByTestId('downshift-input-suffix-button').click();
+    expect(result.getByText('#e2e8f0')).toBeInTheDocument();
+    expect(result.getByText('#cbd5e1')).toBeInTheDocument();
+  });
 });
diff --git a/src/app/components/DownshiftInput/DownshiftInput.tsx b/src/app/components/DownshiftInput/DownshiftInput.tsx
@@ -114,7 +114,6 @@ export const DownshiftInput: React.FunctionComponent<DownShiftProps> = ({
 }) => {
   const [showAutoSuggest, setShowAutoSuggest] = React.useState<boolean>(false);
   const [isFirstLoading, setisFirstLoading] = React.useState<boolean>(true);
-
   const filteredValue = useMemo(() => ((showAutoSuggest || typeof value !== 'string') ? '' : value?.replace(/[{}$]/g, '')), [
     showAutoSuggest,
     value,
@@ -140,7 +139,9 @@ export const DownshiftInput: React.FunctionComponent<DownShiftProps> = ({
       .filter(
         (token: SingleToken) => !filteredValue || token.name.toLowerCase().includes(filteredValue.toLowerCase()),
       )
-      .filter((token: SingleToken) => token?.type === type && token.name !== initialName),
+      .filter((token: SingleToken) => token?.type === type && token.name !== initialName).sort((a, b) => (
+        a.name.localeCompare(b.name)
+      )),
     [resolvedTokens, filteredValue, type],
   );
 
@@ -206,7 +207,7 @@ export const DownshiftInput: React.FunctionComponent<DownShiftProps> = ({
               getInputProps={getInputProps}
             />
             {suffix && (
-              <StyledInputSuffix type="button" onClick={handleAutoSuggest}>
+              <StyledInputSuffix type="button" data-testid="downshift-input-suffix-button" onClick={handleAutoSuggest}>
                 <StyledIconDisclosure />
               </StyledInputSuffix>
             )}

diff --git a/src/app/components/ExportProvider/SingleFileExport.test.tsx b/src/app/components/ExportProvider/SingleFileExport.test.tsx
@@ -1,6 +1,6 @@
+import React from 'react';
 import { TokenTypes } from '@/constants/TokenTypes';
 import { AnyTokenList } from '@/types/tokens';
-import React from 'react';
 import { Provider } from 'react-redux';
 import {
   render, fireEvent, createMockStore,