update tests

algolia · Sep 26, 2023 · 10cc1c9 · 10cc1c9
1 parent ee60791
commit 10cc1c9
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 22 deletions.
diff --git a/packages/autocomplete-core/src/__tests__/getInputProps.test.ts b/packages/autocomplete-core/src/__tests__/getInputProps.test.ts
@@ -89,11 +89,21 @@ describe('getInputProps', () => {
   test('returns aria-controls with list ID when panel is open', () => {
     const { getInputProps, inputElement } = createPlayground(
       createAutocomplete,
-      { id: 'autocomplete', initialState: { isOpen: true } }
+      {
+        id: 'autocomplete',
+        initialState: {
+          isOpen: true,
+          collections: [
+            createCollection({
+              source: { sourceId: 'testSource' },
+            }),
+          ],
+        },
+      }
     );
     const inputProps = getInputProps({ inputElement });
 
-    expect(inputProps['aria-controls']).toEqual('autocomplete-list');
+    expect(inputProps['aria-controls']).toEqual('autocomplete-testSource-list');
   });
 
   test('returns aria-labelledby with label ID', () => {
@@ -669,14 +679,15 @@ describe('getInputProps', () => {
           initialState: {
             collections: [
               createCollection({
+                source: { sourceId: 'testSource' },
                 items: [{ label: '1' }],
               }),
             ],
           },
           ...props,
         });
         const item = document.createElement('div');
-        item.setAttribute('id', 'autocomplete-item-0');
+        item.setAttribute('id', 'autocomplete-testSource-item-0');
         document.body.appendChild(item);
 
         return { ...playground, item };

diff --git a/packages/autocomplete-core/src/__tests__/getItemProps.test.ts b/packages/autocomplete-core/src/__tests__/getItemProps.test.ts
@@ -29,7 +29,7 @@ describe('getItemProps', () => {
       ...defaultItemProps,
     });
 
-    expect(itemProps.id).toEqual('autocomplete-item-0');
+    expect(itemProps.id).toEqual('autocomplete-testSource-item-0');
   });
 
   test('returns the role to option', () => {

diff --git a/packages/autocomplete-core/src/__tests__/getRootProps.test.ts b/packages/autocomplete-core/src/__tests__/getRootProps.test.ts
@@ -1,3 +1,4 @@
+import { createCollection } from '../../../../test/utils';
 import { createAutocomplete } from '../createAutocomplete';
 
 describe('getRootProps', () => {
@@ -60,11 +61,16 @@ describe('getRootProps', () => {
       id: 'autocomplete',
       initialState: {
         isOpen: true,
+        collections: [
+          createCollection({
+            source: { sourceId: 'testSource' },
+          }),
+        ],
       },
     });
     const rootProps = autocomplete.getRootProps({});
 
-    expect(rootProps['aria-owns']).toEqual('autocomplete-list');
+    expect(rootProps['aria-owns']).toEqual('autocomplete-testSource-list');
   });
 
   test('returns label id in aria-labelledby', () => {

diff --git a/packages/autocomplete-core/src/utils/getAutocompleteElementId.ts b/packages/autocomplete-core/src/utils/getAutocompleteElementId.ts
@@ -14,5 +14,6 @@ export function getAutocompleteElementId(
 ) {
   return [autocompleteInstanceId, source?.sourceId, elementId]
     .filter(Boolean)
-    .join('-');
+    .join('-')
+    .replace(/\s/g, '');
 }
diff --git a/packages/autocomplete-js/src/__tests__/detached.test.ts b/packages/autocomplete-js/src/__tests__/detached.test.ts
@@ -80,7 +80,7 @@ describe('detached', () => {
     });
 
     const firstItem = document.querySelector<HTMLLIElement>(
-      '#autocomplete-0-item-0'
+      '#autocomplete-testSource-item-0'
     )!;
 
     // Select the first item

diff --git a/packages/autocomplete-js/src/__tests__/renderer.test.ts b/packages/autocomplete-js/src/__tests__/renderer.test.ts
@@ -221,15 +221,15 @@ describe('renderer', () => {
                 data-autocomplete-source-id="testSource"
               >
                 <ul
-                  aria-labelledby="autocomplete-0-0-label"
+                  aria-labelledby="autocomplete-0-label"
                   class="aa-List"
-                  id="autocomplete-0-0-list"
+                  id="autocomplete-0-testSource-list"
                   role="listbox"
                 >
                   <li
                     aria-selected="false"
                     class="aa-Item"
-                    id="autocomplete-0-0-item-0"
+                    id="autocomplete-0-testSource-item-0"
                     role="option"
                   >
                     1

diff --git a/packages/autocomplete-js/src/__tests__/templates.test.tsx b/packages/autocomplete-js/src/__tests__/templates.test.tsx
@@ -92,15 +92,15 @@ describe('templates', () => {
       expect(within(panelContainer).getByRole('listbox'))
         .toMatchInlineSnapshot(`
         <ul
-          aria-labelledby="autocomplete-0-0-label"
+          aria-labelledby="autocomplete-0-label"
           class="aa-List"
-          id="autocomplete-0-0-list"
+          id="autocomplete-0-testSource-list"
           role="listbox"
         >
           <li
             aria-selected="false"
             class="aa-Item"
-            id="autocomplete-0-0-item-0"
+            id="autocomplete-0-testSource-item-0"
             role="option"
           >
             <div
@@ -208,15 +208,15 @@ describe('templates', () => {
       expect(within(panelContainer).getByRole('listbox'))
         .toMatchInlineSnapshot(`
         <ul
-          aria-labelledby="autocomplete-0-0-label"
+          aria-labelledby="autocomplete-0-label"
           class="aa-List"
-          id="autocomplete-0-0-list"
+          id="autocomplete-0-testSource-list"
           role="listbox"
         >
           <li
             aria-selected="false"
             class="aa-Item"
-            id="autocomplete-0-0-item-0"
+            id="autocomplete-0-testSource-item-0"
             role="option"
           >
             <div
@@ -343,15 +343,15 @@ describe('templates', () => {
                 </header>
               </div>
               <ul
-                aria-labelledby="autocomplete-0-0-label"
+                aria-labelledby="autocomplete-0-label"
                 class="aa-List"
-                id="autocomplete-0-0-list"
+                id="autocomplete-0-testSource-list"
                 role="listbox"
               >
                 <li
                   aria-selected="false"
                   class="aa-Item"
-                  id="autocomplete-0-0-item-0"
+                  id="autocomplete-0-testSource-item-0"
                   role="option"
                 >
                   <div
@@ -507,15 +507,15 @@ describe('templates', () => {
                 </header>
               </div>
               <ul
-                aria-labelledby="autocomplete-0-0-label"
+                aria-labelledby="autocomplete-0-label"
                 class="aa-List"
-                id="autocomplete-0-0-list"
+                id="autocomplete-0-testSource-list"
                 role="listbox"
               >
                 <li
                   aria-selected="false"
                   class="aa-Item"
-                  id="autocomplete-0-0-item-0"
+                  id="autocomplete-0-testSource-item-0"
                   role="option"
                 >
                   div