plum-e2e 2.6.9 → 2.7.1

package/frontend/src/routes/+page.svelte

@@ -1,35 +1,70 @@
 <!--
  * This file is part of Plum.
- *
- * Plum is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Plum is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Plum. If not, see https://www.gnu.org/licenses/.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
  -->
 
 <script>
 	import { onDestroy, onMount } from 'svelte';
 	import { slide } from 'svelte/transition';
 	import { fetchSuites } from '$lib/api/tests';
-	import { runnerConfig, triggerRun, testsVersion } from '$lib/stores/runner';
+	import { runnerConfig, triggerRun } from '$lib/stores/runner';
 	import { COPY_TIMEOUT_MS } from '$lib/constants';
 	import { stagger } from '$lib/utils/format';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import { CLEAR_SEARCH_LABEL, SORT_BY_LABEL } from '$lib/copy/common';
+	import {
+		PAGE_TITLE,
+		HEADING,
+		SEARCH_PLACEHOLDER,
+		NO_SUITES_MESSAGE,
+		RUN_SUITE_LABEL,
+		OUTLINE_BADGE,
+		HIDE_LABEL,
+		STEPS_LABEL,
+		EXAMPLES_LABEL,
+		noMatchMessage,
+		copiedTitle,
+		copyTitle,
+		runIdTitle,
+		runTestLabel,
+		visibleOfTotal,
+		testCountLabel,
+		suiteSummary,
+		collapseOrExpandSuiteLabel
+	} from '$lib/copy/dashboard';
 
 	let suites = [];
 	let search = '';
 	let expandedSteps = new Set();
+	// Suites are expanded by default — this tracks the exceptions (collapsed ones).
+	let collapsedSuites = new Set();
 	let copiedIds = new Set();
 	const copyTimers = new Map();
 
+	function readSort(key, fallback) {
+		try {
+			const v = sessionStorage.getItem(key);
+			if (v) return JSON.parse(v);
+		} catch {}
+		return fallback;
+	}
+
+	function writeSort(key, value) {
+		try {
+			sessionStorage.setItem(key, JSON.stringify(value));
+		} catch {}
+	}
+
+	let sort = readSort('plum:automated-tests:sort', { by: 'id', order: 'desc' });
+
+	function applySort(by) {
+		sort =
+			sort.by === by
+				? { ...sort, order: sort.order === 'asc' ? 'desc' : 'asc' }
+				: { by, order: by === 'id' ? 'desc' : 'asc' };
+		writeSort('plum:automated-tests:sort', sort);
+	}
+
 	async function loadSuites() {
 		try {
 			suites = await fetchSuites();
@@ -38,8 +73,9 @@
 		}
 	}
 
+	// Loads once on mount — this page is static and only reflects new suites/tests
+	// on a manual browser refresh, not via a live auto-refresh.
 	onMount(loadSuites);
-	$: if ($testsVersion) loadSuites();
 
 	function suiteIds(suite) {
 		return Array.isArray(suite.suiteId) ? suite.suiteId : [suite.suiteId];
@@ -59,6 +95,12 @@
 		expandedSteps = expandedSteps;
 	}
 
+	function toggleSuite(id) {
+		if (collapsedSuites.has(id)) collapsedSuites.delete(id);
+		else collapsedSuites.add(id);
+		collapsedSuites = collapsedSuites;
+	}
+
 	function run(id) {
 		runnerConfig.update((c) => ({ ...c, testID: id }));
 		triggerRun(id);
@@ -102,25 +144,40 @@
 			if (!suiteMatches && matchedTests.length === 0) return null;
 			return { ...suite, tests: suiteMatches ? suite.tests : matchedTests };
 		})
-		.filter(Boolean);
+		.filter(Boolean)
+		.map((suite) => ({
+			...suite,
+			tests: [...suite.tests].sort((a, b) => {
+				const diff =
+					sort.by === 'name'
+						? a.testCase.localeCompare(b.testCase)
+						: (primaryId(a) ?? '').localeCompare(primaryId(b) ?? '');
+				return sort.order === 'asc' ? diff : -diff;
+			})
+		}))
+		.sort((a, b) => {
+			const diff =
+				sort.by === 'name'
+					? a.suiteName.localeCompare(b.suiteName)
+					: (suiteIds(a)[0] ?? '').localeCompare(suiteIds(b)[0] ?? '');
+			return sort.order === 'asc' ? diff : -diff;
+		});
 
 	$: totalTests = suites.reduce((n, s) => n + s.tests.length, 0);
 	$: visibleTests = filtered.reduce((n, s) => n + s.tests.length, 0);
 </script>
 
-<svelte:head><title>Automated Tests — Plum</title></svelte:head>
+<svelte:head><title>{PAGE_TITLE}</title></svelte:head>
 
 <div class="page-header">
 	<div class="header-top">
 		<div>
-			<h1>Tests</h1>
+			<h1>{HEADING}</h1>
 			<p class="subtitle">
 				{#if q}
-					{visibleTests} of {totalTests} tests
+					{visibleOfTotal(visibleTests, totalTests)}
 				{:else}
-					{suites.length} suite{suites.length !== 1 ? 's' : ''} · {totalTests} test{totalTests !== 1
-						? 's'
-						: ''}
+					{suiteSummary(suites.length, totalTests)}
 				{/if}
 			</p>
 		</div>
@@ -145,10 +202,10 @@
 				type="text"
 				class="search-input"
 				bind:value={search}
-				placeholder="Search suites or tests…"
+				placeholder={SEARCH_PLACEHOLDER}
 			/>
 			{#if search}
-				<button class="search-clear" on:click={() => (search = '')} aria-label="Clear search">
+				<button class="search-clear" on:click={() => (search = '')} aria-label={CLEAR_SEARCH_LABEL}>
 					<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
 						<path
 							d="M1 1l12 12M13 1L1 13"
@@ -163,13 +220,48 @@
 	</div>
 </div>
 
+{#if !q}
+	<div class="sort-bar">
+		<span class="sort-label">{SORT_BY_LABEL}</span>
+		{#each [['id', 'ID'], ['name', 'Name']] as [val, label]}
+			<button class="sort-chip" class:active={sort.by === val} on:click={() => applySort(val)}>
+				{label}
+				{#if sort.by === val}
+					<span class="sort-dir">{sort.order === 'asc' ? '↑' : '↓'}</span>
+				{/if}
+			</button>
+		{/each}
+	</div>
+{/if}
+
 {#if filtered.length === 0}
-	<EmptyState message={q ? `No tests matching "${search}"` : 'No test suites found.'} />
+	<EmptyState message={q ? noMatchMessage(search) : NO_SUITES_MESSAGE} />
 {:else}
 	<div class="suites">
 		{#each filtered as suite, si}
+			{@const suiteKey = suiteIds(suite)[0] ?? suite.suiteName}
+			{@const suiteOpen = !collapsedSuites.has(suiteKey)}
 			<div class="suite" style={stagger(si, 55)}>
 				<div class="suite-header">
+					<button
+						class="suite-toggle"
+						on:click={() => toggleSuite(suiteKey)}
+						aria-expanded={suiteOpen}
+						aria-label={collapseOrExpandSuiteLabel(suiteOpen)}
+					>
+						<svg
+							width="12"
+							height="12"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							class:rotated={suiteOpen}
+						>
+							<polyline points="9 18 15 12 9 6" />
+						</svg>
+					</button>
 					<div class="suite-meta">
 						<div class="suite-badges">
 							{#each suiteIds(suite) as id}
@@ -177,121 +269,131 @@
 									class="id-pill"
 									class:copied={copiedIds.has(id)}
 									on:click={() => copyId(id)}
-									title={copiedIds.has(id) ? `Copied ${id}` : `Copy ${id}`}
-									aria-label={copiedIds.has(id) ? `Copied ${id}` : `Copy ${id}`}
+									title={copiedIds.has(id) ? copiedTitle(id) : copyTitle(id)}
+									aria-label={copiedIds.has(id) ? copiedTitle(id) : copyTitle(id)}
 								>
 									{id}
 								</button>
 							{/each}
 						</div>
 						<span class="suite-name">{suite.suiteName}</span>
-						<span class="suite-count"
-							>{suite.tests.length} test{suite.tests.length !== 1 ? 's' : ''}</span
-						>
+						<span class="suite-count">{testCountLabel(suite.tests.length)}</span>
 					</div>
-					<button class="run-btn suite-run" on:click={() => runSuite(suite)} title="Run suite">
+					<button
+						class="run-btn suite-run"
+						on:click={() => runSuite(suite)}
+						title={RUN_SUITE_LABEL}
+					>
 						<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" stroke="none">
 							<polygon points="5,3 19,12 5,21" />
 						</svg>
-						Run suite
+						{RUN_SUITE_LABEL}
 					</button>
 				</div>
 
-				<div class="tests">
-					{#each suite.tests as test, ti}
-						{@const pid = primaryId(test)}
-						{@const stepsOpen = expandedSteps.has(pid)}
-						<div class="test-row" style={stagger(si * 4 + ti, 30)}>
-							<div class="test-main">
-								<button
-									class="run-icon-btn"
-									on:click={() => run(pid)}
-									title="Run {pid}"
-									aria-label="Run {test.testCase}"
-								>
-									<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" stroke="none">
-										<polygon points="5,3 19,12 5,21" />
-									</svg>
-								</button>
-
-								<div class="test-ids">
-									{#each testIds(test) as id}
-										<button
-											class="id-pill"
-											class:copied={copiedIds.has(id)}
-											on:click={() => copyId(id)}
-											title={copiedIds.has(id) ? `Copied ${id}` : `Copy ${id}`}
-											aria-label={copiedIds.has(id) ? `Copied ${id}` : `Copy ${id}`}
-										>
-											{id}
-										</button>
-									{/each}
-								</div>
-
-								<span class="test-name">
-									{test.testCase}
-									{#if test.type === 'outline'}
-										<span class="outline-badge">outline</span>
-									{/if}
-								</span>
-
-								{#if test.steps?.length > 0}
+				{#if suiteOpen}
+					<div class="tests" transition:slide={{ duration: 180 }}>
+						{#each suite.tests as test, ti}
+							{@const pid = primaryId(test)}
+							{@const stepsOpen = expandedSteps.has(pid)}
+							<div class="test-row" style={stagger(si * 4 + ti, 30)}>
+								<div class="test-main">
 									<button
-										class="steps-toggle"
-										on:click={() => toggleSteps(pid)}
-										aria-expanded={stepsOpen}
+										class="run-icon-btn"
+										on:click={() => run(pid)}
+										title={runIdTitle(pid)}
+										aria-label={runTestLabel(test.testCase)}
 									>
 										<svg
-											width="12"
-											height="12"
+											width="10"
+											height="10"
 											viewBox="0 0 24 24"
-											fill="none"
-											stroke="currentColor"
-											stroke-width="2"
-											stroke-linecap="round"
-											class:rotated={stepsOpen}
+											fill="currentColor"
+											stroke="none"
 										>
-											<polyline points="9 18 15 12 9 6" />
+											<polygon points="5,3 19,12 5,21" />
 										</svg>
-										{stepsOpen ? 'Hide' : 'Steps'}
 									</button>
-								{/if}
-							</div>
 
-							{#if stepsOpen && test.steps?.length > 0}
-								<div class="steps" transition:slide={{ duration: 180 }}>
-									<ol class="step-list">
-										{#each test.steps as step}
-											<li class="step">{step}</li>
+									<div class="test-ids">
+										{#each testIds(test) as id}
+											<button
+												class="id-pill"
+												class:copied={copiedIds.has(id)}
+												on:click={() => copyId(id)}
+												title={copiedIds.has(id) ? `Copied ${id}` : `Copy ${id}`}
+												aria-label={copiedIds.has(id) ? `Copied ${id}` : `Copy ${id}`}
+											>
+												{id}
+											</button>
 										{/each}
-									</ol>
-
-									{#if test.examples}
-										<div class="examples">
-											<span class="examples-label">Examples</span>
-											<div class="examples-table-wrap">
-												<table class="examples-table">
-													<thead>
-														<tr
-															>{#each test.examples.headers as h}<th>{h}</th>{/each}</tr
-														>
-													</thead>
-													<tbody>
-														{#each test.examples.rows as row}
+									</div>
+
+									<span class="test-name">
+										{test.testCase}
+										{#if test.type === 'outline'}
+											<span class="outline-badge">{OUTLINE_BADGE}</span>
+										{/if}
+									</span>
+
+									{#if test.steps?.length > 0}
+										<button
+											class="steps-toggle"
+											on:click={() => toggleSteps(pid)}
+											aria-expanded={stepsOpen}
+										>
+											<svg
+												width="12"
+												height="12"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												class:rotated={stepsOpen}
+											>
+												<polyline points="9 18 15 12 9 6" />
+											</svg>
+											{stepsOpen ? HIDE_LABEL : STEPS_LABEL}
+										</button>
+									{/if}
+								</div>
+
+								{#if stepsOpen && test.steps?.length > 0}
+									<div class="steps" transition:slide={{ duration: 180 }}>
+										<ol class="step-list">
+											{#each test.steps as step}
+												<li class="step">{step}</li>
+											{/each}
+										</ol>
+
+										{#if test.examples}
+											<div class="examples">
+												<span class="examples-label">{EXAMPLES_LABEL}</span>
+												<div class="examples-table-wrap">
+													<table class="examples-table">
+														<thead>
 															<tr
-																>{#each row as cell}<td>{cell}</td>{/each}</tr
+																>{#each test.examples.headers as h}<th>{h}</th>{/each}</tr
 															>
-														{/each}
-													</tbody>
-												</table>
+														</thead>
+														<tbody>
+															{#each test.examples.rows as row}
+																<tr
+																	>{#each row as cell}<td>{cell}</td>{/each}</tr
+																>
+															{/each}
+														</tbody>
+													</table>
+												</div>
 											</div>
-										</div>
-									{/if}
-								</div>
-							{/if}
-						</div>
-					{/each}
-				</div>
+										{/if}
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
 			</div>
 		{/each}
 	</div>
@@ -365,6 +467,56 @@
 		background: var(--bg-elevated);
 	}
 
+	/* ── Sort bar ── */
+	.sort-bar {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		margin: 1.25rem 0;
+		flex-wrap: wrap;
+	}
+
+	.sort-label {
+		font-size: 0.75rem;
+		color: var(--text-muted);
+		margin-right: 0.25rem;
+	}
+
+	.sort-chip {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		height: 28px;
+		padding: 0 0.625rem;
+		font-family: var(--font-body);
+		font-size: 0.8125rem;
+		color: var(--text-muted);
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-pill);
+		cursor: pointer;
+		transition:
+			color var(--duration-fast),
+			border-color var(--duration-fast),
+			background var(--duration-fast);
+	}
+
+	.sort-chip:hover {
+		color: var(--text);
+		border-color: var(--accent);
+	}
+
+	.sort-chip.active {
+		color: var(--accent);
+		border-color: var(--accent);
+		background: var(--accent-soft);
+	}
+
+	.sort-dir {
+		font-size: 0.7rem;
+		opacity: 0.8;
+	}
+
 	.search-input::placeholder {
 		color: var(--text-muted);
 	}
@@ -420,6 +572,35 @@
 		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
 	}
 
+	.suite-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 22px;
+		height: 22px;
+		border: none;
+		background: transparent;
+		color: var(--text-muted);
+		cursor: pointer;
+		flex-shrink: 0;
+		border-radius: var(--radius-sm);
+		transition:
+			background var(--duration-fast),
+			color var(--duration-fast);
+	}
+
+	.suite-toggle:hover {
+		background: var(--bg-elevated);
+		color: var(--text);
+	}
+
+	.suite-toggle svg {
+		transition: transform var(--duration-fast) var(--ease-out);
+	}
+	.suite-toggle svg.rotated {
+		transform: rotate(90deg);
+	}
+
 	.suite-meta {
 		display: flex;
 		align-items: center;

package/frontend/src/routes/login/+page.svelte

@@ -1,18 +1,6 @@
 <!--
  * This file is part of Plum.
- *
- * Plum is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Plum is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Plum. If not, see https://www.gnu.org/licenses/.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
  -->
 
 <script>
@@ -21,6 +9,17 @@
 	import { auth } from '$lib/stores/auth';
 	import { login, checkNeedsSetup } from '$lib/api/auth';
 	import { theme } from '$lib/stores/theme';
+	import { EMAIL_LABEL, PASSWORD_LABEL } from '$lib/copy/common';
+	import {
+		CHECKING_SERVER,
+		EMAIL_PLACEHOLDER,
+		LOGIN_PAGE_TITLE,
+		SIGN_IN_TITLE,
+		SIGN_IN_SUBTITLE,
+		PASSWORD_PLACEHOLDER,
+		LOGIN_FAILED_FALLBACK,
+		signInLabel
+	} from '$lib/copy/auth';
 
 	let email = '';
 	let password = '';
@@ -46,7 +45,7 @@
 			auth.login(token, user);
 			window.location.href = '/';
 		} catch (e) {
-			error = e.message || 'Login failed';
+			error = e.message || LOGIN_FAILED_FALLBACK;
 		} finally {
 			loading = false;
 		}
@@ -57,40 +56,40 @@
 	}
 </script>
 
-<svelte:head><title>Sign in — Plum</title></svelte:head>
+<svelte:head><title>{LOGIN_PAGE_TITLE}</title></svelte:head>
 
 <div class="page" data-theme={$theme}>
 	{#if checking}
-		<p class="checking">Checking server…</p>
+		<p class="checking">{CHECKING_SERVER}</p>
 	{:else}
 		<div class="card">
 			<div class="brand">
 				<span class="brand-serif">Pl</span><span class="brand-sans">um</span>
 			</div>
-			<h1 class="title">Sign in</h1>
-			<p class="subtitle">Access your test workspace</p>
+			<h1 class="title">{SIGN_IN_TITLE}</h1>
+			<p class="subtitle">{SIGN_IN_SUBTITLE}</p>
 
 			<div class="fields">
 				<div class="field">
-					<label class="label" for="email">Email</label>
+					<label class="label" for="email">{EMAIL_LABEL}</label>
 					<input
 						id="email"
 						type="email"
 						class="input"
 						bind:value={email}
-						placeholder="jane@example.com"
+						placeholder={EMAIL_PLACEHOLDER}
 						autocomplete="email"
 						on:keydown={onKeydown}
 					/>
 				</div>
 				<div class="field">
-					<label class="label" for="password">Password</label>
+					<label class="label" for="password">{PASSWORD_LABEL}</label>
 					<input
 						id="password"
 						type="password"
 						class="input"
 						bind:value={password}
-						placeholder="••••••••"
+						placeholder={PASSWORD_PLACEHOLDER}
 						autocomplete="current-password"
 						on:keydown={onKeydown}
 					/>
@@ -102,7 +101,7 @@
 			{/if}
 
 			<button class="submit-btn" on:click={handleSubmit} disabled={loading || !email || !password}>
-				{loading ? 'Signing in…' : 'Sign in'}
+				{signInLabel(loading)}
 			</button>
 		</div>
 	{/if}