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

autocomplete tests, attempted fix at website build, disabled support for autocomplete

Author: thejackshelton

apps/website/src/_state/component-statuses.ts

@@ -40,6 +40,7 @@ export const componentsStatuses: ComponentKitsStatuses = {
   },
   headless: {
     Accordion: 'Planned',
+    Autocomplete: 'Draft',
     Carousel: 'Planned',
     Popover: 'Planned',
     Select: 'Draft',

apps/website/src/routes/docs/headless/(components)/autocomplete/examples.tsx

@@ -27,12 +27,12 @@ export const Example01 = component$(() => {
   return (
     <PreviewCodeExample>
       <div q:slot="actualComponent">
-        <AutocompleteRoot class="relative text-white">
-          <AutocompleteLabel class="text-inherit font-semibold">
+        <AutocompleteRoot class="relative">
+          <AutocompleteLabel class=" font-semibold dark:text-white text-[#333333]">
             Personal Trainers ⚡
           </AutocompleteLabel>
           <AutocompleteTrigger class="bg-[#1f2532] flex items-center rounded-sm border-[#7d95b3] border-[1px] relative">
-            <AutocompleteInput class="w-44 bg-inherit px-2 pr-6" />
+            <AutocompleteInput class="w-44 bg-inherit px-2 pr-6 text-white" />
             <AutocompleteButton class="w-6 h-6 group absolute right-0">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -47,7 +47,7 @@ export const Example01 = component$(() => {
               </svg>
             </AutocompleteButton>
           </AutocompleteTrigger>
-          <AutocompleteListbox class="w-full bg-[#1f2532] px-4 py-2 mt-2 rounded-sm border-[#7d95b3] border-[1px]">
+          <AutocompleteListbox class="text-white w-full bg-[#1f2532] px-4 py-2 mt-2 rounded-sm border-[#7d95b3] border-[1px]">
             {trainers.map((trainer, index) => (
               <AutocompleteOption
                 optionValue={trainer}

apps/website/src/routes/docs/headless/(components)/select/examples.tsx

@@ -15,8 +15,8 @@ export const Example01 = component$(() => {
   return (
     <PreviewCodeExample>
       <div q:slot="actualComponent">
-        <SelectRoot class="dark:bg-gray-700">
-          <SelectLabel class="text-white font-semibold ml-2">
+        <SelectRoot>
+          <SelectLabel class=" font-semibold ml-2 text-[#333333] dark:text-white">
             Qwik Fruits
           </SelectLabel>
           <SelectTrigger class="flex justify-between items-center px-8 bg-[#1f2532] border-[#7d95b3] border-[1px] rounded-md p-4 group peer">

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

@@ -8,7 +8,6 @@ import {
   AutocompleteListbox,
   AutocompleteOption,
 } from './autocomplete';
-import './autocompleteTest.css';
 
 const fruits = [
   'Apple',
@@ -133,15 +132,19 @@ describe('Autocomplete', () => {
     cy.checkA11yForComponent();
   });
 
-  it('Should open the listbox and aria-expanded is true on the button', () => {
+  it(`GIVEN a button is present that controls the visibility of a listbox 
+      WHEN the button is clicked,
+      THEN the listbox should open and the attribute 'aria-expanded' on the button should be set to 'true'.`, () => {
     cy.mount(<RegularAutocomplete />);
 
     cy.get('button').click().should('have.attr', 'aria-expanded', 'true');
 
     cy.findByRole('listbox').should('be.visible');
   });
 
-  it('Should close the listbox and aria-expanded is false on the button', () => {
+  it(`GIVEN a button is present that controls the visibility of a listbox, and the listbox is currently open,
+      WHEN the button is clicked,
+      THEN the listbox should close and the attribute 'aria-expanded' on the button should be set to 'false'.`, () => {
     cy.mount(<RegularAutocomplete />);
 
     cy.get('button')
@@ -152,15 +155,69 @@ describe('Autocomplete', () => {
     cy.findByRole('listbox').should('not.exist');
   });
 
-  it('Should input a value and the listbox should open', () => {
+  it(`GIVEN an open listbox
+      WHEN the user presses the 'Escape' key,
+      THEN the listbox should close and the attribute 'aria-expanded' on the button should be set to 'false'.`, () => {
+    cy.mount(<RegularAutocomplete />);
+
+    cy.get('button').click();
+
+    cy.findByRole('listbox');
+
+    cy.get('body').type(`{esc}`);
+
+    cy.findByRole('listbox').should('not.exist');
+  });
+
+  it(`GIVEN a focused option in a listbox,
+      WHEN the user presses the 'Home' key,
+      THEN the first option in the listbox should be focused.`, () => {
+    cy.mount(<RegularAutocomplete />);
+
+    cy.get('button').click();
+
+    cy.findByRole('option', { name: 'Yuzu' }).focus().type(`{home}`);
+
+    cy.get('li').first().should('have.focus');
+  });
+
+  it(`GIVEN a focused option in a listbox,
+      WHEN the user presses the 'End' key,
+      THEN the last option in the listbox should be focused.`, () => {
+    cy.mount(<RegularAutocomplete />);
+
+    cy.get('button').click();
+
+    cy.findByRole('option', { name: 'Apricot' }).focus().type(`{end}`);
+
+    cy.get('li').last().should('have.focus');
+  });
+
+  it(`GIVEN selected text in an input field,
+      WHEN the user presses the 'Delete' key,
+      THEN the text within the input field should be removed.`, () => {
+    cy.mount(<RegularAutocomplete />);
+
+    cy.get('input')
+      .type(`Here's some text!`)
+      .type(`{selectall}`)
+      .type(`{del}`)
+      .should('have.value', '');
+  });
+
+  it(`GIVEN an input field is present that is connected to a listbox,
+      WHEN a value is entered into the input field,
+      THEN the listbox should open.`, () => {
     cy.mount(<RegularAutocomplete />);
 
     cy.get('input').type(`Ap`);
 
     cy.findByRole('listbox').should('be.visible');
   });
 
-  it('Should input a value and select a value, with the input value as the option', () => {
+  it(`GIVEN an input field is present that is connected to a listbox,
+      WHEN a value is entered into the input field, and an option matching the input value is selected from the listbox,
+      THEN the selected value should populate the input field.`, () => {
     cy.mount(<RegularAutocomplete />);
 
     cy.get('input').type(`Ap`);
@@ -172,7 +229,9 @@ describe('Autocomplete', () => {
     cy.get('input').should('have.value', 'Apple');
   });
 
-  it('Should close the listbox when a value is selected', () => {
+  it(`GIVEN a listbox is open and populated with selectable options,
+      WHEN a value is selected from the listbox,
+      THEN the listbox should close.`, () => {
     cy.mount(<RegularAutocomplete />);
 
     cy.get('input').type(`Ap`);
@@ -184,7 +243,9 @@ describe('Autocomplete', () => {
     cy.findByRole('listbox').should('not.exist');
   });
 
-  it('Should focus the first filtered option when the down arrow is prssed', () => {
+  it(`GIVEN a listbox is open and populated with filtered options,
+      WHEN the down arrow key is pressed,
+      THEN the first filtered option in the listbox should receive focus.`, () => {
     cy.mount(<RegularAutocomplete />);
 
     cy.get('input').type(`Ba`);
@@ -196,23 +257,26 @@ describe('Autocomplete', () => {
     cy.get('li').filter(':visible').first().should('have.focus');
   });
 
-  it('Should select an option using the enter key, closing the listbox', () => {
+  it(`GIVEN a listbox is open and an option is in focus,
+      WHEN the enter key is pressed,
+      THEN the focused option should be selected and the listbox should close.`, () => {
     cy.mount(<RegularAutocomplete />);
 
-    cy.get('input').type(`Ba`);
+    cy.get('button').click();
 
     cy.findByRole('listbox').should('be.visible');
 
-    cy.get('input').type(`{downarrow}`);
+    cy.findByRole('option', { name: 'Guava' }).focus().type(`{enter}`);
 
-    cy.get('li').filter(':visible').first().type(`{enter}`);
-
-    cy.get('input').should('have.value', 'Banana');
+    cy.get('input').should('have.value', 'Guava');
 
     cy.findByRole('listbox').should('not.exist');
   });
 
-  it('Should go down an option and back up, using the up & down arrow keys', () => {
+  it(`GIVEN a listbox is open and populated with selectable options,
+      WHEN the down arrow key is pressed,
+      THEN focus should move to the next option in the list,
+      `, () => {
     cy.mount(<RegularAutocomplete />);
 
     cy.get('input').type(`A`);
@@ -221,12 +285,22 @@ describe('Autocomplete', () => {
 
     cy.get('input').type(`{downarrow}`);
 
-    cy.get('li').filter(':visible').first().type(`{downarrow}`);
+    cy.findByRole('option', { name: 'Apple' }).focus().type(`{downarrow}`);
 
     // grabs the 2nd element because the index is 1
     cy.get('li').filter(':visible').eq(1).should('have.focus');
+  });
+
+  it(`GIVEN a listbox is open and populated with selectable options,
+      WHEN the up arrow key is pressed,
+      THEN focus should move back to the previous option in the list.`, () => {
+    cy.mount(<RegularAutocomplete />);
+
+    cy.get('input').type(`A`);
+
+    cy.findByRole('listbox').should('be.visible');
 
-    cy.get('li').filter(':visible').eq(1).type(`{uparrow}`);
+    cy.findByRole('option', { name: 'Apricot' }).focus().type(`{uparrow}`);
 
     cy.get('li').filter(':visible').first().should('have.focus');
   });

packages/kit-headless/src/components/Autocomplete/autocomplete.stories.tsx

@@ -139,60 +139,6 @@ const RegularAutocomplete = () => (
         ))}
       </AutocompleteListbox>
     </AutocompleteRoot>
-    {/* <AutocompleteRoot style="width: fit-content">
-      <AutocompleteLabel>Label</AutocompleteLabel>
-      <AutocompleteTrigger>
-        <AutocompleteInput />
-        <AutocompleteButton>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            style="width: 20px; height: 20px;"
-          >
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </AutocompleteButton>
-      </AutocompleteTrigger>
-      <AutocompleteListbox class="listboxStyle">
-        {fruits.map((fruit, index) => (
-          <AutocompleteOption optionValue={fruit} key={index}>
-            {fruit}
-          </AutocompleteOption>
-        ))}
-      </AutocompleteListbox>
-    </AutocompleteRoot>
-    <AutocompleteRoot style="width: fit-content">
-      <AutocompleteLabel>Label</AutocompleteLabel>
-      <AutocompleteTrigger>
-        <AutocompleteInput />
-        <AutocompleteButton>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            style="width: 20px; height: 20px;"
-          >
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </AutocompleteButton>
-      </AutocompleteTrigger>
-      <AutocompleteListbox class="listboxStyle">
-        {fruits.map((fruit, index) => (
-          <AutocompleteOption optionValue={fruit} key={index}>
-            {fruit}
-          </AutocompleteOption>
-        ))}
-      </AutocompleteListbox>
-    </AutocompleteRoot> */}
   </>
 );