chore: add tests for selet component

josemarluedke · Feb 21, 2024 · e5d67e7 · e5d67e7
1 parent 20f5870
commit e5d67e7
Show file tree

Hide file tree

Showing 7 changed files with 494 additions and 104 deletions.
diff --git a/packages/collections/src/components/listbox/item.gts b/packages/collections/src/components/listbox/item.gts
@@ -140,6 +140,7 @@ class ListboxItem extends Component<ListboxItemSignature> {
       data-active="{{this.listItem.isActive}}"
       data-selected="{{this.listItem.isSelected}}"
       data-test-id="listbox-item"
+      data-component="listbox-item"
       data-key={{this.key}}
       disabled={{this.listItem.isDisabled}}
       class={{this.classNames.base}}

diff --git a/packages/collections/src/components/listbox/listbox.gts b/packages/collections/src/components/listbox/listbox.gts
@@ -134,6 +134,7 @@ class Listbox extends Component<ListboxSignature> {
       {{on "keydown" this.handleKeyDown}}
       {{on "keyup" this.handleKeyUp}}
       data-test-id="listbox"
+      data-component="listbox"
       class={{this.classNames}}
       ...attributes
     >

diff --git a/packages/forms/src/components/native-select.gts b/packages/forms/src/components/native-select.gts
@@ -104,6 +104,7 @@ class NativeSelect extends Component<NativeSelectSignature> {
       {{on "change" this.handleOnChange}}
       multiple={{this.isMultiple}}
       data-test-id="native-select"
+      data-component="native-select"
       class={{this.classNames}}
       ...attributes
     >

diff --git a/packages/forms/src/components/select.gts b/packages/forms/src/components/select.gts
@@ -68,7 +68,7 @@ interface SelectArgs<T = unknown>
 
 interface SelectSignature {
   Args: SelectArgs;
-  Element: HTMLUListElement | HTMLSelectElement;
+  Element: HTMLDivElement;
   Blocks: ListboxSignature['Blocks'];
 }
 
@@ -134,116 +134,118 @@ class Select extends Component<SelectSignature> {
 
   get classNames() {
     const { select } = useStyles();
-    const { base, icon, listbox } = select();
+    const { base, icon, trigger, listbox } = select();
     return {
       base: base({ class: this.args.class }),
+      trigger: trigger(),
       icon: icon(),
       listbox: listbox()
     };
   }
 
   <template>
-    <Popover
-      @placement={{@placement}}
-      @flipOptions={{@flipOptions}}
-      @middleware={{@middleware}}
-      @shiftOptions={{@shiftOptions}}
-      @offsetOptions={{@offsetOptions}}
-      @strategy={{@strategy}}
-      @didClose={{@didClose}}
-      @isOpen={{this.isOpen}}
-      @onOpenChange={{this.onOpenChange}}
-      as |p|
-    >
-      <VisuallyHidden>
-        <NativeSelect
-          @items={{@items}}
-          @allowEmpty={{@allowEmpty}}
-          @disabledKeys={{@disabledKeys}}
-          @onSelectionChange={{@onSelectionChange}}
-          @selectedKeys={{@selectedKeys}}
-          @selectionMode={{if @selectionMode @selectionMode "single"}}
-          @onItemsChange={{this.onItemsChange}}
-          ...attributes
-        >
-          <:item as |l|>
-            {{#if (has-block "item")}}
-              {{! @glint-expect-error: the signature of the native select item is not the same as the listtbox item}}
-              {{yield l to="item"}}
-            {{else}}
-              <l.Item @key={{l.key}}>
-                {{l.label}}
-              </l.Item>
-            {{/if}}
-          </:item>
-          <:default as |l|>
-            {{! @glint-expect-error: the signature of the native select is not the same as the listtbox}}
-            {{yield l to="default"}}
-          </:default>
-        </NativeSelect>
-      </VisuallyHidden>
-
-      <button
-        {{p.trigger}}
-        {{p.anchor}}
-        data-test-id="trigger"
-        class={{this.classNames.base}}
+    <div class={{this.classNames.base}} ...attributes>
+      <Popover
+        @placement={{@placement}}
+        @flipOptions={{@flipOptions}}
+        @middleware={{@middleware}}
+        @shiftOptions={{@shiftOptions}}
+        @offsetOptions={{@offsetOptions}}
+        @strategy={{@strategy}}
+        @didClose={{@didClose}}
+        @isOpen={{this.isOpen}}
+        @onOpenChange={{this.onOpenChange}}
+        as |p|
       >
-        <span>
-          {{this.selectedTextValue}}
-        </span>
+        <VisuallyHidden>
+          <NativeSelect
+            @items={{@items}}
+            @allowEmpty={{@allowEmpty}}
+            @disabledKeys={{@disabledKeys}}
+            @onSelectionChange={{@onSelectionChange}}
+            @selectedKeys={{@selectedKeys}}
+            @selectionMode={{if @selectionMode @selectionMode "single"}}
+            @onItemsChange={{this.onItemsChange}}
+          >
+            <:item as |l|>
+              {{#if (has-block "item")}}
+                {{! @glint-expect-error: the signature of the native select item is not the same as the listtbox item}}
+                {{yield l to="item"}}
+              {{else}}
+                <l.Item @key={{l.key}}>
+                  {{l.label}}
+                </l.Item>
+              {{/if}}
+            </:item>
+            <:default as |l|>
+              {{! @glint-expect-error: the signature of the native select is not the same as the listtbox}}
+              {{yield l to="default"}}
+            </:default>
+          </NativeSelect>
+        </VisuallyHidden>
 
-        <Icon class={{this.classNames.icon}} />
-      </button>
+        <button
+          {{p.trigger}}
+          {{p.anchor}}
+          data-test-id="trigger"
+          data-component="select-trigger"
+          class={{this.classNames.trigger}}
+        >
+          <span>
+            {{this.selectedTextValue}}
+          </span>
 
-      <p.Content
-        @destinationElementId={{@destinationElementId}}
-        @renderInPlace={{@renderInPlace}}
-        @disableFocusTrap={{this.disableFocusTrap}}
-        @blockScroll={{this.blockScroll}}
-        @transitionDuration={{@transitionDuration}}
-        @backdrop={{this.backdrop}}
-        @disableTransitions={{@disableTransitions}}
-        @focusTrapOptions={{@focusTrapOptions}}
-        @closeOnOutsideClick={{@closeOnOutsideClick}}
-        @closeOnEscapeKey={{@closeOnEscapeKey}}
-        @backdropTransition={{@backdropTransition}}
-        @transition={{@transition}}
-      >
-        <Listbox
-          @items={{@items}}
-          @allowEmpty={{@allowEmpty}}
-          @appearance={{@appearance}}
-          @disabledKeys={{@disabledKeys}}
-          @intent={{@intent}}
-          @isKeyboardEventsEnabled={{true}}
-          @onAction={{this.onAction}}
-          @onSelectionChange={{@onSelectionChange}}
-          @selectedKeys={{@selectedKeys}}
-          @selectionMode={{if @selectionMode @selectionMode "single"}}
-          @type="listbox"
-          @class={{this.classNames.listbox}}
-          ...attributes
+          <Icon class={{this.classNames.icon}} />
+        </button>
+
+        <p.Content
+          @destinationElementId={{@destinationElementId}}
+          @renderInPlace={{@renderInPlace}}
+          @disableFocusTrap={{this.disableFocusTrap}}
+          @blockScroll={{this.blockScroll}}
+          @transitionDuration={{@transitionDuration}}
+          @backdrop={{this.backdrop}}
+          @disableTransitions={{@disableTransitions}}
+          @focusTrapOptions={{@focusTrapOptions}}
+          @closeOnOutsideClick={{@closeOnOutsideClick}}
+          @closeOnEscapeKey={{@closeOnEscapeKey}}
+          @backdropTransition={{@backdropTransition}}
+          @transition={{@transition}}
         >
-          <:item as |l|>
-            {{#if (has-block "item")}}
-              {{yield l to="item"}}
-            {{else}}
-              <l.Item
-                @key={{l.key}}
-                @appearance={{@appearance}}
-                @intent={{@intent}}
-              >
-                {{l.label}}
-              </l.Item>
-            {{/if}}
-          </:item>
-          <:default as |l|>
-            {{yield l to="default"}}
-          </:default>
-        </Listbox>
-      </p.Content>
-    </Popover>
+          <Listbox
+            @items={{@items}}
+            @allowEmpty={{@allowEmpty}}
+            @appearance={{@appearance}}
+            @disabledKeys={{@disabledKeys}}
+            @intent={{@intent}}
+            @isKeyboardEventsEnabled={{true}}
+            @onAction={{this.onAction}}
+            @onSelectionChange={{@onSelectionChange}}
+            @selectedKeys={{@selectedKeys}}
+            @selectionMode={{if @selectionMode @selectionMode "single"}}
+            @type="listbox"
+            @class={{this.classNames.listbox}}
+          >
+            <:item as |l|>
+              {{#if (has-block "item")}}
+                {{yield l to="item"}}
+              {{else}}
+                <l.Item
+                  @key={{l.key}}
+                  @appearance={{@appearance}}
+                  @intent={{@intent}}
+                >
+                  {{l.label}}
+                </l.Item>
+              {{/if}}
+            </:item>
+            <:default as |l|>
+              {{yield l to="default"}}
+            </:default>
+          </Listbox>
+        </p.Content>
+      </Popover>
+    </div>
   </template>
 }
 

diff --git a/packages/theme/src/components/forms/form-field.ts b/packages/theme/src/components/forms/form-field.ts
@@ -140,7 +140,8 @@ const radio = tv({
 
 const select = tv({
   slots: {
-    base: [
+    base: [],
+    trigger: [
       input(),
       'flex items-center justify-between',
       'disabled:cursor-not-allowed disabled:opacity-50'

diff --git a/test-app/tests/integration/components/forms/native-select-test.ts b/test-app/tests/integration/components/forms/native-select-test.ts
@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { click, render, triggerEvent } from '@ember/test-helpers';
+import { render, triggerEvent } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 function selectNativeOptionByKey(
@@ -74,8 +74,6 @@ module(
         selectedKeys = keys;
       });
 
-      assert.ok;
-
       await render(
         hbs`
           <NativeSelect
@@ -202,7 +200,6 @@ module(
       assert.equal(selectedKeys.length, 1);
       assert.equal(selectedKeys[0], 'elephant');
 
-      await click('[data-key="elephant"]');
       await toggleNativeOptionByKey(
         '[data-test-id="native-select"]',
         'elephant'