@aquera/nile-elements 0.0.80 → 0.0.82

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

@@ -0,0 +1,106 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import sinon from 'sinon';
+import './nile-drawer'; // Adjust the import path as necessary
+import { NileDrawer } from './nile-drawer';
+describe('Nile-drawer', () => {
+  it('should be visible with the open attribute', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer open>I am content inside nile drawer</nile-drawer>
+    `);
+    const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
+    expect(panel.ariaHidden).to.equal('false');
+  });
+
+  it('should not be visible without the open attribute', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer>I am content inside nile drawer</nile-drawer>
+    `);
+    const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
+    expect(panel.ariaHidden).to.equal('true');
+  });
+
+  it('should emit nile-show and nile-after-show when calling show()', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer>I am Nile Drawer Content.</nile-drawer>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('nile-show', showHandler);
+    el.addEventListener('nile-after-show', afterShowHandler);
+    el.show();
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should emit nile-hide and nile-after-hide when calling hide()', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer open>I am nile drawer content</nile-drawer>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('nile-hide', hideHandler);
+    el.addEventListener('nile-after-hide', afterHideHandler);
+    el.hide();
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.true;
+  });
+
+  it('should emit nile-show and nile-after-show when setting open = true', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</nile-drawer
+      >
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('nile-show', showHandler);
+    el.addEventListener('nile-after-show', afterShowHandler);
+    el.open = true;
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should emit nile-hide and nile-after-hide when setting open = false', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer open
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</nile-drawer
+      >
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('nile-hide', hideHandler);
+    el.addEventListener('nile-after-hide', afterHideHandler);
+    el.open = false;
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.true;
+  });
+});

package/src/nile-empty-state/nile-empty-state.test.ts

@@ -0,0 +1,69 @@
+import { fixture,html,expect } from "@open-wc/testing";
+import './nile-empty-state';
+import { NileEmptyState } from "./nile-empty-state";
+
+describe('NileEmptyState',()=>{
+    it('renders correctly with default properties',async ()=>{
+        const el=await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`)
+        expect(el.size).to.equal('md');
+        expect(el.variant).to.equal('tonal');
+        expect(el.icon).to.equal('error');
+        expect(el.grayscale).to.be.false;
+        expect(el.text).to.equal('Empty State');
+        expect(el.subText).to.equal('No Data');
+    })
+
+    it('should reflect properties to attributes', async () => {
+        const iconName="action"
+        const el = await fixture<NileEmptyState>(html`
+          <nile-empty-state size="sm" variant="flat" icon=${iconName} grayscale text="Test state text" sub-text="Test sub text"></nile-empty-state>
+        `);
+        expect(el.getAttribute('size')).to.equal('sm');
+        expect(el.getAttribute('variant')).to.equal('flat');
+        expect(el.getAttribute('icon')).to.equal(iconName);
+        expect(el.hasAttribute('grayscale')).to.be.true;
+        expect(el.getAttribute('text')).to.equal('Test state text');
+        expect(el.getAttribute('sub-text')).to.equal('Test sub text');
+      });
+
+      it('should render different sizes correctly', async () => {
+        const sizes:Array<'sm' | 'md' | 'lg' >= ['sm', 'md', 'lg'];
+        for (const size of sizes) {
+          const el = await fixture<NileEmptyState>(html`<nile-empty-state size="${size}"></nile-empty-state>`);
+          const container = el.shadowRoot!.querySelector('.empty-state')!;
+          expect(container.classList.contains(`empty-state--${size}`)).to.be.true;
+        }
+      });
+
+      it('should render different variants correctly', async () => {
+        const variants :Array<'flat' | 'content' | 'tonal' >= ['flat', 'content', 'tonal'];
+        for (const variant of variants) {
+          const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="${variant}"></nile-empty-state>`);
+          const container = el.shadowRoot!.querySelector(`.empty-state__body--${variant}`)!;
+          expect(container).to.exist;
+        }
+      });
+
+      it('should render text properties correctly', async () => {
+        const sampleText='Custom Text'
+        const sampleSubText="Custom SubText"
+        const el = await fixture<NileEmptyState>(html`
+          <nile-empty-state text=${sampleText} sub-text=${sampleSubText}></nile-empty-state>
+        `);
+        const textEl = el.shadowRoot!.querySelector('.empty-state__text')!;
+        const subTextEl = el.shadowRoot!.querySelector('.empty-state__subtext')!;
+        expect(textEl.textContent).to.equal(sampleText);
+        expect(subTextEl.textContent).to.equal(sampleSubText);
+      });
+
+      it('should render slot content', async () => {
+        const el = await fixture<NileEmptyState>(html`
+          <nile-empty-state>
+            <div class="slot-content">Slot Content</div>
+          </nile-empty-state>
+        `);
+        const slotContent = el.querySelector('.slot-content')!;
+        expect(slotContent).to.exist;
+        expect(slotContent.textContent).to.equal('Slot Content');
+      });
+})

package/src/nile-error-message/nile-error-message.test.ts

@@ -0,0 +1,69 @@
+import { html, fixture, expect, oneEvent } from '@open-wc/testing';
+import './nile-error-message';
+import { NileErrorMessage } from './nile-error-message';
+describe('NileErrorMessage', () => {
+  it('should render the error message', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorMessage="An error occurred"></nile-error-message>`);
+    const errorMessage = el.shadowRoot!.querySelector('.nile-error-message__error');
+    expect(errorMessage!.textContent).to.equal('An error occurred');
+  });
+
+  it('should truncate the error response if it is too long', async () => {
+    const longErrorResponse = 'a'.repeat(150);
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="${longErrorResponse}"></nile-error-message>`);
+    const truncatedResponse = el.getTruncatedResponse();
+    expect(truncatedResponse).to.equal(`${longErrorResponse.substring(0, 100)}...`);
+  });
+
+  it('should not truncate the error response if it is within the maximum length', async () => {
+    const shortErrorResponse = 'Short error message';
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="${shortErrorResponse}"></nile-error-message>`);
+    const truncatedResponse = el.getTruncatedResponse();
+    expect(truncatedResponse).to.equal(shortErrorResponse);
+  });
+
+  it('should toggle the expanded state when the button is clicked', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    const button :HTMLButtonElement = el.shadowRoot!.querySelector('.nile-error-message__more-button') ??{} as HTMLButtonElement;
+    button.click();
+    expect(el.isExpanded).to.be.true;
+    button.click();
+    expect(el.isExpanded).to.be.false;
+  });
+
+  it('should display the "View More" button if there is extended error information', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    const button = el.shadowRoot!.querySelector('.nile-error-message__more-button');
+    expect(button).to.exist;
+  });
+
+  it('should not display the "View More" button if there is no extended error information', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message"></nile-error-message>`);
+    const button = el.shadowRoot!.querySelector('.nile-error-message__more-button');
+    expect(button).to.not.exist;
+  });
+
+  it('should show the extended error information when expanded', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    el.isExpanded = true;
+    await el.updateComplete;
+    const expandedResponse = el.shadowRoot!.querySelector('.nile-error-message__response-expanded');
+    expect(expandedResponse?.textContent).to.include('Detailed error information');
+  });
+
+  it('should hide the extended error information when collapsed', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    el.isExpanded = false;
+    await el.updateComplete;
+    const expandedResponse = el.shadowRoot!.querySelector('.nile-error-message__response-expanded');
+    expect(expandedResponse).to.have.class('collapsed');
+  });
+
+  it('should render icon and error message parts', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorMessage="An error occurred"></nile-error-message>`);
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon).to.exist;
+    const errorMessage = el.shadowRoot!.querySelector('.nile-error-message__error');
+    expect(errorMessage).to.exist;
+  });
+});

package/src/nile-form-group/nile-form-group.test.ts

@@ -0,0 +1,63 @@
+import { fixture, html, expect } from '@open-wc/testing';
+import './nile-form-group'; // Make sure to import the component to be tested
+import NileFormGroup from './nile-form-group';
+
+describe('NileFormGroup', () => {
+  it('should have default properties', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group></nile-form-group>`);
+    expect(el.title).to.equal('');
+    expect(el.subtitle).to.equal('');
+  });
+
+  it('should render title when set', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title"></nile-form-group>`);
+    const titleSlot = el.shadowRoot!.querySelector('slot[name="title"]');
+    expect(titleSlot).to.exist;
+    expect(titleSlot?.textContent?.trim()).to.equal('Test Title');
+  });
+
+  it('should render subtitle when set', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title" subtitle="Test Subtitle"></nile-form-group>`);
+    const subtitleSlot = el.shadowRoot!.querySelector('slot[name="subtitle"]');
+    expect(subtitleSlot).to.exist;
+    expect(subtitleSlot?.textContent?.trim()).to.equal('Test Subtitle');
+  });
+
+  it('should not render title and subtitle if not set', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group></nile-form-group>`);
+    const titleSlot = el.shadowRoot!.querySelector('slot[name="title"]');
+    const subtitleSlot = el.shadowRoot!.querySelector('slot[name="subtitle"]');
+    expect(titleSlot).to.not.exist;
+    expect(subtitleSlot).to.not.exist;
+  });
+
+  it('should render content inside the form body slot', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group><p>Form Content</p></nile-form-group>`);
+    const bodySlot = el.shadowRoot!.querySelector<HTMLSlotElement>('.form__body slot');
+    const assignedNodes = bodySlot?.assignedNodes() ?? [] as any;
+    expect(assignedNodes.length).to.equal(1);
+    expect(assignedNodes[0].textContent.trim()).to.equal('Form Content');
+  });
+
+  it('should reflect title and subtitle attributes', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title" subtitle="Test Subtitle"></nile-form-group>`);
+    expect(el.getAttribute('title')).to.equal('Test Title');
+    expect(el.getAttribute('subtitle')).to.equal('Test Subtitle');
+  });
+
+  it('should update the title dynamically', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Initial Title"></nile-form-group>`);
+    el.title = 'Updated Title';
+    await el.updateComplete;
+    const titleSlot = el.shadowRoot!.querySelector('slot[name="title"]')?? {} as any;
+    expect(titleSlot.textContent.trim()).to.equal('Updated Title');
+  });
+
+  it('should update the subtitle dynamically', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title" subtitle="Initial Subtitle"></nile-form-group>`);
+    el.subtitle = 'Updated Subtitle';
+    await el.updateComplete;
+    const subtitleSlot = el.shadowRoot!.querySelector('slot[name="subtitle"]') ?? {} as any;
+    expect(subtitleSlot.textContent.trim()).to.equal('Updated Subtitle');
+  });
+});

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

@@ -0,0 +1,45 @@
+import { fixture, html, expect, oneEvent } from '@open-wc/testing';
+import './nile-hero';
+import { NileHero } from './nile-hero';
+
+describe('NileHero', () => {
+  it('renders correctly with default properties', async () => {
+    const el = await fixture<NileHero>(html`
+		<nile-hero icon="error" hero-text="Test Hero">
+            <nile-page-header
+                heading="I am heading"
+                sub-heading="I am subheading"
+            ></nile-page-header>
+        </nile-hero>`);
+    expect(el.getAttribute('icon')).to.equal('error');
+    expect(el.hasAttribute('collapse')).to.be.false;
+    expect(el.getAttribute('img-src')).to.equal('');
+    expect(el.getAttribute('hero-text')).to.equal('Test Hero');
+    expect(el).shadowDom.to.equalSnapshot();
+  });
+
+  it('checks for collapsed state', async () => {
+    const el = await fixture<NileHero>(html`<nile-hero></nile-hero>`);
+    el.collapse = true;
+    await el.updateComplete;
+    expect(el.collapse).to.be.true;
+    el.collapse=true;
+    await el.updateComplete;
+    const heroContainer=el.shadowRoot?.querySelector('.hero__container');
+    expect(heroContainer?.classList.contains('hero__container--collapsed')).to.be.true;
+  });
+
+  it('should render slot content', async () => {
+    const el = await fixture<NileHero>(html`
+      <nile-hero>
+            <nile-page-header
+                heading="I am heading"
+                sub-heading="I am subheading"
+            ></nile-page-header>
+      </nile-hero>
+    `);
+    await el.updateComplete;
+    const NilePageHeader = el.querySelector('nile-page-header')!;
+    expect(NilePageHeader).to.exist;
+  });
+})

package/src/nile-icon/icons/svg/alert.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgOFYxMk0xMiAxNkgxMi4wMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/file-check-02.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMTIuNVY2LjhDMjAgNS4xMTk4NCAyMCA0LjI3OTc2IDE5LjY3MyAzLjYzODAzQzE5LjM4NTQgMy4wNzM1NCAxOC45MjY1IDIuNjE0NiAxOC4zNjIgMi4zMjY5OEMxNy43MjAyIDIgMTYuODgwMiAyIDE1LjIgMkg4LjhDNy4xMTk4NCAyIDYuMjc5NzYgMiA1LjYzODAzIDIuMzI2OThDNS4wNzM1NCAyLjYxNDYgNC42MTQ2IDMuMDczNTQgNC4zMjY5OCAzLjYzODAzQzQgNC4yNzk3NiA0IDUuMTE5ODQgNCA2LjhWMTcuMkM0IDE4Ljg4MDIgNCAxOS43MjAyIDQuMzI2OTggMjAuMzYyQzQuNjE0NiAyMC45MjY1IDUuMDczNTQgMjEuMzg1NCA1LjYzODAzIDIxLjY3M0M2LjI3OTc2IDIyIDcuMTE5ODQgMjIgOC44IDIySDEyTTE0IDExSDhNMTAgMTVIOE0xNiA3SDhNMTQuNSAxOUwxNi41IDIxTDIxIDE2LjUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/index.ts

@@ -7,6 +7,7 @@ export { default as agent } from './agent';
 export { default as agents } from './agents';
 export { default as aggregation } from './aggregation';
 export { default as alertcircle } from './alert-circle';
+export { default as alert } from './alert';
 export { default as allapplication } from './allapplication';
 export { default as allsearch } from './allsearch';
 export { default as anomaly } from './anomaly';
@@ -171,6 +172,7 @@ export { default as eye } from './eye';
 export { default as eyeclosed } from './eyeclosed';
 export { default as featuredicon } from './featured-icon';
 export { default as file06 } from './file-06';
+export { default as filecheck02 } from './file-check-02';
 export { default as fileshield01 } from './file-shield-01';
 export { default as fileshield02 } from './file-shield-02';
 export { default as filetypeicon } from './file-type-icon';
@@ -300,6 +302,7 @@ export { default as maximize } from './maximize';
 export { default as menu } from './menu';
 export { default as messagenotificationsquare } from './message-notification-square';
 export { default as minus } from './minus';
+export { default as monitor01 } from './monitor-01';
 export { default as moveleft } from './moveleft';
 export { default as moveright } from './moveright';
 export { default as multipleuser } from './multiple-user';

package/src/nile-icon/icons/svg/monitor-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAyMUgxNk0xMiAxN1YyMU02LjggMTdIMTcuMkMxOC44ODAyIDE3IDE5LjcyMDIgMTcgMjAuMzYyIDE2LjY3M0MyMC45MjY1IDE2LjM4NTQgMjEuMzg1NCAxNS45MjY1IDIxLjY3MyAxNS4zNjJDMjIgMTQuNzIwMiAyMiAxMy44ODAyIDIyIDEyLjJWNy44QzIyIDYuMTE5ODQgMjIgNS4yNzk3NiAyMS42NzMgNC42MzgwM0MyMS4zODU0IDQuMDczNTQgMjAuOTI2NSAzLjYxNDYgMjAuMzYyIDMuMzI2OThDMTkuNzIwMiAzIDE4Ljg4MDIgMyAxNy4yIDNINi44QzUuMTE5ODQgMyA0LjI3OTc2IDMgMy42MzgwMyAzLjMyNjk4QzMuMDczNTQgMy42MTQ2IDIuNjE0NiA0LjA3MzU0IDIuMzI2OTggNC42MzgwM0MyIDUuMjc5NzYgMiA2LjExOTg0IDIgNy44VjEyLjJDMiAxMy44ODAyIDIgMTQuNzIwMiAyLjMyNjk4IDE1LjM2MkMyLjYxNDYgMTUuOTI2NSAzLjA3MzU0IDE2LjM4NTQgMy42MzgwMyAxNi42NzNDNC4yNzk3NiAxNyA1LjExOTg0IDE3IDYuOCAxN1oiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

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

@@ -0,0 +1,53 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import './index';
+import { NileIcon } from './index';
+import Sinon from 'sinon';
+
+describe('NileIcon', () => {
+  it('should render the icon with the correct name', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon name="info"></nile-icon>`);
+    expect(el.name).to.equal('info');
+    expect(el).to.equalSnapshot()
+  });
+
+  it('should render the icon with the correct size', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon size="24"></nile-icon>`);
+    expect(el.size).to.equal('24');
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.getAttribute('height')).to.equal('24');
+    expect(svg?.getAttribute('width')).to.equal('24');
+  });
+
+  it('should apply the correct color to the icon', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon color="red"></nile-icon>`);
+    await el.updateComplete
+    expect(el.color).to.equal('red');
+    expect(el.style.getPropertyValue('--nile-svg-fill')).to.equal('red');
+  });
+
+  it('should set the correct viewBox based on frame property', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon frame="32"></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.getAttribute('viewBox')).to.equal('0 0 32 32');
+  });
+
+  it('should set aria attributes based on description', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon description="Test icon"></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    await el.updateComplete
+    expect(svg?.getAttribute('aria-label')).to.equal('Test icon');
+    expect(svg?.getAttribute('aria-hidden')).to.equal('false');
+  });
+
+  it('should apply stroke class based on method property', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon method="stroke"></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.classList.contains('stroke')).to.be.true;
+  });
+
+  it('should apply push class when push property is true', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon push></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.classList.contains('nds-icon--push')).to.be.true;
+  });
+});

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

@@ -0,0 +1,160 @@
+import { fixture, html, expect, oneEvent, nextFrame, aTimeout } from '@open-wc/testing';
+import './nile-input';
+import { NileInput } from './nile-input';
+import Sinon from 'sinon';
+
+describe('nile-input', () => {
+  it('renders correctly', async () => {
+    const el = await fixture<NileInput>(html`<nile-input label="Test Label"></nile-input>`);
+    expect(el).shadowDom.to.equalSnapshot();
+  });
+
+  it('updates the value on input', async () => {
+    const el :any = await fixture<NileInput>(html`<nile-input></nile-input>`);
+    const input = el.shadowRoot?.querySelector('input') ?? {} as any;
+    input.value = 'New Value';
+    input.dispatchEvent(new Event('input'));
+    expect(el.value).to.equal('New Value');
+  });
+  
+
+  it('shows error message when invalid', async () => {
+    const el = await fixture<NileInput>(html`<nile-input required error-message='errr'></nile-input>`);
+    const errorMessage = el.shadowRoot?.querySelector('nile-form-error-message');
+    expect(errorMessage).to.exist;
+  });
+
+
+  it('should renders all slots correctly and verify its content', async () => {
+    const el = await fixture<NileInput>(html`
+      <nile-input>
+        <span slot="label">Slot Label</span>
+        <span slot="label-suffix">Slot Label suffix</span>
+        <span slot="prefix">prefix slot</span>
+        <span slot="suffix">suffix slot</span>
+        <span slot="clear-icon">
+          <nile-icon name="error" library="system"></nile-icon>
+        </span>
+        <span slot="show-password-icon">
+          <nile-icon
+            name="eye"
+            library="system"
+          ></nile-icon>
+        </span>
+      </nile-input>
+    `);
+    const labelSlot = el.shadowRoot?.querySelector('slot[name="label"]') ?? {} as any;
+    const labelSuffixSlot = el.shadowRoot?.querySelector('slot[name="label-suffix"]') ?? {} as any;
+    const prefixSlot = el.shadowRoot?.querySelector('slot[name="prefix"]') ?? {} as any;
+    const suffixSlot = el.shadowRoot?.querySelector('slot[name="suffix"]') ?? {} as any;
+    const clearIconSlot = el.shadowRoot?.querySelector('slot[name="clear-icon"]') ?? {} as HTMLElement;
+    const showPasswordSlot = el.shadowRoot?.querySelector('slot[name="show-password-icon"]') ?? {} as HTMLElement;
+    expect(labelSlot.assignedNodes()[0].textContent).to.equal('Slot Label');
+    expect(labelSuffixSlot.assignedNodes()[0].textContent).to.equal('Slot Label suffix');
+    expect(prefixSlot.assignedNodes()[0].textContent).to.equal('prefix slot');
+    expect(suffixSlot.assignedNodes()[0].textContent).to.equal('suffix slot');
+    expect(clearIconSlot).to.exist;
+    expect(showPasswordSlot).to.exist;
+  });
+
+  it('handles password toggle', async () => {
+    const el = await fixture<NileInput>(html`<nile-input type="password" password-toggle></nile-input>`);
+    const button = el.shadowRoot?.querySelector('.input__password-toggle') ?? {} as any;
+    button.click();
+    await el.updateComplete;
+    expect(el.passwordVisible).to.be.true;
+    expect(el.shadowRoot!.querySelector('input')!.type).to.equal('text');
+  });
+
+  it('validates input against pattern', async () => {
+    const el = await fixture<NileInput>(html`<nile-input pattern="^[a-zA-Z]+$"></nile-input>`);
+    el.value = '123';
+    el.reportValidity();
+    await el.updateComplete;
+    expect(el.validationMessage).to.equal('Please match the format requested.');
+  });
+
+  it('should emit events on blur', async () => {
+    const el = await fixture<NileInput>(html`<nile-input></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    setTimeout(() => input.dispatchEvent(new Event('blur')));
+    const event = await oneEvent(el, 'nile-blur');
+    expect(event).to.exist;
+  });
+
+  it('should clear input when clear button is clicked', async () => {
+    const el = await fixture<NileInput>(html`<nile-input clearable value="test"></nile-input>`);
+    const button = el.shadowRoot!.querySelector('.input__clear') as HTMLElement;
+    button.click();
+    expect(el.value).to.equal('');
+  });
+
+  it('should mark non-printable characters on focus', async () => {
+    const el: NileInput = await fixture(html`<nile-input checkNonPrintableChar value="test日本語組版処理の要件"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.focus();
+    await el.updateComplete;
+    expect(el.hasPrintableCharacters).to.be.true;
+  });
+
+  it('should remove non-printable characters', async () => {
+    const el: NileInput = await fixture(html`<nile-input checkNonPrintableChar value="test日本語組版処理の要件"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.focus();
+    await el.updateComplete;
+    expect(el.hasPrintableCharacters).to.be.true;
+    const rem : HTMLElement=el.shadowRoot!.querySelector('.input__remove-non-printable')!;
+    rem.click()
+    await el.updateComplete;
+    expect(el.value).to.equal('test');
+  });
+
+  it('should toggle password visibility', async () => {
+    const el: NileInput = await fixture(html`<nile-input type="password" password-toggle></nile-input>`);
+    const button = el.shadowRoot!.querySelector('.input__password-toggle') as HTMLElement;
+    button.click();
+    expect(el.passwordVisible).to.be.true;
+  });
+
+  // it('should call the formControlController.submit() on Enter key', async () => {
+  //   const el: NileInput = await fixture(html`<nile-input></nile-input>`);
+  //   const input = el.shadowRoot!.querySelector('input')!;
+  //   const submitStub = Sinon.stub(el['formControlController'], 'submit');
+  //   const event = new KeyboardEvent('keydown', { key: 'Enter' });
+  //   input.dispatchEvent(event);
+  //   await el.updateComplete;
+  //   expect(submitStub).to.have.been.calledOnce;
+  // });
+
+  // complex regress scenarios
+  it('should debounce input events', async () => {
+    const el: NileInput = await fixture(html`<nile-input debounce="500"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    const changeEvent = new Event('input', { bubbles: true, composed: true });
+
+    input.value = 'a';
+    input.dispatchEvent(changeEvent);
+    input.value = 'ab';
+    input.dispatchEvent(changeEvent);
+
+    await aTimeout(100);
+    expect(el.value).to.equal('ab');
+    input.value = 'abc';
+    input.dispatchEvent(changeEvent);
+
+    await aTimeout(600);
+    expect(el.value).to.equal('abc');
+  });
+
+  it('should validate input against a regular expression pattern', async () => {
+    const el: NileInput = await fixture(html`<nile-input pattern="[A-Za-z]{3}"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.value = 'ab';
+    input.dispatchEvent(new Event('input'));
+    expect(el.validity.valid).to.be.false;
+
+    input.value = 'abc';
+    input.dispatchEvent(new Event('input'));
+    expect(el.validity.valid).to.be.true;
+  });
+})