Skip to content

test: Playwright UI tests for #2809 — feat: add expandable section component #2826

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

Closed
yordanove wants to merge 1 commit into from
Closed

test: Playwright UI tests for #2809 — feat: add expandable section component #2826

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
89 changes: 89 additions & 0 deletions tests/partneros-pr-2809.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { expect, test } from '@playwright/test';
import { qase } from 'playwright-qase-reporter';
import { closeWelcomeScreen } from './testData/landingPageFunctions';

[
{ name: 'Mobile', size: { width: 375, height: 812 } },
{ name: 'Desktop', size: { width: 1920, height: 1080 } },
].forEach(({ name, size }) => {
test.describe(`ExpandableSection — Portfolio Assets [Viewport: ${name}]`, () => {
test.use({ viewport: { width: size.width, height: size.height } });

test.beforeEach(async ({ page }) => {
await page.goto('/');
await closeWelcomeScreen(page);
});

test(
qase(0 /* TODO: assign Qase ID */, 'expandable section expands to reveal asset items on click'),
Comment on lines +17 to +18
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

async ({ page }) => {
await test.step('navigate to portfolio page', async () => {
await page.goto('/portfolio');
});
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' });
Comment on lines +23 to +30
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

cd tests && wc -l partneros-pr-2809.spec.ts

Repository: jumperexchange/jumper-exchange

Length of output: 102

🏁 Script executed:

head -60 tests/partneros-pr-2809.spec.ts

Repository: jumperexchange/jumper-exchange

Length of output: 2658

🏁 Script executed:

cat -n tests/partneros-pr-2809.spec.ts

Repository: jumperexchange/jumper-exchange

Length of output: 4492

🏁 Script executed:

find . -type f -name "*.tsx" -o -name "*.ts" | grep -i "portfolio" | head -20

Repository: jumperexchange/jumper-exchange

Length of output: 1077

🏁 Script executed:

rg "expandable-section-summary|expandable-section-item" --type tsx --type ts -l

Repository: jumperexchange/jumper-exchange

Length of output: 101

🏁 Script executed:

rg "expandable-section-summary|expandable-section-item" -l

Repository: jumperexchange/jumper-exchange

Length of output: 105

🏁 Script executed:

grep -r "portfolio-assets-expandable-section" . 2>/dev/null | head -5

Repository: jumperexchange/jumper-exchange

Length of output: 56

🏁 Script executed:

cat -n src/app/ui/portfolio/PortfolioAssetsSection.tsx

Repository: jumperexchange/jumper-exchange

Length of output: 2451

🏁 Script executed:

rg "data-testid.*expandable" -B 2 -A 2

Repository: jumperexchange/jumper-exchange

Length of output: 3135

🏁 Script executed:

rg "ExpandableSection|expandable-section" --type-list

Repository: 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/null

Repository: 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 3

Repository: jumperexchange/jumper-exchange

Length of output: 56

🏁 Script executed:

rg "expandable-section-summary" --no-filename -B 5 -A 5

Repository: jumperexchange/jumper-exchange

Length of output: 1937

🏁 Script executed:

rg "expandable-section-item" --no-filename -B 5 -A 5

Repository: jumperexchange/jumper-exchange

Length of output: 1557

🏁 Script executed:

rg "expandable-section" --no-filename

Repository: jumperexchange/jumper-exchange

Length of output: 755

🏁 Script executed:

cat -n src/app/[lng]/portfolio/page.tsx

Repository: 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/null

Repository: 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.tsx

Repository: 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.tsx

Repository: 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 -20

Repository: 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/null

Repository: jumperexchange/jumper-exchange

Length of output: 56

🏁 Script executed:

git log --oneline --all | head -20

Repository: jumperexchange/jumper-exchange

Length of output: 1244

🏁 Script executed:

git diff HEAD~5 --name-only 2>/dev/null | head -20

Repository: jumperexchange/jumper-exchange

Length of output: 56

🏁 Script executed:

git show --stat 9855e888

Repository: jumperexchange/jumper-exchange

Length of output: 50387

🏁 Script executed:

git show 9855e888 | head -100

Repository: jumperexchange/jumper-exchange

Length of output: 2403

🏁 Script executed:

git show 9855e888 --name-only | grep -i expandable

Repository: 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.

});
},
);

test(
qase(0 /* TODO: assign Qase ID */, 'expandable section collapses on second click'),
async ({ page }) => {
await test.step('navigate to portfolio page', async () => {
await page.goto('/portfolio');
});
await test.step('expand then collapse section', async () => {
const expandableHeader = page.locator('[data-testid="expandable-section-summary"]').first();
await expandableHeader.waitFor({ state: 'visible' });
await expandableHeader.click();
await expandableHeader.click();
});
await test.step('items are hidden after collapse', async () => {
const items = page.locator('[data-testid="expandable-section-item"]');
await expect(items.first()).toBeHidden();
});
},
);

test(
qase(0 /* TODO: assign Qase ID */, 'non-expandable section does not respond to header click'),
async ({ page }) => {
await test.step('navigate to portfolio page', async () => {
await page.goto('/portfolio');
});
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();
}
Comment on lines +60 to +68
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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).

});
},
);

test(
qase(0 /* TODO: assign Qase ID */, 'expand icon is absent when showExpandIcon is false'),
async ({ page }) => {
await test.step('navigate to portfolio page', async () => {
await page.goto('/portfolio');
});
await test.step('check that no expand icon is rendered on icon-hidden sections', async () => {
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();
}
});
},
);
});
});
Loading