Merge pull request #6369 from Sage/icon-button-playwright-refactor

test(icon-button): add playwright tests

playwright/components/index.ts

@@ -11,6 +11,7 @@ import {
   STICKY_FOOTER,
   COMMMON_DATA_ELEMENT_INPUT,
   PORTAL,
+  BUTTON,
 } from "./locators";
 
 export const icon = (page: Page) => {
@@ -25,6 +26,10 @@ export const commonDataElementInputPreview = (page: Page) => {
   return page.locator(COMMMON_DATA_ELEMENT_INPUT);
 };
 
+export const button = (page: Page) => {
+  return page.locator(BUTTON);
+};
+
 export const closeIconButton = (page: Page) => {
   return page.locator(CLOSE_ICON_BUTTON);
 };

src/components/icon-button/component.test-pw.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import IconButton, { IconButtonProps } from ".";
+import Icon from "../icon";
+
+const IconButtonComponent = (props: Partial<IconButtonProps>) => {
+  return (
+    <IconButton aria-label="icon-button" onClick={() => {}} {...props}>
+      <Icon type="home" />
+    </IconButton>
+  );
+};
+
+export default IconButtonComponent;

src/components/icon-button/icon-button-test.stories.tsx

@@ -22,11 +22,3 @@ export const Default = (props: IconButtonProps) => {
 };
 
 Default.storyName = "default";
-
-export const IconButtonComponent = (props: Partial<IconButtonProps>) => {
-  return (
-    <IconButton aria-label="icon-button" onClick={() => {}} {...props}>
-      <Icon type="home" />
-    </IconButton>
-  );
-};