From 650c580e2d7974b8e6bcba8aba9ade8a4c13ecb4 Mon Sep 17 00:00:00 2001 From: Eloi Taniguti Date: Fri, 10 Nov 2023 11:48:10 -0300 Subject: [PATCH 1/3] feat: add tooltip scenario --- src/i18n/locales/en.json | 9 +++ src/i18n/locales/fr.json | 9 +++ src/i18n/locales/pt-br.json | 9 +++ src/scenarios/Index.tsx | 1 + src/scenarios/Tooltip.scenario.tsx | 99 ++++++++++++++++++++++++++++++ src/tests/Tooltip.test.tsx | 37 +++++++++++ 6 files changed, 164 insertions(+) create mode 100644 src/scenarios/Tooltip.scenario.tsx create mode 100644 src/tests/Tooltip.test.tsx diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index e60fa6f..900d6b9 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -141,6 +141,15 @@ "second": "Orange", "third": "Green" } + }, + "tooltip-page": { + "title": "Tooltips", + "description": "A set of tooltips to test against.", + "information": "Hover over the elements in this page to view the tooltips.", + "no-permission": "You don't have permission to do this", + "more-information": "More info", + "more-information-msg": "For more information, click here:", + "really-long-text": "A really really long text example" } } } \ No newline at end of file diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json index b87656c..3869dd9 100644 --- a/src/i18n/locales/fr.json +++ b/src/i18n/locales/fr.json @@ -141,6 +141,15 @@ "second": "Orange", "third": "Vert" } + }, + "tooltip-page": { + "title": "Tooltip", + "description": "Testez des scénarios à l'aide d'une tooltips.", + "information": "Survolez les éléments de cette page pour afficher les tooltips.", + "no-permission": "Vous n'avez pas la permission de faire ça", + "more-information": "Plus d'informations", + "more-information-msg": "Pour plus d'informations, cliquez ici:", + "really-long-text": "Un exemple de texte vraiment très long" } } } \ No newline at end of file diff --git a/src/i18n/locales/pt-br.json b/src/i18n/locales/pt-br.json index 5b4dc03..31f256f 100644 --- a/src/i18n/locales/pt-br.json +++ b/src/i18n/locales/pt-br.json @@ -141,6 +141,15 @@ "second": "Laranja", "third": "Verde" } + }, + "tooltip-page": { + "title": "Tooltip", + "description": "Cenários para testes utilizando tooltip.", + "information": "Passe o mouse sobre os elementos desta página para ver o tooltip.", + "no-permission": "Você não tem permissão para fazer isso", + "more-information": "Mais informações", + "more-information-msg": "Para mais informações, clique aqui:", + "really-long-text": "Um exemplo de texto realmente muito longo" } } } \ No newline at end of file diff --git a/src/scenarios/Index.tsx b/src/scenarios/Index.tsx index dda9819..2cefb76 100644 --- a/src/scenarios/Index.tsx +++ b/src/scenarios/Index.tsx @@ -8,4 +8,5 @@ export { default as LoginForm } from './LoginForm.scenario' export { default as Notification } from './Notification.scenario' export { default as RadioButton } from './RadioButton.scenario' export { default as SliderPage } from './Slider.scenario' +export { default as TooltipPage } from './Tooltip.scenario' export { default as VariousInputs } from './VariousInputs.scenario' diff --git a/src/scenarios/Tooltip.scenario.tsx b/src/scenarios/Tooltip.scenario.tsx new file mode 100644 index 0000000..04e9b94 --- /dev/null +++ b/src/scenarios/Tooltip.scenario.tsx @@ -0,0 +1,99 @@ +import { Delete } from '@mui/icons-material' +import { + Button, + IconButton, + Link, + Stack, + Tooltip, + Typography +} from '@mui/material' +import { styled } from '@mui/material/styles' +import { type TooltipProps, tooltipClasses } from '@mui/material/Tooltip' +import React from 'react' +import { useTranslation } from 'react-i18next' + +import Layout from '../components/Layout' +import PageSetup from '../components/PageSetup' + +const TooltipPage = (): JSX.Element => { + const { t } = useTranslation() + + const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => ( + + ))(({ theme }) => ({ + [`& .${tooltipClasses.tooltip}`]: { + backgroundColor: theme.palette.background, + color: theme.palette.text, + maxWidth: 200, + fontSize: theme.typography.pxToRem(12), + border: '1px solid #dadde9' + } + })) + + return ( + + + + + + + + + + + + + {t('scenarios.tooltip-page.more-information-msg')}{' '} + + {'Testing Playground'} + + + } + > + + + +
+ + + {t('scenarios.tooltip-page.really-long-text')} + + +
+ + + ) +} + +export default TooltipPage diff --git a/src/tests/Tooltip.test.tsx b/src/tests/Tooltip.test.tsx new file mode 100644 index 0000000..628b55c --- /dev/null +++ b/src/tests/Tooltip.test.tsx @@ -0,0 +1,37 @@ +import { screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import React from 'react' +import { beforeEach, describe, expect, it } from 'vitest' + +import TestRenderer from './TestRenderer' +import TooltipPage from '../scenarios/Tooltip.scenario' + +describe('CheckBox component', () => { + beforeEach(() => { + sessionStorage.clear() + }) + + it('renders tootip when overing disabled button', async () => { + TestRenderer() + await userEvent.hover(screen.getByTestId('delete-button')) + await waitFor(() => { + expect(screen.getByRole('tooltip')).toBeVisible() + }) + }) + + it('renders tootip when overing active button', async () => { + TestRenderer() + await userEvent.hover(screen.getByTestId('more-info-button')) + await waitFor(() => { + expect(screen.getByRole('tooltip')).toBeVisible() + }) + }) + + it('renders tootip when overing truncated text', async () => { + TestRenderer() + await userEvent.hover(screen.getByTestId('text')) + await waitFor(() => { + expect(screen.getByRole('tooltip')).toBeVisible() + }) + }) +}) From 0df363541128e22f195579f3f18c278cf348b836 Mon Sep 17 00:00:00 2001 From: Eloi Taniguti Date: Fri, 10 Nov 2023 17:28:17 -0300 Subject: [PATCH 2/3] fix: address comments --- src/scenarios/Tooltip.scenario.tsx | 23 +++++------------------ src/tests/Tooltip.test.tsx | 6 +++--- 2 files changed, 8 insertions(+), 21 deletions(-) diff --git a/src/scenarios/Tooltip.scenario.tsx b/src/scenarios/Tooltip.scenario.tsx index 04e9b94..f7f5102 100644 --- a/src/scenarios/Tooltip.scenario.tsx +++ b/src/scenarios/Tooltip.scenario.tsx @@ -7,8 +7,6 @@ import { Tooltip, Typography } from '@mui/material' -import { styled } from '@mui/material/styles' -import { type TooltipProps, tooltipClasses } from '@mui/material/Tooltip' import React from 'react' import { useTranslation } from 'react-i18next' @@ -18,18 +16,6 @@ import PageSetup from '../components/PageSetup' const TooltipPage = (): JSX.Element => { const { t } = useTranslation() - const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => ( - - ))(({ theme }) => ({ - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: theme.palette.background, - color: theme.palette.text, - maxWidth: 200, - fontSize: theme.typography.pxToRem(12), - border: '1px solid #dadde9' - } - })) - return ( { - + <> {t('scenarios.tooltip-page.more-information-msg')}{' '} { > {'Testing Playground'} - + } > - +
{ sessionStorage.clear() }) - it('renders tootip when overing disabled button', async () => { + it('renders tooltip when hovering disabled button', async () => { TestRenderer() await userEvent.hover(screen.getByTestId('delete-button')) await waitFor(() => { @@ -19,7 +19,7 @@ describe('CheckBox component', () => { }) }) - it('renders tootip when overing active button', async () => { + it('renders tooltip when hovering active button', async () => { TestRenderer() await userEvent.hover(screen.getByTestId('more-info-button')) await waitFor(() => { @@ -27,7 +27,7 @@ describe('CheckBox component', () => { }) }) - it('renders tootip when overing truncated text', async () => { + it('renders tooltip when hovering truncated text', async () => { TestRenderer() await userEvent.hover(screen.getByTestId('text')) await waitFor(() => { From c601d55528ae9991f69a45f93596bc629d065b00 Mon Sep 17 00:00:00 2001 From: Eloi Taniguti Date: Fri, 10 Nov 2023 17:32:14 -0300 Subject: [PATCH 3/3] fix: address comments --- src/scenarios/Tooltip.scenario.tsx | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/src/scenarios/Tooltip.scenario.tsx b/src/scenarios/Tooltip.scenario.tsx index f7f5102..cb3eaa7 100644 --- a/src/scenarios/Tooltip.scenario.tsx +++ b/src/scenarios/Tooltip.scenario.tsx @@ -61,23 +61,16 @@ const TooltipPage = (): JSX.Element => { -
- - - {t('scenarios.tooltip-page.really-long-text')} - - -
+ + {t('scenarios.tooltip-page.really-long-text')} + + )