test: improve failing tests around reset functionality #135

AlaskaAirlines · Dec 24, 2024 · 1f37f93 · 1f37f93
1 parent 014358c
commit 1f37f93
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 25 deletions.
diff --git a/components/combobox/demo/api.md b/components/combobox/demo/api.md
@@ -24,7 +24,8 @@
 
 | Method  | Type       | Description                         |
 |---------|------------|-------------------------------------|
-| [focus](#focus) | `(): void` | Focuses the combobox trigger input. |
+| [focus](#focus) | `(): void` | Focuses the combobox trigger input. |
+| [reset](#reset) | `(): void` | Resets component to initial state.  |
 
 ## Events
 
@@ -626,6 +627,64 @@ export function focusExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### reset
+
+Use the `reset()` method to reset the `<auro-combobox>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
+  <auro-button id="resetStateBtn">Reset</auro-button>
+  <br /><br />
+  <auro-combobox id="resetStateExample" required>
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
+
+```html
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br /><br />
+<auro-combobox id="resetStateExample" required>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
+
+```js
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Slot Examples
 
 #### helpText

diff --git a/components/datepicker/test/auro-datepicker.test.js b/components/datepicker/test/auro-datepicker.test.js
@@ -809,6 +809,7 @@ describe('auro-datepicker', () => {
 
     await expect(el.hasAttribute('validity')).to.be.false;
     await expect(el.value).to.be.equal(undefined);
+    await expect(el.valueEnd).to.be.equal(undefined);
   });
 });
 

diff --git a/components/input/test/auro-input.test.js b/components/input/test/auro-input.test.js
@@ -509,7 +509,7 @@ describe('auro-input', () => {
 
   it('type numeric checked correctly when using the min attribute', async () => {
     const el = await fixture(html`
-      <auro-input type="numeric" min="10"></auro-input>
+      <auro-input type="number" min="10"></auro-input>
     `)
 
     el.value = '10';
@@ -527,7 +527,7 @@ describe('auro-input', () => {
 
   it('type numeric checked correctly when using the min attribute', async () => {
     const el = await fixture(html`
-      <auro-input type="numeric" max="10"></auro-input>
+      <auro-input type="number" max="10"></auro-input>
     `)
 
     el.value = '10';

diff --git a/components/radio/test/auro-radio.test.js b/components/radio/test/auro-radio.test.js
@@ -89,18 +89,17 @@ describe('auro-radio', () => {
 
     const radioButtonOne = el.querySelector('#radio1');
     const radioButtonTwo = el.querySelector('#radio2');
-    const radioGroup = el.querySelector('#resetGroupTest');
-
+
     el.reset();
 
     await elementUpdated(el);
 
     await expect(radioButtonOne.hasAttribute('checked')).to.be.false;
     await expect(radioButtonTwo.hasAttribute('checked')).to.be.false;
 
-    await expect(radioGroup.value).to.equal(undefined);
-    await expect(radioGroup.optionSelected).to.equal(undefined);
-    await expect(radioGroup.hasAttribute('validity')).to.be.false;
+    await expect(el.value).to.equal(undefined);
+    await expect(el.optionSelected).to.equal(undefined);
+    await expect(el.hasAttribute('validity')).to.be.false;
   });
 
   it('selects radio button by keyboard', async () => {

diff --git a/components/select/demo/api.md b/components/select/demo/api.md
@@ -30,6 +30,12 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [validity](#validity)                      | `validity`                      | `String`  | "undefined"            | Specifies the `validityState` this element is in. |
 | [value](#value)                         | `value`                         | `String`  |                        | Value selected for the component.                |
 
+## Methods
+
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| [reset](#reset) | `(): void` | Resets component to initial state. |
+
 ## Events
 
 | Event                       | Type               | Description                                      |
@@ -497,6 +503,64 @@ Use the `helptext` slot to provide additional information back to your user abou
 
 ## Functional Examples
 
+### Reset State
+
+Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
+  <auro-button id="resetStateBtn">Reset</auro-button>
+  <br/><br/>
+  <auro-select id="resetStateExample" required value="price">
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
+
+```html
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br/><br/>
+<auro-select id="resetStateExample" required value="price">
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
+
+```js
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Extract value
 
 The following example illustrates how a user may query the `element.value` or `element.optionSelected` for the current value or complete option object that is selected.
@@ -519,23 +583,6 @@ The following example illustrates how a user may query the `element.value` or `e
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.js -->
-
-```js
-export function valueExtractionExample() {
-  const valueExtractionExample = document.querySelector('#valueExtraction');
-  const valueExtractionBtn = document.querySelector('#valueExtractionBtn');
-
-  valueExtractionBtn.addEventListener('click', () => {
-    console.warn('Value selected:', valueExtractionExample.value);
-    console.warn('Option selected:', valueExtractionExample.optionSelected);
-
-    alert(`Value selected: ${valueExtractionExample.value}`);
-  })
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.html -->
 
@@ -553,6 +600,23 @@ export function valueExtractionExample() {
 <auro-button id="valueExtractionBtn">Get current value</auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.js -->
+
+```js
+export function valueExtractionExample() {
+  const valueExtractionExample = document.querySelector('#valueExtraction');
+  const valueExtractionBtn = document.querySelector('#valueExtractionBtn');
+
+  valueExtractionBtn.addEventListener('click', () => {
+    console.warn('Value selected:', valueExtractionExample.value);
+    console.warn('Option selected:', valueExtractionExample.optionSelected);
+
+    alert(`Value selected: ${valueExtractionExample.value}`);
+  })
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Custom Validity with Error State

diff --git a/components/select/test/auro-select.test.js b/components/select/test/auro-select.test.js
@@ -226,3 +226,15 @@ async function errorFixture() {
   `);
 }
 
+async function badInputFixture() {
+  return await fixture(html`
+  <auro-select value="Carrot">
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  `);
+}
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -809,6 +809,7 @@ describe('auro-datepicker', () => { @@
         await expect(el.hasAttribute('validity')).to.be.false;
         await expect(el.value).to.be.equal(undefined);
+        await expect(el.valueEnd).to.be.equal(undefined);
       });
     });
@@ Expand Down @@