chore(rich-text-editor): fix e2e test (#831)

MyPureCloud · Jan 13, 2025 · 3a19747 · 3a19747
1 parent e3edaca
commit 3a19747
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 35 deletions.
diff --git a/packages/genesys-spark-components/src/components/beta/gux-icon-tooltip/readme.md b/packages/genesys-spark-components/src/components/beta/gux-icon-tooltip/readme.md
diff --git a/...-text-editor-action-link/tests/__snapshots__/gux-rich-text-editor-action-link.e2e.ts.snap b/...-text-editor-action-link/tests/__snapshots__/gux-rich-text-editor-action-link.e2e.ts.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`gux-rich-text-editor-action-link #render should display component as expected (1) 1`] = `"<gux-rich-text-editor-action-link hydrated=""><template shadowrootmode="open"><gux-button-slot icon-only="" accent="ghost" aria-describedby="gux-tooltip-u8cxamafev" hydrated=""><button id="popover-target" type="button" aria-label="Link" aria-haspopup="true" aria-expanded="false"><gux-icon icon-name="fa/link-simple-regular" size="small" hydrated=""></gux-icon></button><gux-tooltip id="gux-tooltip-u8cxamafev" role="tooltip" hydrated=""><div slot="content">Link</div></gux-tooltip></gux-button-slot><gux-popover hydrated=""><div class="gux-popover-content-wrapper"><gux-form-field-text-like hydrated=""><input id="textToDisplay" slot="input" type="text"><label slot="label" for="textToDisplay">Text to display</label></gux-form-field-text-like><gux-form-field-text-like hydrated=""><input slot="input" type="text" id="gux-form-field-input-92s2uvdu4a"><label slot="label" for="gux-form-field-input-92s2uvdu4a">Link Address</label></gux-form-field-text-like><gux-cta-group hydrated=""><gux-button slot="primary" hydrated="">Insert</gux-button><gux-button slot="dismiss" hydrated="">Cancel</gux-button></gux-cta-group></div></gux-popover></template></gux-rich-text-editor-action-link>"`;
+exports[`gux-rich-text-editor-action-link #render should display component as expected (1) 1`] = `"<gux-rich-text-editor-action-link hydrated=""><template shadowrootmode="open"><gux-button-slot icon-only="" accent="ghost" aria-describedby="gux-tooltip-i" hydrated=""><button id="popover-target" type="button" aria-label="Link" aria-haspopup="true" aria-expanded="false"><gux-icon icon-name="fa/link-simple-regular" size="small" hydrated=""></gux-icon></button><gux-tooltip id="gux-tooltip-i" role="tooltip" hydrated=""><div slot="content">Link</div></gux-tooltip></gux-button-slot><gux-popover hydrated=""><div class="gux-popover-content-wrapper"><gux-form-field-text-like hydrated=""><input id="textToDisplay" slot="input" type="text"><label slot="label" for="textToDisplay">Text to display</label></gux-form-field-text-like><gux-form-field-text-like hydrated=""><input slot="input" type="text" id="gux-form-field-input-i"><label slot="label" for="gux-form-field-input-i">Link Address</label></gux-form-field-text-like><gux-cta-group hydrated=""><gux-button slot="primary" hydrated="">Insert</gux-button><gux-button slot="dismiss" hydrated="">Cancel</gux-button></gux-cta-group></div></gux-popover></template></gux-rich-text-editor-action-link>"`;
diff --git a/...tor-action/gux-rich-text-editor-action-link/tests/gux-rich-text-editor-action-link.e2e.ts b/...tor-action/gux-rich-text-editor-action-link/tests/gux-rich-text-editor-action-link.e2e.ts
@@ -1,8 +1,27 @@
+import { E2EPage, newE2EPage } from '@stencil/core/testing';
 import {
   newSparkE2EPage,
   a11yCheck
 } from '../../../../../../test/e2eTestUtils';
 
+const axeExclusions = [];
+
+async function newNonrandomE2EPage({
+  html
+}: {
+  html: string;
+}): Promise<E2EPage> {
+  const page = await newE2EPage();
+
+  await page.evaluateOnNewDocument(() => {
+    Math.random = () => 0.5;
+  });
+  await page.setContent(html);
+  await page.waitForChanges();
+
+  return page;
+}
+
 describe('gux-rich-text-editor-action-link', () => {
   describe('#render', () => {
     [
@@ -14,13 +33,16 @@ describe('gux-rich-text-editor-action-link', () => {
     </gux-rich-text-editor-beta>`
     ].forEach((html, index) => {
       it(`should display component as expected (${index + 1})`, async () => {
-        const page = await newSparkE2EPage({ html });
+        const page = await newNonrandomE2EPage({ html });
 
         const element = await page.find('gux-rich-text-editor-action-link');
+        expect(element.outerHTML).toMatchSnapshot();
+      });
 
-        await a11yCheck(page);
+      it(`should be accessible (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
 
-        expect(element.outerHTML).toMatchSnapshot();
+        await a11yCheck(page, axeExclusions);
       });
     });
   });

diff --git a/.../src/components/beta/gux-side-panel/components/gux-side-panel-heading/readme.md b/.../src/components/beta/gux-side-panel/components/gux-side-panel-heading/readme.md
diff --git a/packages/genesys-spark-components/src/components/stable/gux-button/readme.md b/packages/genesys-spark-components/src/components/stable/gux-button/readme.md
@@ -8,12 +8,13 @@ You can choose between two type (secondary and primary).
 
 ## Properties
 
-| Property   | Attribute   | Description                               | Type                                                                        | Default       |
-| ---------- | ----------- | ----------------------------------------- | --------------------------------------------------------------------------- | ------------- |
-| `accent`   | `accent`    |                                           | `"danger" \| "ghost" \| "inline" \| "primary" \| "secondary" \| "tertiary"` | `'secondary'` |
-| `disabled` | `disabled`  | Indicate if the button is disabled or not | `boolean`                                                                   | `false`       |
-| `guxTitle` | `gux-title` | The component title                       | `string`                                                                    | `undefined`   |
-| `type`     | `type`      | The component button type                 | `"button" \| "reset" \| "submit"`                                           | `'button'`    |
+| Property    | Attribute   | Description                               | Type                                                                        | Default       |
+| ----------- | ----------- | ----------------------------------------- | --------------------------------------------------------------------------- | ------------- |
+| `accent`    | `accent`    |                                           | `"danger" \| "ghost" \| "inline" \| "primary" \| "secondary" \| "tertiary"` | `'secondary'` |
+| `autofocus` | `autofocus` |                                           | `boolean`                                                                   | `false`       |
+| `disabled`  | `disabled`  | Indicate if the button is disabled or not | `boolean`                                                                   | `false`       |
+| `guxTitle`  | `gux-title` | The component title                       | `string`                                                                    | `undefined`   |
+| `type`      | `type`      | The component button type                 | `"button" \| "reset" \| "submit"`                                           | `'button'`    |
 
 
 ## Slots

diff --git a/packages/genesys-spark-components/src/components/stable/gux-icon/readme.md b/packages/genesys-spark-components/src/components/stable/gux-icon/readme.md
diff --git a/...-components/src/components/stable/gux-listbox/options/gux-option-icon/readme.md b/...-components/src/components/stable/gux-listbox/options/gux-option-icon/readme.md
@@ -7,17 +7,18 @@
 
 ## Properties
 
-| Property     | Attribute      | Description | Type      | Default     |
-| ------------ | -------------- | ----------- | --------- | ----------- |
-| `active`     | `active`       |             | `boolean` | `false`     |
-| `disabled`   | `disabled`     |             | `boolean` | `false`     |
-| `filtered`   | `filtered`     |             | `boolean` | `false`     |
-| `hovered`    | `hovered`      |             | `boolean` | `false`     |
-| `iconColor`  | `icon-color`   |             | `string`  | `undefined` |
-| `iconName`   | `icon-name`    |             | `string`  | `undefined` |
-| `iconSrText` | `icon-sr-text` |             | `string`  | `undefined` |
-| `selected`   | `selected`     |             | `boolean` | `false`     |
-| `value`      | `value`        |             | `string`  | `undefined` |
+| Property       | Attribute       | Description | Type               | Default     |
+| -------------- | --------------- | ----------- | ------------------ | ----------- |
+| `active`       | `active`        |             | `boolean`          | `false`     |
+| `disabled`     | `disabled`      |             | `boolean`          | `false`     |
+| `filtered`     | `filtered`      |             | `boolean`          | `false`     |
+| `hovered`      | `hovered`       |             | `boolean`          | `false`     |
+| `iconColor`    | `icon-color`    |             | `string`           | `undefined` |
+| `iconName`     | `icon-name`     |             | `string`           | `undefined` |
+| `iconPosition` | `icon-position` |             | `"end" \| "start"` | `'start'`   |
+| `iconSrText`   | `icon-sr-text`  |             | `string`           | `undefined` |
+| `selected`     | `selected`      |             | `boolean`          | `false`     |
+| `value`        | `value`         |             | `string`           | `undefined` |
 
 
 ## Slots