Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/improve e2e tests #2096

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feat/improve e2e tests #2096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3dd54b2
feat: run server if not running
3rg1s Feb 25, 2024
cdcb1fb
feat: retain trace on failures
3rg1s Feb 25, 2024
33bf814
feat: update spec files
3rg1s Feb 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,15 @@ import { devices } from '@playwright/test';
* See https://playwright.dev/docs/test-configuration.
*/
const config: PlaywrightTestConfig = {
// Run your local dev server before starting the tests
webServer: {
command: 'npm run dev',
url: 'http://127.0.0.1:3000',
reuseExistingServer: !process.env.CI,
stdout: 'ignore',
stderr: 'pipe',
},

testDir: './tests/integration',
/* Maximum time one test can run for. */
timeout: 30 * 1000,
Expand All @@ -31,7 +40,7 @@ const config: PlaywrightTestConfig = {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
trace: 'retain-on-failure',
},

/* Configure projects for major browsers */
Expand Down
6 changes: 1 addition & 5 deletions tests/integration/drawers/navigation-menu/drawer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,7 @@ test('Feedback item should open in a new tab', async ({ page }) => {
// 2. Make sure feedback.quran.com opens in a new tab
await Promise.all([
page.waitForEvent('popup'),
page
.locator(
'a:nth-child(11) .LinkContainer_anchor__bOj_o .NavigationDrawerItem_container__ZbHp6 .NavigationDrawerItem_innerContainer__KIZpr',
)
.click(), // Feedback nav item
page.locator('a', { hasText: 'Feedback' }).first().click(), // Feedback nav item
]);
});

Expand Down
8 changes: 4 additions & 4 deletions tests/integration/drawers/settings/drawer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ test.beforeEach(async ({ page }) => {
test('Settings drawer icon should open the drawer when clicked', async ({ page, context }) => {
const homepage = new Homepage(page, context);
// 1. Make sure the theme section is not visible
await expect(page.locator('button:has-text("Light")')).not.toBeVisible();
await expect(page.locator('button', { hasText: 'Light' })).not.toBeVisible();
// 2. Click the settings drawer trigger
await homepage.openSettingsDrawer();
// 3. Make sure the theme section is visible
await expect(page.locator('button:has-text("Light")')).toBeVisible();
await expect(page.locator('button:has-text("Sepia")')).toBeVisible();
await expect(page.locator('button:has-text("Dark")')).toBeVisible();
await expect(page.locator('button', { hasText: 'Light' })).toBeVisible();
await expect(page.locator('button', { hasText: 'Sepia' })).toBeVisible();
await expect(page.locator('button', { hasText: 'Dark' })).toBeVisible();
});
6 changes: 2 additions & 4 deletions tests/integration/drawers/settings/font-switcher.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ test('Selecting a non-default theme should persist the selected font', async ({
context,
}) => {
const homepage = new Homepage(page, context);
// we cannot access the local storage in webkit straight away so we need to wait for 1 second
await page.waitForTimeout(1000);
// 1. make sure code v1 and 16-line Mushaf are persisted by default
let persistedQuranReaderStyles = (await homepage.getPersistedValue(
'quranReaderStyles',
Expand All @@ -27,13 +25,13 @@ test('Selecting a non-default theme should persist the selected font', async ({
await page.locator('text=IndoPak').click();
// 4. Choose Indopak 15-line Mushaf
await page.locator('select[name="lines"]').selectOption(MushafLines.FifteenLines);
// 5. make sure indopak and 15-line Mushaf are persisted
// 5. Make sure indopak and 15-line Mushaf are persisted
persistedQuranReaderStyles = (await homepage.getPersistedValue(
'quranReaderStyles',
)) as QuranReaderStyles;
expect(persistedQuranReaderStyles.quranFont).toBe(QuranFont.IndoPak);
expect(persistedQuranReaderStyles.mushafLines).toBe(MushafLines.FifteenLines);
// 6. reload the page.
// 6. Reload the page.
await page.reload();
// 7. Open the settings drawer
await homepage.openSettingsDrawer();
Expand Down
4 changes: 2 additions & 2 deletions tests/integration/drawers/settings/theme-switcher.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ test.describe('Theme Switcher', () => {
const homepage = new Homepage(page, context);
// 1. Open the settings drawer
await homepage.openSettingsDrawer();
// 2. get the current active theme
// 2. Get the current active theme
const activeTheme = await page.locator('.ThemeSection_iconActive__Q_xs9 + span').textContent();
expect(activeTheme).toBe('Auto');
});
Expand All @@ -26,7 +26,7 @@ test.describe('Theme Switcher', () => {
// 2. Open the settings drawer
await homepage.openSettingsDrawer();
// 3. Click on the light theme
await page.locator('button:has-text("Light")').click();
await page.locator('button', { hasText: 'Light' }).click();
// 4. Make sure the light theme is the currently selected theme
bodyTheme = await page.locator('body').getAttribute('data-theme');
expect(bodyTheme).toBe('light');
Expand Down
49 changes: 26 additions & 23 deletions tests/integration/navbar/language-selector.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,47 +7,50 @@ test.beforeEach(async ({ page }) => {
test('Clicking on Nav bar language selector icon should open the language selector menu', async ({
page,
}) => {
// 1. make sure the language selector items are not visible
await expect(page.locator('div[role="menuitem"]:has-text("English")')).not.toBeVisible();
// 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 page.locator('[aria-label="Select Language"]').click();
// 3. Make sure the language selector items are visible
await expect(page.locator('div[role="menuitem"]:has-text("English")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("العربية")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("বাংলা")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("فارسی")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("Français")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("Italiano")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("Dutch")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("Português")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("русский")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("Shqip")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("ภาษาไทย")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("Türkçe")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("اردو")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("简体中文")')).toBeVisible();
await expect(page.locator('div[role="menuitem"]:has-text("Melayu")')).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'English' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'العربية' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'বাংলা' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'فارسی' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'Français' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'Italiano' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'Dutch' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'Português' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'русский' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'Shqip' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'ภาษาไทย' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'Türkçe' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'اردو' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: '简体中文' })).toBeVisible();
await expect(page.getByRole('menuitem', { name: 'Melayu' })).toBeVisible();
});

test('Choosing a language should navigate the user to the localized page of that language', async ({
page,
baseURL,
}) => {
// 1. Make sure we are on the English version
await expect(page).toHaveURL('/');
// 2. Open the language selector menu
await page.locator('[aria-label="Select Language"]').click();
// 3. select the Bengali language and make sure we are navigated to /bn
await Promise.all([page.waitForNavigation({ url: '/bn' }), page.locator('text=বাংলা').click()]);
// 3. Select the Bengali language and make sure we are navigated to /bn
await page.locator('text=বাংলা').click();
await page.waitForURL('**/bn');
expect(page.url()).toBe(`${baseURL}/bn`);
});

test('Choosing a language should persist', async ({ page, baseURL }) => {
// 1. Open the language selector menu
await page.locator('[aria-label="Select Language"]').click();
// 2. select the Arabic language and make sure we are navigated to /ar
await Promise.all([page.waitForNavigation({ url: '/ar' }), page.locator('text=العربية').click()]);
// 2. Select the Arabic language and make sure we are navigated to /ar
await page.locator('text=العربية').click();
await page.waitForURL('**/ar');
// 3. Navigate again to /
await page.goto('/');
const currentUrl = page.url();
// 4. Make sure the user is redirected to /ar
expect(currentUrl).toBe(`${baseURL}/ar`);
expect(page.url()).toBe(`${baseURL}/ar`);
});