Merge pull request #254 from CrowdStrike/add-multiselect-test-helpers

Add Multiselect test helpers

Author: clintcs

.changeset/fluffy-meals-hammer.md

@@ -0,0 +1,6 @@
+---
+'@crowdstrike/ember-toucan-core': minor
+'@crowdstrike/ember-toucan-form': minor
+---
+
+Add Multiselect test helpers.

docs/components/autocomplete/index.md

@@ -7,7 +7,7 @@ If you are building forms, you may be interested in the [AutocompleteField](./au
 
 Required.
 
-`@noResultsText` is shown when there are no results after filtering. 
+`@noResultsText` is shown when there are no results after filtering.
 
 ```hbs
 <Form::Controls::Autocomplete
@@ -37,7 +37,7 @@ A CSS class to add to this component's content container. Commonly used to speci
 
 Optional.
 
-`@options` forms the content of this component. 
+`@options` forms the content of this component.
 
 ```hbs
 <Form::Controls::Autocomplete
@@ -86,8 +86,8 @@ export default class extends Component {
 
 Optional.
 
-Called when the user makes a selection. 
-It is called with the selected option (derived from `@options`) as its only argument. 
+Called when the user makes a selection.
+It is called with the selected option (derived from `@options`) as its only argument.
 You'll want to update `@selected` with the new value in your on change handler.
 
 ```hbs
@@ -125,8 +125,8 @@ export default class extends Component {
 
 Optional.
 
-By default, when `@options` are an array of strings, the built-in filtering does simple `String.prototype.startsWith` filtering. 
-There may be cases where you need to write your own filtering logic completely that is more complex than the built-in `String.prototype.startsWith` filtering described. 
+By default, when `@options` are an array of strings, the built-in filtering does simple `String.prototype.startsWith` filtering.
+There may be cases where you need to write your own filtering logic completely that is more complex than the built-in `String.prototype.startsWith` filtering described.
 To do so, leverage `@onFilter` instead. This function should return an array of items that will then be used to populate the dropdown results.
 
 ```hbs
@@ -224,3 +224,7 @@ Set the `@hasError` argument to apply an error box shadow to the `<input>`.
 ```hbs
 <Form::Controls::Autocomplete @hasError={{true}} />
 ```
+
+## Test Helpers
+
+Test helpers for selecting common elements are available via `@crowdstrike/ember-toucan-core/test-support`.

docs/components/multiselect/index.md

@@ -346,36 +346,6 @@ Set the `@hasError` argument to apply an error box shadow to the `<input>`.
 <Form::Controls::Multiselect @hasError={{true}} />
 ```
 
-## Test Selectors
+## Test Helpers
 
-### Container
-
-`data-multiselect-container` is provided to target the wrapping div element for the entire component.
-
-```js
-assert.dom('[data-multiselect-container]').hasClass('bg-overlay');
-```
-
-### Selected Chips
-
-Target selected chips via `data-multiselect-selected-option`.
-
-```js
-// Query how many selected chips there are
-assert.dom('[data-multiselect-selected-option]').exists({ count: 2 });
-```
-
-### Select Chip Remove Button
-
-Target a selected chip's remove button via `data-multiselect-remove-option`.
-
-```js
-// Query how many remove buttons there are
-assert.dom('[data-multiselect-remove-option]').exists({ count: 3 });
-
-// Click a particular remove button
-let removeButtons = document.querySelectorAll(
-  '[data-multiselect-remove-option]'
-);
-await click(removeButtons[1]);
-```
+Test helpers for selecting common elements are available via `@crowdstrike/ember-toucan-core/test-support`.

packages/ember-toucan-core/src/-private/components/form/controls/multiselect/chip.gts

@@ -18,7 +18,7 @@ const ToucanCoreMultiselectChipComponent: TemplateOnlyComponent<ToucanCoreMultis
     <div
       class="min-h-6 bg-normal-idle flex items-center gap-x-2.5 rounded-sm px-2 py-1"
       data-index={{@index}}
-      data-multiselect-selected-option
+      data-multiselect-chip
       ...attributes
     >
       {{yield}}

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

@@ -97,12 +97,12 @@ export default class ToucanCoreMultiselectControlComponent extends Component<Tou
     {{! template-lint-disable require-presentational-children }}
     {{#let (uniqueId) as |id|}}
       <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}}
@@ -129,7 +129,7 @@ export default class ToucanCoreMultiselectControlComponent extends Component<Tou
           @isDisabled={{@isDisabled}}
           @isReadOnly={{@isReadOnly}}
           @value={{@value}}
-          data-multiselect-option-checkbox
+          data-multiselect-checkbox
         />
 
         <span class="truncate">

packages/ember-toucan-core/src/-private/components/form/controls/multiselect/select-all.gts

@@ -101,13 +101,13 @@ export default class ToucanCoreMultiselectSelectAllControlComponent extends Comp
     {{! template-lint-disable require-presentational-children }}
     {{#let (uniqueId) as |id|}}
       <li
+        aria-current={{if @isActive "true" "false"}}
         aria-selected={{if @isSelected "true" "false"}}
         class="my-0 cursor-default px-2 leading-4
           {{this.styles}}
           {{this.className}}
           "
-        data-active={{if @isActive "true" "false"}}
-        data-multiselect-select-all-option
+        data-multiselect-select-all
         id="{{@popoverId}}-{{@index}}"
         role="option"
         {{on "click" this.onClick}}