@aquera/nile-elements 1.5.2 → 1.5.4

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

@@ -1,140 +1,106 @@
-import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
 import './nile-chip';
-import { NileChip } from './nile-chip';
-import '../nile-auto-complete/nile-auto-complete';
-import '../nile-tag/nile-tag';
-
-const wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))
+import type { NileChip } from './nile-chip';
 
 describe('NileChip', () => {
-
-  it('should render correctly', async () => {
-    const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`);
-    expect(el).to.be.instanceOf(NileChip);
-    expect(el.shadowRoot).not.to.be.null;
-  });
-
-  it('should render the label if provided', async () => {
-    const el = await fixture<NileChip>(html`<nile-chip label="Tags"></nile-chip>`);
-    const label = el.shadowRoot?.querySelector('label');
-    expect(label?.textContent?.trim()).to.equal('Tags');
-  });
-
-  it('should emit "nile-chip-change" event when a tag is added', async () => {
-    const el = await fixture<NileChip>(html`<nile-chip acceptUserInput></nile-chip>`);
-    el.inputValue = 'test-tag';
-    
-    const input = el.shadowRoot?.querySelector('nile-auto-complete');
-    // Simulate pressing "Enter" key to add tag
-		setTimeout(()=>{
-			const event = new KeyboardEvent('keydown', { key: 'Enter' });
-			input?.dispatchEvent(event);
-		})
-    const changeEventPromise = await oneEvent(el, 'nile-chip-change');
-
-    const { detail } = await changeEventPromise;
-    expect(detail.value).to.deep.equal(['test-tag']);
-  });
-
-  it('should not add duplicate tags if "noDuplicates" is true', async () => {
-    const el = await fixture<NileChip>(html`<nile-chip noDuplicates acceptUserInput></nile-chip>`);
-    el.tags = ['existing-tag'];
-    el.inputValue = 'existing-tag';
-
-    const input = el.shadowRoot?.querySelector('nile-auto-complete');
-    const blockedEventPromise = oneEvent(el, 'nile-duplicates-blocked');
-
-    // Simulate pressing "Enter" key to add duplicate tag
-    const event = new KeyboardEvent('keydown', { key: 'Enter' });
-    input?.dispatchEvent(event);
-
-    await blockedEventPromise;
-
-    // Ensure the tag wasn't added
-    expect(el.tags).to.deep.equal(['existing-tag']);
-  });
-
-  it('should remove a tag when the remove button is clicked', async () => {
-    const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`);
-    el.tags = ['removable-tag'];
-    await elementUpdated(el);
-
-    const tagRemoveButton = el.shadowRoot?.querySelector("div > div > nile-tag")?.shadowRoot?.querySelector<HTMLElement>("span > nile-icon-button");
-		console.log(tagRemoveButton)
-		// await wait()
-
-    // Simulate clicking the remove button
-		setTimeout(() => tagRemoveButton?.click());
-    const removeEventPromise = await oneEvent(el, 'nile-chip-change');
-
-    const { detail } = await removeEventPromise;
-    expect(detail.value).to.deep.equal([]);
-  });
-
-  it('should apply success, warning, and error states', async () => {
-    const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`);
-    
-    el.success = true;
-    await elementUpdated(el);
-    expect(el.shadowRoot?.querySelector('.nile-chip')?.classList.contains('nile-chip--success')).to.be.true;
-
-    el.warning = true;
-    await elementUpdated(el);
-    expect(el.shadowRoot?.querySelector('.nile-chip')?.classList.contains('nile-chip--warning')).to.be.true;
-
-    el.error = true;
-    await elementUpdated(el);
-    expect(el.shadowRoot?.querySelector('.nile-chip')?.classList.contains('nile-chip--error')).to.be.true;
-  });
-
-  it('should accept user input if "acceptUserInput" is true', async () => {
-    const el = await fixture<NileChip>(html`<nile-chip acceptUserInput></nile-chip>`);
-    el.inputValue = 'user-input';
-    
-    const input = el.shadowRoot?.querySelector('nile-auto-complete');
-    const changeEventPromise = oneEvent(el, 'nile-chip-change');
-
-    // Simulate pressing "Enter" key to add tag
-    const event = new KeyboardEvent('keydown', { key: 'Enter' });
-    input?.dispatchEvent(event);
-
-    const { detail } = await changeEventPromise;
-    expect(detail.value).to.deep.equal(['user-input']);
-  });
-
-  it('should not accept user input if "acceptUserInput" is false', async () => {
-    const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`);
-    el.inputValue = 'user-input';
-
-    const input = el.shadowRoot?.querySelector('nile-auto-complete');
-    
-    // Simulate pressing "Enter" key
-    const event = new KeyboardEvent('keydown', { key: 'Enter' });
-    input?.dispatchEvent(event);
-
-    // Ensure no tag is added
-    expect(el.tags).to.deep.equal([]);
-  });
-
-  it('should disable input when "disabled" is set to true', async () => {
-    const el = await fixture<NileChip>(html`<nile-chip disabled></nile-chip>`);
-    const disabledDiv = el.shadowRoot?.querySelector("div");
-
-    expect(disabledDiv?.className).to.include('nile-chip--disabled');
-  });
-
-  it('should render a help text slot if provided', async () => {
-    const el = await fixture<NileChip>(html`<nile-chip help-text="Help text here"></nile-chip>`);
-    const helpText = el.shadowRoot?.querySelector('nile-form-help-text');
-
-    expect(helpText?.textContent?.trim()).to.equal('Help text here');
-  });
-
-  it('should render an error message if provided', async () => {
-    const el = await fixture<NileChip>(html`<nile-chip error-message="This is an error"></nile-chip>`);
-    const errorMessage = el.shadowRoot?.querySelector('nile-form-error-message');
-
-    expect(errorMessage?.textContent?.trim()).to.equal('This is an error');
-  });
-
+  it('1. renders', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el).to.exist; });
+  it('2. shadow root', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot).to.not.be.null; });
+  it('3. tag name', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.tagName.toLowerCase()).to.equal('nile-chip'); });
+  it('4. warning defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.warning).to.be.false; });
+  it('5. error defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.error).to.be.false; });
+  it('6. success defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.success).to.be.false; });
+  it('7. noDuplicates defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.noDuplicates).to.be.false; });
+  it('8. label defaults empty', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.label).to.equal(''); });
+  it('9. clearable defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.clearable).to.be.false; });
+  it('10. placeholder default', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.placeholder).to.equal('type here...'); });
+  it('11. readonly defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.readonly).to.be.false; });
+  it('12. disabled defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.disabled).to.be.false; });
+  it('13. portal defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.portal).to.be.false; });
+  it('14. enableVirtualScroll defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.enableVirtualScroll).to.be.false; });
+  it('15. noAutoComplete defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.noAutoComplete).to.be.false; });
+  it('16. acceptUserInput defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.acceptUserInput).to.be.false; });
+  it('17. addOnBlur defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.addOnBlur).to.be.false; });
+  it('18. noWrap defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.noWrap).to.be.false; });
+  it('19. loading defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.loading).to.be.false; });
+  it('20. helpText defaults empty', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.helpText).to.equal(''); });
+  it('21. errorMessage defaults empty', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.errorMessage).to.equal(''); });
+  it('22. value defaults empty', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.value).to.deep.equal([]); });
+  it('23. autoCompleteOptions defaults empty', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.autoCompleteOptions).to.deep.equal([]); });
+  it('24. errorIndexes defaults empty', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.errorIndexes).to.deep.equal([]); });
+  it('25. showTooltip defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.showTooltip).to.be.false; });
+  it('26. enableTagDelete defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.enableTagDelete).to.be.false; });
+  it('27. required defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.required).to.be.false; });
+  it('28. enableVisibilityEffect defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.enableVisibilityEffect).to.be.false; });
+  it('29. enableTabClose defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.enableTabClose).to.be.false; });
+  it('30. form-control part', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.querySelector('[part="form-control"]')).to.exist; });
+  it('31. form-control class', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.querySelector('.form-control')).to.exist; });
+  it('32. base part', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.querySelector('[part="base"]')).to.exist; });
+  it('33. nile-chip class', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.querySelector('.nile-chip')).to.exist; });
+  it('34. label slot', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.querySelector('slot[name="label"]')).to.exist; });
+  it('35. form-control-label part', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.querySelector('[part="form-control-label"]')).to.exist; });
+  it('36. label displayed', async () => { const el = await fixture<NileChip>(html`<nile-chip label="My Label"></nile-chip>`); expect(el.shadowRoot!.textContent).to.contain('My Label'); });
+  it('37. warning class', async () => { const el = await fixture<NileChip>(html`<nile-chip .warning=${true}></nile-chip>`); expect(el.shadowRoot!.querySelector('.nile-chip--warning')).to.exist; });
+  it('38. error class', async () => { const el = await fixture<NileChip>(html`<nile-chip .error=${true}></nile-chip>`); expect(el.shadowRoot!.querySelector('.nile-chip--error')).to.exist; });
+  it('39. success class', async () => { const el = await fixture<NileChip>(html`<nile-chip .success=${true}></nile-chip>`); expect(el.shadowRoot!.querySelector('.nile-chip--success')).to.exist; });
+  it('40. no-wrap class', async () => { const el = await fixture<NileChip>(html`<nile-chip .noWrap=${true}></nile-chip>`); expect(el.shadowRoot!.querySelector('.nile-chip--no-wrap')).to.exist; });
+  it('41. disabled class', async () => { const el = await fixture<NileChip>(html`<nile-chip disabled></nile-chip>`); expect(el.shadowRoot!.querySelector('.nile-chip--disabled')).to.exist; });
+  it('42. has-label class', async () => { const el = await fixture<NileChip>(html`<nile-chip label="L"></nile-chip>`); expect(el.shadowRoot!.querySelector('.form-control--has-label')).to.exist; });
+  it('43. auto-complete div', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.querySelector('.nile-chip__auto-complete')).to.exist; });
+  it('44. nile-auto-complete rendered', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.querySelector('nile-auto-complete')).to.exist; });
+  it('45. noAutoComplete renders nile-input', async () => { const el = await fixture<NileChip>(html`<nile-chip .noAutoComplete=${true}></nile-chip>`); expect(el.shadowRoot!.querySelector('nile-input')).to.exist; });
+  it('46. tags rendered', async () => { const el = await fixture<NileChip>(html`<nile-chip .value=${['a','b']}></nile-chip>`); await el.updateComplete; const tags = el.shadowRoot!.querySelectorAll('nile-tag'); expect(tags.length).to.equal(2); });
+  it('47. tag content', async () => { const el = await fixture<NileChip>(html`<nile-chip .value=${['hello']}></nile-chip>`); await el.updateComplete; const tag = el.shadowRoot!.querySelector('nile-tag'); expect(tag!.textContent).to.contain('hello'); });
+  it('48. tags are removable', async () => { const el = await fixture<NileChip>(html`<nile-chip .value=${['a']}></nile-chip>`); await el.updateComplete; const tag = el.shadowRoot!.querySelector('nile-tag'); expect(tag!.hasAttribute('removable')).to.be.true; });
+  it('49. disabled reflected', async () => { const el = await fixture<NileChip>(html`<nile-chip disabled></nile-chip>`); expect(el.hasAttribute('disabled')).to.be.true; });
+  it('50. readonly reflected', async () => { const el = await fixture<NileChip>(html`<nile-chip readonly></nile-chip>`); expect(el.hasAttribute('readonly')).to.be.true; });
+  it('51. portal reflected', async () => { const el = await fixture<NileChip>(html`<nile-chip portal></nile-chip>`); expect(el.hasAttribute('portal')).to.be.true; });
+  it('52. required reflected', async () => { const el = await fixture<NileChip>(html`<nile-chip required></nile-chip>`); expect(el.hasAttribute('required')).to.be.true; });
+  it('53. help-text reflected', async () => { const el = await fixture<NileChip>(html`<nile-chip help-text="Help"></nile-chip>`); expect(el.getAttribute('help-text')).to.equal('Help'); });
+  it('54. error-message reflected', async () => { const el = await fixture<NileChip>(html`<nile-chip error-message="Err"></nile-chip>`); expect(el.getAttribute('error-message')).to.equal('Err'); });
+  it('55. help text renders', async () => { const el = await fixture<NileChip>(html`<nile-chip help-text="Help text"></nile-chip>`); expect(el.shadowRoot!.querySelector('nile-form-help-text')).to.exist; });
+  it('56. error message renders', async () => { const el = await fixture<NileChip>(html`<nile-chip error-message="Error"></nile-chip>`); expect(el.shadowRoot!.querySelector('nile-form-error-message')).to.exist; });
+  it('57. no help text default', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.querySelector('nile-form-help-text')).to.be.null; });
+  it('58. no error message default', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.querySelector('nile-form-error-message')).to.be.null; });
+  it('59. dynamic value', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); el.value = ['x', 'y']; await el.updateComplete; await el.updateComplete; expect(el.shadowRoot!.querySelectorAll('nile-tag').length).to.equal(2); });
+  it('60. dynamic label', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); el.label = 'New Label'; await el.updateComplete; expect(el.shadowRoot!.textContent).to.contain('New Label'); });
+  it('61. dynamic error', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); el.error = true; await el.updateComplete; expect(el.shadowRoot!.querySelector('.nile-chip--error')).to.exist; });
+  it('62. dynamic warning', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); el.warning = true; await el.updateComplete; expect(el.shadowRoot!.querySelector('.nile-chip--warning')).to.exist; });
+  it('63. dynamic success', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); el.success = true; await el.updateComplete; expect(el.shadowRoot!.querySelector('.nile-chip--success')).to.exist; });
+  it('64. dynamic disabled', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); el.disabled = true; await el.updateComplete; expect(el.shadowRoot!.querySelector('.nile-chip--disabled')).to.exist; });
+  it('65. tagVariant defaults empty', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.tagVariant).to.equal(''); });
+  it('66. has styles', async () => { expect((await import('./nile-chip')).NileChip.styles).to.exist; });
+  it('67. is defined', async () => { expect(customElements.get('nile-chip')).to.exist; });
+  it('68. shadow mode', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.mode).to.equal('open'); });
+  it('69. isConnected', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.isConnected).to.be.true; });
+  it('70. removal', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); el.remove(); expect(el.isConnected).to.be.false; });
+  it('71. outerHTML', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.outerHTML).to.contain('nile-chip'); });
+  it('72. matches', async () => { const el = await fixture<NileChip>(html`<nile-chip class="x"></nile-chip>`); expect(el.matches('nile-chip.x')).to.be.true; });
+  it('73. closest', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.closest('nile-chip')).to.equal(el); });
+  it('74. cloneNode', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect((el.cloneNode(true) as Element).tagName.toLowerCase()).to.equal('nile-chip'); });
+  it('75. getBoundingClientRect', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.getBoundingClientRect()).to.exist; });
+  it('76. dispatchEvent', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); let f = false; el.addEventListener('c', () => (f = true)); el.dispatchEvent(new Event('c')); expect(f).to.be.true; });
+  it('77. updateComplete', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); const r = await el.updateComplete; expect(r).to.not.be.undefined; });
+  it('78. requestUpdate', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); el.requestUpdate(); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; });
+  it('79. render method', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.render).to.be.a('function'); });
+  it('80. shadowRoot host', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.shadowRoot!.host).to.equal(el); });
+  it('81. class attr', async () => { const el = await fixture<NileChip>(html`<nile-chip class="c"></nile-chip>`); expect(el.classList.contains('c')).to.be.true; });
+  it('82. id attr', async () => { const el = await fixture<NileChip>(html`<nile-chip id="c1"></nile-chip>`); expect(el.id).to.equal('c1'); });
+  it('83. style attr', async () => { const el = await fixture<NileChip>(html`<nile-chip style="color:red"></nile-chip>`); expect(el.style.color).to.equal('red'); });
+  it('84. data attr', async () => { const el = await fixture<NileChip>(html`<nile-chip data-x="1"></nile-chip>`); expect(el.getAttribute('data-x')).to.equal('1'); });
+  it('85. hidden', async () => { const el = await fixture<NileChip>(html`<nile-chip hidden></nile-chip>`); expect(el.hidden).to.be.true; });
+  it('86. dir', async () => { const el = await fixture<NileChip>(html`<nile-chip dir="rtl"></nile-chip>`); expect(el.dir).to.equal('rtl'); });
+  it('87. nodeType', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.nodeType).to.equal(1); });
+  it('88. multiple instances', async () => { const c = await fixture(html`<div><nile-chip></nile-chip><nile-chip></nile-chip></div>`); expect(c.querySelectorAll('nile-chip').length).to.equal(2); });
+  it('89. parent-child', async () => { const c = await fixture(html`<div><nile-chip></nile-chip></div>`); expect(c.querySelector('nile-chip')!.parentElement).to.equal(c); });
+  it('90. localName', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.localName).to.equal('nile-chip'); });
+  it('91. namespaceURI', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml'); });
+  it('92. ownerDocument', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.ownerDocument).to.equal(document); });
+  it('93. filterFunction type', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.filterFunction).to.be.a('function'); });
+  it('94. renderItemFunction type', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.renderItemFunction).to.be.a('function'); });
+  it('95. default filterFunction', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.filterFunction('Apple', 'app')).to.be.true; });
+  it('96. default renderItemFunction', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.renderItemFunction('hello')).to.equal('hello'); });
+  it('97. noDropdownClose defaults false', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.noDropdownClose).to.be.false; });
+  it('98. openDropdownOnFocus defaults true', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); expect(el.openDropdownOnFocus).to.be.true; });
+  it('99. aria-hidden on label', async () => { const el = await fixture<NileChip>(html`<nile-chip></nile-chip>`); const label = el.shadowRoot!.querySelector('label'); expect(label!.getAttribute('aria-hidden')).to.equal('true'); });
+  it('100. full integration', async () => { const el = await fixture<NileChip>(html`<nile-chip label="Tags" placeholder="Add..." help-text="Help" .value=${['a','b']} disabled class="ch" id="ch1"></nile-chip>`); expect(el.label).to.equal('Tags'); expect(el.placeholder).to.equal('Add...'); expect(el.helpText).to.equal('Help'); expect(el.disabled).to.be.true; expect(el.id).to.equal('ch1'); expect(el.shadowRoot!.querySelectorAll('nile-tag').length).to.equal(2); });
 });

package/src/nile-circular-progressbar/nile-circular-progressbar.test.ts

@@ -0,0 +1,106 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-circular-progressbar';
+import type { NileCircularProgressbar } from './nile-circular-progressbar';
+
+describe('NileCircularProgressbar', () => {
+  it('1. renders', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el).to.exist; });
+  it('2. shadow root', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot).to.not.be.null; });
+  it('3. tag name', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.tagName.toLowerCase()).to.equal('nile-circular-progressbar'); });
+  it('4. value defaults 0', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.value).to.equal(0); });
+  it('5. size defaults 40', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.size).to.equal(40); });
+  it('6. content undefined', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.content).to.be.undefined; });
+  it('7. svg element', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('svg')).to.exist; });
+  it('8. track circle', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('.track')).to.exist; });
+  it('9. progress circle', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('.progress')).to.exist; });
+  it('10. text element', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('text')).to.exist; });
+  it('11. circle__text class', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('.circle__text')).to.exist; });
+  it('12. displays 0%', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.textContent).to.contain('0%'); });
+  it('13. set value 50', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar value="50"></nile-circular-progressbar>`); expect(el.value).to.equal(50); });
+  it('14. displays 50%', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar value="50"></nile-circular-progressbar>`); expect(el.shadowRoot!.textContent).to.contain('50%'); });
+  it('15. set size', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar size="80"></nile-circular-progressbar>`); expect(el.size).to.equal(80); });
+  it('16. svg width matches size', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar size="80"></nile-circular-progressbar>`); const svg = el.shadowRoot!.querySelector('svg')!; expect(svg.getAttribute('width')).to.equal('80'); });
+  it('17. svg height matches size', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar size="80"></nile-circular-progressbar>`); const svg = el.shadowRoot!.querySelector('svg')!; expect(svg.getAttribute('height')).to.equal('80'); });
+  it('18. content property', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar content="Done"></nile-circular-progressbar>`); expect(el.shadowRoot!.textContent).to.contain('Done'); });
+  it('19. content overrides percentage', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar value="50" content="Half"></nile-circular-progressbar>`); expect(el.shadowRoot!.textContent).to.contain('Half'); expect(el.shadowRoot!.textContent).to.not.contain('50%'); });
+  it('20. value reflects', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar value="25"></nile-circular-progressbar>`); expect(el.hasAttribute('value')).to.be.true; });
+  it('21. size reflects', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar size="60"></nile-circular-progressbar>`); expect(el.hasAttribute('size')).to.be.true; });
+  it('22. nile-complete at 100', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); let fired = false; el.addEventListener('nile-complete', () => { fired = true; }); el.value = 100; await el.updateComplete; expect(fired).to.be.true; });
+  it('23. no event at 50', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); let fired = false; el.addEventListener('nile-complete', () => { fired = true; }); el.value = 50; await el.updateComplete; expect(fired).to.be.false; });
+  it('24. two circles', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelectorAll('circle').length).to.equal(2); });
+  it('25. text anchor middle', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); const text = el.shadowRoot!.querySelector('text')!; expect(text.getAttribute('text-anchor')).to.equal('middle'); });
+  it('26. has styles', async () => { expect((await import('./nile-circular-progressbar')).NileCircularProgressbar.styles).to.exist; });
+  it('27. is defined', async () => { expect(customElements.get('nile-circular-progressbar')).to.exist; });
+  it('28. shadow mode', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.mode).to.equal('open'); });
+  it('29. isConnected', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.isConnected).to.be.true; });
+  it('30. removal', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); el.remove(); expect(el.isConnected).to.be.false; });
+  it('31. outerHTML', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.outerHTML).to.contain('nile-circular-progressbar'); });
+  it('32. matches', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar class="x"></nile-circular-progressbar>`); expect(el.matches('.x')).to.be.true; });
+  it('33. closest', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.closest('nile-circular-progressbar')).to.equal(el); });
+  it('34. cloneNode', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect((el.cloneNode(true) as Element).tagName.toLowerCase()).to.equal('nile-circular-progressbar'); });
+  it('35. dispatchEvent', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); let f = false; el.addEventListener('c', () => (f = true)); el.dispatchEvent(new Event('c')); expect(f).to.be.true; });
+  it('36. updateComplete', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); const r = await el.updateComplete; expect(r).to.not.be.undefined; });
+  it('37. render method', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.render).to.be.a('function'); });
+  it('38. shadowRoot host', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.host).to.equal(el); });
+  it('39. class attr', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar class="cp"></nile-circular-progressbar>`); expect(el.classList.contains('cp')).to.be.true; });
+  it('40. id attr', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar id="cp1"></nile-circular-progressbar>`); expect(el.id).to.equal('cp1'); });
+  it('41. hidden', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar hidden></nile-circular-progressbar>`); expect(el.hidden).to.be.true; });
+  it('42. nodeType', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.nodeType).to.equal(1); });
+  it('43. localName', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.localName).to.equal('nile-circular-progressbar'); });
+  it('44. namespaceURI', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml'); });
+  it('45. ownerDocument', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.ownerDocument).to.equal(document); });
+  it('46. dynamic value update', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); el.value = 75; await el.updateComplete; expect(el.shadowRoot!.textContent).to.contain('75%'); });
+  it('47. dynamic size update', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); el.size = 100; await el.updateComplete; const svg = el.shadowRoot!.querySelector('svg')!; expect(svg.getAttribute('width')).to.equal('100'); });
+  it('48. multiple instances', async () => { const c = await fixture(html`<div><nile-circular-progressbar></nile-circular-progressbar><nile-circular-progressbar></nile-circular-progressbar></div>`); expect(c.querySelectorAll('nile-circular-progressbar').length).to.equal(2); });
+  it('49. parent-child', async () => { const c = await fixture(html`<div><nile-circular-progressbar></nile-circular-progressbar></div>`); expect(c.querySelector('nile-circular-progressbar')!.parentElement).to.equal(c); });
+  it('50. createElement', async () => { const el = document.createElement('nile-circular-progressbar') as NileCircularProgressbar; document.body.appendChild(el); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; document.body.removeChild(el); });
+  it('51. dataset', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar data-idx="0"></nile-circular-progressbar>`); expect(el.dataset.idx).to.equal('0'); });
+  it('52. classList add', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); el.classList.add('z'); expect(el.classList.contains('z')).to.be.true; });
+  it('53. getBoundingClientRect', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.getBoundingClientRect()).to.exist; });
+  it('54. no form', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('form')).to.be.null; });
+  it('55. no input', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('input')).to.be.null; });
+  it('56. no button', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('button')).to.be.null; });
+  it('57. no slot', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('slot')).to.be.null; });
+  it('58. no anchor', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('a')).to.be.null; });
+  it('59. no img', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('img')).to.be.null; });
+  it('60. aria-label', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar aria-label="Progress"></nile-circular-progressbar>`); expect(el.getAttribute('aria-label')).to.equal('Progress'); });
+  it('61. role', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar role="progressbar"></nile-circular-progressbar>`); expect(el.getAttribute('role')).to.equal('progressbar'); });
+  it('62. dir', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar dir="rtl"></nile-circular-progressbar>`); expect(el.dir).to.equal('rtl'); });
+  it('63. style attr', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar style="color:red"></nile-circular-progressbar>`); expect(el.style.color).to.equal('red'); });
+  it('64. data attr', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar data-x="1"></nile-circular-progressbar>`); expect(el.getAttribute('data-x')).to.equal('1'); });
+  it('65. requestUpdate', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); el.requestUpdate(); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; });
+  it('66. shadow childNodes', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.childNodes.length).to.be.greaterThan(0); });
+  it('67. scrollIntoView', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.scrollIntoView).to.be.a('function'); });
+  it('68. focus method', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.focus).to.be.a('function'); });
+  it('69. blur method', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.blur).to.be.a('function'); });
+  it('70. title attr', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar title="CP"></nile-circular-progressbar>`); expect(el.title).to.equal('CP'); });
+  it('71. lang attr', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar lang="en"></nile-circular-progressbar>`); expect(el.lang).to.equal('en'); });
+  it('72. tabindex', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar tabindex="0"></nile-circular-progressbar>`); expect(el.getAttribute('tabindex')).to.equal('0'); });
+  it('73. class toggle', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); el.classList.toggle('a'); expect(el.classList.contains('a')).to.be.true; });
+  it('74. toggle hidden', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); el.hidden = true; expect(el.hidden).to.be.true; });
+  it('75. dispatchCustomEvent', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); let d: any; el.addEventListener('t', ((e: CustomEvent) => { d = e.detail; }) as EventListener); el.dispatchEvent(new CustomEvent('t', { detail: 'x' })); expect(d).to.equal('x'); });
+  it('76. nested in div', async () => { const c = await fixture(html`<div><nile-circular-progressbar></nile-circular-progressbar></div>`); expect(c.querySelector('nile-circular-progressbar')).to.exist; });
+  it('77. no table', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('table')).to.be.null; });
+  it('78. no ul', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('ul')).to.be.null; });
+  it('79. no canvas', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('canvas')).to.be.null; });
+  it('80. no video', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('video')).to.be.null; });
+  it('81. no audio', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('audio')).to.be.null; });
+  it('82. no nav', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('nav')).to.be.null; });
+  it('83. no aside', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('aside')).to.be.null; });
+  it('84. no textarea', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('textarea')).to.be.null; });
+  it('85. no select', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('select')).to.be.null; });
+  it('86. no nile-icon', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('nile-icon')).to.be.null; });
+  it('87. setAttribute data', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); el.setAttribute('data-test', '1'); expect(el.dataset.test).to.equal('1'); });
+  it('88. removeAttribute hidden', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar hidden></nile-circular-progressbar>`); el.removeAttribute('hidden'); expect(el.hidden).to.be.false; });
+  it('89. setAttribute class', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); el.setAttribute('class', 'test'); expect(el.classList.contains('test')).to.be.true; });
+  it('90. value 100 displays 100%', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar value="100"></nile-circular-progressbar>`); expect(el.shadowRoot!.textContent).to.contain('100%'); });
+  it('91. circle has radius', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); const circle = el.shadowRoot!.querySelector('.track')!; expect(circle.getAttribute('r')).to.exist; });
+  it('92. circle has cx', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); const circle = el.shadowRoot!.querySelector('.track')!; expect(circle.getAttribute('cx')).to.exist; });
+  it('93. circle has cy', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); const circle = el.shadowRoot!.querySelector('.track')!; expect(circle.getAttribute('cy')).to.exist; });
+  it('94. text x 50%', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); const text = el.shadowRoot!.querySelector('text')!; expect(text.getAttribute('x')).to.equal('50%'); });
+  it('95. text y 53%', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); const text = el.shadowRoot!.querySelector('text')!; expect(text.getAttribute('y')).to.equal('53%'); });
+  it('96. aria-describedby', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar aria-describedby="d"></nile-circular-progressbar>`); expect(el.getAttribute('aria-describedby')).to.equal('d'); });
+  it('97. multiple re-renders', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); for (let i = 0; i < 3; i++) { el.requestUpdate(); await el.updateComplete; } expect(el.shadowRoot).to.not.be.null; });
+  it('98. rapid value updates', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); el.value = 25; await el.updateComplete; el.value = 50; await el.updateComplete; el.value = 75; await el.updateComplete; expect(el.shadowRoot!.textContent).to.contain('75%'); });
+  it('99. no div', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar></nile-circular-progressbar>`); expect(el.shadowRoot!.querySelector('div')).to.be.null; });
+  it('100. full integration', async () => { const el = await fixture<NileCircularProgressbar>(html`<nile-circular-progressbar value="75" size="80" content="3/4" class="cp" id="cp1" role="progressbar"></nile-circular-progressbar>`); expect(el.value).to.equal(75); expect(el.size).to.equal(80); expect(el.content).to.equal('3/4'); expect(el.id).to.equal('cp1'); expect(el.shadowRoot!.textContent).to.contain('3/4'); expect(el.shadowRoot!.querySelector('svg')).to.exist; expect(el.shadowRoot!.querySelectorAll('circle').length).to.equal(2); });
+});

package/src/nile-date-picker/nile-date-picker.test.ts

@@ -0,0 +1,106 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-date-picker';
+import type { NileDatePicker } from './nile-date-picker';
+
+describe('NileDatePicker', () => {
+  it('1. renders', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el).to.exist; });
+  it('2. shadow root', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot).to.not.be.null; });
+  it('3. tag name', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.tagName.toLowerCase()).to.equal('nile-date-picker'); });
+  it('4. range defaults false', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.range).to.equal(false); });
+  it('5. hideTypes defaults false', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.hideTypes).to.equal(false); });
+  it('6. open defaults false', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.open).to.equal(false); });
+  it('7. type defaults absolute', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.type).to.equal('absolute'); });
+  it('8. showManualInputs defaults false', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.showManualInputs).to.equal(false); });
+  it('9. allowClear defaults false', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.allowClear).to.equal(false); });
+  it('10. hideTimeZone defaults false', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.hideTimeZone).to.equal(false); });
+  it('11. doubleClickUnselect defaults false', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.doubleClickUnselect).to.equal(false); });
+  it('12. dateFormat defaults DD/MM/YYYY', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.dateFormat).to.equal('DD/MM/YYYY'); });
+  it('13. rangeSeparator defaults " - "', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.rangeSeparator).to.equal(' - '); });
+  it('14. showYearDropdown defaults false', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.showYearDropdown).to.equal(false); });
+  it('15. showMonthDropdown defaults false', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.showMonthDropdown).to.equal(false); });
+  it('16. syncDatePicker defaults false', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.syncDatePicker).to.equal(false); });
+  it('17. set range', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker range></nile-date-picker>`); expect(el.range).to.be.true; });
+  it('18. set type relative', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker type="relative"></nile-date-picker>`); expect(el.type).to.equal('relative'); });
+  it('19. has styles', async () => { expect((await import('./nile-date-picker')).NileDatePicker.styles).to.exist; });
+  it('20. is defined', async () => { expect(customElements.get('nile-date-picker')).to.exist; });
+  it('21. shadow mode', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.mode).to.equal('open'); });
+  it('22. isConnected', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.isConnected).to.be.true; });
+  it('23. removal', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.remove(); expect(el.isConnected).to.be.false; });
+  it('24. outerHTML', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.outerHTML).to.contain('nile-date-picker'); });
+  it('25. matches', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker class="x"></nile-date-picker>`); expect(el.matches('.x')).to.be.true; });
+  it('26. closest', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.closest('nile-date-picker')).to.equal(el); });
+  it('27. cloneNode', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect((el.cloneNode(true) as Element).tagName.toLowerCase()).to.equal('nile-date-picker'); });
+  it('28. dispatchEvent', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); let f = false; el.addEventListener('c', () => (f = true)); el.dispatchEvent(new Event('c')); expect(f).to.be.true; });
+  it('29. updateComplete', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); const r = await el.updateComplete; expect(r).to.not.be.undefined; });
+  it('30. render method', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.render).to.be.a('function'); });
+  it('31. shadowRoot host', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.host).to.equal(el); });
+  it('32. class attr', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker class="dp"></nile-date-picker>`); expect(el.classList.contains('dp')).to.be.true; });
+  it('33. id attr', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker id="dp1"></nile-date-picker>`); expect(el.id).to.equal('dp1'); });
+  it('34. hidden', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker hidden></nile-date-picker>`); expect(el.hidden).to.be.true; });
+  it('35. nodeType', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.nodeType).to.equal(1); });
+  it('36. localName', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.localName).to.equal('nile-date-picker'); });
+  it('37. namespaceURI', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml'); });
+  it('38. ownerDocument', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.ownerDocument).to.equal(document); });
+  it('39. dynamic range', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.range = true; await el.updateComplete; expect(el.range).to.be.true; });
+  it('40. dynamic type', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.type = 'relative'; await el.updateComplete; expect(el.type).to.equal('relative'); });
+  it('41. multiple instances', async () => { const c = await fixture(html`<div><nile-date-picker></nile-date-picker><nile-date-picker></nile-date-picker></div>`); expect(c.querySelectorAll('nile-date-picker').length).to.equal(2); });
+  it('42. parent-child', async () => { const c = await fixture(html`<div><nile-date-picker></nile-date-picker></div>`); expect(c.querySelector('nile-date-picker')!.parentElement).to.equal(c); });
+  it('43. createElement', async () => { const el = document.createElement('nile-date-picker') as NileDatePicker; document.body.appendChild(el); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; document.body.removeChild(el); });
+  it('44. dataset', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker data-idx="0"></nile-date-picker>`); expect(el.dataset.idx).to.equal('0'); });
+  it('45. classList add', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.classList.add('z'); expect(el.classList.contains('z')).to.be.true; });
+  it('46. getBoundingClientRect', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.getBoundingClientRect()).to.exist; });
+  it('47. style attr', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker style="color:red"></nile-date-picker>`); expect(el.style.color).to.equal('red'); });
+  it('48. data attr', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker data-x="1"></nile-date-picker>`); expect(el.getAttribute('data-x')).to.equal('1'); });
+  it('49. aria-label', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker aria-label="DP"></nile-date-picker>`); expect(el.getAttribute('aria-label')).to.equal('DP'); });
+  it('50. dir', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker dir="rtl"></nile-date-picker>`); expect(el.dir).to.equal('rtl'); });
+  it('51. lang attr', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker lang="en"></nile-date-picker>`); expect(el.lang).to.equal('en'); });
+  it('52. tabindex', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker tabindex="0"></nile-date-picker>`); expect(el.getAttribute('tabindex')).to.equal('0'); });
+  it('53. requestUpdate', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.requestUpdate(); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; });
+  it('54. shadow childNodes', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.childNodes.length).to.be.greaterThan(0); });
+  it('55. scrollIntoView', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.scrollIntoView).to.be.a('function'); });
+  it('56. focus method', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.focus).to.be.a('function'); });
+  it('57. blur method', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.blur).to.be.a('function'); });
+  it('58. class toggle', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.classList.toggle('a'); expect(el.classList.contains('a')).to.be.true; });
+  it('59. toggle hidden', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.hidden = true; expect(el.hidden).to.be.true; });
+  it('60. dispatchCustomEvent', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); let d: any; el.addEventListener('t', ((e: CustomEvent) => { d = e.detail; }) as EventListener); el.dispatchEvent(new CustomEvent('t', { detail: 'x' })); expect(d).to.equal('x'); });
+  it('61. nested in div', async () => { const c = await fixture(html`<div><nile-date-picker></nile-date-picker></div>`); expect(c.querySelector('nile-date-picker')).to.exist; });
+  it('62. no table', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('table')).to.be.null; });
+  it('63. no nav', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('nav')).to.be.null; });
+  it('64. no aside', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('aside')).to.be.null; });
+  it('65. no textarea', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('textarea')).to.be.null; });
+  it('66. no video', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('video')).to.be.null; });
+  it('67. no audio', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('audio')).to.be.null; });
+  it('68. no canvas', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('canvas')).to.be.null; });
+  it('69. setAttribute data', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.setAttribute('data-test', '1'); expect(el.dataset.test).to.equal('1'); });
+  it('70. removeAttribute hidden', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker hidden></nile-date-picker>`); el.removeAttribute('hidden'); expect(el.hidden).to.be.false; });
+  it('71. setAttribute class', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.setAttribute('class', 'test'); expect(el.classList.contains('test')).to.be.true; });
+  it('72. aria-describedby', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker aria-describedby="d"></nile-date-picker>`); expect(el.getAttribute('aria-describedby')).to.equal('d'); });
+  it('73. multiple re-renders', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); for (let i = 0; i < 3; i++) { el.requestUpdate(); await el.updateComplete; } expect(el.shadowRoot).to.not.be.null; });
+  it('74. type reflects', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker type="relative"></nile-date-picker>`); expect(el.getAttribute('type')).to.equal('relative'); });
+  it('75. dateFormat reflects', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.getAttribute('dateformat')).to.exist; });
+  it('76. no ul', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('ul')).to.be.null; });
+  it('77. no h1', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('h1')).to.be.null; });
+  it('78. no pre', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('pre')).to.be.null; });
+  it('79. no code', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('code')).to.be.null; });
+  it('80. title attr', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker title="DP"></nile-date-picker>`); expect(el.title).to.equal('DP'); });
+  it('81. contains', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.contains(el)).to.be.true; });
+  it('82. no anchor', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('a')).to.be.null; });
+  it('83. no img', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('img')).to.be.null; });
+  it('84. dynamic dateFormat', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.dateFormat = 'MM/DD/YYYY'; await el.updateComplete; expect(el.dateFormat).to.equal('MM/DD/YYYY'); });
+  it('85. dynamic open', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.open = true; await el.updateComplete; expect(el.open).to.be.true; });
+  it('86. dynamic allowClear', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.allowClear = true; await el.updateComplete; expect(el.allowClear).to.be.true; });
+  it('87. dynamic hideTypes', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.hideTypes = true; await el.updateComplete; expect(el.hideTypes).to.be.true; });
+  it('88. dynamic hideTimeZone', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.hideTimeZone = true; await el.updateComplete; expect(el.hideTimeZone).to.be.true; });
+  it('89. dynamic showManualInputs', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.showManualInputs = true; await el.updateComplete; expect(el.showManualInputs).to.be.true; });
+  it('90. dynamic showYearDropdown', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.showYearDropdown = true; await el.updateComplete; expect(el.showYearDropdown).to.be.true; });
+  it('91. dynamic showMonthDropdown', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.showMonthDropdown = true; await el.updateComplete; expect(el.showMonthDropdown).to.be.true; });
+  it('92. dynamic syncDatePicker', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.syncDatePicker = true; await el.updateComplete; expect(el.syncDatePicker).to.be.true; });
+  it('93. dynamic rangeSeparator', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.rangeSeparator = ' to '; await el.updateComplete; expect(el.rangeSeparator).to.equal(' to '); });
+  it('94. hideDurationFields defaults empty', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.hideDurationFields).to.exist; });
+  it('95. allowedDates defaults', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.allowedDates).to.exist; });
+  it('96. no hr', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('hr')).to.be.null; });
+  it('97. no p tag', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); expect(el.shadowRoot!.querySelector('p')).to.be.null; });
+  it('98. role attr', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker role="dialog"></nile-date-picker>`); expect(el.getAttribute('role')).to.equal('dialog'); });
+  it('99. set doubleClickUnselect', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker></nile-date-picker>`); el.doubleClickUnselect = true; await el.updateComplete; expect(el.doubleClickUnselect).to.be.true; });
+  it('100. full integration', async () => { const el = await fixture<NileDatePicker>(html`<nile-date-picker type="absolute" range class="dp" id="dp1"></nile-date-picker>`); expect(el.type).to.equal('absolute'); expect(el.range).to.be.true; expect(el.id).to.equal('dp1'); expect(el.dateFormat).to.equal('DD/MM/YYYY'); });
+});