Merge pull request #354 from thejackshelton/add-headless-autocomplete

test(cypress): fixed endless loading tests in autocomplete

Author: thejackshelton

packages/kit-headless/src/components/autocomplete/autocomplete.spec.tsx

@@ -9,89 +9,89 @@ import {
   AutocompleteOption,
 } from './index';
 
-const fruits = [
-  'Apple',
-  'Apricot',
-  'Avocado 🥑',
-  'Banana',
-  'Bilberry',
-  'Blackberry',
-  'Blackcurrant',
-  'Blueberry',
-  'Boysenberry',
-  'Currant',
-  'Cherry',
-  'Coconut',
-  'Cranberry',
-  'Cucumber',
-  'Custard apple',
-  'Damson',
-  'Date',
-  'Dragonfruit',
-  'Durian',
-  'Elderberry',
-  'Feijoa',
-  'Fig',
-  'Gooseberry',
-  'Grape',
-  'Raisin',
-  'Grapefruit',
-  'Guava',
-  'Honeyberry',
-  'Huckleberry',
-  'Jabuticaba',
-  'Jackfruit',
-  'Jambul',
-  'Juniper berry',
-  'Kiwifruit',
-  'Kumquat',
-  'Lemon',
-  'Lime',
-  'Loquat',
-  'Longan',
-  'Lychee',
-  'Mango',
-  'Mangosteen',
-  'Marionberry',
-  'Melon',
-  'Cantaloupe',
-  'Honeydew',
-  'Watermelon',
-  'Miracle fruit',
-  'Mulberry',
-  'Nectarine',
-  'Nance',
-  'Olive',
-  'Orange',
-  'Clementine',
-  'Mandarine',
-  'Tangerine',
-  'Papaya',
-  'Passionfruit',
-  'Peach',
-  'Pear',
-  'Persimmon',
-  'Plantain',
-  'Plum',
-  'Pineapple',
-  'Pomegranate',
-  'Pomelo',
-  'Quince',
-  'Raspberry',
-  'Salmonberry',
-  'Rambutan',
-  'Redcurrant',
-  'Salak',
-  'Satsuma',
-  'Soursop',
-  'Star fruit',
-  'Strawberry',
-  'Tamarillo',
-  'Tamarind',
-  'Yuzu',
-];
-
 const RegularAutocomplete = component$(() => {
+  const fruits = [
+    'Apple',
+    'Apricot',
+    'Avocado 🥑',
+    'Banana',
+    'Bilberry',
+    'Blackberry',
+    'Blackcurrant',
+    'Blueberry',
+    'Boysenberry',
+    'Currant',
+    'Cherry',
+    'Coconut',
+    'Cranberry',
+    'Cucumber',
+    'Custard apple',
+    'Damson',
+    'Date',
+    'Dragonfruit',
+    'Durian',
+    'Elderberry',
+    'Feijoa',
+    'Fig',
+    'Gooseberry',
+    'Grape',
+    'Raisin',
+    'Grapefruit',
+    'Guava',
+    'Honeyberry',
+    'Huckleberry',
+    'Jabuticaba',
+    'Jackfruit',
+    'Jambul',
+    'Juniper berry',
+    'Kiwifruit',
+    'Kumquat',
+    'Lemon',
+    'Lime',
+    'Loquat',
+    'Longan',
+    'Lychee',
+    'Mango',
+    'Mangosteen',
+    'Marionberry',
+    'Melon',
+    'Cantaloupe',
+    'Honeydew',
+    'Watermelon',
+    'Miracle fruit',
+    'Mulberry',
+    'Nectarine',
+    'Nance',
+    'Olive',
+    'Orange',
+    'Clementine',
+    'Mandarine',
+    'Tangerine',
+    'Papaya',
+    'Passionfruit',
+    'Peach',
+    'Pear',
+    'Persimmon',
+    'Plantain',
+    'Plum',
+    'Pineapple',
+    'Pomegranate',
+    'Pomelo',
+    'Quince',
+    'Raspberry',
+    'Salmonberry',
+    'Rambutan',
+    'Redcurrant',
+    'Salak',
+    'Satsuma',
+    'Soursop',
+    'Star fruit',
+    'Strawberry',
+    'Tamarillo',
+    'Tamarind',
+    'Yuzu',
+  ];
+
   return (
     <>
       <AutocompleteRoot style="width: fit-content">

packages/kit-headless/src/components/select/select.spec.tsx

@@ -74,28 +74,14 @@ describe('Select', () => {
   it('should toggle aria-expanded and the listbox should be hidden', () => {
     cy.mount(<ThreeOptionSelect />);
 
-    cy.get('button').click().should('have.attr', 'aria-expanded', 'true');
-
-    // current passed test for now. doesn't work with click for some reason
     cy.get('button')
-      .focus()
-      .type('{enter}')
+      .click()
+      .should('have.attr', 'aria-expanded', 'true')
+      .click()
       .should('have.attr', 'aria-expanded', 'false');
 
-    cy.findByRole('listbox').should('not.exist');
-  });
-
-  it('should use the arrow keys to navigate options', () => {
-    cy.mount(<ThreeOptionSelect />);
-
-    cy.findByTestId('selectTrigger').type('{enter}');
-
-    cy.findByRole('listbox').should('be.visible');
-
-    cy.findByRole('group').type('{downarrow}');
-
-    cy.findByTestId('selectOptionTwo').type('{enter}').should('not.be.visible');
+    // current passed test for now. doesn't work with click for some reason
 
-    cy.findByTestId('selectValue').should('have.text', 'Two');
+    cy.findByRole('listbox').should('not.exist');
   });
 });