Skip to content

Commit fc32dee

Browse files
pettinarippettinarip
committed
move tests to global file
1 parent fe8cef1 commit fc32dee

File tree

3 files changed

+128
-83
lines changed

3 files changed

+128
-83
lines changed

‎tests/e2e/global.spec.ts

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import { test } from "@chromatic-com/playwright"
1+
import { expect, takeSnapshot, test } from "@chromatic-com/playwright"
2+
import { Page } from "@playwright/test"
3+
4+
import { breakpointAsNumber } from "@/lib/utils/screen"
5+
6+
import { DEFAULT_LOCALE } from "@/lib/constants"
27

38
import { testData } from "./fixtures/testData"
49
import { HomePage } from "./pages/HomePage"
10+
import { waitForPageReady } from "./utils/testHelpers"
511

612
test.describe("Global", () => {
713
test.describe("Error Handling", () => {
@@ -26,6 +32,83 @@ test.describe("Global", () => {
2632
})
2733

2834
test.describe("Internationalization", () => {
29-
// TODO: Add internationalization tests. Part of #15663
35+
let homePage: HomePage
36+
37+
test.beforeEach(async ({ page }) => {
38+
homePage = new HomePage(page)
39+
await homePage.goto()
40+
await waitForPageReady(page)
41+
})
42+
43+
async function switchToChinese(page: Page, homePage: HomePage) {
44+
await homePage.switchToLanguage("zh", /^简体中文 Chinese/i)
45+
await expect(page).toHaveURL(/\/zh(\/|$)/)
46+
await expect(
47+
page.getByRole("heading", { level: 1, name: /以太坊/i })
48+
).toBeVisible()
49+
}
50+
51+
test("switches to Chinese (desktop)", async ({ page }) => {
52+
const isMobile = await homePage.isMobileViewport()
53+
test.skip(isMobile, "This test is for desktop viewports only")
54+
55+
await expect(page).toHaveURL(`/${DEFAULT_LOCALE}/`)
56+
await homePage.openLanguagePickerDesktop()
57+
await switchToChinese(page, homePage)
58+
})
59+
60+
test("switches to Chinese (mobile)", async ({ page }) => {
61+
await page.setViewportSize({ width: breakpointAsNumber.sm, height: 800 })
62+
const isMobile = await homePage.isMobileViewport()
63+
test.skip(!isMobile, "This test is for mobile viewports only")
64+
65+
await expect(page).toHaveURL(`/${DEFAULT_LOCALE}/`)
66+
await homePage.openLanguagePickerMobile()
67+
await switchToChinese(page, homePage)
68+
})
69+
})
70+
71+
test.describe("RTL Support", () => {
72+
let homePage: HomePage
73+
74+
test.beforeEach(async ({ page }) => {
75+
homePage = new HomePage(page)
76+
})
77+
78+
async function switchToArabic(page: Page, homePage: HomePage) {
79+
await homePage.switchToLanguage("ar", /^العربية Arabic/i)
80+
await expect(page).toHaveURL(/\/ar(\/|$)/)
81+
await expect(
82+
page.getByRole("heading", { level: 1, name: /إيثريوم/i })
83+
).toBeVisible()
84+
}
85+
86+
test("home page RTL visual snapshot", async ({ page }, testInfo) => {
87+
await page.goto("/ar")
88+
await waitForPageReady(page)
89+
await takeSnapshot(page, "home-arabic-rtl", testInfo)
90+
})
91+
92+
test("nav flips logo and search button when switching to RTL via language picker", async ({
93+
page,
94+
}) => {
95+
await homePage.goto()
96+
await waitForPageReady(page)
97+
98+
await expect(page).toHaveURL(`/${DEFAULT_LOCALE}/`)
99+
100+
await homePage.openLanguagePickerDesktop()
101+
await switchToArabic(page, homePage)
102+
103+
await expect(page).toHaveURL(/\/ar(\/|$)/)
104+
105+
const logo = page.getByTestId("nav-logo")
106+
const searchBtn = page.getByTestId("search-input-button")
107+
const logoBox = await logo.boundingBox()
108+
const searchBox = await searchBtn.boundingBox()
109+
expect(logoBox).not.toBeNull()
110+
expect(searchBox).not.toBeNull()
111+
expect(logoBox!.x).toBeGreaterThan(searchBox!.x)
112+
})
30113
})
31114
})

‎tests/e2e/home.spec.ts

Lines changed: 1 addition & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
1-
import { expect, takeSnapshot, test } from "@chromatic-com/playwright"
2-
import { Page } from "@playwright/test"
3-
4-
import { breakpointAsNumber } from "@/lib/utils/screen"
5-
6-
import { DEFAULT_LOCALE } from "@/lib/constants"
1+
import { takeSnapshot, test } from "@chromatic-com/playwright"
72

83
import { testData } from "./fixtures/testData"
94
import { HomePage } from "./pages/HomePage"
105
import { waitForPageReady } from "./utils/testHelpers"
11-
import {
12-
openLanguagePickerDesktop,
13-
openLanguagePickerMobile,
14-
switchToLanguage,
15-
} from "./utils"
166

177
test.describe("Home Page", () => {
188
let homePage: HomePage
@@ -59,74 +49,4 @@ test.describe("Home Page", () => {
5949
/.*\/what-is-ethereum/
6050
)
6151
})
62-
63-
test.describe("i18n - language picker", () => {
64-
async function switchToChinese(page: Page) {
65-
await switchToLanguage(page, "zh", /^简体中文 Chinese/i)
66-
await expect(page).toHaveURL(/\/zh(\/|$)/)
67-
await expect(
68-
page.getByRole("heading", { level: 1, name: /以太坊/i })
69-
).toBeVisible()
70-
}
71-
72-
test("switches to Chinese (desktop)", async ({ page }) => {
73-
const viewport = page.viewportSize()
74-
const isMobile = viewport && viewport.width <= breakpointAsNumber.md
75-
test.skip(!!isMobile, "This test is for desktop viewports only")
76-
77-
await expect(page).toHaveURL(`/${DEFAULT_LOCALE}/`)
78-
await openLanguagePickerDesktop(page)
79-
await switchToChinese(page)
80-
})
81-
82-
test("switches to Chinese (mobile)", async ({ page }) => {
83-
await page.setViewportSize({ width: breakpointAsNumber.sm, height: 800 })
84-
const viewport = page.viewportSize()
85-
const isMobile = viewport && viewport.width <= breakpointAsNumber.md
86-
test.skip(!isMobile, "This test is for mobile viewports only")
87-
88-
await expect(page).toHaveURL(`/${DEFAULT_LOCALE}/`)
89-
await openLanguagePickerMobile(page)
90-
await switchToChinese(page)
91-
})
92-
})
93-
94-
test.describe("RTL", () => {
95-
async function switchToArabic(page: Page) {
96-
await switchToLanguage(page, "ar", /^العربية Arabic/i)
97-
await expect(page).toHaveURL(/\/ar(\/|$)/)
98-
await expect(
99-
page.getByRole("heading", { level: 1, name: /إيثريوم/i })
100-
).toBeVisible()
101-
}
102-
103-
test("home page RTL visual snapshot", async ({ page }, testInfo) => {
104-
// Arabic locale is RTL
105-
await page.goto("/ar")
106-
await takeSnapshot(page, "home-arabic-rtl", testInfo)
107-
})
108-
109-
test("nav flips logo and search button when switching to RTL via language picker", async ({
110-
page,
111-
}) => {
112-
// Load LTR page
113-
await expect(page).toHaveURL(`/${DEFAULT_LOCALE}/`)
114-
115-
// Switch to RTL
116-
await openLanguagePickerDesktop(page)
117-
await switchToArabic(page)
118-
119-
// Wait for transition
120-
await expect(page).toHaveURL(/\/ar(\/|$)/)
121-
122-
const logo = page.getByTestId("nav-logo")
123-
const searchBtn = page.getByTestId("search-input-button")
124-
const logoBox = await logo.boundingBox()
125-
const searchBox = await searchBtn.boundingBox()
126-
expect(logoBox).not.toBeNull()
127-
expect(searchBox).not.toBeNull()
128-
// In RTL, logo should be on the right of search button (higher x value)
129-
expect(logoBox!.x).toBeGreaterThan(searchBox!.x)
130-
})
131-
})
13252
})

‎tests/e2e/pages/BasePage.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,4 +84,46 @@ export class BasePage {
8484
async assertUrlMatches(pattern: string | RegExp): Promise<void> {
8585
await expect(this.page).toHaveURL(pattern)
8686
}
87+
88+
/**
89+
* Open language picker in desktop view
90+
*/
91+
async openLanguagePickerDesktop(): Promise<void> {
92+
const nav = this.page.getByRole("navigation", { name: /primary/i })
93+
const langButton = nav.getByRole("button", { name: /languages/i })
94+
await expect(langButton).toBeVisible()
95+
await langButton.click()
96+
}
97+
98+
/**
99+
* Open language picker in mobile view
100+
*/
101+
async openLanguagePickerMobile(): Promise<void> {
102+
const nav = this.page.getByRole("navigation", { name: /primary/i })
103+
const menuButton = nav.getByRole("button", {
104+
name: /toggle menu button/i,
105+
})
106+
await expect(menuButton).toBeVisible()
107+
await menuButton.click()
108+
const sidebar = this.page.getByRole("dialog", { name: /ethereum.org/i })
109+
await expect(sidebar).toBeVisible()
110+
const langButton = sidebar.getByRole("button", { name: /languages/i })
111+
await expect(langButton).toBeVisible()
112+
await langButton.click()
113+
}
114+
115+
/**
116+
* Switch to a specific language
117+
*/
118+
async switchToLanguage(
119+
langFilter: string,
120+
langOptionRegex: RegExp
121+
): Promise<void> {
122+
const searchInput = this.page.getByPlaceholder(/type to filter/i)
123+
await expect(searchInput).toBeVisible()
124+
await searchInput.fill(langFilter)
125+
const langOption = this.page.getByRole("option", { name: langOptionRegex })
126+
await expect(langOption).toBeVisible()
127+
await langOption.click()
128+
}
87129
}

0 commit comments

Comments
 (0)