Files
automaker/apps/ui/tests/projects/new-project-creation.spec.ts
Stefan de Vogelaere 01859f3a9a feat(ui): unified sidebar with collapsible sections and enhanced UX (#659)
* feat(ui): add unified sidebar component

Add new unified-sidebar component for layout improvements.
- Export UnifiedSidebar from layout components
- Update root route to use new sidebar structure

* refactor(ui): consolidate unified-sidebar into sidebar folder

Merge the unified-sidebar implementation into the standard sidebar
folder structure. The unified sidebar becomes the canonical sidebar
with improved features including collapsible sections, scroll
indicators, and enhanced mobile support.

- Delete old sidebar.tsx
- Move unified-sidebar components to sidebar/components
- Rename UnifiedSidebar to Sidebar
- Update all imports in __root.tsx
- Remove redundant unified-sidebar folder

* fix(ui): address PR review comments and fix E2E tests for unified sidebar

- Add try/catch for getElectronAPI() in sidebar-footer with window.open fallback
- Use formatShortcut() for OS-aware hotkey display in sidebar-header
- Remove unnecessary optional chaining on project.icon
- Remove redundant ternary in sidebar-navigation className
- Update E2E tests to use new project-dropdown-trigger data-testid

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-23 02:06:10 +01:00

92 lines
3.1 KiB
TypeScript

/**
* Project Creation E2E Test
*
* Happy path: Create a new blank project from welcome view
*/
import { test, expect } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';
import {
createTempDirPath,
cleanupTempDir,
setupWelcomeView,
authenticateForTests,
handleLoginScreenIfPresent,
waitForNetworkIdle,
} from '../utils';
const TEST_TEMP_DIR = createTempDirPath('project-creation-test');
test.describe('Project Creation', () => {
test.beforeAll(async () => {
if (!fs.existsSync(TEST_TEMP_DIR)) {
fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
}
});
test.afterAll(async () => {
cleanupTempDir(TEST_TEMP_DIR);
});
test('should create a new blank project from welcome view', async ({ page }) => {
const projectName = `test-project-${Date.now()}`;
await setupWelcomeView(page, { workspaceDir: TEST_TEMP_DIR });
// Intercept settings API BEFORE authenticateForTests (which navigates to the page)
// This prevents settings hydration from restoring a project and disables auto-open
await page.route('**/api/settings/global', async (route) => {
const response = await route.fetch();
const json = await response.json();
// Remove currentProjectId and clear projects to prevent auto-open
if (json.settings) {
json.settings.currentProjectId = null;
json.settings.projects = [];
}
await route.fulfill({ response, json });
});
await authenticateForTests(page);
// Navigate directly to dashboard to avoid auto-open logic
await page.goto('/dashboard');
await page.waitForLoadState('load');
await handleLoginScreenIfPresent(page);
// Wait for dashboard view
await expect(page.locator('[data-testid="dashboard-view"]')).toBeVisible({ timeout: 15000 });
await page.locator('[data-testid="create-new-project"]').click();
await page.locator('[data-testid="quick-setup-option"]').click();
await expect(page.locator('[data-testid="new-project-modal"]')).toBeVisible({ timeout: 5000 });
await page.locator('[data-testid="project-name-input"]').fill(projectName);
await expect(page.getByText('Will be created at:')).toBeVisible({ timeout: 5000 });
await page.locator('[data-testid="confirm-create-project"]').click();
await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 15000 });
// Expand sidebar if collapsed to see project name
const expandSidebarButton = page.locator('button:has-text("Expand sidebar")');
if (await expandSidebarButton.isVisible()) {
await expandSidebarButton.click();
await page.waitForTimeout(300);
}
// Wait for project to be set as current and visible on the page
// The project name appears in the project dropdown trigger
await expect(
page.locator('[data-testid="project-dropdown-trigger"]').getByText(projectName)
).toBeVisible({
timeout: 15000,
});
// Project was created successfully if we're on board view with project name visible
// Note: The actual project directory is created in the server's default workspace,
// not necessarily TEST_TEMP_DIR. This is expected behavior.
});
});