import { expect, fixture, html } from '@open-wc/testing'; import './nile-chip'; import type { NileChip } from './nile-chip'; describe('NileChip', () => { it('1. renders', async () => { const el = await fixture(html``); expect(el).to.exist; }); it('2. shadow root', async () => { const el = await fixture(html``); expect(el.shadowRoot).to.not.be.null; }); it('3. tag name', async () => { const el = await fixture(html``); expect(el.tagName.toLowerCase()).to.equal('nile-chip'); }); it('4. warning defaults false', async () => { const el = await fixture(html``); expect(el.warning).to.be.false; }); it('5. error defaults false', async () => { const el = await fixture(html``); expect(el.error).to.be.false; }); it('6. success defaults false', async () => { const el = await fixture(html``); expect(el.success).to.be.false; }); it('7. noDuplicates defaults false', async () => { const el = await fixture(html``); expect(el.noDuplicates).to.be.false; }); it('8. label defaults empty', async () => { const el = await fixture(html``); expect(el.label).to.equal(''); }); it('9. clearable defaults false', async () => { const el = await fixture(html``); expect(el.clearable).to.be.false; }); it('10. placeholder default', async () => { const el = await fixture(html``); expect(el.placeholder).to.equal('type here...'); }); it('11. readonly defaults false', async () => { const el = await fixture(html``); expect(el.readonly).to.be.false; }); it('12. disabled defaults false', async () => { const el = await fixture(html``); expect(el.disabled).to.be.false; }); it('13. portal defaults false', async () => { const el = await fixture(html``); expect(el.portal).to.be.false; }); it('14. enableVirtualScroll defaults false', async () => { const el = await fixture(html``); expect(el.enableVirtualScroll).to.be.false; }); it('15. noAutoComplete defaults false', async () => { const el = await fixture(html``); expect(el.noAutoComplete).to.be.false; }); it('16. acceptUserInput defaults false', async () => { const el = await fixture(html``); expect(el.acceptUserInput).to.be.false; }); it('17. addOnBlur defaults false', async () => { const el = await fixture(html``); expect(el.addOnBlur).to.be.false; }); it('18. noWrap defaults false', async () => { const el = await fixture(html``); expect(el.noWrap).to.be.false; }); it('19. loading defaults false', async () => { const el = await fixture(html``); expect(el.loading).to.be.false; }); it('20. helpText defaults empty', async () => { const el = await fixture(html``); expect(el.helpText).to.equal(''); }); it('21. errorMessage defaults empty', async () => { const el = await fixture(html``); expect(el.errorMessage).to.equal(''); }); it('22. value defaults empty', async () => { const el = await fixture(html``); expect(el.value).to.deep.equal([]); }); it('23. autoCompleteOptions defaults empty', async () => { const el = await fixture(html``); expect(el.autoCompleteOptions).to.deep.equal([]); }); it('24. errorIndexes defaults empty', async () => { const el = await fixture(html``); expect(el.errorIndexes).to.deep.equal([]); }); it('25. showTooltip defaults false', async () => { const el = await fixture(html``); expect(el.showTooltip).to.be.false; }); it('26. enableTagDelete defaults false', async () => { const el = await fixture(html``); expect(el.enableTagDelete).to.be.false; }); it('27. required defaults false', async () => { const el = await fixture(html``); expect(el.required).to.be.false; }); it('28. enableVisibilityEffect defaults false', async () => { const el = await fixture(html``); expect(el.enableVisibilityEffect).to.be.false; }); it('29. enableTabClose defaults false', async () => { const el = await fixture(html``); expect(el.enableTabClose).to.be.false; }); it('30. form-control part', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('[part="form-control"]')).to.exist; }); it('31. form-control class', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('.form-control')).to.exist; }); it('32. base part', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('[part="base"]')).to.exist; }); it('33. nile-chip class', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('.nile-chip')).to.exist; }); it('34. label slot', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('slot[name="label"]')).to.exist; }); it('35. form-control-label part', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('[part="form-control-label"]')).to.exist; }); it('36. label displayed', async () => { const el = await fixture(html``); expect(el.shadowRoot!.textContent).to.contain('My Label'); }); it('37. warning class', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('.nile-chip--warning')).to.exist; }); it('38. error class', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('.nile-chip--error')).to.exist; }); it('39. success class', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('.nile-chip--success')).to.exist; }); it('40. no-wrap class', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('.nile-chip--no-wrap')).to.exist; }); it('41. disabled class', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('.nile-chip--disabled')).to.exist; }); it('42. has-label class', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('.form-control--has-label')).to.exist; }); it('43. auto-complete div', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('.nile-chip__auto-complete')).to.exist; }); it('44. nile-auto-complete rendered', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('nile-auto-complete')).to.exist; }); it('45. noAutoComplete renders nile-input', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('nile-input')).to.exist; }); it('46. tags rendered', async () => { const el = await fixture(html``); 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(html``); 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(html``); 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(html``); expect(el.hasAttribute('disabled')).to.be.true; }); it('50. readonly reflected', async () => { const el = await fixture(html``); expect(el.hasAttribute('readonly')).to.be.true; }); it('51. portal reflected', async () => { const el = await fixture(html``); expect(el.hasAttribute('portal')).to.be.true; }); it('52. required reflected', async () => { const el = await fixture(html``); expect(el.hasAttribute('required')).to.be.true; }); it('53. help-text reflected', async () => { const el = await fixture(html``); expect(el.getAttribute('help-text')).to.equal('Help'); }); it('54. error-message reflected', async () => { const el = await fixture(html``); expect(el.getAttribute('error-message')).to.equal('Err'); }); it('55. help text renders', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('nile-form-help-text')).to.exist; }); it('56. error message renders', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('nile-form-error-message')).to.exist; }); it('57. no help text default', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('nile-form-help-text')).to.be.null; }); it('58. no error message default', async () => { const el = await fixture(html``); expect(el.shadowRoot!.querySelector('nile-form-error-message')).to.be.null; }); it('59. dynamic value', async () => { const el = await fixture(html``); 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(html``); el.label = 'New Label'; await el.updateComplete; expect(el.shadowRoot!.textContent).to.contain('New Label'); }); it('61. dynamic error', async () => { const el = await fixture(html``); el.error = true; await el.updateComplete; expect(el.shadowRoot!.querySelector('.nile-chip--error')).to.exist; }); it('62. dynamic warning', async () => { const el = await fixture(html``); el.warning = true; await el.updateComplete; expect(el.shadowRoot!.querySelector('.nile-chip--warning')).to.exist; }); it('63. dynamic success', async () => { const el = await fixture(html``); el.success = true; await el.updateComplete; expect(el.shadowRoot!.querySelector('.nile-chip--success')).to.exist; }); it('64. dynamic disabled', async () => { const el = await fixture(html``); 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(html``); 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(html``); expect(el.shadowRoot!.mode).to.equal('open'); }); it('69. isConnected', async () => { const el = await fixture(html``); expect(el.isConnected).to.be.true; }); it('70. removal', async () => { const el = await fixture(html``); el.remove(); expect(el.isConnected).to.be.false; }); it('71. outerHTML', async () => { const el = await fixture(html``); expect(el.outerHTML).to.contain('nile-chip'); }); it('72. matches', async () => { const el = await fixture(html``); expect(el.matches('nile-chip.x')).to.be.true; }); it('73. closest', async () => { const el = await fixture(html``); expect(el.closest('nile-chip')).to.equal(el); }); it('74. cloneNode', async () => { const el = await fixture(html``); expect((el.cloneNode(true) as Element).tagName.toLowerCase()).to.equal('nile-chip'); }); it('75. getBoundingClientRect', async () => { const el = await fixture(html``); expect(el.getBoundingClientRect()).to.exist; }); it('76. dispatchEvent', async () => { const el = await fixture(html``); 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(html``); const r = await el.updateComplete; expect(r).to.not.be.undefined; }); it('78. requestUpdate', async () => { const el = await fixture(html``); el.requestUpdate(); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; }); it('79. render method', async () => { const el = await fixture(html``); expect(el.render).to.be.a('function'); }); it('80. shadowRoot host', async () => { const el = await fixture(html``); expect(el.shadowRoot!.host).to.equal(el); }); it('81. class attr', async () => { const el = await fixture(html``); expect(el.classList.contains('c')).to.be.true; }); it('82. id attr', async () => { const el = await fixture(html``); expect(el.id).to.equal('c1'); }); it('83. style attr', async () => { const el = await fixture(html``); expect(el.style.color).to.equal('red'); }); it('84. data attr', async () => { const el = await fixture(html``); expect(el.getAttribute('data-x')).to.equal('1'); }); it('85. hidden', async () => { const el = await fixture(html``); expect(el.hidden).to.be.true; }); it('86. dir', async () => { const el = await fixture(html``); expect(el.dir).to.equal('rtl'); }); it('87. nodeType', async () => { const el = await fixture(html``); expect(el.nodeType).to.equal(1); }); it('88. multiple instances', async () => { const c = await fixture(html`
`); expect(c.querySelectorAll('nile-chip').length).to.equal(2); }); it('89. parent-child', async () => { const c = await fixture(html`
`); expect(c.querySelector('nile-chip')!.parentElement).to.equal(c); }); it('90. localName', async () => { const el = await fixture(html``); expect(el.localName).to.equal('nile-chip'); }); it('91. namespaceURI', async () => { const el = await fixture(html``); expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml'); }); it('92. ownerDocument', async () => { const el = await fixture(html``); expect(el.ownerDocument).to.equal(document); }); it('93. filterFunction type', async () => { const el = await fixture(html``); expect(el.filterFunction).to.be.a('function'); }); it('94. renderItemFunction type', async () => { const el = await fixture(html``); expect(el.renderItemFunction).to.be.a('function'); }); it('95. default filterFunction', async () => { const el = await fixture(html``); expect(el.filterFunction('Apple', 'app')).to.be.true; }); it('96. default renderItemFunction', async () => { const el = await fixture(html``); expect(el.renderItemFunction('hello')).to.equal('hello'); }); it('97. noDropdownClose defaults false', async () => { const el = await fixture(html``); expect(el.noDropdownClose).to.be.false; }); it('98. openDropdownOnFocus defaults true', async () => { const el = await fixture(html``); expect(el.openDropdownOnFocus).to.be.true; }); it('99. aria-hidden on label', async () => { const el = await fixture(html``); const label = el.shadowRoot!.querySelector('label'); expect(label!.getAttribute('aria-hidden')).to.equal('true'); }); it('100. full integration', async () => { const el = await fixture(html``); 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); }); });