@aquera/nile-elements 1.5.2 → 1.5.3

package/src/nile-button/nile-button.test.ts

@@ -1,116 +1,648 @@
-import { expect, fixture, html } from '@open-wc/testing';
-import './nile-button'; // Adjust the import path as necessary
+import { expect, fixture, html, elementUpdated } from '@open-wc/testing';
+import './nile-button';
 import NileButton from './nile-button';
 
 describe('NileButton', () => {
-  it('should render with default properties', async () => {
+  // === RENDERING TESTS ===
+  it('1. should render without errors', async () => {
     const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
     expect(el).to.exist;
+  });
+
+  it('2. should have a shadow root', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.shadowRoot).to.not.be.null;
+  });
+
+  it('3. should render a button element by default', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.tagName).to.equal('BUTTON');
+  });
+
+  it('4. should render an anchor element when href is set', async () => {
+    const el = await fixture<NileButton>(html`<nile-button href="https://example.com"></nile-button>`);
+    const anchor = el.shadowRoot!.querySelector('.button');
+    expect(anchor!.tagName).to.equal('A');
+  });
+
+  it('5. should render slot content', async () => {
+    const el = await fixture<NileButton>(html`<nile-button>Click Me</nile-button>`);
+    expect(el.textContent!.trim()).to.equal('Click Me');
+  });
+
+  it('6. should render prefix slot', async () => {
+    const el = await fixture<NileButton>(html`<nile-button><span slot="prefix">P</span>Label</nile-button>`);
+    const prefixSlot = el.shadowRoot!.querySelector('slot[name="prefix"]');
+    expect(prefixSlot).to.exist;
+  });
+
+  it('7. should render suffix slot', async () => {
+    const el = await fixture<NileButton>(html`<nile-button><span slot="suffix">S</span>Label</nile-button>`);
+    const suffixSlot = el.shadowRoot!.querySelector('slot[name="suffix"]');
+    expect(suffixSlot).to.exist;
+  });
+
+  it('8. should render default slot for label', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const labelSlot = el.shadowRoot!.querySelector('slot:not([name])');
+    expect(labelSlot).to.exist;
+  });
+
+  // === DEFAULT PROPERTIES ===
+  it('9. should have variant default to primary', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
     expect(el.variant).to.equal('primary');
+  });
+
+  it('10. should have size default to medium', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
     expect(el.size).to.equal('medium');
+  });
+
+  it('11. should have type default to button', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
     expect(el.type).to.equal('button');
+  });
+
+  it('12. should have disabled default to false', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
     expect(el.disabled).to.be.false;
+  });
+
+  it('13. should have loading default to false', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
     expect(el.loading).to.be.false;
   });
 
-  it('should apply the correct classes based on properties', async () => {
-    const el = await fixture<NileButton>(
-      html`<nile-button variant="secondary" pill outline caret></nile-button>`
-    );
+  it('14. should have caret default to false', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.caret).to.be.false;
+  });
+
+  it('15. should have outline default to false', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.outline).to.be.false;
+  });
+
+  it('16. should have pill default to false', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.pill).to.be.false;
+  });
+
+  it('17. should have circle default to false', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.circle).to.be.false;
+  });
+
+  it('18. should have name default to empty string', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.name).to.equal('');
+  });
+
+  it('19. should have value default to empty string', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.value).to.equal('');
+  });
+
+  it('20. should have href default to empty string', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.href).to.equal('');
+  });
+
+  it('21. should have hideBorder default to false', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.hideBorder).to.be.false;
+  });
+
+  it('22. should have title default to empty string', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.title).to.equal('');
+  });
+
+  // === VARIANT TESTS ===
+  it('23. should apply primary variant class', async () => {
+    const el = await fixture<NileButton>(html`<nile-button variant="primary"></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--primary')).to.be.true;
+  });
+
+  it('24. should apply secondary variant class', async () => {
+    const el = await fixture<NileButton>(html`<nile-button variant="secondary"></nile-button>`);
     const button = el.shadowRoot!.querySelector('.button');
     expect(button!.classList.contains('button--secondary')).to.be.true;
-    expect(button!.classList.contains('button--pill')).to.be.true;
-    expect(button!.classList.contains('button--outline')).to.be.true;
-    expect(button!.classList.contains('button--caret')).to.be.true;
   });
 
-  it('should be disabled when the disabled property is set', async () => {
-    const el = await fixture<NileButton>(
-      html`<nile-button disabled></nile-button>`
-    );
+  it('25. should apply tertiary variant class', async () => {
+    const el = await fixture<NileButton>(html`<nile-button variant="tertiary"></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--tertiary')).to.be.true;
+  });
+
+  it('26. should apply caution variant class', async () => {
+    const el = await fixture<NileButton>(html`<nile-button variant="caution"></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--caution')).to.be.true;
+  });
+
+  it('27. should apply ghost variant class', async () => {
+    const el = await fixture<NileButton>(html`<nile-button variant="ghost"></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--ghost')).to.be.true;
+  });
+
+  it('28. should apply destructive variant class', async () => {
+    const el = await fixture<NileButton>(html`<nile-button variant="destructive"></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--destructive')).to.be.true;
+  });
+
+  it('29. should apply secondary-grey variant class', async () => {
+    const el = await fixture<NileButton>(html`<nile-button variant="secondary-grey"></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--secondary-grey')).to.be.true;
+  });
+
+  it('30. should apply secondary-blue variant class', async () => {
+    const el = await fixture<NileButton>(html`<nile-button variant="secondary-blue"></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--secondary-blue')).to.be.true;
+  });
+
+  it('31. should reflect variant attribute', async () => {
+    const el = await fixture<NileButton>(html`<nile-button variant="caution"></nile-button>`);
+    expect(el.getAttribute('variant')).to.equal('caution');
+  });
+
+  // === DISABLED STATE ===
+  it('32. should be disabled when disabled property is set', async () => {
+    const el = await fixture<NileButton>(html`<nile-button disabled></nile-button>`);
     const button = el.shadowRoot!.querySelector('.button');
     expect(button!.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('33. should have aria-disabled true when disabled', async () => {
+    const el = await fixture<NileButton>(html`<nile-button disabled></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
     expect(button!.getAttribute('aria-disabled')).to.equal('true');
   });
 
-  it('should render a link when the href property is set', async () => {
-    const el = await fixture<NileButton>(
-      html`<nile-button
-        href="https://example.com"
-        target="_blank"
-      ></nile-button>`
-    );
+  it('34. should have aria-disabled false when not disabled', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
     const button = el.shadowRoot!.querySelector('.button');
-    expect(button!.tagName).to.equal('A');
-    expect(button!.getAttribute('href')).to.equal('https://example.com');
-    expect(button!.getAttribute('target')).to.equal('_blank');
+    expect(button!.getAttribute('aria-disabled')).to.equal('false');
   });
 
-  it('should show a spinner when the loading property is set', async () => {
-    const el = await fixture<NileButton>(
-      html`<nile-button loading></nile-button>`
-    );
-    const spinner = el.shadowRoot!.querySelector('nile-spinner');
-    expect(spinner).to.exist;
+  it('35. should apply disabled class when disabled', async () => {
+    const el = await fixture<NileButton>(html`<nile-button disabled></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--disabled')).to.be.true;
+  });
+
+  it('36. should have tabindex -1 when disabled', async () => {
+    const el = await fixture<NileButton>(html`<nile-button disabled></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.getAttribute('tabindex')).to.equal('-1');
   });
 
-  it('should emit nile-focus and nile-blur events', async () => {
+  it('37. should have tabindex 0 when not disabled', async () => {
     const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
     const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.getAttribute('tabindex')).to.equal('0');
+  });
 
-    let focusEventEmitted = false;
-    el.addEventListener('nile-focus', () => (focusEventEmitted = true));
-    button!.dispatchEvent(new FocusEvent('focus'));
-    expect(focusEventEmitted).to.be.true;
+  it('38. should prevent click events when disabled', async () => {
+    const el = await fixture<NileButton>(html`<nile-button disabled></nile-button>`);
+    let clicked = false;
+    el.addEventListener('click', () => (clicked = true));
+    el.click();
+    expect(clicked).to.be.false;
+  });
 
-    let blurEventEmitted = false;
-    el.addEventListener('nile-blur', () => (blurEventEmitted = true));
-    button!.dispatchEvent(new FocusEvent('blur'));
-    expect(blurEventEmitted).to.be.true;
+  it('39. should reflect disabled attribute', async () => {
+    const el = await fixture<NileButton>(html`<nile-button disabled></nile-button>`);
+    expect(el.hasAttribute('disabled')).to.be.true;
   });
 
-  it('should simulate a click on the button', async () => {
-    const el = await fixture<NileButton>(
-      html`<nile-button>Click Me</nile-button>`
-    );
+  // === LOADING STATE ===
+  it('40. should show spinner when loading', async () => {
+    const el = await fixture<NileButton>(html`<nile-button loading></nile-button>`);
+    const spinner = el.shadowRoot!.querySelector('nile-spinner');
+    expect(spinner).to.exist;
+  });
+
+  it('41. should not show spinner when not loading', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const spinner = el.shadowRoot!.querySelector('nile-spinner');
+    expect(spinner).to.be.null;
+  });
+
+  it('42. should apply loading class when loading', async () => {
+    const el = await fixture<NileButton>(html`<nile-button loading></nile-button>`);
     const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--loading')).to.be.true;
+  });
 
+  it('43. should prevent click when loading', async () => {
+    const el = await fixture<NileButton>(html`<nile-button loading></nile-button>`);
     let clicked = false;
     el.addEventListener('click', () => (clicked = true));
     el.click();
-    expect(clicked).to.be.true;
+    expect(clicked).to.be.false;
   });
 
-  it('should focus and blur the button programmatically', async () => {
-    const el = await fixture<NileButton>(
-      html`<nile-button>Click Me</nile-button>`
-    );
+  it('44. should reflect loading attribute', async () => {
+    const el = await fixture<NileButton>(html`<nile-button loading></nile-button>`);
+    expect(el.hasAttribute('loading')).to.be.true;
+  });
+
+  // === CARET ===
+  it('45. should show caret icon when caret is true', async () => {
+    const el = await fixture<NileButton>(html`<nile-button caret></nile-button>`);
+    const caret = el.shadowRoot!.querySelector('nile-icon[part="caret"]');
+    expect(caret).to.exist;
+  });
+
+  it('46. should not show caret icon when caret is false', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const caret = el.shadowRoot!.querySelector('nile-icon[part="caret"]');
+    expect(caret).to.be.null;
+  });
+
+  it('47. should apply caret class when caret is set', async () => {
+    const el = await fixture<NileButton>(html`<nile-button caret></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--caret')).to.be.true;
+  });
+
+  // === PILL ===
+  it('48. should apply pill class when pill is true', async () => {
+    const el = await fixture<NileButton>(html`<nile-button pill></nile-button>`);
     const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--pill')).to.be.true;
+  });
+
+  it('49. should reflect pill attribute', async () => {
+    const el = await fixture<NileButton>(html`<nile-button pill></nile-button>`);
+    expect(el.hasAttribute('pill')).to.be.true;
+  });
+
+  // === CIRCLE ===
+  it('50. should apply circle class when circle is true', async () => {
+    const el = await fixture<NileButton>(html`<nile-button circle></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--circle')).to.be.true;
+  });
+
+  it('51. should reflect circle attribute', async () => {
+    const el = await fixture<NileButton>(html`<nile-button circle></nile-button>`);
+    expect(el.hasAttribute('circle')).to.be.true;
+  });
+
+  // === OUTLINE ===
+  it('52. should apply outline class when outline is true', async () => {
+    const el = await fixture<NileButton>(html`<nile-button outline></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--outline')).to.be.true;
+  });
+
+  it('53. should apply standard class when outline is false', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--standard')).to.be.true;
+  });
+
+  // === LINK MODE (href) ===
+  it('54. should set href attribute on anchor', async () => {
+    const el = await fixture<NileButton>(html`<nile-button href="https://example.com"></nile-button>`);
+    const anchor = el.shadowRoot!.querySelector('.button');
+    expect(anchor!.getAttribute('href')).to.equal('https://example.com');
+  });
+
+  it('55. should set target on anchor', async () => {
+    const el = await fixture<NileButton>(html`<nile-button href="https://example.com" target="_blank"></nile-button>`);
+    const anchor = el.shadowRoot!.querySelector('.button');
+    expect(anchor!.getAttribute('target')).to.equal('_blank');
+  });
+
+  it('56. should set role=button on anchor', async () => {
+    const el = await fixture<NileButton>(html`<nile-button href="https://example.com"></nile-button>`);
+    const anchor = el.shadowRoot!.querySelector('.button');
+    expect(anchor!.getAttribute('role')).to.equal('button');
+  });
+
+  it('57. should set rel attribute on anchor', async () => {
+    const el = await fixture<NileButton>(html`<nile-button href="https://example.com"></nile-button>`);
+    const anchor = el.shadowRoot!.querySelector('.button');
+    expect(anchor!.getAttribute('rel')).to.equal('noreferrer noopener');
+  });
+
+  it('58. should set download attribute on anchor when provided', async () => {
+    const el = await fixture<NileButton>(html`<nile-button href="https://example.com" download="file.pdf"></nile-button>`);
+    const anchor = el.shadowRoot!.querySelector('.button');
+    expect(anchor!.getAttribute('download')).to.equal('file.pdf');
+  });
+
+  // === BUTTON TYPE ===
+  it('59. should set button type attribute', async () => {
+    const el = await fixture<NileButton>(html`<nile-button type="submit"></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.getAttribute('type')).to.equal('submit');
+  });
+
+  it('60. should support type=reset', async () => {
+    const el = await fixture<NileButton>(html`<nile-button type="reset"></nile-button>`);
+    expect(el.type).to.equal('reset');
+  });
+
+  it('61. should set name attribute on button', async () => {
+    const el = await fixture<NileButton>(html`<nile-button name="myButton"></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.getAttribute('name')).to.equal('myButton');
+  });
+
+  it('62. should set value attribute on button', async () => {
+    const el = await fixture<NileButton>(html`<nile-button value="myValue"></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.getAttribute('value')).to.equal('myValue');
+  });
+
+  // === EVENTS ===
+  it('63. should emit nile-focus when focused', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    let focusEmitted = false;
+    el.addEventListener('nile-focus', () => (focusEmitted = true));
+    button!.dispatchEvent(new FocusEvent('focus'));
+    expect(focusEmitted).to.be.true;
+  });
+
+  it('64. should emit nile-blur when blurred', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    let blurEmitted = false;
+    el.addEventListener('nile-blur', () => (blurEmitted = true));
+    button!.dispatchEvent(new FocusEvent('blur'));
+    expect(blurEmitted).to.be.true;
+  });
+
+  it('65. should emit nile-init on connectedCallback', async () => {
+    let initEmitted = false;
+    const container = await fixture(html`<div></div>`);
+    const el = document.createElement('nile-button') as NileButton;
+    el.addEventListener('nile-init', () => (initEmitted = true));
+    container.appendChild(el);
+    await el.updateComplete;
+    expect(initEmitted).to.be.true;
+  });
+
+  it('66. should emit nile-destroy on disconnectedCallback', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    let destroyEmitted = false;
+    el.addEventListener('nile-destroy', () => (destroyEmitted = true));
+    el.remove();
+    expect(destroyEmitted).to.be.true;
+  });
+
+  // === FOCUS/BLUR METHODS ===
+  it('67. should focus programmatically', async () => {
+    const el = await fixture<NileButton>(html`<nile-button>Test</nile-button>`);
     el.focus();
     await el.updateComplete;
-    const focusButton = el.shadowRoot!.querySelector('.button--focused');
-    expect(focusButton!.classList.contains('button--focused')).to.be.true;
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--focused')).to.be.true;
+  });
 
+  it('68. should blur programmatically', async () => {
+    const el = await fixture<NileButton>(html`<nile-button>Test</nile-button>`);
+    el.focus();
+    await el.updateComplete;
     el.blur();
     await el.updateComplete;
-    const blurButton = el.shadowRoot!.querySelector('.button');
-    expect(blurButton!.classList.contains('button--focused')).to.be.false;
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--focused')).to.be.false;
   });
 
-  it('should set a custom validation message', async () => {
-    const el = await fixture<NileButton>(
-      html`<nile-button type="submit"></nile-button>`
-    );
+  it('69. should click programmatically', async () => {
+    const el = await fixture<NileButton>(html`<nile-button>Test</nile-button>`);
+    let clicked = false;
+    el.addEventListener('click', () => (clicked = true));
+    el.click();
+    expect(clicked).to.be.true;
+  });
+
+  // === VALIDATION ===
+  it('70. should set custom validation message', async () => {
+    const el = await fixture<NileButton>(html`<nile-button type="submit"></nile-button>`);
     const form = document.createElement('form');
     form.appendChild(el);
     document.body.appendChild(form);
-
-    el.setCustomValidity('Invalid input');
-    expect(el.validationMessage).to.equal('Invalid input');
-
+    el.setCustomValidity('Invalid');
+    expect(el.validationMessage).to.equal('Invalid');
     el.setCustomValidity('');
     expect(el.validationMessage).to.equal('');
-
     document.body.removeChild(form);
   });
+
+  it('71. should check validity', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.checkValidity()).to.be.true;
+  });
+
+  it('72. should report validity', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.reportValidity()).to.be.true;
+  });
+
+  it('73. should get validity state', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.validity).to.exist;
+    expect(el.validity.valid).to.be.true;
+  });
+
+  // === FORM INTEGRATION ===
+  it('74. should return null getForm when not in a form', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el.getForm()).to.be.null;
+  });
+
+  it('75. should set formAction property', async () => {
+    const el = await fixture<NileButton>(html`<nile-button formaction="/submit"></nile-button>`);
+    expect(el.formAction).to.equal('/submit');
+  });
+
+  it('76. should set formMethod property', async () => {
+    const el = await fixture<NileButton>(html`<nile-button formmethod="post"></nile-button>`);
+    expect(el.formMethod).to.equal('post');
+  });
+
+  it('77. should set formNoValidate property', async () => {
+    const el = await fixture<NileButton>(html`<nile-button formnovalidate></nile-button>`);
+    expect(el.formNoValidate).to.be.true;
+  });
+
+  it('78. should set formTarget property', async () => {
+    const el = await fixture<NileButton>(html`<nile-button formtarget="_blank"></nile-button>`);
+    expect(el.formTarget).to.equal('_blank');
+  });
+
+  it('79. should set formEnctype property', async () => {
+    const el = await fixture<NileButton>(html`<nile-button formenctype="multipart/form-data"></nile-button>`);
+    expect(el.formEnctype).to.equal('multipart/form-data');
+  });
+
+  // === HIDE BORDER ===
+  it('80. should apply hideborder class when hide-border is set', async () => {
+    const el = await fixture<NileButton>(html`<nile-button hide-border></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--hideborder')).to.be.true;
+  });
+
+  it('81. should reflect hide-border attribute', async () => {
+    const el = await fixture<NileButton>(html`<nile-button hide-border></nile-button>`);
+    expect(el.hasAttribute('hide-border')).to.be.true;
+  });
+
+  // === TITLE ===
+  it('82. should set title on internal button', async () => {
+    const el = await fixture<NileButton>(html`<nile-button title="My Title"></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.getAttribute('title')).to.equal('My Title');
+  });
+
+  // === DYNAMIC PROPERTY CHANGES ===
+  it('83. should update variant dynamically', async () => {
+    const el = await fixture<NileButton>(html`<nile-button variant="primary"></nile-button>`);
+    el.variant = 'secondary';
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--secondary')).to.be.true;
+  });
+
+  it('84. should update disabled dynamically', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    el.disabled = true;
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('85. should update loading dynamically', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    el.loading = true;
+    await el.updateComplete;
+    const spinner = el.shadowRoot!.querySelector('nile-spinner');
+    expect(spinner).to.exist;
+  });
+
+  it('86. should update caret dynamically', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    el.caret = true;
+    await el.updateComplete;
+    const caret = el.shadowRoot!.querySelector('nile-icon[part="caret"]');
+    expect(caret).to.exist;
+  });
+
+  it('87. should update pill dynamically', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    el.pill = true;
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--pill')).to.be.true;
+  });
+
+  it('88. should update circle dynamically', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    el.circle = true;
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--circle')).to.be.true;
+  });
+
+  it('89. should update outline dynamically', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    el.outline = true;
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--outline')).to.be.true;
+  });
+
+  it('90. should switch from button to anchor when href is set dynamically', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    el.href = 'https://example.com';
+    await el.updateComplete;
+    const anchor = el.shadowRoot!.querySelector('.button');
+    expect(anchor!.tagName).to.equal('A');
+  });
+
+  // === CSS PARTS ===
+  it('91. should have base part on button', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const button = el.shadowRoot!.querySelector('[part~="base"]');
+    expect(button).to.exist;
+  });
+
+  it('92. should have prefix part', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const prefix = el.shadowRoot!.querySelector('[part~="prefix"]');
+    expect(prefix).to.exist;
+  });
+
+  it('93. should have label part', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const label = el.shadowRoot!.querySelector('[part~="label"]');
+    expect(label).to.exist;
+  });
+
+  it('94. should have suffix part', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const suffix = el.shadowRoot!.querySelector('[part~="suffix"]');
+    expect(suffix).to.exist;
+  });
+
+  it('95. should have caret part when caret is set', async () => {
+    const el = await fixture<NileButton>(html`<nile-button caret></nile-button>`);
+    const caret = el.shadowRoot!.querySelector('[part~="caret"]');
+    expect(caret).to.exist;
+  });
+
+  // === COMBINED STATES ===
+  it('96. should handle disabled and loading together', async () => {
+    const el = await fixture<NileButton>(html`<nile-button disabled loading></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--disabled')).to.be.true;
+    expect(button!.classList.contains('button--loading')).to.be.true;
+  });
+
+  it('97. should handle pill and outline together', async () => {
+    const el = await fixture<NileButton>(html`<nile-button pill outline></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--pill')).to.be.true;
+    expect(button!.classList.contains('button--outline')).to.be.true;
+  });
+
+  it('98. should show caret on link button', async () => {
+    const el = await fixture<NileButton>(html`<nile-button href="https://example.com" caret></nile-button>`);
+    const caret = el.shadowRoot!.querySelector('nile-icon[part="caret"]');
+    expect(caret).to.exist;
+  });
+
+  it('99. should show spinner on link button when loading', async () => {
+    const el = await fixture<NileButton>(html`<nile-button href="https://example.com" loading></nile-button>`);
+    const spinner = el.shadowRoot!.querySelector('nile-spinner');
+    expect(spinner).to.exist;
+  });
+
+  it('100. should handle all visual modifiers simultaneously', async () => {
+    const el = await fixture<NileButton>(
+      html`<nile-button variant="destructive" pill outline caret loading disabled></nile-button>`
+    );
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--destructive')).to.be.true;
+    expect(button!.classList.contains('button--pill')).to.be.true;
+    expect(button!.classList.contains('button--outline')).to.be.true;
+    expect(button!.classList.contains('button--caret')).to.be.true;
+    expect(button!.classList.contains('button--loading')).to.be.true;
+    expect(button!.classList.contains('button--disabled')).to.be.true;
+  });
 });