test(cta): add regression tests for missing arrow icon

elements/rh-cta/test/rh-cta.e2e.ts

@@ -6,17 +6,17 @@ const tagName = 'rh-cta';
 test.describe(tagName, () => {
   test('snapshot', async ({ page }) => {
     const componentPage = new PfeDemoPage(page, tagName);
-    await componentPage.navigate('/elements/call-to-action/demo/');
+    await componentPage.navigate('/elements/call-to-action/demo/variants/');
     await expect(page).toHaveScreenshot();
 
     async function elementSuite(selector: string, variant: string) {
       const element = await componentPage.page.$(selector);
       const locator = page.locator(selector);
-      test.expect(await element.screenshot()).toMatchSnapshot({ name: `${variant} 0.png` });
+      test.expect(await element?.screenshot()).toMatchSnapshot({ name: `${variant} 0.png` });
 
       // hover
-      await element.hover();
-      await element.evaluate(e =>
+      await element?.hover();
+      await element?.evaluate(e =>
         Promise.all(e.getAnimations({ subtree: true }).map(animation => animation.finished))
       );
       await componentPage.updateComplete(selector);
@@ -28,7 +28,8 @@ test.describe(tagName, () => {
       await expect(locator).toHaveScreenshot(`${variant} 2 focus.png` );
       await page.mouse.click(0, 0);
       // active
-      const { x, width, y, height } = await element.boundingBox();
+      const defaultBounds = { x: 0, width: 0, y: 0, height: 0 };
+      const { x, width, y, height } = await element?.boundingBox() || defaultBounds;
       await page.mouse.move(x + width / 2, y + height / 2);
       await page.mouse.down();
       await componentPage.updateComplete(selector);
@@ -37,41 +38,56 @@ test.describe(tagName, () => {
       await page.mouse.click(0, 0);
     }
 
-    for (const selector of Array.from({ length: 7 }, (_, i) => `#variants rh-cta:nth-of-type(${i + 1})`)) {
-      const [, nth] = selector.match(/nth-of-type\((\d)\)/);
+    for (const selector of Array.from({ length: 5 }, (_, i) => `#cta-variants > rh-cta:nth-of-type(${i + 1})`)) {
+      const [, nth] = selector.match(/nth-of-type\((\d)\)/)!;
       await elementSuite(selector, [
         'default',
         'default video',
         'primary',
-        'primary video',
+        'video',
         'secondary',
-        'brick',
-        'brick video',
       ][parseInt(nth) - 1]);
     }
-    for (const selector of Array.from({ length: 7 }, (_, i) => `#dark rh-cta:nth-of-type(${i + 1})`)) {
-      const [, nth] = selector.match(/nth-of-type\((\d)\)/);
-      await elementSuite(selector, [
-        'dark default',
-        'dark default video',
-        'dark primary',
-        'dark primary video',
-        'dark secondary',
-        'dark brick',
-        'dark brick video',
-      ][parseInt(nth) - 1]);
-    }
-    for (const selector of Array.from({ length: 7 }, (_, i) => `shadow-root rh-cta:nth-of-type(${i + 1})`)) {
-      const [, nth] = selector.match(/nth-of-type\((\d)\)/);
+
+    for (const selector of Array.from({ length: 2 }, (_, i) => `#cta-variants #brick rh-cta:nth-of-type(${i + 1})`)) {
+      const [, nth] = selector.match(/nth-of-type\((\d)\)/)!;
       await elementSuite(selector, [
-        'shadow rtl default',
-        'shadow rtl default video',
-        'shadow rtl primary',
-        'shadow rtl primary video',
-        'shadow rtl secondary',
-        'shadow rtl brick',
-        'shadow rtl brick video',
+        'brick',
+        'brick icon',
       ][parseInt(nth) - 1]);
     }
   });
+
+  const variantsWithIcons = [
+    { selector: '#cta-variants rh-cta:nth-of-type(1)', icon: 'arrow-right' }, // default
+    { selector: '#cta-variants > rh-cta:nth-of-type(2)', icon: 'play-circle' }, // default with icon
+    { selector: '#cta-variants rh-cta:nth-of-type(4)', icon: 'play-circle' }, // primary with icon
+  ];
+
+  for (const { selector, icon: iconName } of variantsWithIcons) {
+    test(`cta with selector ${selector} should have a visible ${iconName} icon`, async ({ page }) => {
+      const componentPage = new PfeDemoPage(page, tagName);
+      await componentPage.navigate('/elements/call-to-action/demo/variants/');
+      const cta = componentPage.page.locator(selector);
+      const icon = cta.locator('rh-icon');
+      await expect(icon).toBeVisible();
+      await expect(icon).toHaveAttribute('icon', iconName);
+    });
+  }
+
+  const variantsWithoutIcons = [
+    '#cta-variants rh-cta:nth-of-type(3)', // primary
+    '#cta-variants rh-cta:nth-of-type(5)', // secondary
+    '#cta-variants #brick rh-cta:nth-of-type(6)', // brick
+  ];
+
+  for (const selector of variantsWithoutIcons) {
+    test(`cta with selector ${selector} should not have an icon`, async ({ page }) => {
+      const componentPage = new PfeDemoPage(page, tagName);
+      await componentPage.navigate('/elements/call-to-action/demo/variants/');
+      const cta = componentPage.page.locator(selector);
+      const icon = cta.locator('rh-icon');
+      await expect(icon).toHaveCount(0);
+    });
+  }
 });

patches/@patternfly+pfe-tools+4.0.3.patch

@@ -0,0 +1,12 @@
+diff --git a/node_modules/@patternfly/pfe-tools/package.json b/node_modules/@patternfly/pfe-tools/package.json
+index 93419d8..50b6a83 100644
+--- a/node_modules/@patternfly/pfe-tools/package.json
++++ b/node_modules/@patternfly/pfe-tools/package.json
+@@ -39,6 +39,7 @@
+     "./test/create-fixture.js": "./test/create-fixture.js",
+     "./test/get-composed-text.js": "./test/get-composed-text.js",
+     "./test/hex-to-rgb.js": "./test/hex-to-rgb.js",
++    "./test/playwright/PfeDemoPage.js": "./test/playwright/PfeDemoPage.js",
+     "./test/render-to-string.js": "./test/render-to-string.js",
+     "./test/stub-logger.js": "./test/stub-logger.js",
+     "./test/utils.js": "./test/utils.js",