|
| 1 | +import { test, expect } from '@playwright/test'; |
| 2 | +import { waitForReactMount, CONSOLE_BASE } from './helpers'; |
| 3 | + |
| 4 | +/** |
| 5 | + * Sidebar text visibility tests |
| 6 | + * |
| 7 | + * These tests validate that the sidebar displays text correctly |
| 8 | + * when toggled between collapsed (icon mode) and expanded states. |
| 9 | + */ |
| 10 | + |
| 11 | +test.describe('Sidebar Text Visibility', () => { |
| 12 | + test('should show all text labels when sidebar is expanded in icon mode', async ({ page }) => { |
| 13 | + await page.goto(`${CONSOLE_BASE}/`); |
| 14 | + await waitForReactMount(page); |
| 15 | + |
| 16 | + // Wait for sidebar to be visible |
| 17 | + const sidebar = page.locator('[data-sidebar="sidebar"]').first(); |
| 18 | + await expect(sidebar).toBeVisible(); |
| 19 | + |
| 20 | + // Find the sidebar toggle button |
| 21 | + const toggleButton = page.locator('[data-sidebar="trigger"]').first(); |
| 22 | + await expect(toggleButton).toBeVisible(); |
| 23 | + |
| 24 | + // Get the parent sidebar element that has data-state attribute |
| 25 | + const sidebarGroup = page.locator('.group[data-collapsible="icon"]').first(); |
| 26 | + |
| 27 | + // First, collapse the sidebar if it's expanded |
| 28 | + let currentState = await sidebarGroup.getAttribute('data-state'); |
| 29 | + if (currentState === 'expanded') { |
| 30 | + await toggleButton.click(); |
| 31 | + await page.waitForTimeout(300); // Wait for animation |
| 32 | + currentState = await sidebarGroup.getAttribute('data-state'); |
| 33 | + expect(currentState).toBe('collapsed'); |
| 34 | + } |
| 35 | + |
| 36 | + // Now expand the sidebar |
| 37 | + await toggleButton.click(); |
| 38 | + await page.waitForTimeout(300); // Wait for animation |
| 39 | + |
| 40 | + // Verify sidebar is expanded |
| 41 | + currentState = await sidebarGroup.getAttribute('data-state'); |
| 42 | + expect(currentState).toBe('expanded'); |
| 43 | + |
| 44 | + // Check that group labels are visible |
| 45 | + const groupLabels = page.locator('[data-sidebar="group-label"]'); |
| 46 | + const labelCount = await groupLabels.count(); |
| 47 | + |
| 48 | + if (labelCount > 0) { |
| 49 | + for (let i = 0; i < labelCount; i++) { |
| 50 | + const label = groupLabels.nth(i); |
| 51 | + |
| 52 | + // Check opacity |
| 53 | + const opacity = await label.evaluate((el) => { |
| 54 | + return window.getComputedStyle(el).opacity; |
| 55 | + }); |
| 56 | + expect(parseFloat(opacity), `Group label ${i} should be fully visible (opacity: 1)`).toBe(1); |
| 57 | + |
| 58 | + // Check display |
| 59 | + const display = await label.evaluate((el) => { |
| 60 | + return window.getComputedStyle(el).display; |
| 61 | + }); |
| 62 | + expect(display, `Group label ${i} should not be hidden`).not.toBe('none'); |
| 63 | + } |
| 64 | + } |
| 65 | + |
| 66 | + // Check that menu button text is visible |
| 67 | + const menuButtons = page.locator('[data-sidebar="menu-button"]'); |
| 68 | + const buttonCount = await menuButtons.count(); |
| 69 | + |
| 70 | + if (buttonCount > 0) { |
| 71 | + for (let i = 0; i < buttonCount; i++) { |
| 72 | + const button = menuButtons.nth(i); |
| 73 | + |
| 74 | + // Check that button has proper width (not constrained to icon size) |
| 75 | + const width = await button.evaluate((el) => { |
| 76 | + return window.getComputedStyle(el).width; |
| 77 | + }); |
| 78 | + |
| 79 | + // In expanded mode, button should not be constrained to 2rem (32px) |
| 80 | + const widthPx = parseFloat(width); |
| 81 | + expect(widthPx, `Menu button ${i} should be wider than icon size (${widthPx}px)`).toBeGreaterThan(32); |
| 82 | + } |
| 83 | + } |
| 84 | + |
| 85 | + // Take a screenshot for visual verification |
| 86 | + await page.screenshot({ |
| 87 | + path: '/tmp/sidebar-expanded.png', |
| 88 | + fullPage: false |
| 89 | + }); |
| 90 | + |
| 91 | + console.log(`Found ${labelCount} group labels and ${buttonCount} menu buttons`); |
| 92 | + }); |
| 93 | + |
| 94 | + test('should hide text labels when sidebar is collapsed in icon mode', async ({ page }) => { |
| 95 | + await page.goto(`${CONSOLE_BASE}/`); |
| 96 | + await waitForReactMount(page); |
| 97 | + |
| 98 | + const sidebar = page.locator('[data-sidebar="sidebar"]').first(); |
| 99 | + await expect(sidebar).toBeVisible(); |
| 100 | + |
| 101 | + const toggleButton = page.locator('[data-sidebar="trigger"]').first(); |
| 102 | + await expect(toggleButton).toBeVisible(); |
| 103 | + |
| 104 | + const sidebarGroup = page.locator('.group[data-collapsible="icon"]').first(); |
| 105 | + |
| 106 | + // Expand first if needed |
| 107 | + let currentState = await sidebarGroup.getAttribute('data-state'); |
| 108 | + if (currentState === 'collapsed') { |
| 109 | + await toggleButton.click(); |
| 110 | + await page.waitForTimeout(300); |
| 111 | + } |
| 112 | + |
| 113 | + // Now collapse |
| 114 | + await toggleButton.click(); |
| 115 | + await page.waitForTimeout(300); |
| 116 | + |
| 117 | + currentState = await sidebarGroup.getAttribute('data-state'); |
| 118 | + expect(currentState).toBe('collapsed'); |
| 119 | + |
| 120 | + // Check that group labels are hidden |
| 121 | + const groupLabels = page.locator('[data-sidebar="group-label"]'); |
| 122 | + const labelCount = await groupLabels.count(); |
| 123 | + |
| 124 | + if (labelCount > 0) { |
| 125 | + for (let i = 0; i < labelCount; i++) { |
| 126 | + const label = groupLabels.nth(i); |
| 127 | + |
| 128 | + const opacity = await label.evaluate((el) => { |
| 129 | + return window.getComputedStyle(el).opacity; |
| 130 | + }); |
| 131 | + expect(parseFloat(opacity), `Group label ${i} should be hidden (opacity: 0) when collapsed`).toBe(0); |
| 132 | + } |
| 133 | + } |
| 134 | + |
| 135 | + // Take a screenshot |
| 136 | + await page.screenshot({ |
| 137 | + path: '/tmp/sidebar-collapsed.png', |
| 138 | + fullPage: false |
| 139 | + }); |
| 140 | + }); |
| 141 | +}); |
0 commit comments