Add proof of concept drag & drop e2e test

.github/workflows/push-e2e-img.yml

@@ -0,0 +1,27 @@
+name: build e2e-runner container
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'apps/desktop/e2e/Dockerfile'
+
+jobs:
+  docker_publish:
+    runs-on: ubuntu-latest
+    permissions: write-all
+    steps:
+      - uses: actions/checkout@v4
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push container image
+        uses: docker/build-push-action@v6
+        with:
+          context: 'apps/desktop/e2e'
+          push: true
+          tags: ghcr.io/gitbutler/e2e-runner:latest

.gitignore

@@ -53,3 +53,6 @@ storybook-static
 
 # Rust analyzer
 .rust-analyzer/
+
+# gitbutler-tauri generated
+crates/gitbutler-tauri/gen/*

apps/desktop/e2e/Dockerfile

@@ -0,0 +1,92 @@
+# Container for running E2E tests on MacOS
+#
+# 1. docker build --tag gitbutler/e2e:latest
+# 2. docker run --name e2e-agent --detach -p 2222:22 -v $GITBUTLER_REPO:/root/gitbutler \
+#     -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
+# 7. cargo build -p gitbutler-git && cargo build -p gitbutler-cli
+# 8. pnpm build:test
+# 9. pnpm test:e2e
+
+FROM ubuntu:24.04
+
+RUN apt update && \
+  apt install -y \
+  build-essential \
+  curl \
+  git \
+  pkg-config \
+  psmisc \
+  vim \
+  # Required for release builds
+  jq  \
+  file && \
+  # Clean up
+  apt -y autoremove && apt -y clean
+
+# Install Tauri dependencies
+# https://v2.tauri.app/start/prerequisites/#linux
+RUN apt install -y \
+  libwebkit2gtk-4.1-dev \
+  build-essential \
+  curl \
+  wget \
+  libssl-dev \
+  libgtk-3-dev \
+  libayatana-appindicator3-dev \
+  librsvg2-dev && \
+  # Clean up
+  apt -y autoremove && apt -y clean
+
+# Install tauri-driver dependencies
+RUN apt install -y \
+  dbus-x11 \
+  webkit2gtk-driver \
+  xvfb && \
+  # Clean up
+  apt -y autoremove && apt -y clean
+
+# Install ssh server for X11 forwarding
+RUN apt install -y openssh-server && \
+  # Needed for recording test execution.
+  apt install -y ffmpeg && \
+  # Install gitbutler dependencies
+  apt install -y cmake && \
+  # Clean up
+  apt -y autoremove && apt -y clean
+
+# Needed by at least pnpm.
+ENV SHELL=bash
+
+# Install rust.
+RUN curl https://sh.rustup.rs -sSf | sh -s -- -y
+ENV PATH="/root/.cargo/bin:${PATH}"
+
+# Install node.
+RUN curl -fsSL "https://deb.nodesource.com/setup_20.x" | bash - && \
+  apt install -y nodejs && \
+  corepack enable
+
+# Install pnpm and configure store directory.
+ENV PNPM_HOME=/tmp/.pnpm
+RUN wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.bashrc" SHELL="$(which bash)" bash -
+# Home/store dir should be mounted from the host.
+RUN pnpm config set store-dir /tmp/.pnpm
+ENV PATH="/tmp/.pnpm:${PATH}"
+RUN pnpm setup
+
+# Used to manage build dependencies between packages.
+RUN pnpm add --global turbo && \
+  # Used as a proxy for communicating with WebKitWebDriver.
+  cargo install tauri-driver && \
+  # vi bindings on by default.
+  echo "set -o vi" >> /root/.bashrc
+
+# Run SSH server in foreground.
+CMD ["service", "ssh", "start", "-D"]
+

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 "test@example.com"
+  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"] .dropzone-target';
+
+		const fileItem = await $(fileSelector);
+		const dropTarget = await $(dropSelector);
+		await fileItem.waitForDisplayed();
+		await dropTarget.waitForExist();
+
+		// The actual drop target can be different from the element with the `dropZone` directive..
+		await driver.executeScript(dragAndDrop, [fileSelector, dropSelector]);
+
+		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();