@aquera/nile-elements 1.5.2 → 1.5.4

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

@@ -0,0 +1,667 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-icon-button';
+import NileIconButton from './nile-icon-button';
+
+describe('NileIconButton', () => {
+  it('1. should render without errors', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el).to.exist;
+  });
+
+  it('2. should have a shadow root', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.shadowRoot).to.not.be.null;
+  });
+
+  it('3. should render a button element by default', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    expect(button).to.exist;
+  });
+
+  it('4. should render an anchor when href is set', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button href="https://example.com"></nile-icon-button>`);
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor).to.exist;
+  });
+
+  it('5. should render a nile-icon inside', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button name="test"></nile-icon-button>`);
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon).to.exist;
+  });
+
+  it('6. should have disabled default to false', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.disabled).to.be.false;
+  });
+
+  it('7. should have label default to empty string', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.label).to.equal('');
+  });
+
+  it('8. should have ishovered default to false', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.ishovered).to.be.false;
+  });
+
+  it('9. should set name on nile-icon', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button name="close"></nile-icon-button>`);
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon!.getAttribute('name')).to.equal('close');
+  });
+
+  it('10. should set library on nile-icon', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button library="system"></nile-icon-button>`);
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon!.getAttribute('library')).to.equal('system');
+  });
+
+  it('11. should set src on nile-icon', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button src="/icon.svg"></nile-icon-button>`);
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon!.getAttribute('src')).to.equal('/icon.svg');
+  });
+
+  it('12. should set aria-label from label property', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button label="Close"></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    expect(button!.getAttribute('aria-label')).to.equal('Close');
+  });
+
+  it('13. should have icon-button class on button', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('.icon-button');
+    expect(button).to.exist;
+  });
+
+  it('14. should apply disabled class when disabled', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button disabled></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('.icon-button--disabled');
+    expect(button).to.exist;
+  });
+
+  it('15. should have aria-disabled true when disabled', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button disabled></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    expect(button!.getAttribute('aria-disabled')).to.equal('true');
+  });
+
+  it('16. should have aria-disabled false when not disabled', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    expect(button!.getAttribute('aria-disabled')).to.equal('false');
+  });
+
+  it('17. should have tabindex 0 when enabled', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    expect(button!.getAttribute('tabindex')).to.equal('0');
+  });
+
+  it('18. should have tabindex -1 when disabled', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button disabled></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    expect(button!.getAttribute('tabindex')).to.equal('-1');
+  });
+
+  it('19. should have type=button on button element', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    expect(button!.getAttribute('type')).to.equal('button');
+  });
+
+  it('20. should have role=button on button element', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    expect(button!.getAttribute('role')).to.equal('button');
+  });
+
+  it('21. should emit nile-focus on focus', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-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('22. should emit nile-blur on blur', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-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('23. should apply focused class on focus', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.focus();
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('.icon-button--focused');
+    expect(button).to.exist;
+  });
+
+  it('24. should remove focused class on blur', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.focus();
+    await el.updateComplete;
+    el.blur();
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('.icon-button--focused');
+    expect(button).to.be.null;
+  });
+
+  it('25. should have base part on button', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const base = el.shadowRoot!.querySelector('[part="base"]');
+    expect(base).to.exist;
+  });
+
+  it('26. should set href on anchor', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button href="https://example.com"></nile-icon-button>`);
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor!.getAttribute('href')).to.equal('https://example.com');
+  });
+
+  it('27. should set target on anchor', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button href="https://example.com" target="_blank"></nile-icon-button>`);
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor!.getAttribute('target')).to.equal('_blank');
+  });
+
+  it('28. should set download on anchor', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button href="https://example.com" download="file.pdf"></nile-icon-button>`);
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor!.getAttribute('download')).to.equal('file.pdf');
+  });
+
+  it('29. should set rel on anchor with target', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button href="https://example.com" target="_blank"></nile-icon-button>`);
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor!.getAttribute('rel')).to.equal('noreferrer noopener');
+  });
+
+  it('30. should reflect disabled attribute', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button disabled></nile-icon-button>`);
+    expect(el.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('31. should update disabled dynamically', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.disabled = true;
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('.icon-button--disabled');
+    expect(button).to.exist;
+  });
+
+  it('32. should update name dynamically', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button name="close"></nile-icon-button>`);
+    el.name = 'arrow-left';
+    await el.updateComplete;
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon!.getAttribute('name')).to.equal('arrow-left');
+  });
+
+  it('33. should update label dynamically', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button label="Close"></nile-icon-button>`);
+    el.label = 'Open';
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('button');
+    expect(button!.getAttribute('aria-label')).to.equal('Open');
+  });
+
+  it('34. should update color dynamically', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button color="red"></nile-icon-button>`);
+    el.color = 'blue';
+    await el.updateComplete;
+    expect(el.color).to.equal('blue');
+  });
+
+  it('35. should switch from button to anchor when href is set', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.href = 'https://example.com';
+    await el.updateComplete;
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor).to.exist;
+  });
+
+  it('36. nile-icon should have aria-hidden true', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button name="test"></nile-icon-button>`);
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon!.getAttribute('aria-hidden')).to.equal('true');
+  });
+
+  it('37. nile-icon should have icon-button__icon class', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button name="test"></nile-icon-button>`);
+    const icon = el.shadowRoot!.querySelector('.icon-button__icon');
+    expect(icon).to.exist;
+  });
+
+  it('38. should handle click programmatically', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    let clicked = false;
+    el.addEventListener('click', () => (clicked = true));
+    el.click();
+    expect(clicked).to.be.true;
+  });
+
+  it('39. should prevent click when disabled', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button disabled></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button') as HTMLButtonElement;
+    let defaultPrevented = false;
+    button.addEventListener('click', (e: MouseEvent) => {
+      defaultPrevented = e.defaultPrevented;
+    });
+    button.click();
+    // The handleClick method prevents and stops propagation when disabled
+  });
+
+  it('40. should set ishovered on mouseover', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    button!.dispatchEvent(new MouseEvent('mouseover'));
+    await el.updateComplete;
+    expect(el.ishovered).to.be.true;
+  });
+
+  it('41. should clear ishovered on mouseleave', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    button!.dispatchEvent(new MouseEvent('mouseover'));
+    await el.updateComplete;
+    button!.dispatchEvent(new MouseEvent('mouseleave'));
+    await el.updateComplete;
+    expect(el.ishovered).to.be.false;
+  });
+
+  it('42. should reflect ishovered attribute', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    button!.dispatchEvent(new MouseEvent('mouseover'));
+    await el.updateComplete;
+    expect(el.hasAttribute('ishovered')).to.be.true;
+  });
+
+  it('43. should reflect color attribute', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button color="red"></nile-icon-button>`);
+    expect(el.getAttribute('color')).to.equal('red');
+  });
+
+  it('44. should be instance of NileIconButton', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el).to.be.instanceOf(NileIconButton);
+  });
+
+  it('45. should have correct tag name', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.tagName.toLowerCase()).to.equal('nile-icon-button');
+  });
+
+  it('46. should have static styles', async () => {
+    expect(NileIconButton.styles).to.exist;
+  });
+
+  it('47. should be a defined custom element', async () => {
+    expect(customElements.get('nile-icon-button')).to.exist;
+  });
+
+  it('48. should handle undefined name', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.name).to.be.undefined;
+  });
+
+  it('49. should handle undefined library', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.library).to.be.undefined;
+  });
+
+  it('50. should handle undefined src', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.src).to.be.undefined;
+  });
+
+  it('51. should handle undefined href', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.href).to.be.undefined;
+  });
+
+  it('52. should handle undefined target', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.target).to.be.undefined;
+  });
+
+  it('53. should handle undefined download', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.download).to.be.undefined;
+  });
+
+  it('54. should render button element as base', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const base = el.shadowRoot!.querySelector('[part="base"]');
+    expect(base!.tagName).to.equal('BUTTON');
+  });
+
+  it('55. should render anchor element as base when href set', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button href="https://example.com"></nile-icon-button>`);
+    const base = el.shadowRoot!.querySelector('[part="base"]');
+    expect(base!.tagName).to.equal('A');
+  });
+
+  it('56. should focus programmatically', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.focus();
+    await el.updateComplete;
+    const focused = el.shadowRoot!.querySelector('.icon-button--focused');
+    expect(focused).to.exist;
+  });
+
+  it('57. should blur programmatically', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.focus();
+    await el.updateComplete;
+    el.blur();
+    await el.updateComplete;
+    const focused = el.shadowRoot!.querySelector('.icon-button--focused');
+    expect(focused).to.be.null;
+  });
+
+  it('58. should not have disabled class when not disabled', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const disabled = el.shadowRoot!.querySelector('.icon-button--disabled');
+    expect(disabled).to.be.null;
+  });
+
+  it('59. should handle multiple icon buttons independently', async () => {
+    const container = await fixture(html`
+      <div>
+        <nile-icon-button name="close" label="Close"></nile-icon-button>
+        <nile-icon-button name="edit" label="Edit"></nile-icon-button>
+      </div>
+    `);
+    const buttons = container.querySelectorAll('nile-icon-button');
+    expect(buttons.length).to.equal(2);
+    expect((buttons[0] as NileIconButton).label).to.equal('Close');
+    expect((buttons[1] as NileIconButton).label).to.equal('Edit');
+  });
+
+  it('60. should not have any slots', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const slots = el.shadowRoot!.querySelectorAll('slot');
+    expect(slots.length).to.equal(0);
+  });
+
+  it('61. icon should be inside button', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button name="test"></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    const icon = button!.querySelector('nile-icon');
+    expect(icon).to.exist;
+  });
+
+  it('62. icon should be inside anchor when href set', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button name="test" href="https://example.com"></nile-icon-button>`);
+    const anchor = el.shadowRoot!.querySelector('a');
+    const icon = anchor!.querySelector('nile-icon');
+    expect(icon).to.exist;
+  });
+
+  it('63. should handle name property update', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.name = 'search';
+    await el.updateComplete;
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon!.getAttribute('name')).to.equal('search');
+  });
+
+  it('64. should handle library property update', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.library = 'custom';
+    await el.updateComplete;
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon!.getAttribute('library')).to.equal('custom');
+  });
+
+  it('65. should handle toggling disabled', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.disabled = true;
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.icon-button--disabled')).to.exist;
+    el.disabled = false;
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.icon-button--disabled')).to.be.null;
+  });
+
+  it('66. should handle color property', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button color="red"></nile-icon-button>`);
+    expect(el.color).to.equal('red');
+  });
+
+  it('67. should handle undefined color', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.color).to.be.undefined;
+  });
+
+  it('68. should handle setting all properties', async () => {
+    const el = await fixture<NileIconButton>(html`
+      <nile-icon-button name="close" library="system" label="Close" color="red" disabled></nile-icon-button>
+    `);
+    expect(el.name).to.equal('close');
+    expect(el.library).to.equal('system');
+    expect(el.label).to.equal('Close');
+    expect(el.color).to.equal('red');
+    expect(el.disabled).to.be.true;
+  });
+
+  it('69. should handle creation via createElement', async () => {
+    const el = document.createElement('nile-icon-button') as NileIconButton;
+    document.body.appendChild(el);
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.icon-button')).to.exist;
+    document.body.removeChild(el);
+  });
+
+  it('70. shadow root mode should be open', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.shadowRoot!.mode).to.equal('open');
+  });
+
+  it('71. should have render method', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.render).to.be.a('function');
+  });
+
+  it('72. should handle data attributes', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button data-action="close"></nile-icon-button>`);
+    expect(el.getAttribute('data-action')).to.equal('close');
+  });
+
+  it('73. should handle class attribute', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button class="custom"></nile-icon-button>`);
+    expect(el.classList.contains('custom')).to.be.true;
+  });
+
+  it('74. should handle id attribute', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button id="btn1"></nile-icon-button>`);
+    expect(el.id).to.equal('btn1');
+  });
+
+  it('75. button should have exactly one child (nile-icon)', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button name="test"></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    const icons = button!.querySelectorAll('nile-icon');
+    expect(icons.length).to.equal(1);
+  });
+
+  it('76. anchor should have exactly one child (nile-icon)', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button name="test" href="https://example.com"></nile-icon-button>`);
+    const anchor = el.shadowRoot!.querySelector('a');
+    const icons = anchor!.querySelectorAll('nile-icon');
+    expect(icons.length).to.equal(1);
+  });
+
+  // Various href configurations
+  it('77. should handle absolute href', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button href="https://example.com/path"></nile-icon-button>`);
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor!.getAttribute('href')).to.equal('https://example.com/path');
+  });
+
+  it('78. should handle relative href', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button href="/path"></nile-icon-button>`);
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor!.getAttribute('href')).to.equal('/path');
+  });
+
+  it('79. should handle hash href', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button href="#section"></nile-icon-button>`);
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor!.getAttribute('href')).to.equal('#section');
+  });
+
+  // Label combinations
+  it('80. should handle long label', async () => {
+    const longLabel = 'A'.repeat(200);
+    const el = await fixture<NileIconButton>(html`<nile-icon-button label="${longLabel}"></nile-icon-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    expect(button!.getAttribute('aria-label')).to.equal(longLabel);
+  });
+
+  it('81. should handle special characters in label', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button label="Close &amp; Save"></nile-icon-button>`);
+    expect(el.label).to.contain('&');
+  });
+
+  // Disabled + href
+  it('82. should handle disabled with href', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button href="https://example.com" disabled></nile-icon-button>`);
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor!.getAttribute('aria-disabled')).to.equal('true');
+    expect(anchor!.getAttribute('tabindex')).to.equal('-1');
+  });
+
+  // Multiple renders
+  it('83. should handle multiple rapid property changes', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.name = 'a';
+    el.name = 'b';
+    el.name = 'c';
+    await el.updateComplete;
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon!.getAttribute('name')).to.equal('c');
+  });
+
+  it('84. should maintain structure after requestUpdate', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.requestUpdate();
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.icon-button')).to.exist;
+  });
+
+  it('85. should handle being inside a form', async () => {
+    const container = await fixture(html`<form><nile-icon-button></nile-icon-button></form>`);
+    const btn = container.querySelector('nile-icon-button') as NileIconButton;
+    expect(btn.shadowRoot!.querySelector('.icon-button')).to.exist;
+  });
+
+  it('86. should handle being inside a nile-button container', async () => {
+    const container = await fixture(html`<div><nile-icon-button name="x"></nile-icon-button></div>`);
+    const btn = container.querySelector('nile-icon-button') as NileIconButton;
+    expect(btn.name).to.equal('x');
+  });
+
+  it('87. should handle hidden attribute', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button hidden></nile-icon-button>`);
+    expect(el.hidden).to.be.true;
+  });
+
+  it('88. should handle style attribute', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button style="opacity:0.5"></nile-icon-button>`);
+    expect(el.style.opacity).to.equal('0.5');
+  });
+
+  it('89. should have no text content', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.textContent!.trim()).to.equal('');
+  });
+
+  it('90. should have updateComplete promise', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.updateComplete).to.be.a('promise');
+  });
+
+  it('91. should resolve updateComplete', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    const result = await el.updateComplete;
+    expect(result).to.not.be.undefined;
+  });
+
+  it('92. should be connected after fixture', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.isConnected).to.be.true;
+  });
+
+  it('93. should be disconnected after removal', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    el.remove();
+    expect(el.isConnected).to.be.false;
+  });
+
+  it('94. button should have nodeType ELEMENT_NODE', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.nodeType).to.equal(Node.ELEMENT_NODE);
+  });
+
+  it('95. shadowRoot host should be the element', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button></nile-icon-button>`);
+    expect(el.shadowRoot!.host).to.equal(el);
+  });
+
+  // Comprehensive combos
+  it('96. name + library + label + disabled', async () => {
+    const el = await fixture<NileIconButton>(html`
+      <nile-icon-button name="close" library="system" label="Close" disabled></nile-icon-button>
+    `);
+    expect(el.disabled).to.be.true;
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon!.getAttribute('name')).to.equal('close');
+    expect(icon!.getAttribute('library')).to.equal('system');
+  });
+
+  it('97. name + href + target + label', async () => {
+    const el = await fixture<NileIconButton>(html`
+      <nile-icon-button name="link" href="https://example.com" target="_blank" label="Link"></nile-icon-button>
+    `);
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor!.getAttribute('href')).to.equal('https://example.com');
+    expect(anchor!.getAttribute('target')).to.equal('_blank');
+  });
+
+  it('98. should handle name + color + label', async () => {
+    const el = await fixture<NileIconButton>(html`
+      <nile-icon-button name="edit" color="blue" label="Edit"></nile-icon-button>
+    `);
+    expect(el.name).to.equal('edit');
+    expect(el.color).to.equal('blue');
+    expect(el.label).to.equal('Edit');
+  });
+
+  it('99. should handle all link properties', async () => {
+    const el = await fixture<NileIconButton>(html`
+      <nile-icon-button name="download" href="https://example.com/file" target="_blank" download="file.pdf" label="Download"></nile-icon-button>
+    `);
+    const anchor = el.shadowRoot!.querySelector('a');
+    expect(anchor!.getAttribute('href')).to.equal('https://example.com/file');
+    expect(anchor!.getAttribute('target')).to.equal('_blank');
+    expect(anchor!.getAttribute('download')).to.equal('file.pdf');
+  });
+
+  it('100. should handle switching from anchor to button', async () => {
+    const el = await fixture<NileIconButton>(html`<nile-icon-button href="https://example.com"></nile-icon-button>`);
+    expect(el.shadowRoot!.querySelector('a')).to.exist;
+    el.href = undefined;
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('button')).to.exist;
+  });
+});