Add Autocomplete test helpers

.changeset/heavy-clocks-collect.md

@@ -0,0 +1,6 @@
+---
+'@crowdstrike/ember-toucan-core': patch
+'@crowdstrike/ember-toucan-form': patch
+---
+
+add Autocomplete test helpers.

README.md

@@ -19,6 +19,10 @@ Toucan provides a set of accessible and reusable components that make it easy to
 
 The `core` package contains the Toucan-styled Ember components. The `form` package allows users to build forms using [`ember-headless-form`](https://github.com/CrowdStrike/ember-headless-form) with the `core` components.
 
+## Usage
+
+Visit our [documentation website](https://ember-toucan-core.pages.dev/).
+
 ### Compatibility
 
 - Ember.js 4.8 or above
@@ -51,10 +55,6 @@ npm install @crowdstrike/ember-toucan-form
 ember install @crowdstrike/ember-toucan-form
 ```
 
-## Usage
-
-Visit our [documentation website](https://ember-toucan-core.pages.dev/).
-
 ## Contributing
 
 See the [Contributing](CONTRIBUTING.md) guide for details.

packages/ember-toucan-core/src/-private/components/form/controls/autocomplete/option.gts

@@ -96,12 +96,12 @@ export default class ToucanCoreAutocompleteOptionComponent extends Component<Tou
   <template>
     {{! template-lint-disable require-presentational-children }}
     <li
+      aria-current={{if @isActive "true" "false"}}
       aria-selected={{if @isSelected "true" "false"}}
       class="my-0 flex cursor-default items-center gap-2 px-2 py-2 leading-4
         {{this.styles}}
         {{this.className}}
         "
-      data-active={{if @isActive "true" "false"}}
       id="{{@popoverId}}-{{@index}}"
       role="option"
       {{on "click" this.onClick}}

packages/ember-toucan-core/src/components/form/controls/autocomplete.gts

@@ -468,123 +468,125 @@ export default class ToucanFormAutocompleteControlComponent extends Component<To
       @placement="bottom-start"
       as |velcro|
     >
-      <div class="relative flex w-full items-center">
-        {{! template-lint-disable no-redundant-role  }}
-        <input
-          aria-activedescendant={{this.activeDescendant}}
-          aria-autocomplete="list"
-          aria-controls={{this.popoverId}}
-          aria-expanded={{this.isPopoverOpen}}
-          aria-haspopup="listbox"
-          autocapitalize="none"
-          autocomplete="off"
-          autocorrect="off"
-          class="focus:outline-none w-full rounded-sm border-none py-1 pl-2 pr-6 transition-shadow
-            {{this.styles}}"
-          disabled={{@isDisabled}}
-          readonly={{@isReadOnly}}
-          role="combobox"
-          spellcheck="false"
-          type="text"
-          value={{this.inputValue}}
-          {{on
-            "blur"
-            (if
-              this.isDisabledOrReadOnlyOrWithoutOptions
-              this.noop
-              this.closePopover
-            )
-          }}
-          {{on
-            "blur"
-            (if
-              this.isDisabledOrReadOnlyOrWithoutOptions
-              this.noop
-              this.resetEverything
-            )
-          }}
-          {{on
-            "click"
-            (if
-              this.isDisabledOrReadOnlyOrWithoutOptions
-              this.noop
-              this.openPopover
-            )
-          }}
-          {{on
-            "click"
-            (if
-              this.isDisabledOrReadOnlyOrWithoutOptions
-              this.noop
-              this.highlightInputValue
-            )
-          }}
-          {{on
-            "focus"
-            (if
-              this.isDisabledOrReadOnlyOrWithoutOptions
-              this.noop
-              this.openPopover
-            )
-          }}
-          {{on
-            "keydown"
-            (if
-              this.isDisabledOrReadOnlyOrWithoutOptions this.noop this.onKeydown
-            )
-          }}
-          {{on
-            "input"
-            (if
-              this.isDisabledOrReadOnlyOrWithoutOptions this.noop this.onInput
-            )
-          }}
-          {{velcro.hook}}
-          ...attributes
-        />
-
-        <this.Chevron
-          class="text-text-and-icons pointer-events-none absolute right-1 top-0 ml-auto h-full transform transition-transform duration-200
-            {{if this.isPopoverOpen 'rotate-180'}}"
-        />
-      </div>
-
-      {{#if this.isPopoverOpen}}
-        <ul
-          class="border-surface-inner bg-surface-2xl max-h-listbox my-0 list-none overflow-y-auto overscroll-contain rounded-sm border py-1 pl-0 shadow-xl
-            {{if @contentClass @contentClass}}"
-          id={{this.popoverId}}
-          role="listbox"
-          {{velcro.loop}}
-        >
-          {{#if this.options}}
-            {{#each this.options as |option index|}}
-              {{yield
-                (hash
-                  Option=(component
-                    this.Option
-                    isActive=(this.isEqual index this.activeIndex)
-                    isDisabled=@isDisabled
-                    isSelected=(this.isEqual @selected option)
-                    isReadOnly=@isReadOnly
-                    onClick=(fn this.onChange index)
-                    onMouseover=(fn this.onOptionMouseover index)
-                    popoverId=this.popoverId
-                    index=index
+      <div data-autocomplete>
+        <div class="relative flex w-full items-center">
+          {{! template-lint-disable no-redundant-role }}
+          <input
+            aria-activedescendant={{this.activeDescendant}}
+            aria-autocomplete="list"
+            aria-controls={{this.popoverId}}
+            aria-expanded={{this.isPopoverOpen}}
+            aria-haspopup="listbox"
+            autocapitalize="none"
+            autocomplete="off"
+            autocorrect="off"
+            class="focus:outline-none w-full rounded-sm border-none py-1 pl-2 pr-6 transition-shadow
+              {{this.styles}}"
+            disabled={{@isDisabled}}
+            readonly={{@isReadOnly}}
+            role="combobox"
+            spellcheck="false"
+            type="text"
+            value={{this.inputValue}}
+            {{on
+              "blur"
+              (if
+                this.isDisabledOrReadOnlyOrWithoutOptions
+                this.noop
+                this.closePopover
+              )
+            }}
+            {{on
+              "blur"
+              (if
+                this.isDisabledOrReadOnlyOrWithoutOptions
+                this.noop
+                this.resetEverything
+              )
+            }}
+            {{on
+              "click"
+              (if
+                this.isDisabledOrReadOnlyOrWithoutOptions
+                this.noop
+                this.openPopover
+              )
+            }}
+            {{on
+              "click"
+              (if
+                this.isDisabledOrReadOnlyOrWithoutOptions
+                this.noop
+                this.highlightInputValue
+              )
+            }}
+            {{on
+              "focus"
+              (if
+                this.isDisabledOrReadOnlyOrWithoutOptions
+                this.noop
+                this.openPopover
+              )
+            }}
+            {{on
+              "keydown"
+              (if
+                this.isDisabledOrReadOnlyOrWithoutOptions this.noop this.onKeydown
+              )
+            }}
+            {{on
+              "input"
+              (if
+                this.isDisabledOrReadOnlyOrWithoutOptions this.noop this.onInput
+              )
+            }}
+            {{velcro.hook}}
+            ...attributes
+          />
+
+          <this.Chevron
+            class="text-text-and-icons pointer-events-none absolute right-1 top-0 ml-auto h-full transform transition-transform duration-200
+              {{if this.isPopoverOpen 'rotate-180'}}"
+          />
+        </div>
+
+        {{#if this.isPopoverOpen}}
+          <ul
+            class="border-surface-inner bg-surface-2xl max-h-listbox my-0 list-none overflow-y-auto overscroll-contain rounded-sm border py-1 pl-0 shadow-xl
+              {{if @contentClass @contentClass}}"
+            id={{this.popoverId}}
+            role="listbox"
+            {{velcro.loop}}
+          >
+            {{#if this.options}}
+              {{#each this.options as |option index|}}
+                {{yield
+                  (hash
+                    Option=(component
+                      this.Option
+                      isActive=(this.isEqual index this.activeIndex)
+                      isDisabled=@isDisabled
+                      isSelected=(this.isEqual @selected option)
+                      isReadOnly=@isReadOnly
+                      onClick=(fn this.onChange index)
+                      onMouseover=(fn this.onOptionMouseover index)
+                      popoverId=this.popoverId
+                      index=index
+                    )
+                    option=option
                   )
-                  option=option
-                )
-              }}
-            {{/each}}
-          {{else}}
-            <li
-              aria-live="assertive"
-              class="text-titles-and-attributes my-0 flex cursor-default items-center px-3 py-2 leading-4"
-              role="status"
-            >{{@noResultsText}}</li>
-          {{/if}}
-        </ul>
-      {{/if}}
+                }}
+              {{/each}}
+            {{else}}
+              <li
+                aria-live="assertive"
+                class="text-titles-and-attributes my-0 flex cursor-default items-center px-3 py-2 leading-4"
+                role="status"
+              >{{@noResultsText}}</li>
+            {{/if}}
+          </ul>
+        {{/if}}
+      </div>
     </Velcro>
   </template>
 }

packages/ember-toucan-core/src/test-support/components/autocomplete.ts

@@ -0,0 +1,33 @@
+import { PageObject } from 'fractal-page-object';
+
+export class AutocompletePageObject extends PageObject {
+  get active() {
+    return this.element
+      ?.closest('[data-autocomplete]')
+      ?.querySelector('[aria-current="true"]');
+  }
+
+  get list() {
+    return this.element
+      ?.closest('[data-autocomplete]')
+      ?.querySelector('[role="listbox"]');
+  }
+
+  get options() {
+    return this.element
+      ?.closest('[data-autocomplete]')
+      ?.querySelectorAll('[role="option"]');
+  }
+
+  get selected() {
+    return this.element
+      ?.closest('[data-autocomplete]')
+      ?.querySelector('[aria-selected="true"]');
+  }
+
+  get status() {
+    return this.element
+      ?.closest('[data-autocomplete]')
+      ?.querySelector('[role="status"]');
+  }
+}

packages/ember-toucan-core/src/test-support/components/button.ts

@@ -2,7 +2,7 @@ import { click } from '@ember/test-helpers';
 
 import { PageObject } from 'fractal-page-object';
 
-export class Button extends PageObject {
+export class ButtonPageObject extends PageObject {
   async click() {
     if (this.element) {
       await click(this.element);

packages/ember-toucan-core/src/test-support/index.ts

@@ -1 +1,2 @@
-export { Button } from './components/button';
+export { AutocompletePageObject } from './components/autocomplete';
+export { ButtonPageObject } from './components/button';