Added tooltip visual tests to components that internally use them

packages/lib/src/action-icon/ActionIcon.stories.tsx

@@ -1,6 +1,9 @@
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcActionIcon from "./ActionIcon";
+import { userEvent, within } from "@storybook/test";
+import DxcTooltip from "../tooltip/Tooltip";
+import DxcInset from "../inset/Inset";
 
 export default {
   title: "Action Icon ",
@@ -38,3 +41,39 @@ export const Chromatic = () => (
     </ExampleContainer>
   </>
 );
+
+const Tooltip = () => (
+  <>
+    <Title title="Default tooltip" theme="light" level={2} />
+    <ExampleContainer>
+      <DxcActionIcon icon="favorite" title="Favourite" />
+    </ExampleContainer>
+  </>
+);
+
+const NestedTooltip = () => (
+  <>
+    <Title title="Nested tooltip" theme="light" level={2} />
+    <ExampleContainer>
+      <DxcInset top="3rem">
+        <DxcTooltip label="Favourite" position="top">
+          <DxcActionIcon icon="favorite" title="Favourite" />
+        </DxcTooltip>
+      </DxcInset>
+    </ExampleContainer>
+  </>
+);
+
+export const ActionIconTooltip = Tooltip.bind({});
+ActionIconTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole("button");
+  await userEvent.hover(button);
+};
+
+export const NestedActionIconTooltip = NestedTooltip.bind({});
+NestedActionIconTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole("button");
+  await userEvent.hover(button);
+};

packages/lib/src/badge/Badge.stories.tsx

@@ -2,6 +2,9 @@ import DxcBadge from "./Badge";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcFlex from "../flex/Flex";
+import DxcInset from "../inset/Inset";
+import { userEvent, within } from "@storybook/test";
+import DxcTooltip from "../tooltip/Tooltip";
 
 export default {
   title: "Badge",
@@ -207,3 +210,39 @@ export const Chromatic = () => (
     </ExampleContainer>
   </>
 );
+
+const Tooltip = () => (
+  <>
+    <Title title="Default tooltip" theme="light" level={2} />
+    <ExampleContainer>
+      <DxcBadge label="Tooltip label" title="Label" />
+    </ExampleContainer>
+  </>
+);
+
+const NestedTooltip = () => (
+  <>
+    <Title title="Nested tooltip" theme="light" level={2} />
+    <ExampleContainer>
+      <DxcInset top="3rem">
+        <DxcTooltip label="Tooltip label" position="top">
+          <DxcBadge label="Tooltip label" title="Label" />
+        </DxcTooltip>
+      </DxcInset>
+    </ExampleContainer>
+  </>
+);
+
+export const BadgeTooltip = Tooltip.bind({});
+BadgeTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const div = canvas.getByText("Tooltip label")
+  await userEvent.hover(div);
+};
+
+export const NestedBadgeTooltip = NestedTooltip.bind({});
+NestedBadgeTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const div = canvas.getByText("Tooltip label")
+  await userEvent.hover(div);
+};

packages/lib/src/button/Button.stories.tsx

@@ -3,6 +3,9 @@ import DxcFlex from "../flex/Flex";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { HalstackProvider } from "../HalstackContext";
+import DxcInset from "../inset/Inset";
+import DxcTooltip from "../tooltip/Tooltip";
+import { userEvent, within } from "@storybook/test";
 
 export default {
   title: "Button",
@@ -315,3 +318,39 @@ export const Chromatic = () => (
     </ExampleContainer>
   </>
 );
+
+const Tooltip = () => (
+  <>
+    <Title title="Default tooltip" theme="light" level={2} />
+    <ExampleContainer>
+      <DxcButton label="Button" title="Button" />
+    </ExampleContainer>
+  </>
+);
+
+const NestedTooltip = () => (
+  <>
+    <Title title="Nested tooltip" theme="light" level={2} />
+    <ExampleContainer>
+      <DxcInset top="3rem">
+        <DxcTooltip label="Button" position="top">
+          <DxcButton label="Button" title="Button" />
+        </DxcTooltip>
+      </DxcInset>
+    </ExampleContainer>
+  </>
+);
+
+export const ButtonTooltip = Tooltip.bind({});
+ButtonTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole("button");
+  await userEvent.hover(button);
+};
+
+export const NestedButtonTooltip = NestedTooltip.bind({});
+NestedButtonTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole("button");
+  await userEvent.hover(button);
+};

packages/lib/src/date-input/DateInput.stories.tsx

@@ -12,6 +12,8 @@ import Calendar from "./Calendar";
 import DxcDateInput from "./DateInput";
 import DxcDatePicker from "./DatePicker";
 import YearPicker from "./YearPicker";
+import DxcTooltip from "../tooltip/Tooltip";
+import DxcInset from "../inset/Inset";
 
 export default {
   title: "Date Input",
@@ -293,3 +295,29 @@ export const DatePickerWithToday = () => {
     </ThemeProvider>
   );
 };
+
+const Tooltip = () => {
+  const colorsTheme: any = useTheme();
+  return (
+    <ThemeProvider theme={colorsTheme}>
+      <Title title="Default tooltip" theme="light" level={2} />
+      <ExampleContainer>
+        <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar-tooltip" />
+      </ExampleContainer>
+    </ThemeProvider>
+  );
+};
+
+export const DatePickerTooltipPrevious = Tooltip.bind({});
+DatePickerTooltipPrevious.play = async ({ canvasElement }) => {
+const canvas = within(canvasElement);
+const previousMonthButton = canvas.getAllByRole("button")[0];
+await userEvent.hover(previousMonthButton);
+};
+
+export const DatePickerTooltipAfter = Tooltip.bind({});
+DatePickerTooltipAfter.play = async ({ canvasElement }) => {
+const canvas = within(canvasElement);
+const afterMonthButton = canvas.getAllByRole("button")[2];
+await userEvent.hover(afterMonthButton);
+};

packages/lib/src/footer/Footer.stories.tsx

@@ -1,3 +1,4 @@
+import { userEvent, within } from "@storybook/test";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import Title from "../../.storybook/components/Title";
 import preview from "../../.storybook/preview";
@@ -205,3 +206,26 @@ export const Chromatic = () => (
     </ExampleContainer>
   </>
 );
+
+const Tooltip = () => {
+  return (
+    <ExampleContainer>
+      <Title title="Default tooltip" theme="light" level={2} />
+      <DxcFooter socialLinks={social.slice(0, 2)}></DxcFooter>
+    </ExampleContainer>
+  );
+};
+
+export const FooterTooltipFirst = Tooltip.bind({});
+FooterTooltipFirst.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const link = canvas.getAllByRole("link")[0];
+  await userEvent.hover(link);
+};
+
+export const FooterTooltipSecond = Tooltip.bind({});
+FooterTooltipSecond.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const link = canvas.getAllByRole("link")[1];
+  await userEvent.hover(link);
+};

packages/lib/src/header/Header.stories.tsx

@@ -264,3 +264,18 @@ ResponsiveHeaderMenuOpinionated.play = async ({ canvasElement }) => {
   await waitFor(() => canvas.findByText("Menu"));
   await userEvent.click(canvas.getByText("Menu"));
 };
+
+export const ResponsiveHeaderTooltip = RespHeaderMenuMobile.bind({});
+ResponsiveHeaderTooltip.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [375] },
+};
+ResponsiveHeaderTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await waitFor(() => canvas.findByText("Menu"));
+  await userEvent.click(canvas.getByText("Menu"));
+  const closeButton = canvas.getAllByRole("button")[1];
+  await userEvent.hover(closeButton);
+};

packages/lib/src/layout/ApplicationLayout.stories.tsx

@@ -1,6 +1,7 @@
 import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 import Title from "../../.storybook/components/Title";
 import DxcApplicationLayout from "./ApplicationLayout";
+import { userEvent, within } from "@storybook/test";
 
 export default {
   title: "Application Layout",
@@ -159,3 +160,34 @@ export const ApplicationLayoutWithCustomFooter = () => (
     </DxcApplicationLayout>
   </>
 );
+
+const Tooltip = () => (
+  <>
+    <DxcApplicationLayout
+      sidenav={
+        <DxcApplicationLayout.SideNav>
+          <DxcApplicationLayout.SideNav.Section>
+            <p>SideNav Content</p>
+          </DxcApplicationLayout.SideNav.Section>
+        </DxcApplicationLayout.SideNav>
+      }
+    >
+      <DxcApplicationLayout.Main>
+        <p>Main Content</p>
+      </DxcApplicationLayout.Main>
+    </DxcApplicationLayout>
+  </>
+);
+
+export const ApplicationLayoutTooltip = Tooltip.bind({});
+ApplicationLayoutTooltip.parameters = {
+  viewport: {
+    defaultViewport: "pixel",
+  },
+  chromatic: { viewports: [540] },
+};
+ApplicationLayoutTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const toggleVisibility = await canvas.findByRole("button");
+  await userEvent.hover(toggleVisibility);
+};

packages/lib/src/select/Select.stories.tsx

@@ -925,3 +925,22 @@ MultipleGroupedOptionsDisplayedOpinionated.play = async ({ canvasElement }) => {
   const select = canvas.getByRole("combobox");
   await userEvent.click(select);
 };
+
+const Tooltip = () => {
+  const colorsTheme: any = useTheme();
+  return (
+    <ThemeProvider theme={colorsTheme}>
+      <Title title="Default tooltip" theme="light" level={2} />
+      <ExampleContainer>
+        <DxcSelect label="Label" options={single_options} multiple defaultValue={["1", "2", "3", "4"]} />
+      </ExampleContainer>
+    </ThemeProvider>
+  );
+};
+
+export const SelectTooltip = Tooltip.bind({});
+SelectTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const clearSelectionButton = canvas.getByRole("button");
+  await userEvent.hover(clearSelectionButton);
+};

packages/lib/src/tooltip/Tooltip.stories.tsx

@@ -77,34 +77,34 @@ const RightTooltip = () => (
 export const Chromatic = Tooltip.bind({});
 Chromatic.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const buttonList = canvas.getByRole("button");
-  await userEvent.hover(buttonList);
+  const button = canvas.getByRole("button");
+  await userEvent.hover(button);
 };
 
 export const LargeTextTooltip = LargeTextWithinTooltip.bind({});
 LargeTextTooltip.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const buttonList = canvas.getByRole("button");
-  await userEvent.hover(buttonList);
+  const button = canvas.getByRole("button");
+  await userEvent.hover(button);
 };
 
 export const TooltipPositionTop = TopTooltip.bind({});
 TooltipPositionTop.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const buttonList = canvas.getByRole("button");
-  await userEvent.hover(buttonList);
+  const button = canvas.getByRole("button");
+  await userEvent.hover(button);
 };
 
 export const TooltipPositionLeft = LeftTooltip.bind({});
 TooltipPositionLeft.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const buttonList = canvas.getByRole("button");
-  await userEvent.hover(buttonList);
+  const button = canvas.getByRole("button");
+  await userEvent.hover(button);
 };
 
 export const TooltipPositionRight = RightTooltip.bind({});
 TooltipPositionRight.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const buttonList = canvas.getByRole("button");
-  await userEvent.hover(buttonList);
+  const button = canvas.getByRole("button");
+  await userEvent.hover(button);
 };