From 7c4ffd4d2f111f6331e33334c63b5e049bab9a3e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 4 Dec 2025 09:40:19 +0000 Subject: [PATCH 1/3] Initial plan From 425733d3f103f60c6cc492aed03a3748b2266904 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 4 Dec 2025 09:43:44 +0000 Subject: [PATCH 2/3] feat: Add click event handling to ButtonGroup component and update test config Co-authored-by: kelvenray <2155845+kelvenray@users.noreply.github.com> --- .../src/components/navigation/ButtonGroup.vue | 40 +++++++++-- playwright.config.js | 6 +- tests/quick-validation.spec.js | 66 +++++++++++++++++++ 3 files changed, 103 insertions(+), 9 deletions(-) diff --git a/Vue3/src/components/navigation/ButtonGroup.vue b/Vue3/src/components/navigation/ButtonGroup.vue index a553c22..9faad74 100644 --- a/Vue3/src/components/navigation/ButtonGroup.vue +++ b/Vue3/src/components/navigation/ButtonGroup.vue @@ -1,18 +1,46 @@ diff --git a/playwright.config.js b/playwright.config.js index b00aa31..5066093 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -9,7 +9,7 @@ module.exports = defineConfig({ workers: process.env.CI ? 1 : undefined, reporter: 'html', use: { - baseURL: 'http://localhost:8080/myfrontend', + baseURL: 'http://localhost:5173/myfrontend', trace: 'on-first-retry', screenshot: 'on', }, @@ -22,8 +22,8 @@ module.exports = defineConfig({ ], webServer: { - command: 'npx http-server Vue3/dist -p 8080', - url: 'http://localhost:8080/myfrontend', + command: 'cd Vue3 && npm run dev', + url: 'http://localhost:5173/myfrontend', reuseExistingServer: !process.env.CI, timeout: 120 * 1000, }, diff --git a/tests/quick-validation.spec.js b/tests/quick-validation.spec.js index 75bc847..e739841 100644 --- a/tests/quick-validation.spec.js +++ b/tests/quick-validation.spec.js @@ -132,4 +132,70 @@ test.describe('Quick Validation Tests', () => { await expect(page.locator('.chart-title').nth(2)).toContainText('饼图', { timeout: 5000 }); console.log('✓ All chart titles are correct'); }); + + test('should handle button group clicks and active states', async ({ page }) => { + await page.goto('/'); + await page.waitForLoadState('networkidle', { timeout: 10000 }); + + // Navigate to Form page where button groups are displayed + await page.click('text=表单页'); + await page.waitForTimeout(1000); + await expect(page.locator('h1.title')).toContainText('控件展示', { timeout: 5000 }); + + // Test horizontal button group + console.log('Testing horizontal button group:'); + + // Initially no button should be active + await expect(page.locator('.btn-group:not(.vertical) .btn.active')).toHaveCount(0); + console.log('✓ No buttons active initially (horizontal group)'); + + // Click left button + await page.locator('.btn-group:not(.vertical) .btn:has-text("左")').click(); + await page.waitForTimeout(500); + await expect(page.locator('.btn-group:not(.vertical) .btn:has-text("左")')).toHaveClass(/active/); + console.log('✓ Left button activated'); + + // Click center button + await page.locator('.btn-group:not(.vertical) .btn:has-text("中")').click(); + await page.waitForTimeout(500); + await expect(page.locator('.btn-group:not(.vertical) .btn:has-text("中")')).toHaveClass(/active/); + await expect(page.locator('.btn-group:not(.vertical) .btn:has-text("左")')).not.toHaveClass(/active/); + console.log('✓ Center button activated, left button deactivated'); + + // Click right button + await page.locator('.btn-group:not(.vertical) .btn:has-text("右")').click(); + await page.waitForTimeout(500); + await expect(page.locator('.btn-group:not(.vertical) .btn:has-text("右")')).toHaveClass(/active/); + await expect(page.locator('.btn-group:not(.vertical) .btn:has-text("中")')).not.toHaveClass(/active/); + console.log('✓ Right button activated, center button deactivated'); + + // Test vertical button group + console.log('\nTesting vertical button group:'); + + // Initially no button should be active + await expect(page.locator('.btn-group.vertical .btn.active')).toHaveCount(0); + console.log('✓ No buttons active initially (vertical group)'); + + // Click top button + await page.locator('.btn-group.vertical .btn:has-text("顶部")').click(); + await page.waitForTimeout(500); + await expect(page.locator('.btn-group.vertical .btn:has-text("顶部")')).toHaveClass(/active/); + console.log('✓ Top button activated'); + + // Click middle button + await page.locator('.btn-group.vertical .btn:has-text("中间")').click(); + await page.waitForTimeout(500); + await expect(page.locator('.btn-group.vertical .btn:has-text("中间")')).toHaveClass(/active/); + await expect(page.locator('.btn-group.vertical .btn:has-text("顶部")')).not.toHaveClass(/active/); + console.log('✓ Middle button activated, top button deactivated'); + + // Click bottom button + await page.locator('.btn-group.vertical .btn:has-text("底部")').click(); + await page.waitForTimeout(500); + await expect(page.locator('.btn-group.vertical .btn:has-text("底部")')).toHaveClass(/active/); + await expect(page.locator('.btn-group.vertical .btn:has-text("中间")')).not.toHaveClass(/active/); + console.log('✓ Bottom button activated, middle button deactivated'); + + console.log('\n✓ All button group tests passed successfully!'); + }); }); From d954c13ad7aaf5c7f7916ec77692bc467da24477 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 4 Dec 2025 09:59:24 +0000 Subject: [PATCH 3/3] docs: Update playwright config with trailing slash fix Co-authored-by: kelvenray <2155845+kelvenray@users.noreply.github.com> --- playwright.config.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/playwright.config.js b/playwright.config.js index 5066093..281bf95 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -9,7 +9,7 @@ module.exports = defineConfig({ workers: process.env.CI ? 1 : undefined, reporter: 'html', use: { - baseURL: 'http://localhost:5173/myfrontend', + baseURL: 'http://localhost:5173/myfrontend/', trace: 'on-first-retry', screenshot: 'on', }, @@ -22,8 +22,9 @@ module.exports = defineConfig({ ], webServer: { - command: 'cd Vue3 && npm run dev', - url: 'http://localhost:5173/myfrontend', + command: 'npm run dev', + cwd: './Vue3', + url: 'http://localhost:5173/myfrontend/', reuseExistingServer: !process.env.CI, timeout: 120 * 1000, },