Merge pull request #39 from nearform/issue-23-tooltips

feat: add tooltip scenario

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"
     }
   }
 }

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"
     }
   }
 }

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"
     }
   }
 }

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'

src/scenarios/Tooltip.scenario.tsx

@@ -0,0 +1,79 @@
+import { Delete } from '@mui/icons-material'
+import {
+  Button,
+  IconButton,
+  Link,
+  Stack,
+  Tooltip,
+  Typography
+} from '@mui/material'
+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()
+
+  return (
+    <Layout>
+      <PageSetup
+        title={t('scenarios.tooltip-page.title')}
+        description={t('scenarios.tooltip-page.description')}
+        information={t('scenarios.tooltip-page.information')}
+      />
+      <Stack
+        direction='column'
+        justifyContent='center'
+        alignItems='center'
+        spacing={6}
+      >
+        <Tooltip
+          title={t('scenarios.tooltip-page.no-permission')}
+          arrow
+          placement='right'
+        >
+          <span data-testid='delete-button'>
+            <IconButton disabled>
+              <Delete />
+            </IconButton>
+          </span>
+        </Tooltip>
+
+        <Tooltip
+          arrow
+          placement='right'
+          title={
+            <>
+              {t('scenarios.tooltip-page.more-information-msg')}{' '}
+              <Link
+                color='inherit'
+                href='https://github.com/nearform/testing-playground'
+              >
+                {'Testing Playground'}
+              </Link>
+            </>
+          }
+        >
+          <Button variant='outlined' data-testid='more-info-button'>
+            {t('scenarios.tooltip-page.more-information')}
+          </Button>
+        </Tooltip>
+
+        <Tooltip
+          title={t('scenarios.tooltip-page.really-long-text')}
+          arrow
+          placement='right'
+          sx={{ width: '10rem' }}
+        >
+          <Typography noWrap data-testid='text'>
+            {t('scenarios.tooltip-page.really-long-text')}
+          </Typography>
+        </Tooltip>
+      </Stack>
+    </Layout>
+  )
+}
+
+export default TooltipPage

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 tooltip when hovering disabled button', async () => {
+    TestRenderer(<TooltipPage />)
+    await userEvent.hover(screen.getByTestId('delete-button'))
+    await waitFor(() => {
+      expect(screen.getByRole('tooltip')).toBeVisible()
+    })
+  })
+
+  it('renders tooltip when hovering active button', async () => {
+    TestRenderer(<TooltipPage />)
+    await userEvent.hover(screen.getByTestId('more-info-button'))
+    await waitFor(() => {
+      expect(screen.getByRole('tooltip')).toBeVisible()
+    })
+  })
+
+  it('renders tooltip when hovering truncated text', async () => {
+    TestRenderer(<TooltipPage />)
+    await userEvent.hover(screen.getByTestId('text'))
+    await waitFor(() => {
+      expect(screen.getByRole('tooltip')).toBeVisible()
+    })
+  })
+})