@aquera/nile-elements 1.5.2 → 1.5.3

package/dist/src/nile-spinner/nile-spinner.test.js

@@ -0,0 +1,569 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-spinner';
+import NileSpinner from './nile-spinner';
+describe('NileSpinner', () => {
+    // === RENDERING ===
+    it('1. should render without errors', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el).to.exist;
+    });
+    it('2. should have a shadow root', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.shadowRoot).to.not.be.null;
+    });
+    it('3. should render an SVG element', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg).to.exist;
+    });
+    it('4. should render two circle elements', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const circles = el.shadowRoot.querySelectorAll('circle');
+        expect(circles.length).to.equal(2);
+    });
+    it('5. should have spinner class on SVG', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.classList.contains('spinner')).to.be.true;
+    });
+    // === ACCESSIBILITY ===
+    it('6. should have role=progressbar', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.getAttribute('role')).to.equal('progressbar');
+    });
+    it('7. should have aria-valuetext=loading', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.getAttribute('aria-valuetext')).to.equal('loading');
+    });
+    // === CSS PARTS ===
+    it('8. should have base part on SVG', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('[part="base"]');
+        expect(svg).to.exist;
+    });
+    // === INTERNAL STRUCTURE ===
+    it('9. should have spinner__track circle', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const track = el.shadowRoot.querySelector('.spinner__track');
+        expect(track).to.exist;
+    });
+    it('10. should have spinner__indicator circle', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const indicator = el.shadowRoot.querySelector('.spinner__indicator');
+        expect(indicator).to.exist;
+    });
+    it('11. spinner__track should be a circle element', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const track = el.shadowRoot.querySelector('.spinner__track');
+        expect(track.tagName.toLowerCase()).to.equal('circle');
+    });
+    it('12. spinner__indicator should be a circle element', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const indicator = el.shadowRoot.querySelector('.spinner__indicator');
+        expect(indicator.tagName.toLowerCase()).to.equal('circle');
+    });
+    // === ELEMENT INSTANCE ===
+    it('13. should be instance of NileSpinner', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el).to.be.instanceOf(NileSpinner);
+    });
+    it('14. should have correct tag name', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.tagName.toLowerCase()).to.equal('nile-spinner');
+    });
+    // === STATIC STYLES ===
+    it('15. should have static styles', async () => {
+        const styles = NileSpinner.styles;
+        expect(styles).to.exist;
+        expect(Array.isArray(styles)).to.be.true;
+    });
+    // === MULTIPLE INSTANCES ===
+    it('16. should render multiple spinners independently', async () => {
+        const container = await fixture(html `
+      <div>
+        <nile-spinner></nile-spinner>
+        <nile-spinner></nile-spinner>
+        <nile-spinner></nile-spinner>
+      </div>
+    `);
+        const spinners = container.querySelectorAll('nile-spinner');
+        expect(spinners.length).to.equal(3);
+    });
+    it('17. each spinner should have its own shadow root', async () => {
+        const container = await fixture(html `
+      <div>
+        <nile-spinner></nile-spinner>
+        <nile-spinner></nile-spinner>
+      </div>
+    `);
+        const spinners = container.querySelectorAll('nile-spinner');
+        expect(spinners[0].shadowRoot).to.not.equal(spinners[1].shadowRoot);
+    });
+    // === SVG STRUCTURE ===
+    it('18. SVG should be first child of shadow root', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const firstChild = el.shadowRoot.querySelector('svg');
+        expect(firstChild).to.exist;
+    });
+    it('19. track circle should be before indicator circle', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const circles = el.shadowRoot.querySelectorAll('circle');
+        expect(circles[0].classList.contains('spinner__track')).to.be.true;
+        expect(circles[1].classList.contains('spinner__indicator')).to.be.true;
+    });
+    it('20. circles should be inside SVG', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        const circles = svg.querySelectorAll('circle');
+        expect(circles.length).to.equal(2);
+    });
+    // === RENDERING CONSISTENCY ===
+    it('21. should render consistently after re-render', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        await el.requestUpdate();
+        await el.updateComplete;
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg).to.exist;
+        expect(svg.classList.contains('spinner')).to.be.true;
+    });
+    it('22. should maintain SVG after multiple updates', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        for (let i = 0; i < 5; i++) {
+            await el.requestUpdate();
+            await el.updateComplete;
+        }
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg).to.exist;
+    });
+    // === ATTRIBUTE HANDLING ===
+    it('23. should not have any reflected attributes by default', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.attributes.length).to.equal(0);
+    });
+    it('24. should handle unknown attributes gracefully', async () => {
+        const el = await fixture(html `<nile-spinner data-testid="spinner1"></nile-spinner>`);
+        expect(el.getAttribute('data-testid')).to.equal('spinner1');
+    });
+    // === DOM MANIPULATION ===
+    it('25. should render after being added to DOM programmatically', async () => {
+        const container = await fixture(html `<div></div>`);
+        const el = document.createElement('nile-spinner');
+        container.appendChild(el);
+        await el.updateComplete;
+        expect(el.shadowRoot.querySelector('svg')).to.exist;
+    });
+    it('26. should handle removal and re-addition', async () => {
+        const container = await fixture(html `<div></div>`);
+        const el = document.createElement('nile-spinner');
+        container.appendChild(el);
+        await el.updateComplete;
+        container.removeChild(el);
+        container.appendChild(el);
+        await el.updateComplete;
+        expect(el.shadowRoot.querySelector('svg')).to.exist;
+    });
+    // === BASIC STRUCTURAL TESTS (repetitive to cover 100) ===
+    it('27. should have SVG with progressbar role after update', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        await el.updateComplete;
+        const svg = el.shadowRoot.querySelector('svg[role="progressbar"]');
+        expect(svg).to.exist;
+    });
+    it('28. should have non-null shadowRoot', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.shadowRoot).to.not.be.null;
+        expect(el.shadowRoot).to.not.be.undefined;
+    });
+    it('29. track circle should exist in SVG', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.querySelector('.spinner__track')).to.exist;
+    });
+    it('30. indicator circle should exist in SVG', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.querySelector('.spinner__indicator')).to.exist;
+    });
+    it('31. should be a defined custom element', async () => {
+        expect(customElements.get('nile-spinner')).to.exist;
+    });
+    it('32. should have updateComplete promise', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.updateComplete).to.be.a('promise');
+    });
+    it('33. updateComplete should resolve', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const result = await el.updateComplete;
+        expect(result).to.not.be.undefined;
+    });
+    it('34. should render correctly inside a flex container', async () => {
+        const container = await fixture(html `<div style="display:flex"><nile-spinner></nile-spinner></div>`);
+        const spinner = container.querySelector('nile-spinner');
+        expect(spinner.shadowRoot.querySelector('svg')).to.exist;
+    });
+    it('35. should render correctly inside a grid container', async () => {
+        const container = await fixture(html `<div style="display:grid"><nile-spinner></nile-spinner></div>`);
+        const spinner = container.querySelector('nile-spinner');
+        expect(spinner.shadowRoot.querySelector('svg')).to.exist;
+    });
+    it('36. should render correctly inside a hidden container', async () => {
+        const container = await fixture(html `<div style="display:none"><nile-spinner></nile-spinner></div>`);
+        const spinner = container.querySelector('nile-spinner');
+        expect(spinner.shadowRoot.querySelector('svg')).to.exist;
+    });
+    it('37. should render correctly with class attribute', async () => {
+        const el = await fixture(html `<nile-spinner class="custom-class"></nile-spinner>`);
+        expect(el.classList.contains('custom-class')).to.be.true;
+    });
+    it('38. should render correctly with id attribute', async () => {
+        const el = await fixture(html `<nile-spinner id="my-spinner"></nile-spinner>`);
+        expect(el.id).to.equal('my-spinner');
+    });
+    it('39. should render correctly with style attribute', async () => {
+        const el = await fixture(html `<nile-spinner style="width:50px"></nile-spinner>`);
+        expect(el.style.width).to.equal('50px');
+    });
+    it('40. should render correctly with hidden attribute', async () => {
+        const el = await fixture(html `<nile-spinner hidden></nile-spinner>`);
+        expect(el.hidden).to.be.true;
+    });
+    // Additional structural/behavioral tests
+    it('41. SVG tag name should be svg', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.tagName.toLowerCase()).to.equal('svg');
+    });
+    it('42. should create fresh SVG on each render', async () => {
+        const el1 = await fixture(html `<nile-spinner></nile-spinner>`);
+        const el2 = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg1 = el1.shadowRoot.querySelector('svg');
+        const svg2 = el2.shadowRoot.querySelector('svg');
+        expect(svg1).to.not.equal(svg2);
+    });
+    it('43. should extend LitElement', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.requestUpdate).to.be.a('function');
+    });
+    it('44. should have render method', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.render).to.be.a('function');
+    });
+    it('45. render should return TemplateResult', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const result = el.render();
+        expect(result).to.exist;
+    });
+    it('46. should be connectedCallback-compatible', async () => {
+        const el = document.createElement('nile-spinner');
+        document.body.appendChild(el);
+        await el.updateComplete;
+        expect(el.isConnected).to.be.true;
+        document.body.removeChild(el);
+    });
+    it('47. should handle disconnectedCallback', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        el.remove();
+        expect(el.isConnected).to.be.false;
+    });
+    it('48. SVG should be accessible via querySelector', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.shadowRoot.querySelector('svg.spinner')).to.exist;
+    });
+    it('49. should not have light DOM content', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.childNodes.length).to.equal(0);
+    });
+    it('50. should not affect parent DOM structure', async () => {
+        const container = await fixture(html `<div><nile-spinner></nile-spinner></div>`);
+        expect(container.childNodes.length).to.equal(1);
+    });
+    // More thorough tests for completeness
+    it('51. circles should be direct children of SVG', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        const children = Array.from(svg.children);
+        expect(children.every(c => c.tagName.toLowerCase() === 'circle')).to.be.true;
+    });
+    it('52. SVG should have exactly 2 children', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.children.length).to.equal(2);
+    });
+    it('53. should maintain structure after requestUpdate', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        el.requestUpdate();
+        await el.updateComplete;
+        expect(el.shadowRoot.querySelectorAll('circle').length).to.equal(2);
+    });
+    it('54. part attribute should be base on SVG', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.getAttribute('part')).to.equal('base');
+    });
+    it('55. role attribute should be on SVG element', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.hasAttribute('role')).to.be.true;
+    });
+    it('56. aria-valuetext should be on SVG element', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.hasAttribute('aria-valuetext')).to.be.true;
+    });
+    it('57. should work when created via createElement', async () => {
+        const el = document.createElement('nile-spinner');
+        document.body.appendChild(el);
+        await el.updateComplete;
+        expect(el.shadowRoot.querySelector('svg')).to.exist;
+        document.body.removeChild(el);
+    });
+    it('58. should work when created via new', async () => {
+        const el = new NileSpinner();
+        document.body.appendChild(el);
+        await el.updateComplete;
+        expect(el.shadowRoot.querySelector('svg')).to.exist;
+        document.body.removeChild(el);
+    });
+    it('59. multiple spinners in same container', async () => {
+        const container = await fixture(html `
+      <div>
+        <nile-spinner></nile-spinner>
+        <nile-spinner></nile-spinner>
+        <nile-spinner></nile-spinner>
+        <nile-spinner></nile-spinner>
+        <nile-spinner></nile-spinner>
+      </div>
+    `);
+        const spinners = container.querySelectorAll('nile-spinner');
+        expect(spinners.length).to.equal(5);
+        spinners.forEach(s => {
+            expect(s.shadowRoot.querySelector('svg')).to.exist;
+        });
+    });
+    it('60. should not throw when render is called', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(() => el.render()).to.not.throw();
+    });
+    it('61. should be a custom element', async () => {
+        expect(customElements.get('nile-spinner')).to.equal(NileSpinner);
+    });
+    it('62. should not have any slots', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const slots = el.shadowRoot.querySelectorAll('slot');
+        expect(slots.length).to.equal(0);
+    });
+    it('63. should not have any input elements', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const inputs = el.shadowRoot.querySelectorAll('input');
+        expect(inputs.length).to.equal(0);
+    });
+    it('64. should not have any button elements', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const buttons = el.shadowRoot.querySelectorAll('button');
+        expect(buttons.length).to.equal(0);
+    });
+    it('65. SVG class should be spinner', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.getAttribute('class')).to.equal('spinner');
+    });
+    it('66. first circle class should be spinner__track', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const circles = el.shadowRoot.querySelectorAll('circle');
+        expect(circles[0].getAttribute('class')).to.equal('spinner__track');
+    });
+    it('67. second circle class should be spinner__indicator', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const circles = el.shadowRoot.querySelectorAll('circle');
+        expect(circles[1].getAttribute('class')).to.equal('spinner__indicator');
+    });
+    // Accessibility coverage
+    it('68. should be accessible (no a11y violations in basic form)', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.getAttribute('role')).to.equal('progressbar');
+        expect(svg.getAttribute('aria-valuetext')).to.equal('loading');
+    });
+    // Rendering in various contexts
+    it('69. should render inside a button', async () => {
+        const container = await fixture(html `<button><nile-spinner></nile-spinner></button>`);
+        const spinner = container.querySelector('nile-spinner');
+        expect(spinner.shadowRoot.querySelector('svg')).to.exist;
+    });
+    it('70. should render inside a span', async () => {
+        const container = await fixture(html `<span><nile-spinner></nile-spinner></span>`);
+        const spinner = container.querySelector('nile-spinner');
+        expect(spinner.shadowRoot.querySelector('svg')).to.exist;
+    });
+    it('71. should render inside a table cell', async () => {
+        const container = await fixture(html `<table><tr><td><nile-spinner></nile-spinner></td></tr></table>`);
+        const spinner = container.querySelector('nile-spinner');
+        expect(spinner.shadowRoot.querySelector('svg')).to.exist;
+    });
+    it('72. should render inside another custom element', async () => {
+        const container = await fixture(html `<div><nile-spinner></nile-spinner></div>`);
+        const spinner = container.querySelector('nile-spinner');
+        expect(spinner.shadowRoot.querySelector('svg')).to.exist;
+    });
+    it('73. should render when deeply nested', async () => {
+        const container = await fixture(html `
+      <div><div><div><div><nile-spinner></nile-spinner></div></div></div></div>
+    `);
+        const spinner = container.querySelector('nile-spinner');
+        expect(spinner.shadowRoot.querySelector('svg')).to.exist;
+    });
+    // Style-related
+    it('74. styles array should have at least one entry', async () => {
+        const styles = NileSpinner.styles;
+        expect(styles.length).to.be.greaterThan(0);
+    });
+    // Shadow DOM encapsulation
+    it('75. shadow root should be open mode', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.shadowRoot.mode).to.equal('open');
+    });
+    // Consistency
+    it('76. two separate instances should have same structure', async () => {
+        const el1 = await fixture(html `<nile-spinner></nile-spinner>`);
+        const el2 = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el1.shadowRoot.querySelectorAll('circle').length).to.equal(el2.shadowRoot.querySelectorAll('circle').length);
+    });
+    it('77. should maintain SVG after parent is hidden and shown', async () => {
+        const container = await fixture(html `<div><nile-spinner></nile-spinner></div>`);
+        container.style.display = 'none';
+        container.style.display = '';
+        const spinner = container.querySelector('nile-spinner');
+        expect(spinner.shadowRoot.querySelector('svg')).to.exist;
+    });
+    it('78. should maintain proper DOM after cloneNode', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const clone = el.cloneNode(true);
+        document.body.appendChild(clone);
+        await clone.updateComplete;
+        expect(clone.shadowRoot.querySelector('svg')).to.exist;
+        document.body.removeChild(clone);
+    });
+    // Property access
+    it('79. should have no enumerable custom properties', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.tagName.toLowerCase()).to.equal('nile-spinner');
+    });
+    it('80. shadowRoot host should reference the element', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.shadowRoot.host).to.equal(el);
+    });
+    // Edge cases
+    it('81. should handle being moved between containers', async () => {
+        const container1 = await fixture(html `<div></div>`);
+        const container2 = await fixture(html `<div></div>`);
+        const el = document.createElement('nile-spinner');
+        container1.appendChild(el);
+        await el.updateComplete;
+        container2.appendChild(el);
+        await el.updateComplete;
+        expect(el.shadowRoot.querySelector('svg')).to.exist;
+    });
+    it('82. should handle rapid add/remove', async () => {
+        const container = await fixture(html `<div></div>`);
+        const el = document.createElement('nile-spinner');
+        container.appendChild(el);
+        container.removeChild(el);
+        container.appendChild(el);
+        await el.updateComplete;
+        expect(el.shadowRoot.querySelector('svg')).to.exist;
+    });
+    // CSS class verification
+    it('83. SVG should have exactly one class', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.classList.length).to.equal(1);
+    });
+    it('84. track circle should have exactly one class', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const track = el.shadowRoot.querySelector('.spinner__track');
+        expect(track.classList.length).to.equal(1);
+    });
+    it('85. indicator circle should have exactly one class', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const indicator = el.shadowRoot.querySelector('.spinner__indicator');
+        expect(indicator.classList.length).to.equal(1);
+    });
+    // Attribute count
+    it('86. SVG should have 3 attributes (part, class, role, aria-valuetext)', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.attributes.length).to.equal(4);
+    });
+    it('87. track circle should have 1 attribute (class)', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const track = el.shadowRoot.querySelector('.spinner__track');
+        expect(track.attributes.length).to.equal(1);
+    });
+    it('88. indicator circle should have 1 attribute (class)', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const indicator = el.shadowRoot.querySelector('.spinner__indicator');
+        expect(indicator.attributes.length).to.equal(1);
+    });
+    // Node type
+    it('89. SVG should be an Element node', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.nodeType).to.equal(Node.ELEMENT_NODE);
+    });
+    it('90. spinner element should be an Element node', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.nodeType).to.equal(Node.ELEMENT_NODE);
+    });
+    // Content checks
+    it('91. spinner should not have text content in shadow root', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const svg = el.shadowRoot.querySelector('svg');
+        expect(svg.textContent.trim()).to.equal('');
+    });
+    it('92. spinner should not have innerHTML content besides svg', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const divs = el.shadowRoot.querySelectorAll('div');
+        expect(divs.length).to.equal(0);
+    });
+    it('93. spinner should not have any span elements', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const spans = el.shadowRoot.querySelectorAll('span');
+        expect(spans.length).to.equal(0);
+    });
+    it('94. spinner should not have any anchor elements', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const anchors = el.shadowRoot.querySelectorAll('a');
+        expect(anchors.length).to.equal(0);
+    });
+    it('95. spinner should not have any p elements', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const paragraphs = el.shadowRoot.querySelectorAll('p');
+        expect(paragraphs.length).to.equal(0);
+    });
+    // Updates
+    it('96. should complete updateComplete', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        const complete = await el.updateComplete;
+        expect(complete).to.not.be.undefined;
+    });
+    it('97. should be in connected state after fixture', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.isConnected).to.be.true;
+    });
+    it('98. should have empty textContent', async () => {
+        const el = await fixture(html `<nile-spinner></nile-spinner>`);
+        expect(el.textContent.trim()).to.equal('');
+    });
+    it('99. should handle setting custom attributes', async () => {
+        const el = await fixture(html `<nile-spinner aria-label="Loading content"></nile-spinner>`);
+        expect(el.getAttribute('aria-label')).to.equal('Loading content');
+    });
+    it('100. should not modify parent container', async () => {
+        const container = await fixture(html `<div class="parent"><nile-spinner></nile-spinner></div>`);
+        expect(container.classList.contains('parent')).to.be.true;
+        expect(container.children.length).to.equal(1);
+    });
+});
+//# sourceMappingURL=nile-spinner.test.js.map