test: add visual tests to donations (#922)

hasadna · Nov 24, 2024 · 3a40387 · 3a40387
1 parent 935e443
commit 3a40387
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/src/layout/header/DonationButton.tsx b/src/layout/header/DonationButton.tsx
@@ -37,6 +37,8 @@ export const DonationButton = () => {
       <Modal
         open={open}
         onClose={onClose}
+        aria-modal="true"
+        role="dialog"
         sx={{
           color: 'text.primary', // Dynamically uses the theme’s text color
         }}

diff --git a/src/pages/DonateModal/DonateModal.tsx b/src/pages/DonateModal/DonateModal.tsx
@@ -24,6 +24,9 @@ const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose }) => {
     <Modal
       open={isVisible}
       onClose={onClose}
+      style={{ color: '#1498e5' }}
+      aria-modal="true"
+      role="dialog"
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
       sx={{

diff --git a/tests/visual.spec.ts b/tests/visual.spec.ts
@@ -106,6 +106,19 @@ test.describe('Visual Tests', () => {
       ),
     )
   })
+  test('donation modal should look good', async ({ page }) => {
+    await page.goto('/')
+    await page.getByLabel('לתרומות').click()
+    await page.locator('.MuiTypography-root').first().waitFor()
+    await eyes.check('donation modal', Target.region(page.getByRole('dialog')))
+  })
+  test('donation modal should look good in dark mode', async ({ page }) => {
+    await page.goto('/')
+    await page.getByLabel('עבור למצב כהה').click()
+    await page.getByLabel('לתרומות').click()
+    await page.locator('.MuiTypography-root').first().waitFor()
+    await eyes.check('donation modal dark mode', Target.region(page.getByRole('dialog')))
+  })
 })
 
 function setBatchName(eyes: Eyes) {