Skip to content

Commit 4e8b687

Browse files
GomezIvannGomezIvann
authored
Merge pull request #2045 from dxc-technology/Mil4n0r/added_tooltip_tests
Added tooltip visual tests to components that internally use them
2 parents aecfc8a + 15d6819 commit 4e8b687

File tree

11 files changed

+276
-29
lines changed

11 files changed

+276
-29
lines changed

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import Title from "../../.storybook/components/Title";
22
import ExampleContainer from "../../.storybook/components/ExampleContainer";
33
import DxcActionIcon from "./ActionIcon";
4+
import { userEvent, within } from "@storybook/test";
5+
import DxcTooltip from "../tooltip/Tooltip";
6+
import DxcInset from "../inset/Inset";
47

58
export default {
69
title: "Action Icon ",
@@ -38,3 +41,39 @@ export const Chromatic = () => (
3841
</ExampleContainer>
3942
</>
4043
);
44+
45+
const Tooltip = () => (
46+
<>
47+
<Title title="Default tooltip" theme="light" level={2} />
48+
<ExampleContainer>
49+
<DxcActionIcon icon="favorite" title="Favourite" />
50+
</ExampleContainer>
51+
</>
52+
);
53+
54+
const NestedTooltip = () => (
55+
<>
56+
<Title title="Nested tooltip" theme="light" level={2} />
57+
<ExampleContainer>
58+
<DxcInset top="3rem">
59+
<DxcTooltip label="Favourite" position="top">
60+
<DxcActionIcon icon="favorite" title="Favourite" />
61+
</DxcTooltip>
62+
</DxcInset>
63+
</ExampleContainer>
64+
</>
65+
);
66+
67+
export const ActionIconTooltip = Tooltip.bind({});
68+
ActionIconTooltip.play = async ({ canvasElement }) => {
69+
const canvas = within(canvasElement);
70+
const button = canvas.getByRole("button");
71+
await userEvent.hover(button);
72+
};
73+
74+
export const NestedActionIconTooltip = NestedTooltip.bind({});
75+
NestedActionIconTooltip.play = async ({ canvasElement }) => {
76+
const canvas = within(canvasElement);
77+
const button = canvas.getByRole("button");
78+
await userEvent.hover(button);
79+
};

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import DxcBadge from "./Badge";
22
import Title from "../../.storybook/components/Title";
33
import ExampleContainer from "../../.storybook/components/ExampleContainer";
44
import DxcFlex from "../flex/Flex";
5+
import DxcInset from "../inset/Inset";
6+
import { userEvent, within } from "@storybook/test";
7+
import DxcTooltip from "../tooltip/Tooltip";
58

69
export default {
710
title: "Badge",
@@ -207,3 +210,39 @@ export const Chromatic = () => (
207210
</ExampleContainer>
208211
</>
209212
);
213+
214+
const Tooltip = () => (
215+
<>
216+
<Title title="Default tooltip" theme="light" level={2} />
217+
<ExampleContainer>
218+
<DxcBadge label="Tooltip label" title="Label" />
219+
</ExampleContainer>
220+
</>
221+
);
222+
223+
const NestedTooltip = () => (
224+
<>
225+
<Title title="Nested tooltip" theme="light" level={2} />
226+
<ExampleContainer>
227+
<DxcInset top="3rem">
228+
<DxcTooltip label="Tooltip label" position="top">
229+
<DxcBadge label="Tooltip label" title="Label" />
230+
</DxcTooltip>
231+
</DxcInset>
232+
</ExampleContainer>
233+
</>
234+
);
235+
236+
export const BadgeTooltip = Tooltip.bind({});
237+
BadgeTooltip.play = async ({ canvasElement }) => {
238+
const canvas = within(canvasElement);
239+
const div = canvas.getByText("Tooltip label")
240+
await userEvent.hover(div);
241+
};
242+
243+
export const NestedBadgeTooltip = NestedTooltip.bind({});
244+
NestedBadgeTooltip.play = async ({ canvasElement }) => {
245+
const canvas = within(canvasElement);
246+
const div = canvas.getByText("Tooltip label")
247+
await userEvent.hover(div);
248+
};

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import DxcFlex from "../flex/Flex";
33
import Title from "../../.storybook/components/Title";
44
import ExampleContainer from "../../.storybook/components/ExampleContainer";
55
import { HalstackProvider } from "../HalstackContext";
6+
import DxcInset from "../inset/Inset";
7+
import DxcTooltip from "../tooltip/Tooltip";
8+
import { userEvent, within } from "@storybook/test";
69

710
export default {
811
title: "Button",
@@ -4962,3 +4965,39 @@ export const Chromatic = () => (
49624965
</DxcFlex>
49634966
</>
49644967
);
4968+
4969+
const Tooltip = () => (
4970+
<>
4971+
<Title title="Default tooltip" theme="light" level={2} />
4972+
<ExampleContainer>
4973+
<DxcButton label="Button" title="Button" />
4974+
</ExampleContainer>
4975+
</>
4976+
);
4977+
4978+
const NestedTooltip = () => (
4979+
<>
4980+
<Title title="Nested tooltip" theme="light" level={2} />
4981+
<ExampleContainer>
4982+
<DxcInset top="3rem">
4983+
<DxcTooltip label="Button" position="top">
4984+
<DxcButton label="Button" title="Button" />
4985+
</DxcTooltip>
4986+
</DxcInset>
4987+
</ExampleContainer>
4988+
</>
4989+
);
4990+
4991+
export const ButtonTooltip = Tooltip.bind({});
4992+
ButtonTooltip.play = async ({ canvasElement }) => {
4993+
const canvas = within(canvasElement);
4994+
const button = canvas.getByRole("button");
4995+
await userEvent.hover(button);
4996+
};
4997+
4998+
export const NestedButtonTooltip = NestedTooltip.bind({});
4999+
NestedButtonTooltip.play = async ({ canvasElement }) => {
5000+
const canvas = within(canvasElement);
5001+
const button = canvas.getByRole("button");
5002+
await userEvent.hover(button);
5003+
};

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import Calendar from "./Calendar";
1212
import DxcDateInput from "./DateInput";
1313
import DxcDatePicker from "./DatePicker";
1414
import YearPicker from "./YearPicker";
15+
import DxcTooltip from "../tooltip/Tooltip";
16+
import DxcInset from "../inset/Inset";
1517

1618
export default {
1719
title: "Date Input",
@@ -293,3 +295,29 @@ export const DatePickerWithToday = () => {
293295
</ThemeProvider>
294296
);
295297
};
298+
299+
const Tooltip = () => {
300+
const colorsTheme: any = useTheme();
301+
return (
302+
<ThemeProvider theme={colorsTheme}>
303+
<Title title="Default tooltip" theme="light" level={2} />
304+
<ExampleContainer>
305+
<DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar-tooltip" />
306+
</ExampleContainer>
307+
</ThemeProvider>
308+
);
309+
};
310+
311+
export const DatePickerTooltipPrevious = Tooltip.bind({});
312+
DatePickerTooltipPrevious.play = async ({ canvasElement }) => {
313+
const canvas = within(canvasElement);
314+
const previousMonthButton = canvas.getAllByRole("button")[0];
315+
await userEvent.hover(previousMonthButton);
316+
};
317+
318+
export const DatePickerTooltipAfter = Tooltip.bind({});
319+
DatePickerTooltipAfter.play = async ({ canvasElement }) => {
320+
const canvas = within(canvasElement);
321+
const afterMonthButton = canvas.getAllByRole("button")[2];
322+
await userEvent.hover(afterMonthButton);
323+
};

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { userEvent, within } from "@storybook/test";
12
import ExampleContainer from "../../.storybook/components/ExampleContainer";
23
import Title from "../../.storybook/components/Title";
34
import preview from "../../.storybook/preview";
@@ -205,3 +206,26 @@ export const Chromatic = () => (
205206
</ExampleContainer>
206207
</>
207208
);
209+
210+
const Tooltip = () => {
211+
return (
212+
<ExampleContainer>
213+
<Title title="Default tooltip" theme="light" level={2} />
214+
<DxcFooter socialLinks={social.slice(0, 2)}></DxcFooter>
215+
</ExampleContainer>
216+
);
217+
};
218+
219+
export const FooterTooltipFirst = Tooltip.bind({});
220+
FooterTooltipFirst.play = async ({ canvasElement }) => {
221+
const canvas = within(canvasElement);
222+
const link = canvas.getAllByRole("link")[0];
223+
await userEvent.hover(link);
224+
};
225+
226+
export const FooterTooltipSecond = Tooltip.bind({});
227+
FooterTooltipSecond.play = async ({ canvasElement }) => {
228+
const canvas = within(canvasElement);
229+
const link = canvas.getAllByRole("link")[1];
230+
await userEvent.hover(link);
231+
};

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,3 +264,18 @@ ResponsiveHeaderMenuOpinionated.play = async ({ canvasElement }) => {
264264
await waitFor(() => canvas.findByText("Menu"));
265265
await userEvent.click(canvas.getByText("Menu"));
266266
};
267+
268+
export const ResponsiveHeaderTooltip = RespHeaderMenuMobile.bind({});
269+
ResponsiveHeaderTooltip.parameters = {
270+
viewport: {
271+
defaultViewport: "iphonex",
272+
},
273+
chromatic: { viewports: [375] },
274+
};
275+
ResponsiveHeaderTooltip.play = async ({ canvasElement }) => {
276+
const canvas = within(canvasElement);
277+
await waitFor(() => canvas.findByText("Menu"));
278+
await userEvent.click(canvas.getByText("Menu"));
279+
const closeButton = canvas.getAllByRole("button")[1];
280+
await userEvent.hover(closeButton);
281+
};

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
22
import Title from "../../.storybook/components/Title";
33
import DxcApplicationLayout from "./ApplicationLayout";
4+
import { userEvent, within } from "@storybook/test";
45

56
export default {
67
title: "Application Layout",
@@ -159,3 +160,34 @@ export const ApplicationLayoutWithCustomFooter = () => (
159160
</DxcApplicationLayout>
160161
</>
161162
);
163+
164+
const Tooltip = () => (
165+
<>
166+
<DxcApplicationLayout
167+
sidenav={
168+
<DxcApplicationLayout.SideNav>
169+
<DxcApplicationLayout.SideNav.Section>
170+
<p>SideNav Content</p>
171+
</DxcApplicationLayout.SideNav.Section>
172+
</DxcApplicationLayout.SideNav>
173+
}
174+
>
175+
<DxcApplicationLayout.Main>
176+
<p>Main Content</p>
177+
</DxcApplicationLayout.Main>
178+
</DxcApplicationLayout>
179+
</>
180+
);
181+
182+
export const ApplicationLayoutTooltip = Tooltip.bind({});
183+
ApplicationLayoutTooltip.parameters = {
184+
viewport: {
185+
defaultViewport: "pixel",
186+
},
187+
chromatic: { viewports: [540] },
188+
};
189+
ApplicationLayoutTooltip.play = async ({ canvasElement }) => {
190+
const canvas = within(canvasElement);
191+
const toggleVisibility = await canvas.findByRole("button");
192+
await userEvent.hover(toggleVisibility);
193+
};

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -925,3 +925,22 @@ MultipleGroupedOptionsDisplayedOpinionated.play = async ({ canvasElement }) => {
925925
const select = canvas.getByRole("combobox");
926926
await userEvent.click(select);
927927
};
928+
929+
const Tooltip = () => {
930+
const colorsTheme: any = useTheme();
931+
return (
932+
<ThemeProvider theme={colorsTheme}>
933+
<Title title="Default tooltip" theme="light" level={2} />
934+
<ExampleContainer>
935+
<DxcSelect label="Label" options={single_options} multiple defaultValue={["1", "2", "3", "4"]} />
936+
</ExampleContainer>
937+
</ThemeProvider>
938+
);
939+
};
940+
941+
export const SelectTooltip = Tooltip.bind({});
942+
SelectTooltip.play = async ({ canvasElement }) => {
943+
const canvas = within(canvasElement);
944+
const clearSelectionButton = canvas.getByRole("button");
945+
await userEvent.hover(clearSelectionButton);
946+
};

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -77,34 +77,34 @@ const RightTooltip = () => (
7777
export const Chromatic = Tooltip.bind({});
7878
Chromatic.play = async ({ canvasElement }) => {
7979
const canvas = within(canvasElement);
80-
const buttonList = canvas.getByRole("button");
81-
await userEvent.hover(buttonList);
80+
const button = canvas.getByRole("button");
81+
await userEvent.hover(button);
8282
};
8383

8484
export const LargeTextTooltip = LargeTextWithinTooltip.bind({});
8585
LargeTextTooltip.play = async ({ canvasElement }) => {
8686
const canvas = within(canvasElement);
87-
const buttonList = canvas.getByRole("button");
88-
await userEvent.hover(buttonList);
87+
const button = canvas.getByRole("button");
88+
await userEvent.hover(button);
8989
};
9090

9191
export const TooltipPositionTop = TopTooltip.bind({});
9292
TooltipPositionTop.play = async ({ canvasElement }) => {
9393
const canvas = within(canvasElement);
94-
const buttonList = canvas.getByRole("button");
95-
await userEvent.hover(buttonList);
94+
const button = canvas.getByRole("button");
95+
await userEvent.hover(button);
9696
};
9797

9898
export const TooltipPositionLeft = LeftTooltip.bind({});
9999
TooltipPositionLeft.play = async ({ canvasElement }) => {
100100
const canvas = within(canvasElement);
101-
const buttonList = canvas.getByRole("button");
102-
await userEvent.hover(buttonList);
101+
const button = canvas.getByRole("button");
102+
await userEvent.hover(button);
103103
};
104104

105105
export const TooltipPositionRight = RightTooltip.bind({});
106106
TooltipPositionRight.play = async ({ canvasElement }) => {
107107
const canvas = within(canvasElement);
108-
const buttonList = canvas.getByRole("button");
109-
await userEvent.hover(buttonList);
108+
const button = canvas.getByRole("button");
109+
await userEvent.hover(button);
110110
};

0 commit comments

Comments
 (0)