{direction === CollapsibleDirection.Left ? (
<>
-
- {prefix}
-
+ {prefix && (
+
+ {prefix}
+
+ )}
{title}
-
-
- {suffix}
+ {suffix && (
+
+ {suffix}
+
+ )}
) : (
diff --git a/src/components/dls/IconContainer/IconContainer.module.scss b/src/components/dls/IconContainer/IconContainer.module.scss
index 684a6bfdf9..08dca02b2e 100644
--- a/src/components/dls/IconContainer/IconContainer.module.scss
+++ b/src/components/dls/IconContainer/IconContainer.module.scss
@@ -1,11 +1,11 @@
-@use "src/styles/breakpoints";
+@use 'src/styles/breakpoints';
.container {
display: flex;
align-items: center;
}
-.container[dir="rtl"][data-auto-flip-icon="true"] {
+.container[dir='rtl'][data-auto-flip-icon='true'] {
> svg {
transform: scaleX(-1);
}
@@ -29,6 +29,13 @@
}
}
+.accentColor {
+ > svg path {
+ color: var(--color-daily-progress);
+ fill: var(--color-daily-progress);
+ }
+}
+
.xsmallIcon {
> svg {
width: 16px;
diff --git a/src/components/dls/IconContainer/IconContainer.tsx b/src/components/dls/IconContainer/IconContainer.tsx
index c1b564ca3f..50de1ebcf7 100644
--- a/src/components/dls/IconContainer/IconContainer.tsx
+++ b/src/components/dls/IconContainer/IconContainer.tsx
@@ -11,6 +11,7 @@ export enum IconColor {
primary = 'primary',
secondary = 'secondary',
tertiary = 'tertiary',
+ accent = 'accent',
}
export enum IconSize {
Xsmall = 'xsmall',
@@ -44,6 +45,7 @@ const IconContainer = ({
(shouldForceSetColors && color === IconColor.default) || color === IconColor.primary,
[styles.secondaryColor]: shouldForceSetColors && color === IconColor.secondary,
[styles.tertiaryColor]: shouldForceSetColors && color === IconColor.tertiary,
+ [styles.accentColor]: shouldForceSetColors && color === IconColor.accent,
[styles.xsmallIcon]: size === IconSize.Xsmall,
[styles.smallIcon]: size === IconSize.Small,
[styles.mediumIcon]: size === IconSize.Medium,
diff --git a/src/hooks/useGetContinueReadingUrl.ts b/src/hooks/useGetContinueReadingUrl.ts
new file mode 100644
index 0000000000..b6decd0fca
--- /dev/null
+++ b/src/hooks/useGetContinueReadingUrl.ts
@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import useGetRecentlyReadVerseKeys from '@/hooks/auth/useGetRecentlyReadVerseKeys';
+import { selectLastReadVerseKey } from '@/redux/slices/QuranReader/readingTracker';
+import { getChapterWithStartingVerseUrl } from '@/utils/navigation';
+
+/**
+ * A hook that gets the continue reading URL for the user.
+ * It tries multiple sources in order of priority:
+ * 1. Most recent reading session
+ * 2. Redux lastReadVerse
+ * 3. Default to first surah
+ *
+ * @returns {string} The continue reading URL
+ */
+const useGetContinueReadingUrl = (): string => {
+ const lastReadVerseFromRedux = useSelector(selectLastReadVerseKey);
+ const { recentlyReadVerseKeys } = useGetRecentlyReadVerseKeys(false);
+
+ const continueReadingUrl = useMemo(() => {
+ // First, try to use the most recent reading session
+ const lastReadSession = recentlyReadVerseKeys?.[0];
+ if (lastReadSession) {
+ return getChapterWithStartingVerseUrl(`${lastReadSession.surah}:${lastReadSession.ayah}`);
+ }
+
+ // Fallback to Redux lastReadVerse
+ if (lastReadVerseFromRedux?.verseKey) {
+ return getChapterWithStartingVerseUrl(lastReadVerseFromRedux.verseKey);
+ }
+
+ // Default to first surah
+ return getChapterWithStartingVerseUrl('1:1');
+ }, [recentlyReadVerseKeys, lastReadVerseFromRedux]);
+
+ return continueReadingUrl;
+};
+
+export default useGetContinueReadingUrl;
diff --git a/src/redux/slices/navbar.ts b/src/redux/slices/navbar.ts
index e572ce1386..27603a06f2 100644
--- a/src/redux/slices/navbar.ts
+++ b/src/redux/slices/navbar.ts
@@ -84,5 +84,7 @@ export const {
export const selectNavbar = (state: RootState) => state.navbar;
export const selectIsSearchDrawerOpen = (state: RootState) => state.navbar.isSearchDrawerOpen;
+export const selectIsNavigationDrawerOpen = (state: RootState) =>
+ state.navbar.isNavigationDrawerOpen;
export default navbarSlice.reducer;
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 62150e17be..a77ab1fce7 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -128,7 +128,7 @@ blockquote:before,
blockquote:after,
q:before,
q:after {
- content: "";
+ content: '';
content: none;
}
@@ -137,15 +137,15 @@ table {
border-spacing: 0;
}
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
-webkit-appearance: none;
-moz-appearance: none;
}
-input[type="search"] {
+input[type='search'] {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-sizing: content-box;
@@ -361,8 +361,8 @@ html input[disabled] {
* Known issue: excess padding remains in IE 6.
*/
-input[type="checkbox"],
-input[type="radio"] {
+input[type='checkbox'],
+input[type='radio'] {
box-sizing: border-box; /* 1 */
padding-block-start: 0;
padding-block-end: 0;
@@ -378,7 +378,7 @@ input[type="radio"] {
* (include '-moz' to future-proof).
*/
-input[type="search"] {
+input[type='search'] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
@@ -390,8 +390,8 @@ input[type="search"] {
* on OS X.
*/
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index a7d9c8fa1f..9f7200e8a7 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -1,7 +1,7 @@
-@use "./themes/light";
-@use "./themes/dark";
-@use "./themes/sepia";
-@use "./shades";
+@use './themes/light';
+@use './themes/dark';
+@use './themes/sepia';
+@use './shades';
/** System theme (auto-detects OS light/dark mode), other themes extend this one */
:root {
@@ -24,6 +24,7 @@
--spacing-medium2-px: 20px;
--spacing-medium3-px: 24px;
--spacing-large-px: 30px;
+ --spacing-large2-px: 35px;
--spacing-xlarge-px: 40px;
--spacing-xxlarge-px: 50px;
--spacing-mega-px: 100px;
@@ -37,6 +38,7 @@
--font-size-xlarge: 1.5rem;
--font-size-jumbo: 2rem;
+ --font-size-xxsmall-px: 12px;
--font-size-xsmall-px: 14px;
--font-size-small-px: 16px;
--font-size-medium-px: 18px;
@@ -59,7 +61,7 @@
--font-weight-bold: 700;
--font-weight-extra-bold: 800;
- --font-family-figtree: "Figtree", sans-serif;
+ --font-family-figtree: 'Figtree', sans-serif;
--border-radius-sharp: 0;
--border-radius-pill: 20rem;
@@ -108,16 +110,16 @@
}
/** Light Theme */
-[data-theme="light"] {
+[data-theme='light'] {
@include light.mode;
}
/** Dark Theme */
-[data-theme="dark"] {
+[data-theme='dark'] {
@include dark.mode;
}
/** Sepia Theme */
-[data-theme="sepia"] {
+[data-theme='sepia'] {
@include sepia.mode;
}
diff --git a/src/styles/themes/_dark.scss b/src/styles/themes/_dark.scss
index 146858c842..9163c706b0 100644
--- a/src/styles/themes/_dark.scss
+++ b/src/styles/themes/_dark.scss
@@ -1,4 +1,4 @@
-@use "src/styles/shades";
+@use 'src/styles/shades';
@mixin mode {
--color-primary-faded: #fff;
@@ -60,6 +60,7 @@
--color-highlight: #2ca4ab;
--shadow-small: 0px 2px 4px var(--shade-9);
+ --shadow-flat: 0px 0px 8px var(--shade-9);
--shadow-normal: 0px 4px 8px var(--shade-9);
--shadow-medium: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
--shadow-large: 0 5px 10px var(--shade-9);
diff --git a/src/styles/themes/_light.scss b/src/styles/themes/_light.scss
index 4b041122b9..3308eb35ca 100644
--- a/src/styles/themes/_light.scss
+++ b/src/styles/themes/_light.scss
@@ -1,4 +1,4 @@
-@use "src/styles/shades";
+@use 'src/styles/shades';
@mixin mode {
--color-primary-faded: #fff;
@@ -67,6 +67,7 @@
--shadow-small: 0px 2px 4px rgba(0, 0, 0, 0.1);
--shadow-small-new: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
+ --shadow-flat: 0px 0px 8px rgba(0, 0, 0, 0.12);
--shadow-normal: 0px 4px 8px rgba(0, 0, 0, 0.12);
--shadow-medium: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
--shadow-large: 0 5px 10px rgba(0, 0, 0, 0.12);
diff --git a/src/styles/themes/_sepia.scss b/src/styles/themes/_sepia.scss
index d45bf0c65c..569f2a657e 100644
--- a/src/styles/themes/_sepia.scss
+++ b/src/styles/themes/_sepia.scss
@@ -1,4 +1,4 @@
-@use "src/styles/shades";
+@use 'src/styles/shades';
@mixin mode {
--color-primary-faded: #fff;
@@ -60,6 +60,7 @@
--color-highlight: #50e3c2;
--shadow-small: 0px 2px 4px rgba(0, 0, 0, 0.1);
+ --shadow-flat: 0px 0px 8px rgba(0, 0, 0, 0.12);
--shadow-normal: 0px 4px 8px rgba(0, 0, 0, 0.12);
--shadow-medium: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
--shadow-large: 0 5px 10px rgba(0, 0, 0, 0.12);
@@ -78,7 +79,7 @@
--color-grey-icons: #d8c6a5;
--color-grey-icons-new: #7c756a;
- --color-daily-progress: #ced4da;
+ --color-daily-progress: #ccb996;
--color-separators: #f8ebd5;
--color-separators-new: #f8ebd5;
--color-blue-buttons-and-icons: #72603f;
diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
index ee86086a18..92f50101bf 100644
--- a/src/utils/navigation.ts
+++ b/src/utils/navigation.ts
@@ -39,6 +39,29 @@ export const AUTH_ROUTES = [
ROUTES.COMPLETE_SIGNUP,
];
+export const EXTERNAL_ROUTES = {
+ QURAN_REFLECT: 'https://quranreflect.com',
+ SUNNAH: 'https://sunnah.com',
+ NUQAYAH: 'https://nuqayah.com',
+ LEGACY_QURAN_COM: 'https://legacy.quran.com',
+ CORPUS_QURAN_COM: 'https://corpus.quran.com',
+ QURAN_ANDROID:
+ 'https://play.google.com/store/apps/details?id=com.quran.labs.androidquran&hl=en&pli=1',
+ QURAN_IOS:
+ 'https://apps.apple.com/us/app/quran-by-quran-com-%D9%82%D8%B1%D8%A2%D9%86/id1118663303',
+ FEEDBACK: 'https://feedback.quran.com',
+ QURAN_FOUNDATION: 'https://quran.foundation',
+};
+
+export const QURAN_URL = 'https://quran.com';
+export const LEARNING_PLANS_URL = '/learning-plans';
+export const RADIO_URL = '/radio';
+export const RECITERS_URL = '/reciters';
+export const ABOUT_US_URL = '/about-us';
+export const DEVELOPERS_URL = '/developers';
+export const PRODUCT_UPDATES_URL = '/product-updates';
+export const SUPPORT_URL = '/support';
+
/**
* Get the href link to a verse.
*
diff --git a/tests/auth.setup.ts b/tests/auth.setup.ts
index ee3ad2fc59..ff62b7bb91 100644
--- a/tests/auth.setup.ts
+++ b/tests/auth.setup.ts
@@ -32,7 +32,10 @@ setup('authenticate', async ({ page }) => {
// Wait for redirect to home and visible profile avatar
await page.waitForURL(/\/$/);
- await expect(page.getByTestId('profile-avatar-button')).toBeVisible();
+ const profileAvatarButton = page.getByTestId('profile-avatar-button');
+ await expect(profileAvatarButton).toHaveCount(2);
+ await expect(profileAvatarButton.nth(0)).toBeVisible();
+ await expect(profileAvatarButton.nth(1)).toBeVisible();
// Save signed-in state to 'authFile'.
await page.context().storageState({ path: authFile });
diff --git a/tests/integration/authentification/login.spec.ts b/tests/integration/authentification/login.spec.ts
index b273e504bc..89850303eb 100644
--- a/tests/integration/authentification/login.spec.ts
+++ b/tests/integration/authentification/login.spec.ts
@@ -30,7 +30,10 @@ test(
await expect(page).toHaveURL(/\/$/);
// We should be logged in
- await expect(page.getByTestId('profile-avatar-button')).toBeVisible();
+ const profileAvatarButton = page.getByTestId('profile-avatar-button');
+ await expect(profileAvatarButton).toHaveCount(2);
+ await expect(profileAvatarButton.nth(0)).toBeVisible();
+ await expect(profileAvatarButton.nth(1)).toBeVisible();
},
);
diff --git a/tests/integration/content-display-and-reading/translations/translation-selection-and-display.spec.ts b/tests/integration/content-display-and-reading/translations/translation-selection-and-display.spec.ts
index c98fcbb209..793d841fcc 100644
--- a/tests/integration/content-display-and-reading/translations/translation-selection-and-display.spec.ts
+++ b/tests/integration/content-display-and-reading/translations/translation-selection-and-display.spec.ts
@@ -41,7 +41,7 @@ test.describe('Translation Selection', () => {
await page.getByLabel('Change Translation').click();
// 2. Check that the settings drawer is opened and the translations card is clicked
- const settingsBody = page.getByTestId('settings-drawer-container');
+ const settingsBody = page.getByTestId('settings-drawer-body');
// check that the translations list is visible
await expect(settingsBody.getByText(TRANSLATION_KHATTAB.resourceName)).toBeVisible();
@@ -58,7 +58,7 @@ test.describe('Translation Selection', () => {
await page.getByLabel('Change Translation').click();
// 2. In the settings-drawer-body, we should see the translations list
- const settingsBody = page.getByTestId('settings-drawer-container');
+ const settingsBody = page.getByTestId('settings-drawer-body');
// 3. Type "French" in the search input
const searchInput = settingsBody.getByPlaceholder('Search Translations');
@@ -90,7 +90,7 @@ test.describe('Translation Display and Persistence', () => {
await page.getByLabel('Change Translation').click();
// 2. In the settings-drawer-body, we should see the translations list
- const settingsBody = page.getByTestId('settings-drawer-container');
+ const settingsBody = page.getByTestId('settings-drawer-body');
// 3. Select two translations
await settingsBody.getByText(TRANSLATION_KHATTAB.resourceName).click(); // uncheck
@@ -126,7 +126,7 @@ test.describe('Translation Display and Persistence', () => {
await page.getByLabel('Change Translation').click();
// 3. In the settings-drawer-body, we should see the translations list
- const settingsBody = page.getByTestId('settings-drawer-container');
+ const settingsBody = page.getByTestId('settings-drawer-body');
// 4. Select two translations (Dr. Mustafa Khattab is selected by default)
await settingsBody.getByText(TRANSLATION_HAMIDULLAH.resourceName).click(); // check
diff --git a/tests/integration/language/language-content.spec.ts b/tests/integration/language/language-content.spec.ts
index 5371b5e102..2c5025838a 100644
--- a/tests/integration/language/language-content.spec.ts
+++ b/tests/integration/language/language-content.spec.ts
@@ -16,16 +16,19 @@ test(
async ({ page }) => {
await expect(page.locator('html')).not.toHaveAttribute('dir', 'rtl');
- // 1. Open the language selector menu
+ // 1. Click on the menu
+ await page.getByTestId('open-navigation-drawer').click();
+ // 2. Click on the language selector nav bar trigger
await page.getByTestId('language-selector-button').click();
-
- // 2. select Arabic and wait for navigation to /ar
+ // 3. Grab the language container
+ const languageContainer = page.getByTestId('language-container');
+ // 4. select Arabic and wait for navigation to /ar
await Promise.all([
+ languageContainer.getByRole('button', { name: 'العربية' }).click(),
page.waitForURL('**/ar', { waitUntil: 'networkidle' }),
- page.getByRole('menuitem', { name: 'العربية' }).click(),
]);
- // 3. Make sure the html dir attribute is set to rtl
+ // 5. Make sure the html dir attribute is set to rtl
await expect(page.locator('html')).toHaveAttribute('dir', 'rtl');
},
);
@@ -34,13 +37,16 @@ test(
'Surah name are displayed in the selected language on the homepage',
{ tag: ['@language', '@slow'] },
async ({ page }) => {
- // 1. Open the language selector menu
+ // 1. Click on the menu
+ await page.getByTestId('open-navigation-drawer').click();
+ // 2. Click on the language selector nav bar trigger
await page.getByTestId('language-selector-button').click();
-
- // 2. select Spanish and wait for navigation to /es
+ // 3. Grab the language container
+ const languageContainer = page.getByTestId('language-container');
+ // 4. select Spanish and wait for navigation to /es
await Promise.all([
+ languageContainer.getByRole('button', { name: 'Español' }).click(),
page.waitForURL('**/es', { waitUntil: 'networkidle' }),
- page.getByRole('menuitem', { name: 'Español' }).click(),
]);
const surah108 = page.getByTestId('chapter-108-container');
@@ -58,16 +64,19 @@ test(
'User interface is displayed in the selected language',
{ tag: ['@language', '@slow'] },
async ({ page }) => {
- // 1. Open the language selector menu
+ // 1. Click on the menu
+ await page.getByTestId('open-navigation-drawer').click();
+ // 2. Click on the language selector nav bar trigger
await page.getByTestId('language-selector-button').click();
-
- // 2. Select French and wait for navigation to /fr
+ // 3. Grab the language container
+ const languageContainer = page.getByTestId('language-container');
+ // 4. Select French and wait for navigation to /fr
await Promise.all([
+ languageContainer.getByRole('button', { name: 'Français' }).click(),
page.waitForURL('**/fr', { waitUntil: 'networkidle' }),
- page.getByRole('menuitem', { name: 'Français' }).click(),
]);
- // 3. Make sure some UI elements are displayed in French
+ // 5. Make sure some UI elements are displayed in French
await expect(page.getByTestId('open-search-drawer')).toHaveAttribute(
'aria-label',
'Rechercher',
@@ -82,7 +91,7 @@ test(
// Open the settings drawer and check some elements are in French
await homePage.openSettingsDrawer();
- const settingsBody = page.getByTestId('settings-drawer-container');
+ const settingsBody = page.getByTestId('settings-drawer-body');
await expect(settingsBody).toBeVisible();
@@ -109,12 +118,17 @@ test(
tag: ['@nav', '@language', '@slow'],
},
async ({ page }) => {
+ // 1. Click on the menu
+ await page.getByTestId('open-navigation-drawer').click();
+ // 2. Click on the language selector nav bar trigger
await page.getByTestId('language-selector-button').click();
+ // 3. Grab the language container
+ const languageContainer = page.getByTestId('language-container');
// Select Spanish and wait for navigation to /es
await Promise.all([
+ languageContainer.getByRole('button', { name: 'Español' }).click(),
page.waitForURL('**/es', { waitUntil: 'networkidle' }),
- page.getByRole('menuitem', { name: 'Español' }).click(),
]);
await expect(page.locator('html')).toHaveAttribute('lang', 'es');
diff --git a/tests/integration/language/language-persistance.spec.ts b/tests/integration/language/language-persistance.spec.ts
index 8c381ad0ef..d89cb10f69 100644
--- a/tests/integration/language/language-persistance.spec.ts
+++ b/tests/integration/language/language-persistance.spec.ts
@@ -13,29 +13,33 @@ test(
'Language selection persists across sessions and pages',
{ tag: ['@persistence', '@language', '@slow'] },
async ({ page, context }) => {
- // 1. Open the language selector menu
+ // 1. Click on the menu
+ await page.getByTestId('open-navigation-drawer').click();
+ // 2. Click on the language selector nav bar trigger
await page.getByTestId('language-selector-button').click();
+ // 3. Grab the language container
+ const languageContainer = page.getByTestId('language-container');
- // 2. select Spanish and wait for navigation to /es
+ // 4. select Spanish and wait for navigation to /es
await Promise.all([
+ languageContainer.getByRole('button', { name: 'Español' }).click(),
page.waitForURL('**/es', { waitUntil: 'networkidle' }),
- page.getByRole('menuitem', { name: 'Español' }).click(),
]);
await expect(page.locator('html')).toHaveAttribute('lang', 'es');
- // 3. Navigate to surah An Naml and make sure we are still on /es/27
+ // 5. Navigate to surah An Naml and make sure we are still on /es/27
await Promise.all([
page.waitForURL('**/es/27'),
page.getByTestId('chapter-27-container').click(),
]);
await expect(page).toHaveURL(/\/es\/27/);
- // 4. Now create a new context and a new page to simulate a new session
+ // 6. Now create a new context and a new page to simulate a new session
const newPage = await context.newPage();
await newPage.goto('/');
- // 5. Make sure we are still on the Spanish version of the site (/es)
+ // 7. Make sure we are still on the Spanish version of the site (/es)
await expect(newPage).toHaveURL(/\/es/);
},
);
diff --git a/tests/integration/language/language-selector.spec.ts b/tests/integration/language/language-selector.spec.ts
index 602d87c524..ee88f0483a 100644
--- a/tests/integration/language/language-selector.spec.ts
+++ b/tests/integration/language/language-selector.spec.ts
@@ -17,13 +17,17 @@ test(
},
async ({ page }) => {
// 1. make sure the language selector items are not visible
- await expect(page.getByRole('menuitem', { name: 'English' })).not.toBeVisible();
- // 2. Click on the language selector nav bar trigger
+ await expect(page.getByRole('button', { name: 'English' })).not.toBeVisible();
+ // 2. Click on the menu
+ await page.getByTestId('open-navigation-drawer').click();
+ // 3. Click on the language selector nav bar trigger
await page.getByTestId('language-selector-button').click();
- // 3. Make sure all language selector items are visible
+ // 4. Grab the language container
+ const languageContainer = page.getByTestId('language-container');
+ // 5. Make sure all language selector items are visible (scoped to language container)
await Promise.all(
languages.map(async (language) => {
- await expect(page.getByRole('menuitem', { name: language })).toBeVisible();
+ await expect(languageContainer.getByRole('button', { name: language })).toBeVisible();
}),
);
},
@@ -58,11 +62,15 @@ test(
async ({ page }) => {
// 1. Make sure we are on the English version
await expect(page).toHaveURL('/');
- // 2. Open the language selector menu
+ // 2. Click on the menu
+ await page.getByTestId('open-navigation-drawer').click();
+ // 3. Click on the language selector nav bar trigger
await page.getByTestId('language-selector-button').click();
- // 3. select the Bengali language and make sure we are navigated to /bn
+ // 4. Grab the language container
+ const languageContainer = page.getByTestId('language-container');
+ // 5. select the Bengali language and make sure we are navigated to /bn
await Promise.all([
- page.getByRole('menuitem', { name: 'বাংলা' }).click(),
+ languageContainer.getByRole('button', { name: 'বাংলা' }).click(),
page.waitForURL('/bn'),
]);
},
@@ -74,17 +82,19 @@ test(
async ({ page }) => {
// 1. Make sure the lang attribute is set to en on the homepage
await expect(page.locator('html')).toHaveAttribute('lang', 'en');
-
- // 2. Open the language selector menu
+ // 2. Click on the menu
+ await page.getByTestId('open-navigation-drawer').click();
+ // 3. Click on the language selector nav bar trigger
await page.getByTestId('language-selector-button').click();
-
- // 3. select French and wait for navigation to /fr
+ // 4. Grab the language container
+ const languageContainer = page.getByTestId('language-container');
+ // 5. select French and wait for navigation to /fr
await Promise.all([
+ languageContainer.getByRole('button', { name: 'Français' }).click(),
page.waitForURL('**/fr', { waitUntil: 'networkidle' }),
- page.getByRole('menuitem', { name: 'Français' }).click(),
]);
- // 4. Make sure the lang attribute is set to fr
+ // 6. Make sure the lang attribute is set to fr
await expect(page.locator('html')).toHaveAttribute('lang', 'fr');
},
);
diff --git a/tests/integration/loggedin/profile.spec.ts b/tests/integration/loggedin/profile.spec.ts
index 8f4d590474..22ebb648c3 100644
--- a/tests/integration/loggedin/profile.spec.ts
+++ b/tests/integration/loggedin/profile.spec.ts
@@ -14,7 +14,9 @@ test(
'Profile icon should show up in the navbar',
{ tag: ['@slow', '@auth', '@login-user'] },
async ({ page }) => {
- const profileIcon = page.getByTestId('profile-avatar-button');
- await expect(profileIcon).toBeVisible();
+ const profileAvatarButton = page.getByTestId('profile-avatar-button');
+ await expect(profileAvatarButton).toHaveCount(2);
+ await expect(profileAvatarButton.nth(0)).toBeVisible();
+ await expect(profileAvatarButton.nth(1)).toBeVisible();
},
);
diff --git a/tests/integration/navigation-and-general-structure/navbar-and-header/general.spec.ts b/tests/integration/navigation-and-general-structure/navbar-and-header/general.spec.ts
index 95826f1a4d..df47b84c97 100644
--- a/tests/integration/navigation-and-general-structure/navbar-and-header/general.spec.ts
+++ b/tests/integration/navigation-and-general-structure/navbar-and-header/general.spec.ts
@@ -13,8 +13,8 @@ test(
'Clickable quran.com logo with homepage redirect',
{ tag: ['@slow', '@navbar'] },
async ({ page }) => {
- // Click on the quran.com logo of the navbar (the second one, the first is in the drawer)
- const logoElement = page.getByTitle('Quran.com').nth(1);
+ // Click on the quran.com logo of the navbar (the first one, the second is in the drawer)
+ const logoElement = page.getByTitle('Quran.com').nth(0);
await logoElement.click();
// Make sure we are redirected to the homepage
diff --git a/tests/integration/navigation-and-general-structure/navbar-and-header/settings-drawer.spec.ts b/tests/integration/navigation-and-general-structure/navbar-and-header/settings-drawer.spec.ts
index 9c4fbf9bb1..1ed2754204 100644
--- a/tests/integration/navigation-and-general-structure/navbar-and-header/settings-drawer.spec.ts
+++ b/tests/integration/navigation-and-general-structure/navbar-and-header/settings-drawer.spec.ts
@@ -17,11 +17,11 @@ test(
async ({ page }) => {
// 1. Make sure the drawer has no children before opening it
// Ensure the drawer has no children before opening it
- await expect(page.getByTestId('settings-drawer-container')).not.toBeVisible();
+ await expect(page.getByTestId('settings-drawer-body')).not.toBeVisible();
// 2. Click the settings drawer trigger
await homePage.openSettingsDrawer();
// 3. Make sure the settings drawer is visible
- await expect(page.getByTestId('settings-drawer-container')).toBeVisible();
+ await expect(page.getByTestId('settings-drawer-body')).toBeVisible();
},
);
@@ -35,13 +35,13 @@ test(
// 1. Open the settings drawer first
await homePage.openSettingsDrawer();
- await expect(page.getByTestId('settings-drawer-container')).toBeVisible();
+ await expect(page.getByTestId('settings-drawer-body')).toBeVisible();
// 2. Press the Escape key to close the drawer
await page.keyboard.press('Escape');
// 3. Make sure the settings drawer is not visible anymore
- await expect(page.getByTestId('settings-drawer-container')).not.toBeVisible();
+ await expect(page.getByTestId('settings-drawer-body')).not.toBeVisible();
},
);
@@ -58,12 +58,12 @@ test(
// 1. Open the settings drawer first
await homePage.openSettingsDrawer();
- await expect(page.getByTestId('settings-drawer-container')).toBeVisible();
+ await expect(page.getByTestId('settings-drawer-body')).toBeVisible();
// 2. Click outside the drawer
await page.click('body');
// 3. Make sure the settings drawer is no longer visible
- await expect(page.getByTestId('settings-drawer-container')).not.toBeVisible();
+ await expect(page.getByTestId('settings-drawer-body')).not.toBeVisible();
},
);
diff --git a/tests/integration/navigation-and-general-structure/navbar-and-header/sign-in-button.spec.ts b/tests/integration/navigation-and-general-structure/navbar-and-header/sign-in-button.spec.ts
index a54e0deaba..04a9f69852 100644
--- a/tests/integration/navigation-and-general-structure/navbar-and-header/sign-in-button.spec.ts
+++ b/tests/integration/navigation-and-general-structure/navbar-and-header/sign-in-button.spec.ts
@@ -15,7 +15,10 @@ test(
async ({ page }) => {
// Click on the Sign In Button and verify it goes to the /login page
const signInButton = page.getByLabel('Sign in');
- await signInButton.click();
+ await expect(signInButton).toHaveCount(2);
+ await expect(signInButton.nth(0)).toBeVisible();
+ await expect(signInButton.nth(1)).toBeVisible();
+ await signInButton.nth(0).click();
// Make sure we are redirected to the /login page
await expect(page).toHaveURL(/\/login/);
diff --git a/tests/integration/navigation-and-general-structure/sidebar/navigation-drawer.spec.ts b/tests/integration/navigation-and-general-structure/sidebar/navigation-drawer.spec.ts
index e27ee07694..1f2f00d89f 100644
--- a/tests/integration/navigation-and-general-structure/sidebar/navigation-drawer.spec.ts
+++ b/tests/integration/navigation-and-general-structure/sidebar/navigation-drawer.spec.ts
@@ -35,9 +35,10 @@ test(
// 2. Make sure the navigation drawer is visible after opening it
await expect(page.getByTestId('navigation-drawer-body')).toBeVisible();
+ const navigationDrawer = page.getByTestId('navigation-drawer');
// 3. Click on the close drawer button
- await page.getByLabel('Close Drawer').first().click();
+ await navigationDrawer.getByLabel('Close Drawer').click();
// 4. Make sure the navigation drawer is no longer visible after closing it
await expect(page.getByTestId('navigation-drawer-body')).not.toBeVisible();
@@ -107,6 +108,7 @@ test(
await expect(page.getByTestId('navigation-drawer-body')).toBeVisible();
const drawer = page.getByTestId('navigation-drawer-body');
+ await page.getByTestId('navigation-links-our-projects').click();
expect(
await drawer.getByRole('link', { name: 'Quran For Android' }).getAttribute('href'),
).toContain('play.google.com');
@@ -127,31 +129,32 @@ test(
await expect(page.getByTestId('navigation-drawer-body')).toBeVisible();
// 2. Click on the donate monthly button
- await page.getByText('Donate monthly').click();
+ const newPagePromise = page.context().waitForEvent('page');
+ await page.getByText('Become A Monthly Donor').click();
// 3. Make sure a new tab is opened with the correct url
- const newPage = await page.context().waitForEvent('page');
+ const newPage = await newPagePromise;
await newPage.waitForLoadState();
- await expect(newPage).toHaveURL(/give\.quran\.foundation\/give/);
+ await expect(newPage).toHaveURL(/donate\.quran\.foundation/);
},
);
const drawerLinks = [
// Main Navigation Links
- { text: 'Home', href: '/', target: '' },
+ { text: 'Read', href: '', target: '' },
+ { text: 'Learn', href: '/learning-plans', target: '' },
+ { text: 'My Quran', href: '/profile', target: '' },
{ text: 'Quran Radio', href: '/radio', target: '' },
{ text: 'Reciters', href: '/reciters', target: '' },
{ text: 'About Us', href: '/about-us', target: '' },
+
+ // More
{ text: 'Developers', href: '/developers', target: '' },
{ text: 'Product Updates', href: '/product-updates', target: '' },
{ text: 'Feedback', href: 'https://feedback.quran.com/', target: '_blank' },
{ text: 'Help', href: '/support', target: '' },
- // Fundraising Banner Links
- { text: 'Learn more', href: 'https://donate.quran.foundation', target: '_blank' },
-
- // Our Projects Links
- { text: 'Quran.Foundation', href: 'https://quran.foundation', target: '_blank' },
+ // Our Projects
{ text: 'Quran.com', href: 'https://quran.com', target: '_blank' },
{
text: 'Quran For Android',
@@ -168,4 +171,7 @@ const drawerLinks = [
{ text: 'Nuqayah.com', href: 'https://nuqayah.com/', target: '_blank' },
{ text: 'Legacy.quran.com', href: 'https://legacy.quran.com', target: '_blank' },
{ text: 'Corpus.quran.com', href: 'https://corpus.quran.com', target: '_blank' },
+
+ // Fundraising Banner Links
+ { text: 'Become A Monthly Donor', href: 'https://donate.quran.foundation', target: '_blank' },
];
diff --git a/tests/integration/quran-reader/settings-gear.spec.ts b/tests/integration/quran-reader/settings-gear.spec.ts
index 37ad72e923..978c0352a2 100644
--- a/tests/integration/quran-reader/settings-gear.spec.ts
+++ b/tests/integration/quran-reader/settings-gear.spec.ts
@@ -8,8 +8,8 @@ test('desktop: settings gear opens the settings drawer', async ({ page }) => {
await expect(settingsButtons.last()).toBeVisible();
await settingsButtons.last().click();
- await expect(page.locator('#settings-drawer-container')).toBeVisible();
- await expect(page.locator('#settings-drawer-body')).toBeVisible();
+ await expect(page.getByTestId('settings-drawer')).toBeVisible();
+ await expect(page.getByTestId('settings-drawer-body')).toBeVisible();
});
test('mobile: gear works before and after scroll (navbar hidden)', async ({ page }) => {
@@ -19,11 +19,11 @@ test('mobile: gear works before and after scroll (navbar hidden)', async ({ page
const settingsButtons = page.locator('#settings-button');
await expect(settingsButtons.first()).toBeVisible();
await settingsButtons.first().click();
- await expect(page.locator('#settings-drawer-container')).toBeVisible();
- await expect(page.locator('#settings-drawer-body')).toBeVisible();
+ await expect(page.getByTestId('settings-drawer')).toBeVisible();
+ await expect(page.getByTestId('settings-drawer-body')).toBeVisible();
await page
- .locator('#settings-drawer-container')
+ .getByTestId('settings-drawer')
.getByRole('button', { name: /close drawer/i })
.first()
.click();
@@ -32,6 +32,6 @@ test('mobile: gear works before and after scroll (navbar hidden)', async ({ page
await expect(settingsButtons.last()).toBeVisible();
await settingsButtons.last().click();
- await expect(page.locator('#settings-drawer-container')).toBeVisible();
- await expect(page.locator('#settings-drawer-body')).toBeVisible();
+ await expect(page.getByTestId('settings-drawer')).toBeVisible();
+ await expect(page.getByTestId('settings-drawer-body')).toBeVisible();
});
diff --git a/tests/integration/search-and-navigation/search-functionality/dedicated-search-page.spec.ts b/tests/integration/search-and-navigation/search-functionality/dedicated-search-page.spec.ts
index 604d8e281b..01151cb406 100644
--- a/tests/integration/search-and-navigation/search-functionality/dedicated-search-page.spec.ts
+++ b/tests/integration/search-and-navigation/search-functionality/dedicated-search-page.spec.ts
@@ -56,7 +56,7 @@ test.describe('Dedicated Search Page', () => {
]);
// We should see the "No results found" message
- const searchResults = page.getByTestId('search-body-container');
+ const searchResults = page.getByTestId('search-drawer-container');
await expect(searchResults.getByText('No results found')).toBeVisible();
},
);
@@ -72,8 +72,8 @@ test.describe('Dedicated Search Page', () => {
page.waitForResponse((response) => response.url().includes('/search')),
]);
- // 2. In the "search-body-container" div, we should see the "2:255" result
- const searchResults = page.getByTestId('search-body-container');
+ // 2. In the "search-drawer-container" div, we should see the "2:255" result
+ const searchResults = page.getByTestId('search-drawer-container');
await expect(searchResults.getByText('2:255')).toBeVisible();
},
);
diff --git a/tests/integration/search-and-navigation/search-functionality/search-drawer-history.spec.ts b/tests/integration/search-and-navigation/search-functionality/search-drawer-history.spec.ts
index 7081e44904..80c635c80f 100644
--- a/tests/integration/search-and-navigation/search-functionality/search-drawer-history.spec.ts
+++ b/tests/integration/search-and-navigation/search-functionality/search-drawer-history.spec.ts
@@ -37,7 +37,7 @@ test.describe('Search Drawer History', () => {
await searchBar.click();
// 2. Make sure the search input is focused
- const searchDrawer = page.getByTestId('search-drawer-container');
+ const searchDrawer = page.getByTestId('search-drawer-header');
await expect(searchDrawer.getByPlaceholder('Search')).toBeFocused();
},
);
@@ -51,7 +51,7 @@ test.describe('Search Drawer History', () => {
await searchBar.click();
// focus on the search input
- const searchDrawer = page.getByTestId('search-drawer-container');
+ const searchDrawer = page.getByTestId('search-drawer-header');
await searchDrawer.getByPlaceholder('Search').focus();
// fill the current focused element (the search input) and wait for API response
@@ -61,7 +61,7 @@ test.describe('Search Drawer History', () => {
]);
// 2. In the "search-results" div, we should see the "Juz 30" result
- const bodyContainer = page.getByTestId('search-body-container');
+ const bodyContainer = page.getByTestId('search-drawer-container');
await expect(bodyContainer.getByText('Juz 30')).toBeVisible();
@@ -74,7 +74,7 @@ test.describe('Search Drawer History', () => {
// 5. Click on the search bar again and make sure that we see "Juz 30" in the recent navigations
await searchBar.click();
- await expect(page.getByTestId('search-body-container').getByText('Juz 30')).toBeVisible();
+ await expect(page.getByTestId('search-drawer-container').getByText('Juz 30')).toBeVisible();
},
);
});