test: Playwright UI tests for #2809 — feat: add expandable section component#2826
test: Playwright UI tests for #2809 — feat: add expandable section component#2826
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughA new Playwright test specification file was added to test the ExpandableSection component's UI behavior. The test suite verifies expand/collapse functionality, non-expandable section behavior, and icon visibility across mobile and desktop viewports, with four test cases reporting to Qase. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
|
✅ All snapshot tests passed |
🎨 The following files missed linting:To fix this issue, use 🚧 Your commit hooks might be missing 🚧 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@tests/partneros-pr-2809.spec.ts`:
- Around line 60-68: The test is turning into a no-op when the target selectors
are missing or hidden; before interacting assert the fixture exists (e.g., check
nonExpandableHeader.count()/isVisible via an expect on the locator) so the test
fails if the selector is absent, then proceed to click and assert items (locator
'[data-testid="expandable-section-item"]') remain hidden; for the icon/absence
case replace hidden assertions with a presence count assertion (use
toHaveCount(0) on the appropriate locator) to explicitly verify absence. Apply
the same pattern to the other test covering lines 79-84 (assert fixture exists
first, then use toHaveCount(0) for absence checks).
- Around line 17-18: Several tests still use the placeholder qase(0, ...) call
which must be replaced with the real Qase IDs; find each test that wraps its
description with qase(0, ...) (e.g., the test whose title starts "expandable
section expands to reveal asset items on click" and the other three qase-wrapped
tests) and update the first argument of qase(...) from 0 to the correct numeric
Qase case ID for each test so reporting maps to the proper cases; ensure you
update all four occurrences of qase(0, ...) in this spec file.
- Around line 23-30: Scope the click and assertions to the same
ExpandableSection parent instead of using global locators: locate the section
element (e.g. the parent with a stable test id like 'expandable-section' or add
one to the ExpandableSection component), then use that section locator to find
the summary used in the click (expandableHeader) and the child items
(expandable-section-item) for assertions; apply this change in both the expand
test (where expandableHeader and items are used) and the collapse test so the
click and waits operate on the same section instance.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 3e955b3f-6f3a-4672-8e16-280a11c0b28c
📒 Files selected for processing (1)
tests/partneros-pr-2809.spec.ts
| test( | ||
| qase(0 /* TODO: assign Qase ID */, 'expandable section expands to reveal asset items on click'), |
There was a problem hiding this comment.
Replace placeholder Qase IDs before merging.
All four tests still report as qase(0, ...), which matches the PR note but will make reporting ambiguous if this lands as-is.
Also applies to: 35-36, 54-55, 73-74
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@tests/partneros-pr-2809.spec.ts` around lines 17 - 18, Several tests still
use the placeholder qase(0, ...) call which must be replaced with the real Qase
IDs; find each test that wraps its description with qase(0, ...) (e.g., the test
whose title starts "expandable section expands to reveal asset items on click"
and the other three qase-wrapped tests) and update the first argument of
qase(...) from 0 to the correct numeric Qase case ID for each test so reporting
maps to the proper cases; ensure you update all four occurrences of qase(0, ...)
in this spec file.
| await test.step('click expandable section header', async () => { | ||
| const expandableHeader = page.locator('[data-testid="expandable-section-summary"]').first(); | ||
| await expandableHeader.waitFor({ state: 'visible' }); | ||
| await expandableHeader.click(); | ||
| }); | ||
| await test.step('confirm items are visible after expansion', async () => { | ||
| const items = page.locator('[data-testid="expandable-section-item"]'); | ||
| await items.first().waitFor({ state: 'visible' }); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cd tests && wc -l partneros-pr-2809.spec.tsRepository: jumperexchange/jumper-exchange
Length of output: 102
🏁 Script executed:
head -60 tests/partneros-pr-2809.spec.tsRepository: jumperexchange/jumper-exchange
Length of output: 2658
🏁 Script executed:
cat -n tests/partneros-pr-2809.spec.tsRepository: jumperexchange/jumper-exchange
Length of output: 4492
🏁 Script executed:
find . -type f -name "*.tsx" -o -name "*.ts" | grep -i "portfolio" | head -20Repository: jumperexchange/jumper-exchange
Length of output: 1077
🏁 Script executed:
rg "expandable-section-summary|expandable-section-item" --type tsx --type ts -lRepository: jumperexchange/jumper-exchange
Length of output: 101
🏁 Script executed:
rg "expandable-section-summary|expandable-section-item" -lRepository: jumperexchange/jumper-exchange
Length of output: 105
🏁 Script executed:
grep -r "portfolio-assets-expandable-section" . 2>/dev/null | head -5Repository: jumperexchange/jumper-exchange
Length of output: 56
🏁 Script executed:
cat -n src/app/ui/portfolio/PortfolioAssetsSection.tsxRepository: jumperexchange/jumper-exchange
Length of output: 2451
🏁 Script executed:
rg "data-testid.*expandable" -B 2 -A 2Repository: jumperexchange/jumper-exchange
Length of output: 3135
🏁 Script executed:
rg "ExpandableSection|expandable-section" --type-listRepository: jumperexchange/jumper-exchange
Length of output: 463
🏁 Script executed:
find . -type f -name "*.tsx" -o -name "*.jsx" | xargs grep -l "expandable-section-summary\|ExpandableSection" 2>/dev/nullRepository: jumperexchange/jumper-exchange
Length of output: 58
🏁 Script executed:
find . -type f \( -name "*.tsx" -o -name "*.jsx" \) -exec grep -l "expandable-section-summary\|ExpandableSection" {} \;Repository: jumperexchange/jumper-exchange
Length of output: 56
🏁 Script executed:
rg "class.*ExpandableSection|function.*ExpandableSection|const.*ExpandableSection" -A 3Repository: jumperexchange/jumper-exchange
Length of output: 56
🏁 Script executed:
rg "expandable-section-summary" --no-filename -B 5 -A 5Repository: jumperexchange/jumper-exchange
Length of output: 1937
🏁 Script executed:
rg "expandable-section-item" --no-filename -B 5 -A 5Repository: jumperexchange/jumper-exchange
Length of output: 1557
🏁 Script executed:
rg "expandable-section" --no-filenameRepository: jumperexchange/jumper-exchange
Length of output: 755
🏁 Script executed:
cat -n src/app/[lng]/portfolio/page.tsxRepository: jumperexchange/jumper-exchange
Length of output: 1190
🏁 Script executed:
ls -la src/app/ui/portfolio/Repository: jumperexchange/jumper-exchange
Length of output: 1605
🏁 Script executed:
grep -r "data-testid.*expandable" src/ 2>/dev/nullRepository: jumperexchange/jumper-exchange
Length of output: 56
🏁 Script executed:
find . -type f -name "*.tsx" -o -name "*.ts" | xargs grep -l "expandable-section" 2>/dev/null | grep -v node_modules | grep -v ".next"Repository: jumperexchange/jumper-exchange
Length of output: 107
🏁 Script executed:
cat -n src/app/ui/portfolio/PortfolioTokensList.tsxRepository: jumperexchange/jumper-exchange
Length of output: 2271
🏁 Script executed:
find . -type f \( -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" \) ! -path "*/node_modules/*" ! -path "*/.next/*" -exec grep -l "expandable\|Expandable" {} \;Repository: jumperexchange/jumper-exchange
Length of output: 107
🏁 Script executed:
cat -n src/app/ui/portfolio/PortfolioPositionsList.tsxRepository: jumperexchange/jumper-exchange
Length of output: 2943
🏁 Script executed:
find . -type f \( -name "*.tsx" -o -name "*.ts" \) ! -path "*/node_modules/*" ! -path "*/.next/*" | xargs grep -l "data-testid" | head -20Repository: jumperexchange/jumper-exchange
Length of output: 1207
🏁 Script executed:
grep -r "Expandable" . --include="*.tsx" --include="*.ts" 2>/dev/null | grep -v node_modules | grep -v ".next"Repository: jumperexchange/jumper-exchange
Length of output: 526
🏁 Script executed:
rg "expandable-section" src/ 2>/dev/nullRepository: jumperexchange/jumper-exchange
Length of output: 56
🏁 Script executed:
git log --oneline --all | head -20Repository: jumperexchange/jumper-exchange
Length of output: 1244
🏁 Script executed:
git diff HEAD~5 --name-only 2>/dev/null | head -20Repository: jumperexchange/jumper-exchange
Length of output: 56
🏁 Script executed:
git show --stat 9855e888Repository: jumperexchange/jumper-exchange
Length of output: 50387
🏁 Script executed:
git show 9855e888 | head -100Repository: jumperexchange/jumper-exchange
Length of output: 2403
🏁 Script executed:
git show 9855e888 --name-only | grep -i expandableRepository: jumperexchange/jumper-exchange
Length of output: 150
🏁 Script executed:
git show 9855e888 | grep -A 30 "expandable-section"Repository: jumperexchange/jumper-exchange
Length of output: 3749
Scope assertions to the section being clicked.
The tests click the first matching summary but assert against global [data-testid="expandable-section-item"] locators. If the page renders multiple expandable sections, these assertions can pass or fail based on another section's items. Scope both the click and the assertion to the same section parent.
Note: The suggested fix in the original comment references test IDs that don't currently exist in the codebase (portfolio-assets-expandable-section). Ensure the ExpandableSection component has appropriate stable section-level test IDs before applying the fix.
This applies to both the expand test (lines 23–30) and collapse test (lines 41–49).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@tests/partneros-pr-2809.spec.ts` around lines 23 - 30, Scope the click and
assertions to the same ExpandableSection parent instead of using global
locators: locate the section element (e.g. the parent with a stable test id like
'expandable-section' or add one to the ExpandableSection component), then use
that section locator to find the summary used in the click (expandableHeader)
and the child items (expandable-section-item) for assertions; apply this change
in both the expand test (where expandableHeader and items are used) and the
collapse test so the click and waits operate on the same section instance.
| await test.step('click non-expandable section header and verify no items appear', async () => { | ||
| // A section with shouldExpand=false should not open | ||
| const nonExpandableHeader = page.locator('[data-testid="expandable-section-summary"][data-expandable="false"]').first(); | ||
| if (await nonExpandableHeader.isVisible()) { | ||
| await nonExpandableHeader.click(); | ||
| const items = page.locator('[data-testid="expandable-section-item"]'); | ||
| // Should still be hidden | ||
| await expect(items.first()).toBeHidden(); | ||
| } |
There was a problem hiding this comment.
Do not let missing target variants turn these tests into no-ops.
Both tests pass without making any assertion when the selector is absent or hidden. Since these cases are part of the stated coverage, assert the fixture exists first; for the icon test, use toHaveCount(0) to verify absence rather than merely hidden state.
Proposed fix
// A section with shouldExpand=false should not open
const nonExpandableHeader = page.locator('[data-testid="expandable-section-summary"][data-expandable="false"]').first();
- if (await nonExpandableHeader.isVisible()) {
- await nonExpandableHeader.click();
- const items = page.locator('[data-testid="expandable-section-item"]');
- // Should still be hidden
- await expect(items.first()).toBeHidden();
- }
+ await expect(nonExpandableHeader).toBeVisible();
+ await nonExpandableHeader.click();
+ const items = page.locator('[data-testid="expandable-section-item"]');
+ // Should still be hidden
+ await expect(items.first()).toBeHidden(); const noIconSection = page.locator('[data-testid="expandable-section-no-icon"]').first();
- if (await noIconSection.isVisible()) {
- const expandIcon = noIconSection.locator('svg[data-testid="ExpandMoreIcon"]');
- await expect(expandIcon).toBeHidden();
- }
+ await expect(noIconSection).toBeVisible();
+ const expandIcon = noIconSection.locator('svg[data-testid="ExpandMoreIcon"]');
+ await expect(expandIcon).toHaveCount(0);Also applies to: 79-84
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@tests/partneros-pr-2809.spec.ts` around lines 60 - 68, The test is turning
into a no-op when the target selectors are missing or hidden; before interacting
assert the fixture exists (e.g., check nonExpandableHeader.count()/isVisible via
an expect on the locator) so the test fails if the selector is absent, then
proceed to click and assert items (locator
'[data-testid="expandable-section-item"]') remain hidden; for the icon/absence
case replace hidden assertions with a presence count assertion (use
toHaveCount(0) on the appropriate locator) to explicitly verify absence. Apply
the same pattern to the other test covering lines 79-84 (assert fixture exists
first, then use toHaveCount(0) for absence checks).
Playwright test results
Details
Flaky testschromium › mainMenu.spec.ts › Main Menu flows › Should be able to navigate to LI.FI Scan (Qase ID: 21) Skipped testschromium › themeManipulation.spec.ts › Switch between dark and light theme and check the background color › Partner theme should appear in theme menu and apply background color (Qase ID: 49) |
1 participant
Playwright UI Tests — Auto-generated by Partneros
Parent PR: #2809
Coverage
How to use
Run:
npx playwright test tests/partneros-pr-2809.spec.tsSummary by CodeRabbit