Added unit test for error happening during user drag and drop

Author: zonia3000

__tests__/v2/admin_group_edit_page.test.js

@@ -0,0 +1,64 @@
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+import { fireEvent, render } from '@testing-library/svelte';
+import { readable } from 'svelte/store';
+
+// Mocking fetch
+global.fetch = vi.fn();
+
+// Mocking the page store
+vi.mock('$app/stores', () => {
+	return {
+		page: readable({
+			data: {
+				users: [
+					{ id: 1, email: '[email protected]' },
+					{ id: 2, email: '[email protected]' }
+				],
+				group: {
+					name: 'test',
+					user_ids: [1]
+				}
+			}
+		})
+	};
+});
+
+// The component to be tested must be imported after the mock setup
+import page from '../../src/routes/v2/admin/groups/[groupId]/edit/+page.svelte';
+
+describe('Admin group edit page', () => {
+	beforeEach(() => {
+		fetch.mockClear();
+	});
+
+	it('User is added successfully', async () => {
+		const result = render(page);
+
+		fetch.mockResolvedValue({
+			ok: true,
+			status: 200,
+			json: async () => ({ name: 'test', user_ids: [1, 2] })
+		});
+		fireEvent.dragStart(result.getByRole('button', { name: '[email protected]' }));
+		fireEvent.drop(result.getByText(/drag the users here/i));
+
+		await result.findByText(/No more users available/);
+		expect(result.queryByRole('button', { name: '[email protected]' })).null;
+	});
+
+	it('Error happens when user is dragged and dropped', async () => {
+		const result = render(page);
+
+		fetch.mockResolvedValue({
+			ok: false,
+			status: 422,
+			json: async () => ({ detail: 'An error happened' })
+		});
+
+		fireEvent.dragStart(result.getByRole('button', { name: '[email protected]' }));
+		fireEvent.drop(result.getByText(/drag the users here/i));
+
+		await result.findByText(/An error happened/);
+		expect(result.queryByRole('button', { name: '[email protected]' })).not.null;
+	});
+});

src/lib/components/v2/admin/UserEditor.svelte

@@ -272,7 +272,6 @@
 					id="email"
 					bind:value={user.email}
 					class:is-invalid={formSubmitted && $validationErrors['email']}
-					disabled={!!user.id}
 					required
 				/>
 				<span class="invalid-feedback">{$validationErrors['email']}</span>

src/routes/v2/admin/groups/[groupId]/edit/+page.svelte

@@ -38,6 +38,8 @@
 			return;
 		}
 
+		const previousUserIs = [...group.user_ids]; // copy the old values
+
 		addingUser = draggedUser;
 		group = { ...group, user_ids: [...group.user_ids, draggedUser.id] };
 
@@ -52,7 +54,6 @@
 			})
 		});
 
-		const previousUserIs = [...group.user_ids]; // copy the old values
 		const result = await response.json();
 		if (response.ok) {
 			group = result;