chore(tooltip): Added tests for gux-tooltip-title component

✅ Closes: COMUI-1408 chore(truncate): Added tests for checking if tooltip is visible or not ✅ Closes: COMUI-1408 chore(tooltip): Added visibility tests for gux-tooltip within a gux-tooltip-text tag ✅ Closes: COMUI-1408 chore(truncate): Removed unneeded page is defined expect statement in tests ✅ Closes: COMUI-1408 chore(truncate): Added more tests ✅ Closes: COMUI-1408 chore(truncate): Removed console log statement ✅ Closes: COMUI-1408 chore(truncate): Added truncation text check test ✅ Closes: COMUI-1408 chore(tooltip): Added test for truncation for tooltip-title component ✅ Closes: COMUI-1408 chore(tooltip): Added more tests for tooltip-title component ✅ Closes: COMUI-1408 chore(tooltip): Fixed some snapshot tests for tooltip-title ✅ Closes: COMUI-1408
MyPureCloud · Jun 4, 2024 · 2c256c2 · 2c256c2
1 parent 0e09d4f
commit 2c256c2
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 3 deletions.
diff --git a/...src/components/stable/gux-tooltip-title/tests/__snapshots__/gux-tooltip-title.e2e.ts.snap b/...src/components/stable/gux-tooltip-title/tests/__snapshots__/gux-tooltip-title.e2e.ts.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`gux-tooltip-title #render should render component as expected (1) 1`] = `"<gux-tooltip-title hydrated="" class="gux-overflow-hidden" aria-describedby="gux-tooltip-i"><!----><span class="gux-title-container"><span><slot aria-hidden="true" onslotchange="{this.onSlotChange.bind(this)}">Some long text to truncate and use a tooltip</slot></span></span><gux-tooltip aria-hidden="true" hidden="" id="gux-tooltip-i" role="tooltip" hydrated=""><div slot="content"></div></gux-tooltip></gux-tooltip-title>"`;
+
+exports[`gux-tooltip-title #render should render component as expected (2) 1`] = `"<gux-tooltip-title hydrated=""><!----><span class="gux-title-container"><div style="max-width: 200px;">Some short text</div></span></gux-tooltip-title>"`;
diff --git a/...s-spark-components/src/components/stable/gux-tooltip-title/tests/gux-tooltip-title.e2e.ts b/...s-spark-components/src/components/stable/gux-tooltip-title/tests/gux-tooltip-title.e2e.ts
@@ -0,0 +1,107 @@
+import { E2EPage, newE2EPage } from '@stencil/core/testing';
+import { a11yCheck } from '../../../../test/e2eTestUtils';
+
+async function newNonrandomE2EPage(
+  {
+    html
+  }: {
+    html: string;
+  },
+  lang: string = 'en'
+): Promise<E2EPage> {
+  const page = await newE2EPage();
+
+  await page.evaluateOnNewDocument(() => {
+    Math.random = () => 0.5;
+  });
+  await page.setContent(`<div lang=${lang}>${html}</div>`);
+  await page.waitForChanges();
+  await page.addScriptTag({
+    path: '../../node_modules/axe-core/axe.min.js'
+  });
+  await page.waitForChanges();
+
+  return page;
+}
+
+describe('gux-tooltip-title', () => {
+  describe('#render', () => {
+    [
+      '<div style="max-width: 40px"><gux-tooltip-title><span><slot aria-hidden="true" onSlotchange={this.onSlotChange.bind(this)}>Some long text to truncate and use a tooltip</slot></span></gux-tooltip-title></div>',
+      '<gux-tooltip-title><div style="max-width: 200px">Some short text</div></gux-tooltip-title>'
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-tooltip-title');
+
+        await a11yCheck(page);
+
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+
+  it('should render a tooltip if the component text width is greater than the parent container', async () => {
+    const page = await newNonrandomE2EPage({
+      html: `
+        <div style="max-width: 40px">
+            <gux-tooltip-title>
+                <span>
+                <slot aria-hidden="true" onSlotchange={this.onSlotChange.bind(this)}>Some long text to truncate and use a tooltip</slot>
+                </span>
+            </gux-tooltip-title>
+        </div>
+    `
+    });
+
+    const tooltipElement = await page.find('pierce/gux-tooltip');
+    expect(tooltipElement).toBeDefined();
+  });
+
+  it('should not render a tooltip if the component text width is less than the parent container', async () => {
+    const page = await newNonrandomE2EPage({
+      html: `
+        <gux-tooltip-title>
+            <span>Some short text</span>
+        </gux-tooltip-title>
+    `
+    });
+
+    const tooltipElement = await page.find('pierce/gux-tooltip');
+    expect(tooltipElement).toBeNull();
+  });
+
+  it('should truncate title text if tooltip is rendered', async () => {
+    const page = await newNonrandomE2EPage({
+      html: `
+        <div style="max-width: 40px">
+            <gux-tooltip-title>
+                <span>
+                <slot aria-hidden="true" onSlotchange={this.onSlotChange.bind(this)}>Some long text to truncate and use a tooltip</slot>
+                </span>
+            </gux-tooltip-title>
+        </div>
+    `
+    });
+
+    const element = await page.find('gux-tooltip-title');
+    expect(element).toHaveClass('gux-overflow-hidden');
+  });
+
+  it('Tooltip title text should match screenreader text if gux-icon is being used and no title text is set', async () => {
+    const page = await newNonrandomE2EPage({
+      html: `
+        <div style="max-width: 40px">
+            <gux-tooltip-title>
+              <span>
+                <gux-icon icon-name="unknown" decorative screenreader-text="test screenreader text"></gux-icon>
+              </span>
+            </gux-tooltip-title>
+        </div>
+    `
+    });
+
+    const tooltipElement = await page.find('gux-tooltip');
+    expect(tooltipElement.innerText).toBe('test screenreader text');
+  });
+});
diff --git a/packages/genesys-spark-components/src/components/stable/gux-truncate/gux-truncate.scss b/packages/genesys-spark-components/src/components/stable/gux-truncate/gux-truncate.scss
@@ -35,6 +35,9 @@ gux-tooltip {
 
 .gux-truncate-slot-container {
   display: block;
-  overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.gux-overflow-hidden {
+  overflow: hidden;
+}
diff --git a/packages/genesys-spark-components/src/components/stable/gux-truncate/gux-truncate.tsx b/packages/genesys-spark-components/src/components/stable/gux-truncate/gux-truncate.tsx
@@ -86,7 +86,10 @@ export class GuxTruncate {
         }}
       >
         <span
-          class="gux-truncate-slot-container"
+          class={{
+            'gux-overflow-hidden': this.needsTruncation(),
+            'gux-truncate-slot-container': true
+          }}
           style={{ webkitLineClamp: this.maxLines?.toString() }}
         >
           <slot />

diff --git a/...ges/genesys-spark-components/src/components/stable/gux-truncate/tests/gux-truncate.e2e.ts b/...ges/genesys-spark-components/src/components/stable/gux-truncate/tests/gux-truncate.e2e.ts
@@ -1,5 +1,5 @@
 import { E2EPage, newE2EPage } from '@stencil/core/testing';
-import { a11yCheck } from '../../../../test/e2eTestUtils';
+import { a11yCheck, newSparkE2EPage } from '../../../../test/e2eTestUtils';
 
 async function newNonrandomE2EPage(
   {
@@ -42,4 +42,60 @@ describe('gux-truncate', () => {
       });
     });
   });
+
+  it('should truncate text if the component text width is greater than the parent container', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <gux-truncate style="width: 40px">
+        <div>Div <span>with a span</span> inside</div>
+      </gux-truncate>
+    `
+    });
+
+    const element = await page.find('pierce/.gux-truncate-slot-container');
+    expect(element).toHaveClass('gux-overflow-hidden');
+  });
+
+  it('should not truncate text if the component text width is less than the parent container', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <gux-truncate style="width: 400px">
+        <div>Div <span>with a span</span> inside</div>
+      </gux-truncate>
+    `
+    });
+
+    const element = await page.find('pierce/.gux-truncate-slot-container');
+    expect(element.classList.contains('gux-overflow-hidden')).toBe(false);
+  });
+
+  it('should truncate text after 3 lines of wrapped text', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <gux-truncate max-lines="3">
+        <div>This is a long text that should be truncated after three lines of wrapped text</div>
+      </gux-truncate>
+    `
+    });
+
+    const truncateMultiContainer = await page.find(
+      'pierce/.gux-truncate-multi-line'
+    );
+    expect(truncateMultiContainer).toBeDefined();
+  });
+
+  it('should not truncate wrapped text if max-lines attribute is not defined on the gux-truncate tag', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <gux-truncate>
+        <div>This is a long text that should not be truncated</div>
+      </gux-truncate>
+    `
+    });
+
+    const truncateContainer = await page.find(
+      'pierce/.gux-truncate-multi-line'
+    );
+    expect(truncateContainer).toBeNull();
+  });
 });