Merge pull request #10388 from gitbutlerapp/feat-edit-mode-e2e-and-testids

fix & E2E: Add edit mode e2e test and fix the edit commit flow

Author: estib-vega

apps/desktop/src/components/CommitContextMenu.svelte

@@ -172,6 +172,7 @@
 					<ContextMenuItem
 						label="Edit commit"
 						icon="edit-commit"
+						testId={TestId.CommitRowContextMenu_EditCommit}
 						disabled={isReadOnly}
 						onclick={(e: MouseEvent) => {
 							if (!isReadOnly) {

apps/desktop/src/components/EditMode.svelte

@@ -165,10 +165,12 @@
 	}
 
 	async function abort() {
+		if (loading) return;
 		await abortEdit({ projectId });
 	}
 
 	async function save() {
+		if (loading) return;
 		await saveEdit({ projectId });
 	}
 
@@ -342,7 +344,7 @@
 	</p>
 	{#snippet controls(close)}
 		<Button kind="outline" type="reset" onclick={close}>Cancel</Button>
-		<Button style="error" type="submit">Save and exit</Button>
+		<Button style="error" type="submit" {loading}>Save and exit</Button>
 	{/snippet}
 </Modal>
 

apps/desktop/src/components/lib.ts

@@ -48,7 +48,7 @@ export function isLocalAndRemoteCommit(commit: Commit | UpstreamCommit): commit
 }
 
 export function hasConflicts(commit: Commit): boolean {
-	return commit.state.type === 'LocalAndRemote' && commit.id !== commit.state.subject;
+	return commit.hasConflicts;
 }
 
 export function getBranchStatusLabelAndColor(pushStatus: PushStatus): {

e2e/playwright/tests/editMode.spec.ts

@@ -0,0 +1,55 @@
+import { getBaseURL, startGitButler, type GitButler } from '../src/setup.ts';
+import { clickByTestId, waitForTestId } from '../src/util.ts';
+import { expect, test } from '@playwright/test';
+import { readFileSync, writeFileSync } from 'fs';
+
+let gitbutler: GitButler;
+
+test.use({
+	baseURL: getBaseURL()
+});
+
+test.afterEach(async () => {
+	gitbutler?.destroy();
+});
+
+test('should be able to edit a commit through the edit mode', async ({
+	page,
+	context
+}, testInfo) => {
+	const workdir = testInfo.outputPath('workdir');
+	const configdir = testInfo.outputPath('config');
+	gitbutler = await startGitButler(workdir, configdir, context);
+
+	const fileBPath = gitbutler.pathInWorkdir('file-b.txt');
+
+	await gitbutler.runScript('project-with-remote-branches.sh');
+	await gitbutler.runScript('apply-upstream-branch.sh', ['branch1', 'local-clone']);
+
+	await page.goto('/');
+
+	// Should load the workspace
+	await waitForTestId(page, 'workspace-view');
+
+	const commitRows = page.getByTestId('commit-row');
+	await expect(commitRows).toHaveCount(2);
+	const bottomCommit = commitRows.filter({ hasText: 'branch1: first commit' });
+
+	bottomCommit.click({ button: 'right' });
+	await clickByTestId(page, 'commit-row-context-menu-edit-commit');
+	// Should open the edit mode
+	await waitForTestId(page, 'edit-mode');
+
+	// Create another file to commit
+	writeFileSync(fileBPath, 'This is file B\n', { encoding: 'utf-8' });
+
+	// Click the save and exit button
+	await clickByTestId(page, 'edit-mode-save-and-exit-button');
+
+	// Should be back in the workspace
+	await waitForTestId(page, 'workspace-view');
+
+	const fileBContent = readFileSync(fileBPath, { encoding: 'utf-8' });
+
+	expect(fileBContent).toEqual('This is file B\n');
+});

packages/ui/src/lib/utils/testIds.ts

@@ -43,6 +43,7 @@ export enum TestId {
 	CommitRowContextMenu = 'commit-row-context-menu',
 	CommitRowContextMenu_UncommitMenuButton = 'commit-row-context-menu-uncommit-menu-btn',
 	CommitRowContextMenu_EditMessageMenuButton = 'commit-row-context-menu-edit-message-menu-btn',
+	CommitRowContextMenu_EditCommit = 'commit-row-context-menu-edit-commit',
 	NewCommitView = 'new-commit-view',
 	StackDraft = 'draft-stack',
 	YourCommitGoesHere = 'your-commit-goes-here',