Merge pull request #789 from fractal-analytics-platform/svelte5

Migration to Svelte 5

Author: zonia3000

.prettierrc

@@ -4,5 +4,6 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"pluginSearchDirs": ["."],
+	"plugins": ["prettier-plugin-svelte"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

CHANGELOG.md

@@ -1,5 +1,9 @@
 *Note: Numbers like (\#123) point to closed Pull Requests on the fractal-web repository.*
 
+# Unreleased
+
+* Upgrade to Svelte 5 (\#789);
+
 # 1.17.4
 
 * Fixed search box not working in workflow submission modal (\#787);

__tests__/v2/CreateDatasetModal.test.js

@@ -1,18 +1,17 @@
 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', () => {
+vi.mock('$app/state', () => {
 	return {
-		page: readable({
+		page: {
 			params: {
 				projectId: 1
 			}
-		})
+		}
 	};
 });
 

__tests__/v2/JobsList.test.js

@@ -2,15 +2,14 @@ import { describe, it, expect, vi } from 'vitest';
 import { fireEvent, render } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { within, waitFor } from '@testing-library/dom';
-import { readable } from 'svelte/store';
 import { data } from '../mock/jobs-list';
 
 // Mocking the page store
-vi.mock('$app/stores', () => {
+vi.mock('$app/state', () => {
 	return {
-		page: readable({
+		page: {
 			data
-		})
+		}
 	};
 });
 // Mocking public variables
@@ -42,7 +41,7 @@ describe('JobsList', () => {
 		expect(table.querySelectorAll('tbody tr').length).eq(3);
 
 		const filters = result.getAllByRole('listbox', { hidden: false });
-		expect(filters.length).eq(3);
+		expect(filters.length).eq(4);
 
 		const statusFilter = filters[0];
 		verifyOptions(statusFilter, ['Submitted', 'Done', 'Failed']);
@@ -121,7 +120,7 @@ describe('JobsList', () => {
 
 		const cancelButton = result.getByRole('button', { name: 'Cancel' });
 		await fireEvent.click(cancelButton);
-		await new Promise(resolve => setTimeout(resolve));
+		await new Promise((resolve) => setTimeout(resolve));
 
 		const message = result.getByText(/Job cancellation request received/);
 		expect(message).toBeDefined();
@@ -143,7 +142,7 @@ describe('JobsList', () => {
 
 		const cancelButton = result.getByRole('button', { name: 'Cancel' });
 		await fireEvent.click(cancelButton);
-		await new Promise(resolve => setTimeout(resolve));
+		await new Promise((resolve) => setTimeout(resolve));
 
 		expect(result.queryAllByRole('alert').length).eq(1);
 	});
@@ -169,7 +168,7 @@ describe('JobsList', () => {
 			vi.advanceTimersByTime(3500);
 			vi.useRealTimers();
 			// trigger table update
-			await new Promise(resolve => setTimeout(resolve));
+			await new Promise((resolve) => setTimeout(resolve));
 
 			table = result.getByRole('table');
 			expect(table.querySelectorAll('tbody tr:nth-child(1) td')[1].textContent).contain('done');

__tests__/v2/TaskGroupActivities.test.js

@@ -1,7 +1,6 @@
 import { describe, it, beforeEach, expect, vi } from 'vitest';
 import { render, screen, within, waitFor } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { readable } from 'svelte/store';
 
 // Mocking fetch
 global.fetch = vi.fn();
@@ -12,11 +11,11 @@ vi.mock('$env/dynamic/public', () => {
 });
 
 // Mocking the page store
-vi.mock('$app/stores', () => {
+vi.mock('$app/state', () => {
 	return {
-		page: readable({
+		page: {
 			url: new URL('http://localhost:5173/v2/tasks/activities')
-		})
+		}
 	};
 });
 
@@ -91,8 +90,21 @@ describe('TaskGroupActivities', () => {
 		});
 
 		render(TaskGroupActivities, {
-			// @ts-expect-error
-			props: { admin: true, users: [{ id: 1, email: '[email protected]' }] }
+			props: {
+				admin: true,
+				users: [
+					{
+						id: 1,
+						email: '[email protected]',
+						username: 'admin',
+						is_active: true,
+						is_superuser: true,
+						is_verified: true,
+						group_ids_names: [],
+						oauth_accounts: []
+					}
+				]
+			}
 		});
 
 		const user = userEvent.setup();

__tests__/v2/UserEditor.test.js

@@ -1,22 +1,21 @@
 import { describe, it, beforeEach, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { readable } from 'svelte/store';
 import { mockUser } from '../mock/mock-types';
 
 // Mocking fetch
 global.fetch = vi.fn();
 
 // Mocking the page store
-vi.mock('$app/stores', () => {
+vi.mock('$app/state', () => {
 	return {
-		page: readable({
+		page: {
 			data: {
 				userInfo: {
 					id: 2
 				}
 			}
-		})
+		}
 	};
 });
 

__tests__/v2/VersionUpdate.test.js

@@ -1,15 +1,14 @@
 import { beforeEach, describe, it, expect, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/svelte';
-import { readable } from 'svelte/store';
 
 // Mocking the page store
-vi.mock('$app/stores', () => {
+vi.mock('$app/state', () => {
 	return {
-		page: readable({
+		page: {
 			params: {
 				projectId: 1
 			}
-		})
+		}
 	};
 });
 

__tests__/v2/admin_group_edit_page.test.js

@@ -1,14 +1,13 @@
 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', () => {
+vi.mock('$app/state', () => {
 	return {
-		page: readable({
+		page: {
 			data: {
 				users: [
 					{ id: 1, email: '[email protected]' },
@@ -20,7 +19,7 @@ vi.mock('$app/stores', () => {
 					viewer_paths: []
 				}
 			}
-		})
+		}
 	};
 });
 

__tests__/v2/admin_jobs_page.test.js

@@ -1,11 +1,10 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render } from '@testing-library/svelte';
-import { readable } from 'svelte/store';
 
 // Mocking the page store
-vi.mock('$app/stores', () => {
+vi.mock('$app/state', () => {
 	return {
-		page: readable({
+		page: {
 			data: {
 				users: [
 					{ id: 1, email: '[email protected]' },
@@ -17,7 +16,7 @@ vi.mock('$app/stores', () => {
 					id: 2
 				}
 			}
-		})
+		}
 	};
 });
 

__tests__/v2/admin_task_groups_page.test.js

@@ -1,15 +1,14 @@
 import { describe, beforeEach, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { readable } from 'svelte/store';
 
 // Mocking fetch
 global.fetch = vi.fn();
 
 // Mocking the page store
-vi.mock('$app/stores', () => {
+vi.mock('$app/state', () => {
 	return {
-		page: readable({
+		page: {
 			data: {
 				users: [
 					{ id: 1, email: '[email protected]' },
@@ -20,7 +19,7 @@ vi.mock('$app/stores', () => {
 					{ id: 2, name: 'g2' }
 				]
 			}
-		})
+		}
 	};
 });