test: add end-to-end tests for mobile adaptation#113
test: add end-to-end tests for mobile adaptation#113kagol merged 6 commits intoopentiny:ospp-2025/mobilefrom
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughAdds Playwright-based end-to-end testing with config and mobile specs. Introduces scripts and devDependency. Implements responsive updates: adjusted navbar breakpoint, modal sizing from md breakpoint, responsive grid pager configs and keys across several views, and overflow tweaks in user info. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant CI/Dev as CI/Dev
participant PW as Playwright CLI
participant WS as Web Server (pnpm start)
participant App as App (localhost)
participant Test as E2E Specs
CI/Dev->>PW: npm run test:e2e
PW->>WS: Launch server (cwd set)
WS-->>PW: Server ready at baseURL
PW->>Test: Initialize projects (mobile/tablet)
loop per spec and project
Test->>App: open baseURL, navigate, interact
Test->>App: login, toggle menus, open modal, scroll grid
App-->>Test: DOM state/attributes
Test->>PW: assertions (pass/fail), traces as configured
end
PW-->>CI/Dev: Report results (list + HTML)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
package.json (2)
85-95: Commit the pnpm-lock.yaml update for the new devDependency
@playwright/testwas added, but the correspondingpnpm-lock.yamlchange is missing. CI installs with--frozen-lockfile, which refuses to proceed if the lockfile is out of sync with package.json, so every install now fails withERR_PNPM_OUTDATED_LOCKFILE. Please rerunpnpm installand commit the updated lockfile along with this change. (pnpm.io)
35-55: Keep Playwright e2e out of the defaultnpm testchainBy adding
test:e2ewhile the existing script isrun-s build test:**,npm test/pnpm testwill now run the Playwright suite every time. That introduces a slow, browser-dependent workflow into pipelines that were previously unit/back-end only, which is already visible in the failing “BackEnd UnitTest” job. Please decouple the e2e script (e.g., call it explicitly or adjust the glob) so routinenpm testruns aren’t blocked on Playwright. (medium.com)
🧹 Nitpick comments (3)
template/tinyvue/src/views/user/info/index.vue (1)
35-35: Avoid clipping the card shadow on wider screens.Because
.container-infonow hides horizontal overflow, the 8px horizontal blur from.general-card’s box-shadow gets cropped on desktop, flattening the card edges. To keep the mobile scroll fix without sacrificing the shadow effect on larger breakpoints, limit the hidden overflow to mobile widths (e.g., via a max-width media query or amax-md:overflow-x-hiddenutility) and leave desktop overflow unaffected..container-info { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: calc(100% - 60px); margin: 0 auto; - overflow-x: hidden; } + +@media (max-width: 768px) { + .container-info { + overflow-x: hidden; + } +}tests/e2e/mobile/modal.spec.ts (1)
13-13: Prefer resilient CSS locator over XPathUsing a bare XPath string here makes the selector harder to read and more brittle if the DOM structure changes. Since the modal already exposes a stable class, we can rely on Playwright’s CSS locator API and still target the first instance explicitly.
- const modal = page.locator("(//div[@class='tiny-modal__box'])[1]"); + const modal = page.locator('.tiny-modal__box').first();tests/e2e/mobile/grid.spec.ts (1)
15-16: Avoid fixed sleeps in tests
page.waitForTimeout(300)can introduce unnecessary flakiness because it guesses how long the UI needs to settle. It’s safer to wait for the scroll position to change using Playwright’s polling helpers so the test only proceeds once the assertion is actually true.- await page.waitForTimeout(300) - const afterScrollLeft = await bodyWrapper.evaluate(el => el.scrollLeft) + const afterScrollLeft = await expect + .poll(() => bodyWrapper.evaluate(el => el.scrollLeft)) + .toBeGreaterThan(initialScrollLeft)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
package.json(2 hunks)playwright.config.ts(1 hunks)template/tinyvue/src/components/navbar/index.vue(1 hunks)template/tinyvue/src/hooks/responsive.ts(1 hunks)template/tinyvue/src/views/Preview/index.vue(3 hunks)template/tinyvue/src/views/board/home/components/regiontable.vue(3 hunks)template/tinyvue/src/views/board/home/components/roundtable.vue(2 hunks)template/tinyvue/src/views/locale/components/locale-table.vue(3 hunks)template/tinyvue/src/views/user/info/index.vue(2 hunks)tests/e2e/mobile/grid.spec.ts(1 hunks)tests/e2e/mobile/modal.spec.ts(1 hunks)tests/e2e/mobile/navbar.spec.ts(1 hunks)tests/e2e/mobile/tree-menu.spec.ts(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: BackEnd UnitTest
package.json
[error] 1-1: pnpm install failed: ERR_PNPM_OUTDATED_LOCKFILE. Frozen lockfile prevents install because lockfile is not up to date with package.json. Specifiers mismatch: 1 dependencies were removed: @playwright/test@^1.55.0.
[warning] 1-1: Resolutions field in package.json will not take effect when using a workspace root. Move resolutions to the workspace root.
|
@WangWant7 测试用例没通过，需要处理下 |
…HOST and REDIS_HOST in docker-compose.yml
|
@kagol 已修复CI/CD问题 |
| - .env | ||
| environment: | ||
| DATABASE_HOST: mysql | ||
| REDIS_HOST: redis |
There was a problem hiding this comment.
docker启动服务的时候ip通常是不固定的，所以容器间通信更多通过的是容器名。如果同时使用 env_file 和 environment 属性，则由 environment 设置的环境变量优先。
| "fix:tslint": "tslint --fix --project .", | ||
| "test": "run-s build test:**", | ||
| "test:unit": "run-s build test:lint test:unit:backend test:cov:backend", | ||
| "test:all": "run-s build test:**", |
There was a problem hiding this comment.
这个可以不用改哈
| "test:all": "run-s build test:**", | |
| "test": "run-s build test:**", |
4 participants
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Tests