@aquera/nile-elements 0.1.12 → 0.1.13

package/dist/src/nile-form-help-text/nile-form-help-text.test.js

@@ -1,67 +1,88 @@
-import { fixture, expect, html } from '@open-wc/testing';
+import { fixture, expect, html, elementUpdated } from '@open-wc/testing';
 import './nile-form-help-text';
+import { NileFormHelpText } from './nile-form-help-text';
 const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
 describe('NileFormHelpText', () => {
     it('should render with default properties', async () => {
-        const el = await fixture(html `<nile-form-help-text>This is a very short text</nile-form-help-text>`);
-        // Check if the displayed text is empty initially (no content in slot)
-        const textContent = el.shadowRoot.querySelector('div>span:first-child')?.textContent?.trim();
-        expect(textContent).to.equal('This is a very short text');
+        const el = await fixture(html `<nile-form-help-text>This is a short text</nile-form-help-text>`);
+        expect(el).to.be.instanceOf(NileFormHelpText);
+        expect(el.isExpanded).to.be.false;
+        // Check if text content matches
+        const textContent = el?.textContent?.trim();
+        expect(textContent).to.equal('This is a short text');
     });
-    it('should truncate the text if it exceeds textLimit and show "View More" button', async () => {
-        const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
-        const el = await fixture(html `<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
-        // Check if the displayed text is truncated
-        const textContent = el.shadowRoot.querySelector('div>span:first-child')?.textContent?.trim();
-        expect(textContent?.endsWith('...')).to.be.true;
-        // Check if the "View More" button is visible
-        const moreButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
+    it('should not show "View More" button if the text fits within the container', async () => {
+        const el = await fixture(html `<nile-form-help-text>This is a short text</nile-form-help-text>`);
+        await elementUpdated(el);
+        const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
+        expect(moreButton).to.be.null;
+        expect(el.showButton).to.be.false;
+    });
+    it('should show "View More" button if the text overflows the container', async () => {
+        const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
+        const el = await fixture(html `<nile-form-help-text>${longText}</nile-form-help-text>`);
+        // Simulate overflow
+        const textContainer = el.shadowRoot?.querySelector('.help__text__full');
+        Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+        Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+        el.decideToToggleShowButton();
+        await elementUpdated(el);
+        const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
         expect(moreButton).to.exist;
-        expect(moreButton?.textContent).to.include('View More');
+        expect(el.showButton).to.be.true;
     });
     it('should expand to show full text when "View More" is clicked', async () => {
-        const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
-        const el = await fixture(html `<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
-        // Simulate clicking the "View More" button
-        const moreButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
+        const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
+        const el = await fixture(html `<nile-form-help-text>${longText}</nile-form-help-text>`);
+        // Simulate overflow
+        const textContainer = el.shadowRoot?.querySelector('.help__text__full');
+        Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+        Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+        el.decideToToggleShowButton();
+        await elementUpdated(el);
+        // Click "View More"
+        const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
         moreButton?.click();
-        await el.updateComplete;
-        // Verify that the full text is displayed
-        const textContent = el.shadowRoot.querySelector('div>span:first-child')?.textContent?.trim();
-        expect(textContent).to.equal(longText);
-        // Check if the "View Less" button is now visible
-        const lessButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
-        expect(lessButton).to.exist;
-        expect(lessButton?.textContent).to.include('View Less');
+        await elementUpdated(el);
+        expect(el.isExpanded).to.be.true;
+        expect(textContainer).to.have.class('help__text__full--expanded');
+        expect(moreButton?.textContent).to.include('View Less');
     });
     it('should collapse back to truncated text when "View Less" is clicked', async () => {
-        const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
-        const el = await fixture(html `<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
-        // Expand the text
-        const moreButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
+        const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
+        const el = await fixture(html `<nile-form-help-text>${longText}</nile-form-help-text>`);
+        // Simulate overflow
+        const textContainer = el.shadowRoot?.querySelector('.help__text__full');
+        Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+        Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+        el.decideToToggleShowButton();
+        await elementUpdated(el);
+        // Expand and then collapse
+        const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
         moreButton?.click();
-        await el.updateComplete;
-        // Collapse the text by clicking "View Less"
-        const lessButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
-        lessButton?.click();
-        await el.updateComplete;
-        // Verify that the text is truncated again
-        const textContent = el.shadowRoot.querySelector('div>span:first-child')?.textContent?.trim();
-        expect(textContent?.endsWith('...')).to.be.true;
-        // Check if the "View More" button is visible again
-        const viewMoreButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
-        expect(viewMoreButton).to.exist;
-        expect(viewMoreButton?.textContent).to.include('View More');
-    });
-    it('should not show "View More" button when text is within limit', async () => {
-        const shortText = "Short help text.";
-        const el = await fixture(html `<nile-form-help-text><span>${shortText}</span></nile-form-help-text>`);
-        // Check if the displayed text is not truncated
-        const textContent = el.shadowRoot.querySelector('div>span:first-child')?.textContent?.trim();
-        expect(textContent).to.equal(shortText);
-        // Verify that "View More" button is not rendered
-        const moreButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
-        expect(moreButton).to.be.null;
+        await elementUpdated(el);
+        moreButton?.click(); // Collapse
+        await elementUpdated(el);
+        expect(el.isExpanded).to.be.false;
+        expect(textContainer).not.to.have.class('help__text__full--expanded');
+        expect(moreButton?.textContent).to.include('View More');
     });
+    // it('should dynamically adjust "View More" visibility on text change', async () => {
+    //   const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>Initial text</nile-form-help-text>`);
+    //   await elementUpdated(el);
+    //   const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;
+    //   Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+    //   Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+    //   el.decideToToggleShowButton();
+    //   await elementUpdated(el);
+    //   expect(el.showButton).to.be.true;
+    //   // Change slot content to short text
+    //   textContainer.textContent = 'Short text';
+    //   Object.defineProperty(textContainer, 'scrollWidth', { value: 100 });
+    //   Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+    //   el.decideToToggleShowButton();
+    //   await elementUpdated(el);
+    //   expect(el.showButton).to.be.false;
+    // });
 });
 //# sourceMappingURL=nile-form-help-text.test.js.map

package/dist/src/nile-form-help-text/nile-form-help-text.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-help-text.test.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, html } from '@open-wc/testing';\nimport './nile-form-help-text';\nimport { NileFormHelpText } from './nile-form-help-text';\n\nconst wait = (ms: number = 50000) => new Promise(resolve => setTimeout(resolve, ms))\n\ndescribe('NileFormHelpText', () => {\n  it('should render with default properties', async () => {\n    const el: NileFormHelpText = await fixture(html`<nile-form-help-text>This is a very short text</nile-form-help-text>`);\n    \n    // Check if the displayed text is empty initially (no content in slot)\n    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()\n    expect(textContent).to.equal('This is a very short text');\n  });\n\n  it('should truncate the text if it exceeds textLimit and show \"View More\" button', async () => {\n    const longText = \"This is a very long help text that should be truncated and should show a 'View More' button.\";\n    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);\n    \n    // Check if the displayed text is truncated\n    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()\n    expect(textContent?.endsWith('...')).to.be.true;\n    \n    // Check if the \"View More\" button is visible\n    const moreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');\n    expect(moreButton).to.exist;\n    expect(moreButton?.textContent).to.include('View More');\n  });\n\n  it('should expand to show full text when \"View More\" is clicked', async () => {\n    const longText = \"This is a very long help text that should be truncated and should show a 'View More' button.\";\n    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);\n    \n    // Simulate clicking the \"View More\" button\n    const moreButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');\n    moreButton?.click();\n    await el.updateComplete;\n\n    // Verify that the full text is displayed\n    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()\n    expect(textContent).to.equal(longText);\n    \n    // Check if the \"View Less\" button is now visible\n    const lessButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');\n    expect(lessButton).to.exist;\n    expect(lessButton?.textContent).to.include('View Less');\n  });\n\n  it('should collapse back to truncated text when \"View Less\" is clicked', async () => {\n    const longText = \"This is a very long help text that should be truncated and should show a 'View More' button.\";\n    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);\n    \n    // Expand the text\n    const moreButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');\n    moreButton?.click();\n    await el.updateComplete;\n\n    // Collapse the text by clicking \"View Less\"\n    const lessButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');\n    lessButton?.click();\n    await el.updateComplete;\n\n    // Verify that the text is truncated again\n    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()\n    expect(textContent?.endsWith('...')).to.be.true;\n    \n    // Check if the \"View More\" button is visible again\n    const viewMoreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');\n    expect(viewMoreButton).to.exist;\n    expect(viewMoreButton?.textContent).to.include('View More');\n  });\n\n  it('should not show \"View More\" button when text is within limit', async () => {\n    const shortText = \"Short help text.\";\n    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${shortText}</span></nile-form-help-text>`);\n    \n    // Check if the displayed text is not truncated\n    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()\n    expect(textContent).to.equal(shortText);\n\n    // Verify that \"View More\" button is not rendered\n    const moreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');\n    expect(moreButton).to.be.null;\n  });\n\n});\n"]}
+{"version":3,"file":"nile-form-help-text.test.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, html, elementUpdated } from '@open-wc/testing';\nimport './nile-form-help-text';\nimport { NileFormHelpText } from './nile-form-help-text';\n\nconst wait = (ms: number = 50000) => new Promise(resolve => setTimeout(resolve, ms))\n\n\ndescribe('NileFormHelpText', () => {\n  it('should render with default properties', async () => {\n    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>This is a short text</nile-form-help-text>`);\n    expect(el).to.be.instanceOf(NileFormHelpText);\n    expect(el.isExpanded).to.be.false;\n\n    // Check if text content matches\n    const textContent = el?.textContent?.trim();\n    expect(textContent).to.equal('This is a short text');\n  });\n\n  it('should not show \"View More\" button if the text fits within the container', async () => {\n    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>This is a short text</nile-form-help-text>`);\n    await elementUpdated(el);\n\n    const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');\n    expect(moreButton).to.be.null;\n    expect(el.showButton).to.be.false;\n  });\n\n  it('should show \"View More\" button if the text overflows the container', async () => {\n    const longText = 'This is a very long help text that exceeds the container width and should show a \"View More\" button.';\n    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);\n    \n    // Simulate overflow\n    const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;\n    Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });\n    Object.defineProperty(textContainer, 'clientWidth', { value: 200 });\n    el.decideToToggleShowButton();\n    await elementUpdated(el);\n\n    const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');\n    expect(moreButton).to.exist;\n    expect(el.showButton).to.be.true;\n  });\n\n  it('should expand to show full text when \"View More\" is clicked', async () => {\n    const longText = 'This is a very long help text that exceeds the container width and should show a \"View More\" button.';\n    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);\n\n    // Simulate overflow\n    const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;\n    Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });\n    Object.defineProperty(textContainer, 'clientWidth', { value: 200 });\n    el.decideToToggleShowButton();\n    await elementUpdated(el);\n\n    // Click \"View More\"\n    const moreButton = el.shadowRoot?.querySelector<HTMLElement>('.nile-form-help-text__more-button');\n    moreButton?.click();\n    await elementUpdated(el);\n\n    expect(el.isExpanded).to.be.true;\n    expect(textContainer).to.have.class('help__text__full--expanded');\n    expect(moreButton?.textContent).to.include('View Less');\n  });\n\n  it('should collapse back to truncated text when \"View Less\" is clicked', async () => {\n    const longText = 'This is a very long help text that exceeds the container width and should show a \"View More\" button.';\n    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);\n\n    // Simulate overflow\n    const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;\n    Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });\n    Object.defineProperty(textContainer, 'clientWidth', { value: 200 });\n    el.decideToToggleShowButton();\n    await elementUpdated(el);\n\n    // Expand and then collapse\n    const moreButton = el.shadowRoot?.querySelector<HTMLElement>('.nile-form-help-text__more-button');\n    moreButton?.click();\n    await elementUpdated(el);\n\n    moreButton?.click(); // Collapse\n    await elementUpdated(el);\n\n    expect(el.isExpanded).to.be.false;\n    expect(textContainer).not.to.have.class('help__text__full--expanded');\n    expect(moreButton?.textContent).to.include('View More');\n  });\n\n  // it('should dynamically adjust \"View More\" visibility on text change', async () => {\n  //   const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>Initial text</nile-form-help-text>`);\n  //   await elementUpdated(el);\n\n  //   const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;\n  //   Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });\n  //   Object.defineProperty(textContainer, 'clientWidth', { value: 200 });\n  //   el.decideToToggleShowButton();\n  //   await elementUpdated(el);\n\n  //   expect(el.showButton).to.be.true;\n\n  //   // Change slot content to short text\n  //   textContainer.textContent = 'Short text';\n  //   Object.defineProperty(textContainer, 'scrollWidth', { value: 100 });\n  //   Object.defineProperty(textContainer, 'clientWidth', { value: 200 });\n  //   el.decideToToggleShowButton();\n  //   await elementUpdated(el);\n\n  //   expect(el.showButton).to.be.false;\n  // });\n});\n"]}