tests(web): Narrow elements in search_custom_database_test

With the introduction of new elements in the WebUI the existing
`web/tests/search_custom_database_test.ts` was failing as the wrong elements were selected (the new added ones rather
than the existing ones).

This has been corrected by adding `data-testid` fields to the Svelte pages <div> sections that define the specific areas
to give them unique identifiers and updating the tests to use `page.getByTestID()` targets to align with these.

.pre-commit-config.yaml

@@ -1,6 +1,6 @@
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.5.0  # Use the ref you want to point at
+    rev: v4.6.0  # Use the ref you want to point at
     hooks:
       - id: check-case-conflict
       - id: check-symlinks
@@ -24,7 +24,7 @@ repos:
       - id: trailing-whitespace
 
   - repo: https://github.com/psf/black
-    rev: 24.3.0
+    rev: 24.4.2
     hooks:
       - id: black
         types: [python]
@@ -33,7 +33,7 @@ repos:
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
     # Ruff version.
-    rev: v0.4.7
+    rev: v0.4.9
     hooks:
       - id: ruff
         args: [--fix, --exit-non-zero-on-fix]
@@ -49,7 +49,7 @@ repos:
   #         - svelte
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.3.0
+    rev: v9.5.0
     hooks:
       - id: eslint
         types: [file]

web/src/routes/+page.svelte

@@ -9,7 +9,7 @@
 		storePopup,
 		initializeStores,
 		getModalStore,
-		type ModalSettings
+		ModalSettings
 	} from '@skeletonlabs/skeleton';
 	import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
 	import { onMount } from 'svelte';
@@ -184,7 +184,7 @@
 	<div class="h-full flex flex-cols-2 justify-center items-center">
 
         <!-- Smithereens -->
-		<div class="card m-2 w-[20rem] {uiWidth} max-w-[90%] {animateWidth}">
+		<div class="card m-2 w-[20rem] {uiWidth} max-w-[90%] {animateWidth}" data-testid="Smithereens">
 			<section class="flex flex-col space-y-4 justify-center p-4">
 				<FragmentsDataUploader bind:value={smithereens.fragmentsData} {fragmentsLibraryIndex} />
 			</section>
@@ -200,7 +200,7 @@
 		</div>
 
         <!-- PGFinder -->
-        <div class="card m-2 w-[20rem] {uiWidth} max-w-[90%] {animateWidth}">
+        <div class="card m-2 w-[20rem] {uiWidth} max-w-[90%] {animateWidth}" data-testid="PGFinder">
 			<section class="flex flex-col space-y-4 justify-center p-4">
 				<MsDataUploader bind:value={pyio.msData} />
 				<MassLibraryUploader bind:value={pyio.massLibrary} {massLibraries} />

web/src/routes/AdvancedOptions.svelte

@@ -14,15 +14,15 @@
 	<AccordionItem bind:open={advancedMode}>
 		<svelte:fragment slot="summary">Advanced Options</svelte:fragment>
 		<svelte:fragment slot="content">
-			<div class="grid md:grid-cols-2 md:gap-8">
+			<div class="grid md:grid-cols-2 md:gap-8" data-testid="advancedModifications">
 				<ModificationSelector bind:value={enabledModifications} {allowedModifications} />
 				<div class="flex flex-col justify-between aspect-square overflow-y-auto">
-					<div class="flex flex-col items-center">
+					<div class="flex flex-col items-center" data-testid="advancedPpmTolerance">
 						<h5 class="pb-1 h5">PPM Tolerance</h5>
 						<input bind:value={ppmTolerance} class="input" type="number" step="1" min="0" />
 					</div>
 
-					<div class="flex flex-col items-center">
+					<div class="flex flex-col items-center" data-testid="advancedCleanupWindow">
 						<h5 class="pb-1 h5">
 							Cleanup Window
 							<Tooltip style="inline ml-1" popupId="cleanupTooltip">
@@ -32,7 +32,7 @@
 						<input bind:value={cleanupWindow} class="input" type="number" step="0.1" min="0" />
 					</div>
 
-					<div class="flex flex-col items-center">
+					<div class="flex flex-col items-center" data-testid="advancedConsolidationPpm">
 						<h5 class="pb-1 h5">
 							Consolidation PPM
 							<Tooltip style="inline ml-1" popupId="consolidationTooltip">

web/src/routes/FragmentsDataUploader.svelte

@@ -15,7 +15,7 @@
 
 </script>
 
-<div class="flex flex-col items-center">
+<div class="flex flex-col items-center" data-testid="fragmentsDataUploader">
 	<h5 class="pb-1 h5">Building block components</h5>
     <p>(list of sugars and amino-acids)</p>
 	<TabGroup class="w-full" justify="justify-center">

web/src/routes/LinksAndDownloads.svelte

@@ -4,7 +4,7 @@
 	import { faDownload } from '@fortawesome/free-solid-svg-icons';
 </script>
 
-<div class="mx-4 my-4">
+<div class="mx-4 my-4" data-testid="deconvolutedData">
 	<h4 class="h4">Deconvoluted Example Datasets</h4>
 	<dl class="list-dl">
 		<a href="{base}/data/E. coli WT (Patel et al).ftrs">

web/src/routes/MassLibraryUploader.svelte

@@ -12,11 +12,11 @@
 	}
 </script>
 
-<div class="flex flex-col items-center">
+<div class="flex flex-col items-center" data-testid="MassLibraryUploader">
 	<h5 class="pb-1 h5">Mass Database</h5>
 	<TabGroup class="w-full" justify="justify-center">
-		<Tab bind:group={customMassLibrary} name="built-in" value={false}>Built-In</Tab>
-		<Tab bind:group={customMassLibrary} name="custom" value={true}>Custom</Tab>
+		<Tab bind:group={customMassLibrary} name="builtInMass" value={false}>Built-In</Tab>
+		<Tab bind:group={customMassLibrary} name="customMassLibrary" value={true}>Custom Mass</Tab>
 		<svelte:fragment slot="panel">
 			{#if customMassLibrary}
 				<FileDropzone name="mass-library" bind:files on:change={dataUploaded} accept=".csv">

web/src/routes/ModificationSelector.svelte

@@ -4,7 +4,7 @@
 	export let allowedModifications: Array<string> | undefined;
 </script>
 
-<div class="flex flex-col items-center aspect-square overflow-y-auto">
+<div class="flex flex-col items-center aspect-square overflow-y-auto" data-testid="modificationSelector">
 	<h5 class="pb-1 h5">Modifications</h5>
 	{#if allowedModifications !== undefined}
 		<ListBox class="w-full overflow-y-auto" multiple>

web/src/routes/MuropeptidesDataUploader.svelte

@@ -16,7 +16,7 @@
 </script>
 
 
-<div class="flex flex-col items-center">
+<div class="flex flex-col items-center" data-testid="muropeptides-data-uploader">
 	<h5 class="pb-1 h5">Muropeptide List</h5>
 	<TabGroup class="w-full" justify="justify-center">
 		<Tab bind:group={customMuropeptideLibrary} name="built-in" value={false}>Built-In</Tab>

web/tests/complex_search_test.ts

@@ -3,34 +3,37 @@ import { expect, test } from '@playwright/test';
 test('run a complex search', async ({ page }) => {
 	await page.goto('/');
 
-	await page.getByRole('textbox').click();
-	await page.getByRole('textbox').setInputFiles('tests/data/E. coli WT (Patel et al).ftrs');
-	await page.getByRole('button', { name: 'Escherichia coli' }).click();
-	await page.getByRole('option', { name: 'Complex' }).click();
+	await page.getByTestId('file-dropzone').getByRole('textbox').click();
+	await page.getByTestId('file-dropzone').getByRole('textbox').setInputFiles('tests/data/E. coli WT (Patel et al).ftrs');
+	await page.getByTestId('MassLibraryUploader').getByRole('button', { name: 'Escherichia coli' }).click();
+	await page.getByTestId('MassLibraryUploader').getByRole('option', { name: 'Complex' }).click();
 
 	await page.getByRole('button', { name: 'Advanced Options' }).click();
-	await page.getByRole('option', { name: '3-3 and 4-3 Cross-Linked Multimers (=)' }).click();
-	await page.getByRole('option', { name: '1-3 Cross-Linked Multimers (=)' }).click();
-	await page.getByRole('option', { name: 'Glycosidic Multimers (-)' }).click();
-	await page.getByRole('option', { name: 'Lactyl Multimers (=Lac)' }).click();
-	await page.getByRole('option', { name: 'Anhydro-MurNAc (Anh)' }).click();
-	await page.getByRole('option', { name: 'Deacetylation (-Ac)' }).click();
-	await page.getByRole('option', { name: 'Deacetylation and Anhydro-MurNAc (-Ac, Anh)' }).click();
-	await page.getByRole('option', { name: 'Amidation (Am)' }).click();
-	await page.getByRole('option', { name: 'O-Acetylation (+Ac)' }).click();
-	await page.getByRole('option', { name: 'Potassium Adduct (K+)' }).click();
-	await page.getByRole('option', { name: 'Sodium Adduct (Na+)' }).click();
-	await page.getByRole('option', { name: 'Extra Disaccharide (+gm)' }).click();
-	await page.getByRole('option', { name: 'Lactyl Peptides (Lac)' }).click();
-	await page.getByRole('option', { name: 'Loss of Disaccharide (-gm)' }).click();
-	await page.getByRole('option', { name: 'Loss of GlcNAc (-g)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: '3-3 and 4-3 Cross-Linked Multimers (=)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: '1-3 Cross-Linked Multimers (=)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Glycosidic Multimers (-)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Lactyl Multimers (=Lac)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Anhydro-MurNAc (Anh)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Deacetylation (-Ac)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Deacetylation and Anhydro-MurNAc (-Ac, Anh)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Amidation (Am)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'O-Acetylation (+Ac)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Potassium Adduct (K+)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Sodium Adduct (Na+)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Extra Disaccharide (+gm)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Lactyl Peptides (Lac)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Loss of Disaccharide (-gm)' }).click();
+	await page.getByTestId('modificationSelector').getByRole('option', { name: 'Loss of GlcNAc (-g)' }).click();
 
-	await page.getByRole('spinbutton').first().click();
-	await page.getByRole('spinbutton').first().fill('5');
-	await page.getByRole('spinbutton').nth(1).click();
-	await page.getByRole('spinbutton').nth(1).fill('1');
-	await page.getByRole('spinbutton').nth(2).click();
-	await page.getByRole('spinbutton').nth(2).fill('0.1');
+    // Not sure why data-testid="advanced-ppm-tolerance" works for the first two but
+    // data-testid="advanced-cleanup-window" and data-testid="advanced-consolidation-ppm" aren't recognised.
+    // Have therefore used the higher level 'data-testid' which do work
+	await page.getByTestId('advancedModifications').getByRole('spinbutton').first().click();
+	await page.getByTestId('advancedModifications').getByRole('spinbutton').first().fill('5');
+	await page.getByTestId('advancedModifications').getByRole('spinbutton').nth(1).click();
+	await page.getByTestId('advancedModifications').getByRole('spinbutton').nth(1).fill('1');
+	await page.getByTestId('advancedModifications').getByRole('spinbutton').nth(2).click();
+	await page.getByTestId('advancedModifications').getByRole('spinbutton').nth(2).fill('0.1');
 
 	const downloadPromise = page.waitForEvent('download');
 	await page.getByRole('button', { name: 'Run Analysis' }).click();

web/tests/example_data_test.ts

@@ -6,13 +6,15 @@ test('example data can be downloaded', async ({ page }) => {
 
 	const downloadPromise = page.waitForEvent('download');
 	await page
+        .getByTestId('deconvolutedData')
 		.getByRole('link', { name: 'Escherichia coli Strain BW25113 — Patel et al. 2021' })
 		.click();
 	const download = await downloadPromise;
 	expect(download.suggestedFilename()).toEqual('E. coli WT (Patel et al).ftrs');
 
 	const download1Promise = page.waitForEvent('download');
 	await page
+        .getByTestId('deconvolutedData')
 		.getByRole('link', { name: 'Clostridium difficile Strain R20291 — Bern et al. 2017' })
 		.click();
 	const download1 = await download1Promise;

web/tests/links_test.ts

@@ -6,34 +6,35 @@ test('links are live', async ({ page }) => {
 	await page.locator('#shell-header').getByRole('button').click();
 
 	const page1Promise = page.waitForEvent('popup');
-	await page.getByRole('link', { name: 'Browse Built-In Mass Databases' }).click();
+	await page.getByTestId('deconvolutedData').getByRole('link', { name: 'Browse Built-In Mass Databases' }).click();
 	const page1 = await page1Promise;
 	await page1.waitForLoadState('domcontentloaded');
 	expect(await page1.title()).toEqual(
 		'pgfinder/lib/pgfinder/masses at master · Mesnage-Org/pgfinder · GitHub'
 	);
 
 	const page2Promise = page.waitForEvent('popup');
-	await page.getByRole('link', { name: 'Download MaxQuant' }).click();
+	await page.getByTestId('deconvolutedData').getByRole('link', { name: 'Download MaxQuant' }).click();
 	const page2 = await page2Promise;
 	await page2.waitForLoadState('domcontentloaded');
 	expect(await page2.title()).toEqual('MaxQuant');
 
 	const page3Promise = page.waitForEvent('popup');
-	await page.getByRole('link', { name: 'Download ProteoWizard (MSConvert)' }).click();
+	await page.getByTestId('deconvolutedData').getByRole('link', { name: 'Download ProteoWizard (MSConvert)' }).click();
 	const page3 = await page3Promise;
 	await page3.waitForLoadState('domcontentloaded');
 	expect(await page3.title()).toEqual('ProteoWizard: Download');
 
 	const page4Promise = page.waitForEvent('popup');
-	await page.getByRole('link', { name: 'https://doi.org/10.7554/eLife.70597' }).click();
+	await page.getByTestId('deconvolutedData').getByRole('link', { name: 'https://doi.org/10.7554/eLife.70597' }).click();
 	const page4 = await page4Promise;
 	// NOTE: Cloudflare blocks us from loading the page, so the best we can do is check the URL...
 	await page4.waitForLoadState('domcontentloaded');
 	expect(page4.url()).toEqual('https://elifesciences.org/articles/70597');
 
 	await page.getByTestId('drawer-backdrop').click();
 
+    // These hang when including getByTestId() could probably add more <div> in the page anyway
 	const page5Promise = page.waitForEvent('popup');
 	await page.getByRole('link').first().click();
 	const page5 = await page5Promise;

web/tests/search_custom_database_test.ts

@@ -3,12 +3,12 @@ import { expect, test } from '@playwright/test';
 test('run a search with a custom database', async ({ page }) => {
 	await page.goto('/');
 
-	await page.getByRole('textbox').click();
-	await page.getByRole('textbox').setInputFiles('tests/data/E. coli WT (Patel et al).ftrs');
+	await page.getByTestId('file-dropzone').getByRole('textbox').click();
+	await page.getByTestId('file-dropzone').getByRole('textbox').setInputFiles('tests/data/E. coli WT (Patel et al).ftrs');
 
-	await page.locator('label').filter({ hasText: 'Custom' }).click();
-	await page.getByTestId('tab-group').getByRole('textbox').click();
-	await page.getByTestId('tab-group').getByRole('textbox').setInputFiles('tests/data/glycans.csv');
+	await page.locator('label').filter({ hasText: 'Custom Mass' }).click();
+	await page.getByTestId('MassLibraryUploader').getByRole('textbox').click();
+	await page.getByTestId('MassLibraryUploader').getByRole('textbox').setInputFiles('tests/data/glycans.csv');
 
 	const downloadPromise = page.waitForEvent('download');
 	await page.getByRole('button', { name: 'Run Analysis' }).click();

web/tests/search_two_datasets_test.ts

@@ -3,15 +3,16 @@ import { expect, test } from '@playwright/test';
 test('run a search with two datasets', async ({ page }) => {
 	await page.goto('/');
 
-	await page.getByRole('textbox').click();
+	await page.getByTestId('file-dropzone').getByRole('textbox').click();
 	await page
+        .getByTestId('file-dropzone')
 		.getByRole('textbox')
 		.setInputFiles([
 			'tests/data/C. difficile WT (Bern et al).ftrs',
 			'tests/data/E. coli WT (Patel et al).ftrs'
 		]);
-	await page.getByRole('button', { name: 'Clostridium difficile' }).click();
-	await page.getByRole('option', { name: 'Non-Redundant' }).click();
+	await page.getByTestId('MassLibraryUploader').getByRole('button', { name: 'Clostridium difficile' }).click();
+	await page.getByTestId('MassLibraryUploader').getByRole('option', { name: 'Non-Redundant' }).click();
 
 	const downloads: string[] = [];
 	page.on('download', (download) => downloads.push(download.suggestedFilename()));

web/tests/simple_search_test.ts

@@ -3,13 +3,13 @@ import { expect, test } from '@playwright/test';
 test('run a simple search', async ({ page }) => {
 	await page.goto('/');
 
-	await page.getByRole('textbox').click();
-	await page.getByRole('textbox').setInputFiles('tests/data/E. coli WT (Patel et al).ftrs');
-	await page.getByRole('button', { name: 'Escherichia coli' }).click();
-	await page.getByRole('option', { name: 'Simple' }).click();
+	await page.getByTestId('file-dropzone').getByRole('textbox').click();
+	await page.getByTestId('file-dropzone').getByRole('textbox').setInputFiles('tests/data/E. coli WT (Patel et al).ftrs');
+	await page.getByTestId('MassLibraryUploader').getByRole('button', { name: 'Escherichia coli' }).click();
+	await page.getByTestId('MassLibraryUploader').getByRole('option', { name: 'Simple' }).click();
 
 	const downloadPromise = page.waitForEvent('download');
-	await page.getByRole('button', { name: 'Run Analysis' }).click();
+	await page.getByTestId('PGFinder').getByRole('button', { name: 'Run Analysis' }).click();
 	const download = await downloadPromise;
 	expect(download.suggestedFilename()).toEqual('E. coli WT (Patel et al).csv');
 });