E2E: Add test for tearing off branch from stack into a new stack

Instrument and extend the e2e tests to probe for tearing off a branch from a stack

Author: estib-vega

apps/desktop/src/components/MultiStackOfflaneDropzone.svelte

@@ -7,6 +7,7 @@
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { UI_STATE } from '$lib/state/uiState.svelte';
 	import { inject } from '@gitbutler/core/context';
+	import { TestId } from '@gitbutler/ui';
 	import { focusable } from '@gitbutler/ui/focus/focusable';
 	import { intersectionObserver } from '@gitbutler/ui/utils/intersectionObserver';
 	import type { Snippet } from 'svelte';
@@ -32,6 +33,7 @@
 
 <div
 	class="hidden-dropzone"
+	data-testid={TestId.StackOfflaneDropzone}
 	use:focusable
 	use:intersectionObserver={{
 		callback: (entry) => {

e2e/playwright/tests/moveBranch.spec.ts

@@ -12,7 +12,7 @@ test.afterEach(async () => {
 	gitbutler?.destroy();
 });
 
-test('move branch to top of other stack', async ({ page, context }, testInfo) => {
+test('move branch to top of other stack and tear it off', async ({ page, context }, testInfo) => {
 	const workdir = testInfo.outputPath('workdir');
 	const configdir = testInfo.outputPath('config');
 	gitbutler = await startGitButler(workdir, configdir, context);
@@ -51,6 +51,23 @@ test('move branch to top of other stack', async ({ page, context }, testInfo) =>
 	await expect(stacks).toHaveCount(1);
 	branchHeaders = page.getByTestId('branch-header');
 	await expect(branchHeaders).toHaveCount(2);
+
+	// Now tear off branch2
+	const updatedBranch1Locator = branchHeaders.filter({ hasText: 'branch2' });
+	const stackDropzone = await waitForTestId(page, 'stack-offlane-dropzone');
+	await dragAndDropByLocator(page, updatedBranch1Locator, stackDropzone, {
+		force: true,
+		position: {
+			x: 10,
+			y: 10
+		}
+	});
+
+	// Should have two stacks again
+	stacks = page.getByTestId('stack');
+	await expect(stacks).toHaveCount(2);
+	branchHeaders = page.getByTestId('branch-header');
+	await expect(branchHeaders).toHaveCount(2);
 });
 
 test('move branch to the middle of other stack', async ({ page, context }, testInfo) => {

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

@@ -63,6 +63,7 @@ export enum TestId {
 	ToastInfoMessage = 'toast-info-message',
 	Stack = 'stack',
 	StackHeader = 'stack-header',
+	StackOfflaneDropzone = 'stack-offlane-dropzone',
 	BranchesViewApplyBranchButton = 'branches-view-apply-branch-button',
 	BranchesViewDeleteLocalBranchButton = 'branches-view-delete-local-branch-button',
 	BranchesViewApplyFromForkButton = 'branches-view-apply-from-fork-button',