-
-
Notifications
You must be signed in to change notification settings - Fork 111
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✅ Test: Added Playwright test suite (polished existing) for CN, JP, K…
…R characters. (#473) * ✅ Polished Playright to improve concistency Removed unnecessary comments, modularized custom timeouts to constants, added appropriate timeouts to ensure component transition finishes before next step. * ✅ Added Playwright test suite for CN, JP, KR chars Also added accessible attr for input/textarea components to select them in Playwright. Updated snapshots accordingly.
- Loading branch information
Showing
13 changed files
with
190 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| "socialify": patch | ||
| --- | ||
|
|
||
| Added Playwright test for full variant of CN, JP, and KR (Korean). | ||
|
|
||
| Added accessbility attributes for generic input/textbox components. Updated snapshots. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import Buffer from '@playwright/test' | ||
| import { type Page, expect, test } from '@playwright/test' | ||
|
|
||
| // IMPORTANT: Playwright is not setup with import aliases, use relative paths. | ||
| import getClipboardText from './utils/getClipboardText' | ||
|
|
||
| const customTimeout = { timeout: 30000 } | ||
| const componentUpdateTimeout = 1000 | ||
| const repo: string = 'wei/socialify' | ||
| const expectedPageURLEnding: string = | ||
| '?custom_description=%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87%2C%20%E7%B9%81%E9%AB%94%E4%B8%AD%E6%96%87%20(f%C3%A1n%20t%C7%90%20zh%C5%8Dng%20w%C3%A9n)%2C%20%E3%81%AB%E3%81%BB%E3%82%93%E3%81%94%20%E3%81%B2%E3%82%89%E3%81%8C%E3%81%AA%2C%20%E3%83%8B%E3%83%9B%E3%83%B3%E3%82%B4%20%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A%2C%20%E6%97%A5%E6%9C%AC%E8%AA%9E%20%E6%BC%A2%E5%AD%97%2C%20%ED%95%9C%EA%B5%AD%EC%96%B4%20%E9%9F%93%E5%9C%8B%E8%AA%9E%2C%20%EC%A1%B0%EC%84%A0%EB%A7%90%20%E6%9C%9D%E9%AE%AE%EB%A7%90&description=1&font=Jost&language=1&logo=https%3A%2F%2Fraw.githubusercontent.com%2Fwei%2Fsocialify%2F1f520b6bfe799300bcff9edcdc330828d681d382%2Fapp%2Ficon.svg&name=1&owner=1&pattern=Diagonal%20Stripes&theme=Dark' | ||
| const expectedClipboardURLEnding: string = | ||
| '/wei/socialify/image?custom_description=%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87%2C+%E7%B9%81%E9%AB%94%E4%B8%AD%E6%96%87+%28f%C3%A1n+t%C7%90+zh%C5%8Dng+w%C3%A9n%29%2C+%E3%81%AB%E3%81%BB%E3%82%93%E3%81%94+%E3%81%B2%E3%82%89%E3%81%8C%E3%81%AA%2C+%E3%83%8B%E3%83%9B%E3%83%B3%E3%82%B4+%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A%2C+%E6%97%A5%E6%9C%AC%E8%AA%9E+%E6%BC%A2%E5%AD%97%2C+%ED%95%9C%EA%B5%AD%EC%96%B4+%E9%9F%93%E5%9C%8B%E8%AA%9E%2C+%EC%A1%B0%EC%84%A0%EB%A7%90+%E6%9C%9D%E9%AE%AE%EB%A7%90&description=1&font=Jost&language=1&logo=https%3A%2F%2Fraw.githubusercontent.com%2Fwei%2Fsocialify%2F1f520b6bfe799300bcff9edcdc330828d681d382%2Fapp%2Ficon.svg&name=1&owner=1&pattern=Diagonal+Stripes&theme=Dark' | ||
| // IMPORTANT: Due to auto encoding and generation of the URLs, | ||
| // the clipboard content is DIFFERENT from the page URL; | ||
| // thus, the expected content is separately defined and checked for each. | ||
|
|
||
| test.beforeEach(async ({ page }: { page: Page }): Promise<void> => { | ||
| await page.goto('/', customTimeout) | ||
| await page.waitForLoadState('networkidle', customTimeout) | ||
| }) | ||
|
|
||
| test.describe('All variants of Chinese, Japanese, and Korean characters in "Description" field:', () => { | ||
| test(`renders correctly and consistently`, async ({ | ||
| page, | ||
| }: { page: Page }): Promise<void> => { | ||
| // Input and submit the repo following accessibility best practices. | ||
| await page.fill('input[name="repo-input"]', repo) | ||
| await page.waitForTimeout(componentUpdateTimeout) | ||
| await page.click('button[type="submit"]') | ||
|
|
||
| // Wait for complete navigation to the preview config page. | ||
| await page.waitForSelector('button:has-text("URL")', customTimeout) | ||
| await page.waitForLoadState('networkidle', customTimeout) | ||
|
|
||
| // De-select the "Stars" option (for consistent preview image), | ||
| // and select the "Description" option for custom chat input. | ||
| await page.click('input[name="stargazers"]') | ||
| await page.waitForTimeout(componentUpdateTimeout) | ||
| await page.click('input[name="description"]') | ||
| await page.waitForTimeout(componentUpdateTimeout) | ||
|
|
||
| // Use complete costom styling for the preview image, including: | ||
| // - 'Dark' theme | ||
| // - 'Jost' font | ||
| // - 'Diagonal Stripes' pattern | ||
| // - The Socialify logo for the 'SVG Logo' option | ||
| // - Custom 'Description' field with all variants of Chinese, Japanese, and Korean characters. | ||
| await page.selectOption('select[name="theme"]', { label: 'Dark' }) | ||
| await page.waitForTimeout(componentUpdateTimeout) | ||
| await page.selectOption('select[name="font"]', { label: 'Jost' }) | ||
| await page.waitForTimeout(componentUpdateTimeout) | ||
| await page.selectOption('select[name="pattern"]', { | ||
| label: 'Diagonal Stripes', | ||
| }) | ||
| await page.waitForTimeout(componentUpdateTimeout) | ||
| await page.fill( | ||
| 'input[name="logo"]', | ||
| 'https://raw.githubusercontent.com/wei/socialify/1f520b6bfe799300bcff9edcdc330828d681d382/app/icon.svg' | ||
| ) | ||
| await page.waitForTimeout(componentUpdateTimeout) | ||
| await page.fill( | ||
| 'textarea[name="description"]', | ||
| '简体中文, 繁體中文 (fán tǐ zhōng wén), にほんご ひらがな, ニホンゴ カタカナ, 日本語 漢字, 한국어 韓國語, 조선말 朝鮮말' | ||
| ) | ||
| await page.waitForTimeout(componentUpdateTimeout) | ||
| await page.waitForLoadState('networkidle', customTimeout) | ||
|
|
||
| // Check page url before checking the clipboard content. | ||
| const pageURL: string = page.url() | ||
| expect(pageURL.endsWith(expectedPageURLEnding)).toBe(true) | ||
|
|
||
| // Compare the clipboard content to the expected preview URL. | ||
| // (Only check the end of the URL due to dynamic localhost port allocation.) | ||
| await page.click('button:has-text("URL")') | ||
| await page.waitForTimeout(componentUpdateTimeout) | ||
| const clipboardURL: string = await getClipboardText(page) | ||
| expect(clipboardURL.endsWith(expectedClipboardURLEnding)).toBe(true) | ||
|
|
||
| // Visit the image URL and snapshot the image. | ||
| await page.goto(clipboardURL, customTimeout) | ||
| await page.waitForLoadState('networkidle', customTimeout) | ||
|
|
||
| const previewImage: typeof Buffer = await page.screenshot() | ||
| expect(previewImage).toMatchSnapshot() | ||
| }) | ||
| }) |
Binary file added
BIN
+88.7 KB
...an--4be35-on-field-renders-correctly-and-consistently-1-Mobile-Chrome-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+80 KB
...-Korean--4be35-on-field-renders-correctly-and-consistently-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file modified
BIN
+4.12 KB
(100%)
...rror-when-svg-data-uri-input-length-exceeds-the-limit-1-Mobile-Chrome-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { type Page } from '@playwright/test' | ||
|
|
||
| export default async function getClipboardText(page: Page): Promise<string> { | ||
| return await page.evaluate(async () => { | ||
| return await navigator.clipboard.readText() | ||
| }) | ||
| } |
Oops, something went wrong.