Add proof of concept drag & drop e2e test

apps/desktop/e2e/Dockerfile

@@ -5,6 +5,7 @@
 #     -v /tmp/e2e-pnpm-store:/tmp/pnpm-store gitbutler/e2e:latest
 # 3. docker cp -a ~/.ssh/id_ed25519.pub e2e-agent:/root/.ssh/authorized_keys
 # 4. ssh -p 2222 -Y root@localhost
+# 4.5 Fix .ssh/ permissions with chmod and chgrp
 # The rest is run inside the container in your SSH session:
 # 5. cd /root/gitbutler
 # 6. pnpm install && cargo build

apps/desktop/e2e/scripts/confirm-analytics.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+set -eu -o pipefail
+
+DATA_DIR="$HOME/.local/share/com.gitbutler.app.test"
+if [ ! -d "$DATA_DIR" ]; then
+  echo "Creating data dir: $DATA_DIR"
+  mkdir -p $DATA_DIR
+fi
+echo "Confirming analytics"
+echo '{"appAnalyticsConfirmed":true}' > $DATA_DIR/settings.json
+

apps/desktop/e2e/scripts/init.sh

@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+
+set -eu -o pipefail
+
+TEMP_DIR=${1:?The first argument is a temp dir}
+# Convert to absolute path
+TEMP_DIR=$(realpath "$TEMP_DIR")
+
+
+CLI=$(realpath "../../target/debug/gitbutler-cli")
+
+DATA_DIR="$HOME/.local/share/com.gitbutler.app.test"
+if [ -d "$DATA_DIR" ]; then
+  rm -rf $DATA_DIR
+fi
+
+function setGitDefaults() {
+  git config user.email "[email protected]"
+  git config user.name "Test User"
+  git config init.defaultBranch master
+}
+
+function tick() {
+  if test -z "${tick+set}"; then
+    tick=1675176957
+  else
+    tick=$($tick + 60)
+  fi
+  GIT_COMMITTER_DATE="$tick +0100"
+  GIT_AUTHOR_DATE="$tick +0100"
+  export GIT_COMMITTER_DATE GIT_AUTHOR_DATE
+}
+tick
+
+if [ -d "$TEMP_DIR" ]; then
+  rm -rf "$TEMP_DIR"
+fi
+mkdir "$TEMP_DIR"
+
+(
+  cd "$TEMP_DIR"
+  git init remote
+  cd remote
+  setGitDefaults
+  echo first >file
+  git add . && git commit -m "init"
+)
+

apps/desktop/e2e/tests/add-project.spec.ts

@@ -1,24 +1,32 @@
 import { spawnAndLog, findAndClick, setElementValue } from '../utils.js';
 
+const TEMP_DIR = '/tmp/gitbutler-add-project';
+const REPO_NAME = 'one-vbranch-on-integration';
+
 describe('Project', () => {
 	before(() => {
 		spawnAndLog('bash', [
 			'-c',
-			'./e2e/scripts/init-repositories.sh ../../target/debug/gitbutler-cli'
+			`
+				source ./e2e/scripts/init.sh ${TEMP_DIR}
+				cd ${TEMP_DIR};
+				git clone remote ${REPO_NAME} && cd ${REPO_NAME}
+				$CLI project -s dev add --switch-to-workspace "$(git rev-parse --symbolic-full-name "@{u}")"
+				$CLI branch create virtual
+			`
 		]);
 	});
 
 	it('should add a local project', async () => {
 		await findAndClick('button[data-testid="analytics-continue"]');
 
 		const dirInput = await $('input[data-testid="test-directory-path"]');
-		setElementValue(dirInput, '/tmp/gb-e2e-repos/one-vbranch-on-integration');
+		setElementValue(dirInput, `${TEMP_DIR}/${REPO_NAME}`);
 
-		await findAndClick('button[data-testid="add-local-project"]');
-		await findAndClick('button[data-testid="set-base-branch"]');
-		await findAndClick('button[data-testid="accept-git-auth"]');
+		await $('button[data-testid="add-local-project"]').then(async (b) => await b.click());
+		await $('button[data-testid="set-base-branch"]').then(async (b) => await b.click());
+		await $('button[data-testid="accept-git-auth"]').then(async (b) => await b.click());
 
-		const workspaceButton = await $('button=Workspace');
-		await expect(workspaceButton).toExist();
+		await expect($('button=Workspace')).toExist();
 	});
 });

apps/desktop/e2e/tests/drag-file.spec.ts

@@ -0,0 +1,40 @@
+import { spawnAndLog } from '../utils.js';
+import { codeForSelectors as dragAndDrop } from 'html-dnd';
+
+const TEMP_DIR = '/tmp/gitbutler-drag-files';
+const REPO_NAME = 'simple-drag-test';
+
+describe('Drag', () => {
+	before(() => {
+		spawnAndLog('bash', [
+			'-c',
+			`
+				source ./e2e/scripts/init.sh ${TEMP_DIR}
+				bash ./e2e/scripts/confirm-analytics.sh
+				cd ${TEMP_DIR};
+				git clone remote ${REPO_NAME} && cd ${REPO_NAME}
+				setGitDefaults
+				$CLI project -s test add --switch-to-workspace "$(git rev-parse --symbolic-full-name "@{u}")"
+				$CLI branch create virtual-one
+				$CLI branch create virtual-two
+				echo "hello world" > hello
+			`
+		]);
+	});
+
+	it('drag file from one lane to another', async () => {
+		const fileSelector = '[data-testid="file-hello"]';
+		const dropSelector = '[data-testid="virtual-two-files-dz"]';
+
+		const fileItem = await $(fileSelector);
+		const dropTarget = await $(dropSelector);
+		await fileItem.waitForDisplayed();
+		await dropTarget.waitForDisplayed();
+
+		// The actual drop target can be different from the element with the `dropZone` directive..
+		await driver.executeScript(dragAndDrop, [fileSelector, dropSelector + ' .dropzone-target']);
+
+		const finishSelector = await $('[data-testid="branch-virtual-two"] [data-testid="file-hello"]');
+		await finishSelector.waitForDisplayed();
+	});
+});

apps/desktop/package.json

@@ -73,6 +73,7 @@
 		"diff-match-patch": "^1.0.5",
 		"fuse.js": "^7.0.0",
 		"git-url-parse": "^14.0.0",
+		"html-dnd": "^1.2.1",
 		"jsdom": "^24.1.1",
 		"lscache": "^1.3.2",
 		"marked": "^10.0.0",

apps/desktop/src/lib/branch/BranchLane.svelte

@@ -66,7 +66,7 @@
 	});
 </script>
 
-<div class="wrapper">
+<div class="wrapper" data-testid="branch-{branch.name}">
 	<Stack {commitBoxOpen} {isLaneCollapsed} />
 
 	{#if selected}

apps/desktop/src/lib/branch/Dropzones.svelte

@@ -12,9 +12,10 @@
 	interface Props {
 		children: Snippet;
 		type?: 'commit' | 'file' | 'all';
+		id?: string;
 	}
 
-	const { children, type = 'all' }: Props = $props();
+	const { children, id, type = 'all' }: Props = $props();
 
 	const actions = $derived(branchDragActionsFactory.build($branch));
 
@@ -51,7 +52,12 @@
 {/snippet}
 
 {#snippet branchDropDropzone()}
-	<Dropzone accepts={acceptsFiles} ondrop={actions.onBranchDrop.bind(actions)} fillHeight>
+	<Dropzone
+		accepts={acceptsFiles}
+		ondrop={actions.onBranchDrop.bind(actions)}
+		fillHeight
+		id={id ? id + '-files-dz' : undefined}
+	>
 		{@render children()}
 
 		{#snippet overlay({ hovered, activated })}

apps/desktop/src/lib/dragging/dropzone.ts

@@ -45,9 +45,9 @@ export class Dropzone {
 		this.registerListeners();
 
 		// Mark the dropzone as active
+		this.activated = true;
 		setTimeout(() => {
 			this.configuration.onActivationStart();
-			this.activated = true;
 		}, 10);
 	}
 	async reregister(newConfig: DropzoneConfiguration) {

apps/desktop/src/lib/dropzone/Dropzone.svelte

@@ -5,6 +5,7 @@
 	interface Props {
 		disabled?: boolean;
 		fillHeight?: boolean;
+		id?: string;
 		accepts: (data: any) => boolean;
 		ondrop: (data: any) => Promise<void> | void;
 		overlay?: Snippet<[{ hovered: boolean; activated: boolean }]>;
@@ -14,6 +15,7 @@
 	const {
 		disabled = false,
 		fillHeight = false,
+		id,
 		accepts,
 		ondrop,
 		overlay,
@@ -53,6 +55,7 @@
 		target: '.dropzone-target'
 	}}
 	class:fill-height={fillHeight}
+	data-testid={id}
 	class="dropzone-container"
 >
 	{#if overlay}

apps/desktop/src/lib/stack/Stack.svelte

@@ -128,7 +128,7 @@
 						{#if branchHasFiles}
 							<UncommittedChanges {commitBoxOpen} />
 						{:else if branchHasNoCommits}
-							<Dropzones type="file">
+							<Dropzones type="file" id={branch.name}>
 								<div class="new-branch">
 									<EmptyStatePlaceholder image={laneNewSvg} width={180} bottomMargin={48}>
 										{#snippet title()}

apps/desktop/tsconfig.json

@@ -28,8 +28,6 @@
 		"src/**/*.js",
 		"src/**/*.ts",
 		"src/**/*.svelte",
-		"e2e/tests/**/*.js",
-		"e2e/tests/**/*.ts",
-		"e2e/tests/**/*.svelte"
+		"e2e/**/*.ts",
 	]
 }

packages/ui/src/lib/file/FileListItem.svelte

@@ -76,6 +76,7 @@
 	tabindex="-1"
 	{onclick}
 	{onkeydown}
+	data-testid={'file-' + filePath}
 	oncontextmenu={(e) => {
 		if (oncontextmenu) {
 			e.preventDefault();