fix: update counter tests to use initial values in markup and ensure …

…HTMLButtonElement before focusing #202
AlaskaAirlines · Jan 28, 2025 · c93e716 · c93e716
1 parent 83fe64c
commit c93e716
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 25 deletions.
diff --git a/components/counter/src/auro-counter.js b/components/counter/src/auro-counter.js
@@ -213,7 +213,7 @@ export class AuroCounter extends LitElement {
    */
   jumpFocusToEnabled() {
     const button = this.shadowRoot.querySelector("auro-counter-button:not([disabled])");
-    if (button !== null) {
+    if (button && button instanceof HTMLButtonElement) {
       button.focus();
     }
   }

diff --git a/components/counter/test/auro-counter.test.js b/components/counter/test/auro-counter.test.js
@@ -6,28 +6,24 @@ import '../src/index.js';
 describe('auro-counter: increment', () => {
   it('increments the value by 1 when no argument is provided', async () => {
     const el = await fixture(html`<auro-counter></auro-counter>`);
-    el.value = 0;
     el.increment();
     expect(el.value).to.equal(1);
   });
 
   it('increments the value by the provided argument', async () => {
     const el = await fixture(html`<auro-counter></auro-counter>`);
-    el.value = 0;
     el.increment(5);
     expect(el.value).to.equal(5);
   });
 
   it('increments the value correctly when it is already set', async () => {
-    const el = await fixture(html`<auro-counter></auro-counter>`);
-    el.value = 3;
+    const el = await fixture(html`<auro-counter value="3"></auro-counter>`);
     el.increment(2);
     expect(el.value).to.equal(5);
   });
 
   it('does not increment the value when disabled', async () => {
     const el = await fixture(html`<auro-counter disabled></auro-counter>`);
-    el.value = 0;
     el.increment();
     expect(el.value).to.equal(0);
   });
@@ -36,29 +32,25 @@ describe('auro-counter: increment', () => {
 describe('auro-counter: decrement', () => {
 
   it('decrements the value by 1 when no argument is provided', async () => {
-    const el = await fixture(html`<auro-counter></auro-counter>`);
-    el.value = 5;
+    const el = await fixture(html`<auro-counter value="5"></auro-counter>`);
     el.decrement();
     expect(el.value).to.equal(4);
   });
 
   it('decrements the value by the provided argument', async () => {
-    const el = await fixture(html`<auro-counter></auro-counter>`);
-    el.value = 5;
+    const el = await fixture(html`<auro-counter value="5"></auro-counter>`);
     el.decrement(2);
     expect(el.value).to.equal(3);
   });
 
   it('decrements the value correctly when it is already set', async () => {
-    const el = await fixture(html`<auro-counter></auro-counter>`);
-    el.value = 5;
+    const el = await fixture(html`<auro-counter value="5"></auro-counter>`);
     el.decrement(3);
     expect(el.value).to.equal(2);
   });
 
   it('does not decrement the value when disabled', async () => {
-    const el = await fixture(html`<auro-counter disabled></auro-counter>`);
-    el.value = 5;
+    const el = await fixture(html`<auro-counter value="5" disabled></auro-counter>`);
     el.decrement();
     expect(el.value).to.equal(5);
   });
@@ -73,30 +65,22 @@ describe('auro-counter: isIncrementDisabled', () => {
   });
 
   it('returns false when extrema is min and value is greater than min', async () => {
-    const el = await fixture(html`<auro-counter></auro-counter>`);
-    el.value = 5;
-    el.min = 0;
+    const el = await fixture(html`<auro-counter value="5" min="0"></auro-counter>`);
     expect(el.isIncrementDisabled(el.min)).to.be.false;
   });
 
   it('returns false when extrema is max and value is less than max', async () => {
-    const el = await fixture(html`<auro-counter></auro-counter>`);
-    el.value = 5;
-    el.max = 10;
+    const el = await fixture(html`<auro-counter value="5" max="10"></auro-counter>`);
     expect(el.isIncrementDisabled(el.max)).to.be.false;
   });
 
   it('returns true when value is equal to min', async () => {
     const el = await fixture(html`<auro-counter></auro-counter>`);
-    el.value = 0;
-    el.min = 0;
     expect(el.isIncrementDisabled(el.min)).to.be.true;
   });
 
   it('returns true when value is equal to max', async () => {
-    const el = await fixture(html`<auro-counter></auro-counter>`);
-    el.value = 10;
-    el.max = 10;
+    const el = await fixture(html`<auro-counter value="10" max="10"></auro-counter>`);
     expect(el.isIncrementDisabled(el.max)).to.be.true;
   });
 });