From 2085efff18b0e09f6e5821093b17a1d2b9683a2b Mon Sep 17 00:00:00 2001 From: Philippe Serhal Date: Thu, 29 Jan 2026 23:25:01 -0500 Subject: [PATCH 1/5] feat: add package comparison feature Compare 2-4 packages side-by-side at `/compare` with facets including: - Performance: package size, install size, dependencies (later: total deps) - Health: weekly downloads, last updated, deprecation status - Compatibility: TypeScript types, module format, (Node.js) engines - Security & Compliance: license, vulnerabilities User can select which facets to display via checkboxes, with convenient groups and quick all/none buttons per group and globally. URL is source of truth for selected packages and facets, allowing easy sharing. The "total install size" metric is fetched lazily after initial load and rendered initially with a loading fallback, as it is quite slow to compute. For numeric facets, a proportional bar is shown behind the value for easy visual comparison. The greatest value in the row is used as the 100% reference. I tried to limit subjective/opinionated highlights and such, but I did add red for Deprecated, green for no vulns, green for included types and blue for external types (seems neutral enough...), and some basic yellow/red for egregious last updated time. Add a "Compare to..." entry point on package page (keyboard shortcut: `c`) and a "compare" top nav item. --- app/components/AppHeader.vue | 8 + app/components/compare/ComparisonGrid.vue | 80 +++++ app/components/compare/FacetSelector.vue | 128 +++++++ app/components/compare/MetricRow.vue | 145 ++++++++ app/components/compare/PackageSelector.vue | 169 +++++++++ app/composables/useFacetSelection.ts | 124 +++++++ app/composables/usePackageComparison.ts | 335 ++++++++++++++++++ app/pages/[...package].vue | 31 +- app/pages/compare.vue | 147 ++++++++ i18n/locales/en.json | 68 +++- i18n/locales/fr-FR.json | 67 +++- lunaria/files/en-US.json | 68 +++- lunaria/files/fr-FR.json | 67 +++- package.json | 1 + pnpm-lock.yaml | 15 + shared/types/comparison.ts | 151 ++++++++ shared/types/index.ts | 1 + .../composables/use-facet-selection.spec.ts | 230 ++++++++++++ test/unit/comparison.spec.ts | 130 +++++++ 19 files changed, 1960 insertions(+), 5 deletions(-) create mode 100644 app/components/compare/ComparisonGrid.vue create mode 100644 app/components/compare/FacetSelector.vue create mode 100644 app/components/compare/MetricRow.vue create mode 100644 app/components/compare/PackageSelector.vue create mode 100644 app/composables/useFacetSelection.ts create mode 100644 app/composables/usePackageComparison.ts create mode 100644 app/pages/compare.vue create mode 100644 shared/types/comparison.ts create mode 100644 test/nuxt/composables/use-facet-selection.spec.ts create mode 100644 test/unit/comparison.spec.ts diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index ae779a39..a372fe75 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -77,6 +77,14 @@ onKeyStroke(',', e => { :class="{ 'hidden sm:flex': showFullSearch }" class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0" > + + +defineProps<{ + /** Number of columns (2-4) */ + columns: number + /** Column headers (package names or version numbers) */ + headers: string[] +}>() + + + + + diff --git a/app/components/compare/FacetSelector.vue b/app/components/compare/FacetSelector.vue new file mode 100644 index 00000000..447b6821 --- /dev/null +++ b/app/components/compare/FacetSelector.vue @@ -0,0 +1,128 @@ + + + diff --git a/app/components/compare/MetricRow.vue b/app/components/compare/MetricRow.vue new file mode 100644 index 00000000..06e9efc9 --- /dev/null +++ b/app/components/compare/MetricRow.vue @@ -0,0 +1,145 @@ + + + diff --git a/app/components/compare/PackageSelector.vue b/app/components/compare/PackageSelector.vue new file mode 100644 index 00000000..c8dc21a1 --- /dev/null +++ b/app/components/compare/PackageSelector.vue @@ -0,0 +1,169 @@ + + + diff --git a/app/composables/useFacetSelection.ts b/app/composables/useFacetSelection.ts new file mode 100644 index 00000000..5b7de0a0 --- /dev/null +++ b/app/composables/useFacetSelection.ts @@ -0,0 +1,124 @@ +import type { ComparisonFacet } from '#shared/types' +import { ALL_FACETS, DEFAULT_FACETS, FACET_INFO } from '#shared/types/comparison' +import { useRouteQuery } from '@vueuse/router' + +/** + * Composable for managing comparison facet selection with URL sync. + * + * @public + * @param queryParam - The URL query parameter name to use (default: 'facets') + */ +export function useFacetSelection(queryParam = 'facets') { + // Sync with URL query param (stable ref - doesn't change on other query changes) + const facetsParam = useRouteQuery(queryParam, '', { mode: 'replace' }) + + // Parse facets from URL or use defaults + const selectedFacets = computed({ + get() { + if (!facetsParam.value) { + return DEFAULT_FACETS + } + + // Parse comma-separated facets and filter valid, non-comingSoon ones + const parsed = facetsParam.value + .split(',') + .map(f => f.trim()) + .filter( + (f): f is ComparisonFacet => + ALL_FACETS.includes(f as ComparisonFacet) && + !FACET_INFO[f as ComparisonFacet].comingSoon, + ) + + return parsed.length > 0 ? parsed : DEFAULT_FACETS + }, + set(facets) { + if (facets.length === 0 || arraysEqual(facets, DEFAULT_FACETS)) { + // Remove param if using defaults + facetsParam.value = '' + } else { + facetsParam.value = facets.join(',') + } + }, + }) + + // Check if a facet is selected + function isFacetSelected(facet: ComparisonFacet): boolean { + return selectedFacets.value.includes(facet) + } + + // Toggle a single facet + function toggleFacet(facet: ComparisonFacet): void { + const current = selectedFacets.value + if (current.includes(facet)) { + // Don't allow deselecting all facets + if (current.length > 1) { + selectedFacets.value = current.filter(f => f !== facet) + } + } else { + selectedFacets.value = [...current, facet] + } + } + + // Get facets in a category (excluding coming soon) + function getFacetsInCategory(category: string): ComparisonFacet[] { + return ALL_FACETS.filter(f => { + const info = FACET_INFO[f] + return info.category === category && !info.comingSoon + }) + } + + // Select all facets in a category + function selectCategory(category: string): void { + const categoryFacets = getFacetsInCategory(category) + const current = selectedFacets.value + const newFacets = [...new Set([...current, ...categoryFacets])] + selectedFacets.value = newFacets + } + + // Deselect all facets in a category + function deselectCategory(category: string): void { + const categoryFacets = getFacetsInCategory(category) + const remaining = selectedFacets.value.filter(f => !categoryFacets.includes(f)) + // Don't allow deselecting all facets + if (remaining.length > 0) { + selectedFacets.value = remaining + } + } + + // Select all facets globally + function selectAll(): void { + selectedFacets.value = DEFAULT_FACETS + } + + // Deselect all facets globally (keeps first facet to ensure at least one) + function deselectAll(): void { + selectedFacets.value = [DEFAULT_FACETS[0]] + } + + // Check if all facets are selected + const isAllSelected = computed(() => selectedFacets.value.length === DEFAULT_FACETS.length) + + // Check if only one facet is selected (minimum) + const isNoneSelected = computed(() => selectedFacets.value.length === 1) + + return { + selectedFacets, + isFacetSelected, + toggleFacet, + selectCategory, + deselectCategory, + selectAll, + deselectAll, + isAllSelected, + isNoneSelected, + allFacets: ALL_FACETS, + } +} + +// Helper to compare arrays +function arraysEqual(a: T[], b: T[]): boolean { + if (a.length !== b.length) return false + const sortedA = [...a].sort() + const sortedB = [...b].sort() + return sortedA.every((val, i) => val === sortedB[i]) +} diff --git a/app/composables/usePackageComparison.ts b/app/composables/usePackageComparison.ts new file mode 100644 index 00000000..31704747 --- /dev/null +++ b/app/composables/usePackageComparison.ts @@ -0,0 +1,335 @@ +import type { MetricValue, ComparisonFacet, ComparisonPackage } from '#shared/types' +import type { PackageAnalysisResponse } from './usePackageAnalysis' + +export interface PackageComparisonData { + package: ComparisonPackage + downloads?: number + /** Package's own unpacked size (from dist.unpackedSize) */ + packageSize?: number + /** Install size data (fetched lazily) */ + installSize?: { + selfSize: number + totalSize: number + dependencyCount: number + } + analysis?: PackageAnalysisResponse + vulnerabilities?: { + count: number + severity: { critical: number; high: number; medium: number; low: number } + } + metadata?: { + license?: string + lastUpdated?: string + engines?: { node?: string; npm?: string } + deprecated?: string + } +} + +/** + * Composable for fetching and comparing multiple packages. + * + * @public + */ +export function usePackageComparison(packageNames: MaybeRefOrGetter) { + const packages = computed(() => toValue(packageNames)) + + // Reactive state + const packagesData = ref<(PackageComparisonData | null)[]>([]) + const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle') + const error = ref(null) + + // Track install size loading separately (it's slower) + const installSizeLoading = ref(false) + + // Track last fetched packages to avoid redundant fetches + let lastFetchedPackages: string[] = [] + + // Fetch function + async function fetchPackages(names: string[]) { + if (names.length === 0) { + packagesData.value = [] + status.value = 'idle' + lastFetchedPackages = [] + return + } + + // Skip fetch if packages haven't actually changed + if ( + names.length === lastFetchedPackages.length && + names.every((n, i) => n === lastFetchedPackages[i]) + ) { + return + } + + lastFetchedPackages = [...names] + status.value = 'pending' + error.value = null + + try { + // First pass: fetch fast data (package info, downloads, analysis, vulns) + const results = await Promise.all( + names.map(async (name): Promise => { + try { + // Fetch basic package info first (required) + const pkgData = await $fetch<{ + 'name': string + 'dist-tags': Record + 'time': Record + 'license'?: string + 'versions': Record + }>(`https://registry.npmjs.org/${encodePackageName(name)}`) + + const latestVersion = pkgData['dist-tags']?.latest + if (!latestVersion) return null + + // Fetch fast additional data in parallel (optional - failures are ok) + const [downloads, analysis, vulns] = await Promise.all([ + $fetch<{ downloads: number }>( + `https://api.npmjs.org/downloads/point/last-week/${encodePackageName(name)}`, + ).catch(() => null), + $fetch(`/api/registry/analysis/${name}`).catch(() => null), + $fetch<{ + vulnerabilities: Array<{ severity: string }> + }>(`/api/registry/vulnerabilities/${name}`).catch(() => null), + ]) + + const versionData = pkgData.versions[latestVersion] + const packageSize = versionData?.dist?.unpackedSize + + // Count vulnerabilities by severity + const vulnCounts = { critical: 0, high: 0, medium: 0, low: 0 } + const vulnList = vulns?.vulnerabilities ?? [] + for (const v of vulnList) { + const sev = v.severity.toLowerCase() as keyof typeof vulnCounts + if (sev in vulnCounts) vulnCounts[sev]++ + } + + return { + package: { + name: pkgData.name, + version: latestVersion, + description: undefined, + }, + downloads: downloads?.downloads, + packageSize, + installSize: undefined, // Will be filled in second pass + analysis: analysis ?? undefined, + vulnerabilities: { + count: vulnList.length, + severity: vulnCounts, + }, + metadata: { + license: pkgData.license, + lastUpdated: pkgData.time?.modified, + engines: analysis?.engines, + deprecated: versionData?.deprecated, + }, + } + } catch { + return null + } + }), + ) + + packagesData.value = results + status.value = 'success' + + // Second pass: fetch slow install size data in background + installSizeLoading.value = true + Promise.all( + names.map(async (name, index) => { + try { + const installSize = await $fetch<{ + selfSize: number + totalSize: number + dependencyCount: number + }>(`/api/registry/install-size/${name}`) + + // Update the specific package's install size + if (packagesData.value[index]) { + packagesData.value[index] = { + ...packagesData.value[index]!, + installSize, + } + } + } catch { + // Install size fetch failed, leave as undefined + } + }), + ).finally(() => { + installSizeLoading.value = false + }) + } catch (e) { + error.value = e as Error + status.value = 'error' + } + } + + // Watch for package changes and refetch (client-side only) + if (import.meta.client) { + watch( + packages, + newPackages => { + fetchPackages(newPackages) + }, + { immediate: true }, + ) + } + + // Compute metrics for each facet + function getMetricValues(facet: ComparisonFacet): (MetricValue | null)[] { + if (!packagesData.value || packagesData.value.length === 0) return [] + + return packagesData.value.map(pkg => { + if (!pkg) return null + return computeMetricValue(facet, pkg) + }) + } + + // Check if a facet depends on slow-loading data + function isFacetLoading(facet: ComparisonFacet): boolean { + if (!installSizeLoading.value) return false + // These facets depend on install-size API + return facet === 'installSize' || facet === 'dependencies' + } + + return { + packagesData: readonly(packagesData), + status: readonly(status), + error: readonly(error), + getMetricValues, + isFacetLoading, + } +} + +function encodePackageName(name: string): string { + if (name.startsWith('@')) { + return `@${encodeURIComponent(name.slice(1))}` + } + return encodeURIComponent(name) +} + +function computeMetricValue( + facet: ComparisonFacet, + data: PackageComparisonData, +): MetricValue | null { + switch (facet) { + case 'downloads': + if (data.downloads === undefined) return null + return { + raw: data.downloads, + display: formatCompactNumber(data.downloads), + status: 'neutral', + } + + case 'packageSize': + if (!data.packageSize) return null + return { + raw: data.packageSize, + display: formatBytes(data.packageSize), + status: data.packageSize > 5 * 1024 * 1024 ? 'warning' : 'neutral', + } + + case 'installSize': + if (!data.installSize) return null + return { + raw: data.installSize.totalSize, + display: formatBytes(data.installSize.totalSize), + status: data.installSize.totalSize > 50 * 1024 * 1024 ? 'warning' : 'neutral', + } + + case 'moduleFormat': + if (!data.analysis) return null + const format = data.analysis.moduleFormat + return { + raw: format, + display: format === 'dual' ? 'ESM + CJS' : format.toUpperCase(), + status: format === 'esm' || format === 'dual' ? 'good' : 'neutral', + } + + case 'types': + if (!data.analysis) return null + const types = data.analysis.types + return { + raw: types.kind, + display: + types.kind === 'included' ? 'Included' : types.kind === '@types' ? '@types' : 'None', + status: types.kind === 'included' ? 'good' : types.kind === '@types' ? 'info' : 'bad', + } + + case 'engines': + const engines = data.metadata?.engines + if (!engines?.node) return { raw: null, display: 'Any', status: 'neutral' } + return { + raw: engines.node, + display: `Node ${engines.node}`, + status: 'neutral', + } + + case 'vulnerabilities': + if (!data.vulnerabilities) return null + const count = data.vulnerabilities.count + const sev = data.vulnerabilities.severity + return { + raw: count, + display: count === 0 ? 'None' : `${count} (${sev.critical}C/${sev.high}H)`, + status: count === 0 ? 'good' : sev.critical > 0 || sev.high > 0 ? 'bad' : 'warning', + } + + case 'lastUpdated': + if (!data.metadata?.lastUpdated) return null + const date = new Date(data.metadata.lastUpdated) + return { + raw: date.getTime(), + display: data.metadata.lastUpdated, + status: isStale(date) ? 'warning' : 'neutral', + type: 'date', + } + + case 'license': + const license = data.metadata?.license + if (!license) return { raw: null, display: 'Unknown', status: 'warning' } + return { + raw: license, + display: license, + status: 'neutral', + } + + case 'dependencies': + if (!data.installSize) return null + const depCount = data.installSize.dependencyCount + return { + raw: depCount, + display: String(depCount), + status: depCount > 50 ? 'warning' : 'neutral', + } + + case 'deprecated': + const isDeprecated = !!data.metadata?.deprecated + return { + raw: isDeprecated, + display: isDeprecated ? 'Deprecated' : 'No', + status: isDeprecated ? 'bad' : 'good', + } + + // Coming soon facets + case 'totalDependencies': + return null + + default: + return null + } +} + +function formatBytes(bytes: number): string { + if (bytes < 1024) return `${bytes} B` + if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} kB` + return `${(bytes / (1024 * 1024)).toFixed(1)} MB` +} + +function isStale(date: Date): boolean { + const now = new Date() + const diffMs = now.getTime() - date.getTime() + const diffYears = diffMs / (1000 * 60 * 60 * 24 * 365) + return diffYears > 2 // Considered stale if not updated in 2+ years +} diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue index 8817a0ca..dd736383 100644 --- a/app/pages/[...package].vue +++ b/app/pages/[...package].vue @@ -468,6 +468,12 @@ onKeyStroke('d', () => { } }) +onKeyStroke('c', () => { + if (pkg.value) { + router.push({ path: '/compare', query: { packages: pkg.value.name } }) + } +}) + defineOgImageComponent('Package', { name: () => pkg.value?.name ?? 'Package', version: () => displayVersion.value?.version ?? '', @@ -612,6 +618,20 @@ function handleClick(event: MouseEvent) { . + + @@ -738,7 +758,7 @@ function handleClick(event: MouseEvent) { {{ $t('package.links.fund') }} - +
    • +
  • + + +
    • diff --git a/app/pages/compare.vue b/app/pages/compare.vue new file mode 100644 index 00000000..f0dce1d5 --- /dev/null +++ b/app/pages/compare.vue @@ -0,0 +1,147 @@ + + + diff --git a/i18n/locales/en.json b/i18n/locales/en.json index ef6f4eda..82f19dc8 100644 --- a/i18n/locales/en.json +++ b/i18n/locales/en.json @@ -43,6 +43,7 @@ "popular_packages": "Popular packages", "search": "search", "settings": "settings", + "compare": "compare", "back": "back" }, "settings": { @@ -141,7 +142,9 @@ "jsr": "jsr", "code": "code", "docs": "docs", - "fund": "fund" + "fund": "fund", + "compare": "compare", + "compare_to": "compare to..." }, "docs": { "not_available": "Docs not available", @@ -738,5 +741,68 @@ "empty": "No organizations found", "view_all": "View all" } + }, + "compare": { + "packages": { + "title": "Compare Packages", + "tagline": "Compare npm packages side-by-side to help you choose the right one.", + "meta_title": "Compare {packages} - npmx", + "meta_title_empty": "Compare Packages - npmx", + "meta_description": "Side-by-side comparison of {packages}", + "meta_description_empty": "Compare npm packages side-by-side", + "section_packages": "Packages", + "section_facets": "Facets", + "section_comparison": "Comparison", + "loading": "Loading package data...", + "error": "Failed to load package data. Please try again.", + "empty_title": "Select packages to compare", + "empty_description": "Search and add at least 2 packages above to see a side-by-side comparison of their metrics." + }, + "releases": { + "title": "Compare Versions", + "breadcrumb_diff": "diff", + "tagline_prefix": "See what changed between", + "tagline_separator": "and", + "meta_title": "{package} {v1} vs {v2} - npmx", + "meta_description": "Compare versions {v1} and {v2} of {package} - see what changed between releases", + "from_version": "From version", + "to_version": "To version", + "swap_versions": "Swap versions", + "section_changes": "Changes", + "section_file_changes": "File Changes", + "section_dependency_changes": "Dependency Changes", + "loading": "Loading version data...", + "error": "Failed to load version data. Make sure both versions exist.", + "file_diff_title": "File Diff Viewer", + "file_diff_description": "Visual diff of package files between versions, showing added, removed, and modified files with syntax highlighting.", + "dep_diff_title": "Dependency Diff", + "dep_diff_description": "See which dependencies were added, removed, or updated between versions, with version constraint changes highlighted." + }, + "selector": { + "search_first": "Search for a package...", + "search_add": "Add another package...", + "searching": "Searching...", + "remove_package": "Remove {package}", + "packages_selected": "{count}/{max} packages selected.", + "add_hint": "Add at least 2 packages to compare.", + "loading_versions": "Loading versions...", + "select_version": "Select version" + }, + "facets": { + "group_label": "Comparison facets", + "all": "all", + "none": "none", + "coming_soon": "Coming soon", + "select_all": "Select all facets", + "deselect_all": "Deselect all facets", + "select_category": "Select all {category} facets", + "deselect_category": "Deselect all {category} facets", + "categories": { + "performance": "Performance", + "health": "Health", + "compatibility": "Compatibility", + "security": "Security & Compliance" + } + } } } diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json index 69a061e1..dc8bb4ba 100644 --- a/i18n/locales/fr-FR.json +++ b/i18n/locales/fr-FR.json @@ -132,7 +132,9 @@ "jsr": "jsr", "code": "code", "docs": "docs", - "fund": "donner" + "fund": "donner", + "compare": "comparer", + "compare_to": "comparer à..." }, "docs": { "not_available": "Documentation non disponible", @@ -729,5 +731,68 @@ "empty": "Aucune organisation trouvée", "view_all": "Tout voir" } + }, + "compare": { + "packages": { + "title": "Comparer les paquets", + "tagline": "Comparez les paquets npm côte à côte pour vous aider à choisir le bon.", + "meta_title": "Comparer {packages} - npmx", + "meta_title_empty": "Comparer les paquets - npmx", + "meta_description": "Comparaison côte à côte de {packages}", + "meta_description_empty": "Comparez les paquets npm côte à côte", + "section_packages": "Paquets", + "section_facets": "Facettes", + "section_comparison": "Comparaison", + "loading": "Chargement des données des paquets...", + "error": "Échec du chargement des données. Veuillez réessayer.", + "empty_title": "Sélectionnez des paquets à comparer", + "empty_description": "Recherchez et ajoutez au moins 2 paquets ci-dessus pour voir une comparaison côte à côte de leurs métriques." + }, + "releases": { + "title": "Comparer les versions", + "breadcrumb_diff": "diff", + "tagline_prefix": "Voir ce qui a changé entre", + "tagline_separator": "et", + "meta_title": "{package} {v1} vs {v2} - npmx", + "meta_description": "Comparez les versions {v1} et {v2} de {package} - voyez ce qui a changé entre les versions", + "from_version": "De la version", + "to_version": "Vers la version", + "swap_versions": "Inverser les versions", + "section_changes": "Changements", + "section_file_changes": "Changements de fichiers", + "section_dependency_changes": "Changements de dépendances", + "loading": "Chargement des données de version...", + "error": "Échec du chargement des données de version. Vérifiez que les deux versions existent.", + "file_diff_title": "Visualiseur de différences de fichiers", + "file_diff_description": "Différence visuelle des fichiers du paquet entre les versions, montrant les fichiers ajoutés, supprimés et modifiés avec coloration syntaxique.", + "dep_diff_title": "Différence de dépendances", + "dep_diff_description": "Voyez quelles dépendances ont été ajoutées, supprimées ou mises à jour entre les versions, avec les changements de contraintes de version mis en évidence." + }, + "selector": { + "search_first": "Rechercher un paquet...", + "search_add": "Ajouter un autre paquet...", + "searching": "Recherche...", + "remove_package": "Supprimer {package}", + "packages_selected": "{count}/{max} paquets sélectionnés.", + "add_hint": "Ajoutez au moins 2 paquets à comparer.", + "loading_versions": "Chargement des versions...", + "select_version": "Sélectionner une version" + }, + "facets": { + "group_label": "Facettes de comparaison", + "all": "tout", + "none": "aucun", + "coming_soon": "Bientôt disponible", + "select_all": "Sélectionner toutes les facettes", + "deselect_all": "Désélectionner toutes les facettes", + "select_category": "Sélectionner toutes les facettes {category}", + "deselect_category": "Désélectionner toutes les facettes {category}", + "categories": { + "performance": "Performance", + "health": "Santé", + "compatibility": "Compatibilité", + "security": "Sécurité & Conformité" + } + } } } diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json index ef6f4eda..82f19dc8 100644 --- a/lunaria/files/en-US.json +++ b/lunaria/files/en-US.json @@ -43,6 +43,7 @@ "popular_packages": "Popular packages", "search": "search", "settings": "settings", + "compare": "compare", "back": "back" }, "settings": { @@ -141,7 +142,9 @@ "jsr": "jsr", "code": "code", "docs": "docs", - "fund": "fund" + "fund": "fund", + "compare": "compare", + "compare_to": "compare to..." }, "docs": { "not_available": "Docs not available", @@ -738,5 +741,68 @@ "empty": "No organizations found", "view_all": "View all" } + }, + "compare": { + "packages": { + "title": "Compare Packages", + "tagline": "Compare npm packages side-by-side to help you choose the right one.", + "meta_title": "Compare {packages} - npmx", + "meta_title_empty": "Compare Packages - npmx", + "meta_description": "Side-by-side comparison of {packages}", + "meta_description_empty": "Compare npm packages side-by-side", + "section_packages": "Packages", + "section_facets": "Facets", + "section_comparison": "Comparison", + "loading": "Loading package data...", + "error": "Failed to load package data. Please try again.", + "empty_title": "Select packages to compare", + "empty_description": "Search and add at least 2 packages above to see a side-by-side comparison of their metrics." + }, + "releases": { + "title": "Compare Versions", + "breadcrumb_diff": "diff", + "tagline_prefix": "See what changed between", + "tagline_separator": "and", + "meta_title": "{package} {v1} vs {v2} - npmx", + "meta_description": "Compare versions {v1} and {v2} of {package} - see what changed between releases", + "from_version": "From version", + "to_version": "To version", + "swap_versions": "Swap versions", + "section_changes": "Changes", + "section_file_changes": "File Changes", + "section_dependency_changes": "Dependency Changes", + "loading": "Loading version data...", + "error": "Failed to load version data. Make sure both versions exist.", + "file_diff_title": "File Diff Viewer", + "file_diff_description": "Visual diff of package files between versions, showing added, removed, and modified files with syntax highlighting.", + "dep_diff_title": "Dependency Diff", + "dep_diff_description": "See which dependencies were added, removed, or updated between versions, with version constraint changes highlighted." + }, + "selector": { + "search_first": "Search for a package...", + "search_add": "Add another package...", + "searching": "Searching...", + "remove_package": "Remove {package}", + "packages_selected": "{count}/{max} packages selected.", + "add_hint": "Add at least 2 packages to compare.", + "loading_versions": "Loading versions...", + "select_version": "Select version" + }, + "facets": { + "group_label": "Comparison facets", + "all": "all", + "none": "none", + "coming_soon": "Coming soon", + "select_all": "Select all facets", + "deselect_all": "Deselect all facets", + "select_category": "Select all {category} facets", + "deselect_category": "Deselect all {category} facets", + "categories": { + "performance": "Performance", + "health": "Health", + "compatibility": "Compatibility", + "security": "Security & Compliance" + } + } } } diff --git a/lunaria/files/fr-FR.json b/lunaria/files/fr-FR.json index 69a061e1..dc8bb4ba 100644 --- a/lunaria/files/fr-FR.json +++ b/lunaria/files/fr-FR.json @@ -132,7 +132,9 @@ "jsr": "jsr", "code": "code", "docs": "docs", - "fund": "donner" + "fund": "donner", + "compare": "comparer", + "compare_to": "comparer à..." }, "docs": { "not_available": "Documentation non disponible", @@ -729,5 +731,68 @@ "empty": "Aucune organisation trouvée", "view_all": "Tout voir" } + }, + "compare": { + "packages": { + "title": "Comparer les paquets", + "tagline": "Comparez les paquets npm côte à côte pour vous aider à choisir le bon.", + "meta_title": "Comparer {packages} - npmx", + "meta_title_empty": "Comparer les paquets - npmx", + "meta_description": "Comparaison côte à côte de {packages}", + "meta_description_empty": "Comparez les paquets npm côte à côte", + "section_packages": "Paquets", + "section_facets": "Facettes", + "section_comparison": "Comparaison", + "loading": "Chargement des données des paquets...", + "error": "Échec du chargement des données. Veuillez réessayer.", + "empty_title": "Sélectionnez des paquets à comparer", + "empty_description": "Recherchez et ajoutez au moins 2 paquets ci-dessus pour voir une comparaison côte à côte de leurs métriques." + }, + "releases": { + "title": "Comparer les versions", + "breadcrumb_diff": "diff", + "tagline_prefix": "Voir ce qui a changé entre", + "tagline_separator": "et", + "meta_title": "{package} {v1} vs {v2} - npmx", + "meta_description": "Comparez les versions {v1} et {v2} de {package} - voyez ce qui a changé entre les versions", + "from_version": "De la version", + "to_version": "Vers la version", + "swap_versions": "Inverser les versions", + "section_changes": "Changements", + "section_file_changes": "Changements de fichiers", + "section_dependency_changes": "Changements de dépendances", + "loading": "Chargement des données de version...", + "error": "Échec du chargement des données de version. Vérifiez que les deux versions existent.", + "file_diff_title": "Visualiseur de différences de fichiers", + "file_diff_description": "Différence visuelle des fichiers du paquet entre les versions, montrant les fichiers ajoutés, supprimés et modifiés avec coloration syntaxique.", + "dep_diff_title": "Différence de dépendances", + "dep_diff_description": "Voyez quelles dépendances ont été ajoutées, supprimées ou mises à jour entre les versions, avec les changements de contraintes de version mis en évidence." + }, + "selector": { + "search_first": "Rechercher un paquet...", + "search_add": "Ajouter un autre paquet...", + "searching": "Recherche...", + "remove_package": "Supprimer {package}", + "packages_selected": "{count}/{max} paquets sélectionnés.", + "add_hint": "Ajoutez au moins 2 paquets à comparer.", + "loading_versions": "Chargement des versions...", + "select_version": "Sélectionner une version" + }, + "facets": { + "group_label": "Facettes de comparaison", + "all": "tout", + "none": "aucun", + "coming_soon": "Bientôt disponible", + "select_all": "Sélectionner toutes les facettes", + "deselect_all": "Désélectionner toutes les facettes", + "select_category": "Sélectionner toutes les facettes {category}", + "deselect_category": "Désélectionner toutes les facettes {category}", + "categories": { + "performance": "Performance", + "health": "Santé", + "compatibility": "Compatibilité", + "security": "Sécurité & Conformité" + } + } } } diff --git a/package.json b/package.json index c97ecf95..ace9a351 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "@shikijs/themes": "^3.21.0", "@vueuse/core": "^14.1.0", "@vueuse/nuxt": "14.1.0", + "@vueuse/router": "^14.1.0", "module-replacements": "^2.11.0", "nuxt": "^4.3.0", "nuxt-og-image": "^5.1.13", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0d26cc82..f062b9b7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -71,6 +71,9 @@ importers: '@vueuse/nuxt': specifier: 14.1.0 version: 14.1.0(magicast@0.5.1)(nuxt@4.3.0(@parcel/watcher@2.5.6)(@types/node@24.10.9)(@vue/compiler-sfc@3.5.27)(better-sqlite3@12.5.0)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(magicast@0.5.1)(optionator@0.9.4)(oxlint@1.42.0(oxlint-tsgolint@0.11.2))(rolldown@1.0.0-rc.1)(rollup@4.57.0)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@3.2.2(typescript@5.9.3))(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3)) + '@vueuse/router': + specifier: ^14.1.0 + version: 14.1.0(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3)) module-replacements: specifier: ^2.11.0 version: 2.11.0 @@ -4285,6 +4288,12 @@ packages: nuxt: ^3.0.0 || ^4.0.0-0 vue: ^3.5.0 + '@vueuse/router@14.1.0': + resolution: {integrity: sha512-8h7g0PhjcMC2Vnu9zBkN1J038JFIzkS3/DP2L5ouzFEhY3YAM8zkIOZ0K+hzAWkYEFLGmWGcgBfuvCUD0U42Jw==} + peerDependencies: + vue: ^3.5.0 + vue-router: ^4.0.0 + '@vueuse/shared@10.11.1': resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==} @@ -13801,6 +13810,12 @@ snapshots: transitivePeerDependencies: - magicast + '@vueuse/router@14.1.0(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))': + dependencies: + '@vueuse/shared': 14.1.0(vue@3.5.27(typescript@5.9.3)) + vue: 3.5.27(typescript@5.9.3) + vue-router: 4.6.4(vue@3.5.27(typescript@5.9.3)) + '@vueuse/shared@10.11.1(vue@3.5.27(typescript@5.9.3))': dependencies: vue-demi: 0.14.10(vue@3.5.27(typescript@5.9.3)) diff --git a/shared/types/comparison.ts b/shared/types/comparison.ts new file mode 100644 index 00000000..62ae459b --- /dev/null +++ b/shared/types/comparison.ts @@ -0,0 +1,151 @@ +/** + * Comparison feature types + */ + +/** Available comparison facets/metrics */ +export type ComparisonFacet = + | 'downloads' + | 'packageSize' + | 'installSize' + | 'moduleFormat' + | 'types' + | 'engines' + | 'vulnerabilities' + | 'lastUpdated' + | 'license' + | 'dependencies' + | 'totalDependencies' + | 'deprecated' + +/** Facet metadata for UI display */ +export interface FacetInfo { + id: ComparisonFacet + label: string + description: string + category: 'performance' | 'health' | 'compatibility' | 'security' + comingSoon?: boolean +} + +/** Category display order */ +export const CATEGORY_ORDER = ['performance', 'health', 'compatibility', 'security'] as const + +/** All available facets with their metadata (ordered by category, then display order within category) */ +export const FACET_INFO: Record> = { + // Performance + packageSize: { + label: 'Package Size', + description: 'Size of the package itself (unpacked)', + category: 'performance', + }, + installSize: { + label: 'Install Size', + description: 'Total install size including all dependencies', + category: 'performance', + }, + dependencies: { + label: '# Direct Deps', + description: 'Number of direct dependencies', + category: 'performance', + }, + totalDependencies: { + label: '# Total Deps', + description: 'Total number of dependencies including transitive', + category: 'performance', + comingSoon: true, + }, + // Health + downloads: { + label: 'Downloads/wk', + description: 'Weekly download count', + category: 'health', + }, + lastUpdated: { + label: 'Last Updated', + description: 'Most recent publish date', + category: 'health', + }, + deprecated: { + label: 'Deprecated?', + description: 'Whether the package is deprecated', + category: 'health', + }, + // Compatibility + engines: { + label: 'Engines', + description: 'Node.js version requirements', + category: 'compatibility', + }, + types: { + label: 'Types', + description: 'TypeScript type definitions', + category: 'compatibility', + }, + moduleFormat: { + label: 'Module Format', + description: 'ESM/CJS support', + category: 'compatibility', + }, + // Security + license: { + label: 'License', + description: 'Package license', + category: 'security', + }, + vulnerabilities: { + label: 'Vulnerabilities', + description: 'Known security vulnerabilities', + category: 'security', + }, +} + +/** All facets in display order */ +export const ALL_FACETS: ComparisonFacet[] = Object.keys(FACET_INFO) as ComparisonFacet[] + +/** Facets grouped by category (derived from FACET_INFO) */ +export const FACETS_BY_CATEGORY: Record = + ALL_FACETS.reduce( + (acc, facet) => { + acc[FACET_INFO[facet].category].push(facet) + return acc + }, + { performance: [], health: [], compatibility: [], security: [] } as Record< + FacetInfo['category'], + ComparisonFacet[] + >, + ) + +/** Default facets - all non-comingSoon facets */ +export const DEFAULT_FACETS: ComparisonFacet[] = ALL_FACETS.filter(f => !FACET_INFO[f].comingSoon) + +/** Metric value that can be compared */ +export interface MetricValue { + /** Raw value for comparison logic */ + raw: T + /** Formatted display string (or ISO date string if type is 'date') */ + display: string + /** Optional status indicator */ + status?: 'good' | 'info' | 'warning' | 'bad' | 'neutral' + /** Value type for special rendering (e.g., dates use DateTime component) */ + type?: 'date' +} + +/** Result of comparing two metric values */ +export interface DiffResult<_T = unknown> { + /** Absolute difference (for numeric values) */ + absoluteDiff?: number + /** Percentage difference (for numeric values) */ + percentDiff?: number + /** Human-readable difference string */ + display: string + /** Direction of change */ + direction: 'increase' | 'decrease' | 'same' | 'changed' + /** Whether the change is favorable (depends on metric semantics) */ + favorable?: boolean +} + +/** Package data for comparison */ +export interface ComparisonPackage { + name: string + version: string + description?: string +} diff --git a/shared/types/index.ts b/shared/types/index.ts index 1bb0a8a1..0459b691 100644 --- a/shared/types/index.ts +++ b/shared/types/index.ts @@ -5,3 +5,4 @@ export * from './readme' export * from './docs' export * from './deno-doc' export * from './i18n-status' +export * from './comparison' diff --git a/test/nuxt/composables/use-facet-selection.spec.ts b/test/nuxt/composables/use-facet-selection.spec.ts new file mode 100644 index 00000000..7d8b2906 --- /dev/null +++ b/test/nuxt/composables/use-facet-selection.spec.ts @@ -0,0 +1,230 @@ +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { ref } from 'vue' +import { DEFAULT_FACETS, FACETS_BY_CATEGORY } from '../../../shared/types/comparison' + +// Mock useRouteQuery +const mockRouteQuery = ref('') +vi.mock('@vueuse/router', () => ({ + useRouteQuery: () => mockRouteQuery, +})) + +describe('useFacetSelection', () => { + beforeEach(() => { + mockRouteQuery.value = '' + }) + + it('returns DEFAULT_FACETS when no query param', () => { + const { selectedFacets } = useFacetSelection() + + expect(selectedFacets.value).toEqual(DEFAULT_FACETS) + }) + + it('parses facets from query param', () => { + mockRouteQuery.value = 'downloads,types,license' + + const { selectedFacets } = useFacetSelection() + + expect(selectedFacets.value).toContain('downloads') + expect(selectedFacets.value).toContain('types') + expect(selectedFacets.value).toContain('license') + }) + + it('filters out invalid facets from query', () => { + mockRouteQuery.value = 'downloads,invalidFacet,types' + + const { selectedFacets } = useFacetSelection() + + expect(selectedFacets.value).toContain('downloads') + expect(selectedFacets.value).toContain('types') + expect(selectedFacets.value).not.toContain('invalidFacet') + }) + + it('filters out comingSoon facets from query', () => { + mockRouteQuery.value = 'downloads,totalDependencies,types' + + const { selectedFacets } = useFacetSelection() + + expect(selectedFacets.value).toContain('downloads') + expect(selectedFacets.value).toContain('types') + expect(selectedFacets.value).not.toContain('totalDependencies') + }) + + it('falls back to DEFAULT_FACETS if all parsed facets are invalid', () => { + mockRouteQuery.value = 'invalidFacet1,invalidFacet2' + + const { selectedFacets } = useFacetSelection() + + expect(selectedFacets.value).toEqual(DEFAULT_FACETS) + }) + + describe('isFacetSelected', () => { + it('returns true for selected facets', () => { + mockRouteQuery.value = 'downloads,types' + + const { isFacetSelected } = useFacetSelection() + + expect(isFacetSelected('downloads')).toBe(true) + expect(isFacetSelected('types')).toBe(true) + }) + + it('returns false for unselected facets', () => { + mockRouteQuery.value = 'downloads,types' + + const { isFacetSelected } = useFacetSelection() + + expect(isFacetSelected('license')).toBe(false) + expect(isFacetSelected('engines')).toBe(false) + }) + }) + + describe('toggleFacet', () => { + it('adds facet when not selected', () => { + mockRouteQuery.value = 'downloads' + + const { selectedFacets, toggleFacet } = useFacetSelection() + + toggleFacet('types') + + expect(selectedFacets.value).toContain('downloads') + expect(selectedFacets.value).toContain('types') + }) + + it('removes facet when selected', () => { + mockRouteQuery.value = 'downloads,types' + + const { selectedFacets, toggleFacet } = useFacetSelection() + + toggleFacet('types') + + expect(selectedFacets.value).toContain('downloads') + expect(selectedFacets.value).not.toContain('types') + }) + + it('does not remove last facet', () => { + mockRouteQuery.value = 'downloads' + + const { selectedFacets, toggleFacet } = useFacetSelection() + + toggleFacet('downloads') + + expect(selectedFacets.value).toContain('downloads') + expect(selectedFacets.value.length).toBe(1) + }) + }) + + describe('selectCategory', () => { + it('selects all facets in a category', () => { + mockRouteQuery.value = 'downloads' + + const { selectedFacets, selectCategory } = useFacetSelection() + + selectCategory('performance') + + const performanceFacets = FACETS_BY_CATEGORY.performance.filter( + f => f !== 'totalDependencies', // comingSoon facet + ) + for (const facet of performanceFacets) { + expect(selectedFacets.value).toContain(facet) + } + }) + + it('preserves existing selections from other categories', () => { + mockRouteQuery.value = 'downloads,license' + + const { selectedFacets, selectCategory } = useFacetSelection() + + selectCategory('compatibility') + + expect(selectedFacets.value).toContain('downloads') + expect(selectedFacets.value).toContain('license') + }) + }) + + describe('deselectCategory', () => { + it('deselects all facets in a category', () => { + mockRouteQuery.value = '' + const { selectedFacets, deselectCategory } = useFacetSelection() + + deselectCategory('performance') + + const nonComingSoonPerformanceFacets = FACETS_BY_CATEGORY.performance.filter( + f => f !== 'totalDependencies', + ) + for (const facet of nonComingSoonPerformanceFacets) { + expect(selectedFacets.value).not.toContain(facet) + } + }) + + it('does not deselect if it would leave no facets', () => { + mockRouteQuery.value = 'packageSize,installSize' + + const { selectedFacets, deselectCategory } = useFacetSelection() + + deselectCategory('performance') + + // Should still have at least one facet + expect(selectedFacets.value.length).toBeGreaterThan(0) + }) + }) + + describe('selectAll', () => { + it('selects all default facets', () => { + mockRouteQuery.value = 'downloads' + + const { selectedFacets, selectAll } = useFacetSelection() + + selectAll() + + expect(selectedFacets.value).toEqual(DEFAULT_FACETS) + }) + }) + + describe('deselectAll', () => { + it('keeps only the first default facet', () => { + mockRouteQuery.value = '' + + const { selectedFacets, deselectAll } = useFacetSelection() + + deselectAll() + + expect(selectedFacets.value).toHaveLength(1) + expect(selectedFacets.value[0]).toBe(DEFAULT_FACETS[0]) + }) + }) + + describe('isAllSelected', () => { + it('returns true when all facets selected', () => { + mockRouteQuery.value = '' + + const { isAllSelected } = useFacetSelection() + + expect(isAllSelected.value).toBe(true) + }) + + it('returns false when not all facets selected', () => { + mockRouteQuery.value = 'downloads,types' + + const { isAllSelected } = useFacetSelection() + + expect(isAllSelected.value).toBe(false) + }) + }) + + describe('isNoneSelected', () => { + it('returns true when only one facet selected', () => { + mockRouteQuery.value = 'downloads' + + const { isNoneSelected } = useFacetSelection() + + expect(isNoneSelected.value).toBe(true) + }) + + it('returns false when multiple facets selected', () => { + mockRouteQuery.value = 'downloads,types' + + const { isNoneSelected } = useFacetSelection() + + expect(isNoneSelected.value).toBe(false) + }) + }) +}) diff --git a/test/unit/comparison.spec.ts b/test/unit/comparison.spec.ts new file mode 100644 index 00000000..c00d06eb --- /dev/null +++ b/test/unit/comparison.spec.ts @@ -0,0 +1,130 @@ +import { describe, expect, it } from 'vitest' +import { + ALL_FACETS, + CATEGORY_ORDER, + DEFAULT_FACETS, + FACET_INFO, + FACETS_BY_CATEGORY, + type ComparisonFacet, +} from '../../shared/types/comparison' + +describe('comparison types', () => { + describe('FACET_INFO', () => { + it('defines all expected facets', () => { + const expectedFacets: ComparisonFacet[] = [ + 'packageSize', + 'installSize', + 'dependencies', + 'totalDependencies', + 'downloads', + 'lastUpdated', + 'deprecated', + 'engines', + 'types', + 'moduleFormat', + 'license', + 'vulnerabilities', + ] + + for (const facet of expectedFacets) { + expect(FACET_INFO[facet]).toBeDefined() + expect(FACET_INFO[facet].label).toBeTruthy() + expect(FACET_INFO[facet].description).toBeTruthy() + expect(FACET_INFO[facet].category).toBeTruthy() + } + }) + + it('has valid categories for all facets', () => { + const validCategories = ['performance', 'health', 'compatibility', 'security'] + + for (const facet of ALL_FACETS) { + expect(validCategories).toContain(FACET_INFO[facet].category) + } + }) + + it('marks totalDependencies as comingSoon', () => { + expect(FACET_INFO.totalDependencies.comingSoon).toBe(true) + }) + }) + + describe('CATEGORY_ORDER', () => { + it('defines categories in correct order', () => { + expect(CATEGORY_ORDER).toEqual(['performance', 'health', 'compatibility', 'security']) + }) + }) + + describe('ALL_FACETS', () => { + it('contains all facets from FACET_INFO', () => { + const facetInfoKeys = Object.keys(FACET_INFO) as ComparisonFacet[] + expect(ALL_FACETS).toHaveLength(facetInfoKeys.length) + for (const facet of facetInfoKeys) { + expect(ALL_FACETS).toContain(facet) + } + }) + + it('maintains order grouped by category', () => { + // First facets should be performance + const performanceFacets = FACETS_BY_CATEGORY.performance + expect(ALL_FACETS.slice(0, performanceFacets.length)).toEqual(performanceFacets) + }) + }) + + describe('DEFAULT_FACETS', () => { + it('excludes comingSoon facets', () => { + for (const facet of DEFAULT_FACETS) { + expect(FACET_INFO[facet].comingSoon).not.toBe(true) + } + }) + + it('includes all non-comingSoon facets', () => { + const nonComingSoonFacets = ALL_FACETS.filter(f => !FACET_INFO[f].comingSoon) + expect(DEFAULT_FACETS).toEqual(nonComingSoonFacets) + }) + + it('does not include totalDependencies', () => { + expect(DEFAULT_FACETS).not.toContain('totalDependencies') + }) + }) + + describe('FACETS_BY_CATEGORY', () => { + it('groups all facets by their category', () => { + for (const category of CATEGORY_ORDER) { + const facetsInCategory = FACETS_BY_CATEGORY[category] + expect(facetsInCategory.length).toBeGreaterThan(0) + + for (const facet of facetsInCategory) { + expect(FACET_INFO[facet].category).toBe(category) + } + } + }) + + it('contains all facets exactly once', () => { + const allFacetsFromCategories = CATEGORY_ORDER.flatMap(cat => FACETS_BY_CATEGORY[cat]) + expect(allFacetsFromCategories).toHaveLength(ALL_FACETS.length) + expect(new Set(allFacetsFromCategories).size).toBe(ALL_FACETS.length) + }) + + it('performance category has size and dependency facets', () => { + expect(FACETS_BY_CATEGORY.performance).toContain('packageSize') + expect(FACETS_BY_CATEGORY.performance).toContain('installSize') + expect(FACETS_BY_CATEGORY.performance).toContain('dependencies') + }) + + it('health category has downloads and update facets', () => { + expect(FACETS_BY_CATEGORY.health).toContain('downloads') + expect(FACETS_BY_CATEGORY.health).toContain('lastUpdated') + expect(FACETS_BY_CATEGORY.health).toContain('deprecated') + }) + + it('compatibility category has module and type facets', () => { + expect(FACETS_BY_CATEGORY.compatibility).toContain('moduleFormat') + expect(FACETS_BY_CATEGORY.compatibility).toContain('types') + expect(FACETS_BY_CATEGORY.compatibility).toContain('engines') + }) + + it('security category has license and vulnerability facets', () => { + expect(FACETS_BY_CATEGORY.security).toContain('license') + expect(FACETS_BY_CATEGORY.security).toContain('vulnerabilities') + }) + }) +}) From 183c42ea8e9b8abae51c0f919714a22d3ac8eafa Mon Sep 17 00:00:00 2001 From: Philippe Serhal Date: Fri, 30 Jan 2026 16:59:14 -0500 Subject: [PATCH 2/5] test: add a bunch of coverage for compare page --- .../components/compare/ComparisonGrid.spec.ts | 188 ++++++++ .../components/compare/FacetSelector.spec.ts | 265 ++++++++++++ .../nuxt/components/compare/MetricRow.spec.ts | 310 ++++++++++++++ .../compare/PackageSelector.spec.ts | 403 ++++++++++++++++++ .../composables/use-facet-selection.spec.ts | 95 +++++ .../use-package-comparison.spec.ts | 251 +++++++++++ test/nuxt/pages/compare.spec.ts | 234 ++++++++++ test/unit/comparison-metrics.spec.ts | 302 +++++++++++++ 8 files changed, 2048 insertions(+) create mode 100644 test/nuxt/components/compare/ComparisonGrid.spec.ts create mode 100644 test/nuxt/components/compare/FacetSelector.spec.ts create mode 100644 test/nuxt/components/compare/MetricRow.spec.ts create mode 100644 test/nuxt/components/compare/PackageSelector.spec.ts create mode 100644 test/nuxt/composables/use-package-comparison.spec.ts create mode 100644 test/nuxt/pages/compare.spec.ts create mode 100644 test/unit/comparison-metrics.spec.ts diff --git a/test/nuxt/components/compare/ComparisonGrid.spec.ts b/test/nuxt/components/compare/ComparisonGrid.spec.ts new file mode 100644 index 00000000..c2cb2901 --- /dev/null +++ b/test/nuxt/components/compare/ComparisonGrid.spec.ts @@ -0,0 +1,188 @@ +import { describe, expect, it } from 'vitest' +import { mountSuspended } from '@nuxt/test-utils/runtime' +import ComparisonGrid from '~/components/compare/ComparisonGrid.vue' + +describe('ComparisonGrid', () => { + describe('header rendering', () => { + it('renders column headers', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 2, + headers: ['lodash@4.17.21', 'underscore@1.13.6'], + }, + }) + expect(component.text()).toContain('lodash@4.17.21') + expect(component.text()).toContain('underscore@1.13.6') + }) + + it('renders correct number of header cells', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 3, + headers: ['pkg1', 'pkg2', 'pkg3'], + }, + }) + const headerCells = component.findAll('.comparison-cell-header') + expect(headerCells.length).toBe(3) + }) + + it('truncates long header text with title attribute', async () => { + const longName = 'very-long-package-name@1.0.0-beta.1' + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 2, + headers: [longName, 'short'], + }, + }) + const spans = component.findAll('.truncate') + const longSpan = spans.find(s => s.text() === longName) + expect(longSpan?.attributes('title')).toBe(longName) + }) + }) + + describe('column layout', () => { + it('applies columns-2 class for 2 columns', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 2, + headers: ['a', 'b'], + }, + }) + expect(component.find('.columns-2').exists()).toBe(true) + }) + + it('applies columns-3 class for 3 columns', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 3, + headers: ['a', 'b', 'c'], + }, + }) + expect(component.find('.columns-3').exists()).toBe(true) + }) + + it('applies columns-4 class for 4 columns', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 4, + headers: ['a', 'b', 'c', 'd'], + }, + }) + expect(component.find('.columns-4').exists()).toBe(true) + }) + + it('sets min-width for 4 columns to 800px', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 4, + headers: ['a', 'b', 'c', 'd'], + }, + }) + expect(component.find('.min-w-\\[800px\\]').exists()).toBe(true) + }) + + it('sets min-width for 2-3 columns to 600px', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 2, + headers: ['a', 'b'], + }, + }) + expect(component.find('.min-w-\\[600px\\]').exists()).toBe(true) + }) + + it('sets --columns CSS variable', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 3, + headers: ['a', 'b', 'c'], + }, + }) + const grid = component.find('.comparison-grid') + expect(grid.attributes('style')).toContain('--columns: 3') + }) + }) + + describe('slot content', () => { + it('renders default slot content', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 2, + headers: ['a', 'b'], + }, + slots: { + default: '
    Row content
    ', + }, + }) + expect(component.find('.test-row').exists()).toBe(true) + expect(component.text()).toContain('Row content') + }) + }) + + describe('structure', () => { + it('has overflow-x-auto wrapper for horizontal scrolling', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 2, + headers: ['a', 'b'], + }, + }) + expect(component.find('.overflow-x-auto').exists()).toBe(true) + }) + + it('has comparison-grid class on main container', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 2, + headers: ['a', 'b'], + }, + }) + expect(component.find('.comparison-grid').exists()).toBe(true) + }) + + it('has comparison-header using display:contents', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 2, + headers: ['a', 'b'], + }, + }) + expect(component.find('.comparison-header').exists()).toBe(true) + }) + + it('has empty label cell in header row', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 2, + headers: ['a', 'b'], + }, + }) + expect(component.find('.comparison-label').exists()).toBe(true) + }) + }) + + describe('styling', () => { + it('applies header cell background', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 2, + headers: ['a', 'b'], + }, + }) + // Header cells have comparison-cell-header class which applies bg + expect(component.findAll('.comparison-cell-header').length).toBe(2) + }) + + it('header text is monospace and medium weight', async () => { + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: 2, + headers: ['lodash'], + }, + }) + const headerSpan = component.find('.comparison-cell-header span') + expect(headerSpan.classes()).toContain('font-mono') + expect(headerSpan.classes()).toContain('font-medium') + }) + }) +}) diff --git a/test/nuxt/components/compare/FacetSelector.spec.ts b/test/nuxt/components/compare/FacetSelector.spec.ts new file mode 100644 index 00000000..02643880 --- /dev/null +++ b/test/nuxt/components/compare/FacetSelector.spec.ts @@ -0,0 +1,265 @@ +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { ref } from 'vue' +import { mountSuspended } from '@nuxt/test-utils/runtime' +import FacetSelector from '~/components/compare/FacetSelector.vue' +import { CATEGORY_ORDER, FACET_INFO, FACETS_BY_CATEGORY } from '../../../../shared/types/comparison' + +// Mock useFacetSelection +const mockSelectedFacets = ref(['downloads', 'types']) +const mockIsFacetSelected = vi.fn((facet: string) => mockSelectedFacets.value.includes(facet)) +const mockToggleFacet = vi.fn() +const mockSelectCategory = vi.fn() +const mockDeselectCategory = vi.fn() +const mockSelectAll = vi.fn() +const mockDeselectAll = vi.fn() +const mockIsAllSelected = ref(false) +const mockIsNoneSelected = ref(false) + +vi.mock('~/composables/useFacetSelection', () => ({ + useFacetSelection: () => ({ + selectedFacets: mockSelectedFacets, + isFacetSelected: mockIsFacetSelected, + toggleFacet: mockToggleFacet, + selectCategory: mockSelectCategory, + deselectCategory: mockDeselectCategory, + selectAll: mockSelectAll, + deselectAll: mockDeselectAll, + isAllSelected: mockIsAllSelected, + isNoneSelected: mockIsNoneSelected, + }), +})) + +// Mock useRouteQuery for composable +vi.mock('@vueuse/router', () => ({ + useRouteQuery: () => ref(''), +})) + +describe('FacetSelector', () => { + beforeEach(() => { + mockSelectedFacets.value = ['downloads', 'types'] + mockIsFacetSelected.mockImplementation((facet: string) => + mockSelectedFacets.value.includes(facet), + ) + mockToggleFacet.mockClear() + mockSelectCategory.mockClear() + mockDeselectCategory.mockClear() + mockSelectAll.mockClear() + mockDeselectAll.mockClear() + mockIsAllSelected.value = false + mockIsNoneSelected.value = false + }) + + describe('category rendering', () => { + it('renders all categories', async () => { + const component = await mountSuspended(FacetSelector) + + for (const category of CATEGORY_ORDER) { + // Categories are rendered as uppercase text + expect(component.text().toLowerCase()).toContain(category) + } + }) + + it('renders category headers with all/none buttons', async () => { + const component = await mountSuspended(FacetSelector) + + // Each category has all/none buttons + const allButtons = component.findAll('button').filter(b => b.text() === 'all') + const noneButtons = component.findAll('button').filter(b => b.text() === 'none') + + // 4 categories = 4 all buttons + 4 none buttons + expect(allButtons.length).toBe(4) + expect(noneButtons.length).toBe(4) + }) + }) + + describe('facet buttons', () => { + it('renders all facets from FACET_INFO', async () => { + const component = await mountSuspended(FacetSelector) + + for (const facet of Object.keys(FACET_INFO)) { + const facetInfo = FACET_INFO[facet as keyof typeof FACET_INFO] + expect(component.text()).toContain(facetInfo.label) + } + }) + + it('shows checkmark icon for selected facets', async () => { + mockSelectedFacets.value = ['downloads'] + mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads') + + const component = await mountSuspended(FacetSelector) + + expect(component.find('.i-carbon-checkmark').exists()).toBe(true) + }) + + it('shows add icon for unselected facets', async () => { + mockSelectedFacets.value = ['downloads'] + mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads') + + const component = await mountSuspended(FacetSelector) + + expect(component.find('.i-carbon-add').exists()).toBe(true) + }) + + it('applies aria-pressed for selected state', async () => { + mockSelectedFacets.value = ['downloads'] + mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads') + + const component = await mountSuspended(FacetSelector) + + const buttons = component.findAll('button[aria-pressed]') + const selectedButton = buttons.find(b => b.attributes('aria-pressed') === 'true') + expect(selectedButton).toBeDefined() + }) + + it('calls toggleFacet when facet button is clicked', async () => { + const component = await mountSuspended(FacetSelector) + + // Find a facet button (not all/none) + const facetButton = component.findAll('button').find(b => b.text().includes('Downloads')) + await facetButton?.trigger('click') + + expect(mockToggleFacet).toHaveBeenCalled() + }) + }) + + describe('comingSoon facets', () => { + it('disables comingSoon facets', async () => { + const component = await mountSuspended(FacetSelector) + + // totalDependencies is marked as comingSoon + const buttons = component.findAll('button') + const comingSoonButton = buttons.find(b => b.text().includes('Total Dependencies')) + + expect(comingSoonButton?.attributes('disabled')).toBeDefined() + }) + + it('shows coming soon text for comingSoon facets', async () => { + const component = await mountSuspended(FacetSelector) + + expect(component.text()).toContain('coming soon') + }) + + it('does not show checkmark/add icon for comingSoon facets', async () => { + const component = await mountSuspended(FacetSelector) + + // Find the comingSoon button + const buttons = component.findAll('button') + const comingSoonButton = buttons.find(b => b.text().includes('Total Dependencies')) + + // Should not have checkmark or add icon + expect(comingSoonButton?.find('.i-carbon-checkmark').exists()).toBe(false) + expect(comingSoonButton?.find('.i-carbon-add').exists()).toBe(false) + }) + + it('does not call toggleFacet when comingSoon facet is clicked', async () => { + const component = await mountSuspended(FacetSelector) + + const buttons = component.findAll('button') + const comingSoonButton = buttons.find(b => b.text().includes('Total Dependencies')) + await comingSoonButton?.trigger('click') + + // toggleFacet should not have been called with totalDependencies + expect(mockToggleFacet).not.toHaveBeenCalledWith('totalDependencies') + }) + }) + + describe('category all/none buttons', () => { + it('calls selectCategory when all button is clicked', async () => { + const component = await mountSuspended(FacetSelector) + + // Find the first 'all' button (for performance category) + const allButtons = component.findAll('button').filter(b => b.text() === 'all') + await allButtons[0].trigger('click') + + expect(mockSelectCategory).toHaveBeenCalledWith('performance') + }) + + it('calls deselectCategory when none button is clicked', async () => { + const component = await mountSuspended(FacetSelector) + + // Find the first 'none' button (for performance category) + const noneButtons = component.findAll('button').filter(b => b.text() === 'none') + await noneButtons[0].trigger('click') + + expect(mockDeselectCategory).toHaveBeenCalledWith('performance') + }) + + it('disables all button when all facets in category are selected', async () => { + // Select all performance facets + const performanceFacets = FACETS_BY_CATEGORY.performance.filter( + f => !FACET_INFO[f].comingSoon, + ) + mockSelectedFacets.value = performanceFacets + mockIsFacetSelected.mockImplementation((f: string) => performanceFacets.includes(f)) + + const component = await mountSuspended(FacetSelector) + + const allButtons = component.findAll('button').filter(b => b.text() === 'all') + // First all button (performance) should be disabled + expect(allButtons[0].attributes('disabled')).toBeDefined() + }) + + it('disables none button when no facets in category are selected', async () => { + // Deselect all performance facets + mockSelectedFacets.value = ['downloads'] // only health facet selected + mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads') + + const component = await mountSuspended(FacetSelector) + + const noneButtons = component.findAll('button').filter(b => b.text() === 'none') + // First none button (performance) should be disabled + expect(noneButtons[0].attributes('disabled')).toBeDefined() + }) + }) + + describe('accessibility', () => { + it('has role=group on main container', async () => { + const component = await mountSuspended(FacetSelector) + + expect(component.find('[role="group"]').exists()).toBe(true) + }) + + it('has aria-label on facet group', async () => { + const component = await mountSuspended(FacetSelector) + + const groups = component.findAll('[role="group"]') + expect(groups.length).toBeGreaterThan(0) + }) + + it('facet buttons have aria-label', async () => { + const component = await mountSuspended(FacetSelector) + + const facetButtons = component.findAll('button[aria-pressed]') + for (const button of facetButtons) { + expect(button.attributes('aria-label')).toBeTruthy() + } + }) + + it('category buttons have aria-label', async () => { + const component = await mountSuspended(FacetSelector) + + const allButtons = component.findAll('button').filter(b => b.text() === 'all') + for (const button of allButtons) { + expect(button.attributes('aria-label')).toBeTruthy() + } + }) + }) + + describe('styling', () => { + it('applies selected styling to selected facets', async () => { + mockSelectedFacets.value = ['downloads'] + mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads') + + const component = await mountSuspended(FacetSelector) + + // Selected facets have bg-bg-muted class + expect(component.find('.bg-bg-muted').exists()).toBe(true) + }) + + it('applies cursor-not-allowed to comingSoon facets', async () => { + const component = await mountSuspended(FacetSelector) + + expect(component.find('.cursor-not-allowed').exists()).toBe(true) + }) + }) +}) diff --git a/test/nuxt/components/compare/MetricRow.spec.ts b/test/nuxt/components/compare/MetricRow.spec.ts new file mode 100644 index 00000000..590e6a71 --- /dev/null +++ b/test/nuxt/components/compare/MetricRow.spec.ts @@ -0,0 +1,310 @@ +import { describe, expect, it, vi } from 'vitest' +import { mountSuspended } from '@nuxt/test-utils/runtime' +import MetricRow from '~/components/compare/MetricRow.vue' + +// Mock useRelativeDates for DateTime component +vi.mock('~/composables/useSettings', () => ({ + useRelativeDates: () => ref(false), + useSettings: () => ({ + settings: ref({ relativeDates: false }), + }), + useAccentColor: () => ({}), + initAccentOnPrehydrate: () => {}, +})) + +describe('MetricRow', () => { + const baseProps = { + label: 'Downloads', + values: [], + } + + describe('label rendering', () => { + it('renders the label', async () => { + const component = await mountSuspended(MetricRow, { + props: { ...baseProps, label: 'Weekly Downloads' }, + }) + expect(component.text()).toContain('Weekly Downloads') + }) + + it('renders description tooltip icon when provided', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + description: 'Number of downloads per week', + }, + }) + expect(component.find('.i-carbon-information').exists()).toBe(true) + }) + + it('does not render description icon when not provided', async () => { + const component = await mountSuspended(MetricRow, { + props: baseProps, + }) + expect(component.find('.i-carbon-information').exists()).toBe(false) + }) + }) + + describe('value rendering', () => { + it('renders null values as dash', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [null, null], + }, + }) + const cells = component.findAll('.comparison-cell') + expect(cells.length).toBe(2) + expect(component.text()).toContain('-') + }) + + it('renders metric values', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { raw: 1000, display: '1K', status: 'neutral' }, + { raw: 2000, display: '2K', status: 'neutral' }, + ], + }, + }) + expect(component.text()).toContain('1K') + expect(component.text()).toContain('2K') + }) + + it('renders loading state', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [null], + loading: true, + }, + }) + expect(component.find('.i-carbon-circle-dash').exists()).toBe(true) + }) + }) + + describe('status styling', () => { + it('applies good status class', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [{ raw: 0, display: 'None', status: 'good' }], + }, + }) + expect(component.find('.text-emerald-400').exists()).toBe(true) + }) + + it('applies warning status class', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [{ raw: 100, display: '100 MB', status: 'warning' }], + }, + }) + expect(component.find('.text-amber-400').exists()).toBe(true) + }) + + it('applies bad status class', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [{ raw: 5, display: '5 critical', status: 'bad' }], + }, + }) + expect(component.find('.text-red-400').exists()).toBe(true) + }) + + it('applies info status class', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [{ raw: '@types', display: '@types', status: 'info' }], + }, + }) + expect(component.find('.text-blue-400').exists()).toBe(true) + }) + }) + + describe('bar visualization', () => { + it('shows bar for numeric values when bar prop is true', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { raw: 100, display: '100', status: 'neutral' }, + { raw: 200, display: '200', status: 'neutral' }, + ], + bar: true, + }, + }) + // Bar elements have bg-fg/5 class + expect(component.findAll('.bg-fg\\/5').length).toBeGreaterThan(0) + }) + + it('hides bar when bar prop is false', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { raw: 100, display: '100', status: 'neutral' }, + { raw: 200, display: '200', status: 'neutral' }, + ], + bar: false, + }, + }) + expect(component.findAll('.bg-fg\\/5').length).toBe(0) + }) + + it('auto-detects numeric values for bar display', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { raw: 1000, display: '1K', status: 'neutral' }, + { raw: 2000, display: '2K', status: 'neutral' }, + ], + }, + }) + // Should show bars by default for numeric values + expect(component.findAll('.bg-fg\\/5').length).toBeGreaterThan(0) + }) + + it('does not show bar for non-numeric values', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { raw: 'MIT', display: 'MIT', status: 'neutral' }, + { raw: 'Apache-2.0', display: 'Apache-2.0', status: 'neutral' }, + ], + }, + }) + expect(component.findAll('.bg-fg\\/5').length).toBe(0) + }) + }) + + describe('diff indicators', () => { + it('renders diff with increase direction', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { raw: 100, display: '100', status: 'neutral' }, + { raw: 200, display: '200', status: 'neutral' }, + ], + diffs: [null, { direction: 'increase', display: '+100%', favorable: true }], + }, + }) + expect(component.find('.i-carbon-arrow-up').exists()).toBe(true) + expect(component.text()).toContain('+100%') + }) + + it('renders diff with decrease direction', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { raw: 200, display: '200', status: 'neutral' }, + { raw: 100, display: '100', status: 'neutral' }, + ], + diffs: [null, { direction: 'decrease', display: '-50%', favorable: false }], + }, + }) + expect(component.find('.i-carbon-arrow-down').exists()).toBe(true) + }) + + it('applies favorable diff styling (green)', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { raw: 100, display: '100', status: 'neutral' }, + { raw: 50, display: '50', status: 'neutral' }, + ], + diffs: [null, { direction: 'decrease', display: '-50%', favorable: true }], + }, + }) + expect(component.find('.text-emerald-400').exists()).toBe(true) + }) + + it('applies unfavorable diff styling (red)', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { raw: 100, display: '100', status: 'neutral' }, + { raw: 200, display: '200', status: 'neutral' }, + ], + diffs: [null, { direction: 'increase', display: '+100%', favorable: false }], + }, + }) + // Find the diff section with red styling + const diffElements = component.findAll('.text-red-400') + expect(diffElements.length).toBeGreaterThan(0) + }) + + it('does not render diff indicator for same direction', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { raw: 100, display: '100', status: 'neutral' }, + { raw: 100, display: '100', status: 'neutral' }, + ], + diffs: [null, { direction: 'same', display: '0%', favorable: null }], + }, + }) + expect(component.find('.i-carbon-arrow-up').exists()).toBe(false) + expect(component.find('.i-carbon-arrow-down').exists()).toBe(false) + }) + }) + + describe('date values', () => { + it('renders DateTime component for date type values', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { + raw: Date.now(), + display: '2024-01-15T12:00:00.000Z', + status: 'neutral', + type: 'date', + }, + ], + bar: false, // Disable bar for date values + }, + }) + // DateTime component renders a time element + expect(component.find('time').exists()).toBe(true) + }) + }) + + describe('grid layout', () => { + it('uses contents display for grid integration', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [{ raw: 100, display: '100', status: 'neutral' }], + }, + }) + expect(component.find('.contents').exists()).toBe(true) + }) + + it('renders correct number of cells for values', async () => { + const component = await mountSuspended(MetricRow, { + props: { + ...baseProps, + values: [ + { raw: 1, display: '1', status: 'neutral' }, + { raw: 2, display: '2', status: 'neutral' }, + { raw: 3, display: '3', status: 'neutral' }, + ], + }, + }) + // 1 label cell + 3 value cells + const cells = component.findAll('.comparison-cell') + expect(cells.length).toBe(3) + }) + }) +}) diff --git a/test/nuxt/components/compare/PackageSelector.spec.ts b/test/nuxt/components/compare/PackageSelector.spec.ts new file mode 100644 index 00000000..7b68ed8b --- /dev/null +++ b/test/nuxt/components/compare/PackageSelector.spec.ts @@ -0,0 +1,403 @@ +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { ref } from 'vue' +import { mountSuspended } from '@nuxt/test-utils/runtime' +import PackageSelector from '~/components/compare/PackageSelector.vue' + +// Mock $fetch for npm search +const mockFetch = vi.fn() +vi.stubGlobal('$fetch', mockFetch) + +// Mock useTimeoutFn +vi.mock('@vueuse/core', async () => { + const actual = await vi.importActual('@vueuse/core') + return { + ...actual, + useTimeoutFn: (fn: () => void, _delay: number) => { + // Execute immediately for tests + return { + start: () => fn(), + stop: () => {}, + } + }, + } +}) + +describe('PackageSelector', () => { + beforeEach(() => { + mockFetch.mockReset() + mockFetch.mockResolvedValue({ + objects: [ + { package: { name: 'lodash', description: 'Lodash modular utilities' } }, + { package: { name: 'underscore', description: 'JavaScript utility library' } }, + ], + }) + }) + + describe('selected packages display', () => { + it('renders selected packages as chips', async () => { + const packages = ref(['lodash', 'underscore']) + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: packages.value, + }, + }) + + expect(component.text()).toContain('lodash') + expect(component.text()).toContain('underscore') + }) + + it('renders package names as links', async () => { + const packages = ref(['lodash']) + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: packages.value, + }, + }) + + const link = component.find('a[href="/lodash"]') + expect(link.exists()).toBe(true) + }) + + it('renders remove button for each package', async () => { + const packages = ref(['lodash', 'underscore']) + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: packages.value, + }, + }) + + const removeButtons = component + .findAll('button') + .filter(b => b.find('.i-carbon-close').exists()) + expect(removeButtons.length).toBe(2) + }) + + it('emits update when remove button is clicked', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: ['lodash', 'underscore'], + }, + }) + + const removeButtons = component + .findAll('button') + .filter(b => b.find('.i-carbon-close').exists()) + await removeButtons[0].trigger('click') + + const emitted = component.emitted('update:modelValue') + expect(emitted).toBeTruthy() + expect(emitted![0][0]).toEqual(['underscore']) + }) + }) + + describe('search input', () => { + it('renders search input when under max packages', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: ['lodash'], + max: 4, + }, + }) + + expect(component.find('input[type="text"]').exists()).toBe(true) + }) + + it('hides search input when at max packages', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: ['a', 'b', 'c', 'd'], + max: 4, + }, + }) + + expect(component.find('input[type="text"]').exists()).toBe(false) + }) + + it('shows different placeholder for first vs additional packages', async () => { + // Empty state + let component = await mountSuspended(PackageSelector, { + props: { + modelValue: [], + }, + }) + let input = component.find('input') + expect(input.attributes('placeholder')).toBeTruthy() + + // With packages + component = await mountSuspended(PackageSelector, { + props: { + modelValue: ['lodash'], + }, + }) + input = component.find('input') + expect(input.attributes('placeholder')).toBeTruthy() + }) + + it('has search icon', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: [], + }, + }) + + expect(component.find('.i-carbon-search').exists()).toBe(true) + }) + }) + + describe('search functionality', () => { + it('fetches search results on input', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: [], + }, + }) + + const input = component.find('input') + await input.setValue('lod') + await input.trigger('focus') + + // Wait for debounce + await new Promise(resolve => setTimeout(resolve, 250)) + + expect(mockFetch).toHaveBeenCalledWith( + 'https://registry.npmjs.org/-/v1/search', + expect.objectContaining({ + query: { text: 'lod', size: 15 }, + }), + ) + }) + + it('filters out already selected packages from results', async () => { + mockFetch.mockResolvedValue({ + objects: [ + { package: { name: 'lodash', description: 'Lodash' } }, + { package: { name: 'underscore', description: 'Underscore' } }, + ], + }) + + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: ['lodash'], // lodash already selected + }, + }) + + const input = component.find('input') + await input.setValue('lod') + await input.trigger('focus') + + // Wait for debounce and search + await new Promise(resolve => setTimeout(resolve, 250)) + + // lodash should be filtered out, only underscore should show + // This is tested via the computed filteredResults + }) + }) + + describe('adding packages', () => { + it('emits update when selecting from search results', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: [], + }, + }) + + // Simulate search results being available and clicking one + // We need to trigger the search flow + const input = component.find('input') + await input.setValue('lodash') + await input.trigger('focus') + + // Wait for search + await new Promise(resolve => setTimeout(resolve, 250)) + + // Find and click a result button + const resultButtons = component + .findAll('button') + .filter(b => b.text().includes('lodash') && !b.find('.i-carbon-close').exists()) + + if (resultButtons.length > 0) { + await resultButtons[0].trigger('click') + const emitted = component.emitted('update:modelValue') + expect(emitted).toBeTruthy() + } + }) + + it('adds package on Enter key', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: [], + }, + }) + + const input = component.find('input') + await input.setValue('my-package') + await input.trigger('keydown', { key: 'Enter' }) + + const emitted = component.emitted('update:modelValue') + expect(emitted).toBeTruthy() + expect(emitted![0][0]).toContain('my-package') + }) + + it('clears input after adding package', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: [], + }, + }) + + const input = component.find('input') + await input.setValue('my-package') + await input.trigger('keydown', { key: 'Enter' }) + + // Input should be cleared + expect((input.element as HTMLInputElement).value).toBe('') + }) + + it('does not add duplicate packages', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: ['lodash'], + }, + }) + + const input = component.find('input') + await input.setValue('lodash') + await input.trigger('keydown', { key: 'Enter' }) + + const emitted = component.emitted('update:modelValue') + // Should not emit since lodash is already selected + expect(emitted).toBeFalsy() + }) + + it('respects max packages limit', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: ['a', 'b', 'c', 'd'], + max: 4, + }, + }) + + // Input should not be visible + expect(component.find('input').exists()).toBe(false) + }) + }) + + describe('hint text', () => { + it('shows packages selected count', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: ['lodash', 'underscore'], + max: 4, + }, + }) + + expect(component.text()).toContain('2') + expect(component.text()).toContain('4') + }) + + it('shows add hint when less than 2 packages', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: ['lodash'], + max: 4, + }, + }) + + // Should have hint about adding more + expect(component.text().toLowerCase()).toContain('add') + }) + }) + + describe('max prop', () => { + it('defaults to 4 when not provided', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: [], + }, + }) + + // Should show max of 4 in hint + expect(component.text()).toContain('4') + }) + + it('uses provided max value', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: [], + max: 3, + }, + }) + + expect(component.text()).toContain('3') + }) + }) + + describe('accessibility', () => { + it('remove buttons have aria-label', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: ['lodash'], + }, + }) + + const removeButton = component + .find('button') + .filter(b => b.find('.i-carbon-close').exists())[0] + expect(removeButton?.attributes('aria-label')).toBeTruthy() + }) + + it('search input has aria-autocomplete', async () => { + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: [], + }, + }) + + const input = component.find('input') + expect(input.attributes('aria-autocomplete')).toBe('list') + }) + }) + + describe('search results dropdown', () => { + it('shows searching state', async () => { + // Delay the fetch response + mockFetch.mockImplementation( + () => new Promise(resolve => setTimeout(() => resolve({ objects: [] }), 500)), + ) + + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: [], + }, + }) + + const input = component.find('input') + await input.setValue('test') + await input.trigger('focus') + + // Should show searching indicator while waiting + // Note: This depends on timing and may need adjustment + }) + + it('shows package descriptions in results', async () => { + mockFetch.mockResolvedValue({ + objects: [{ package: { name: 'lodash', description: 'Lodash modular utilities' } }], + }) + + const component = await mountSuspended(PackageSelector, { + props: { + modelValue: [], + }, + }) + + const input = component.find('input') + await input.setValue('lodash') + await input.trigger('focus') + + await new Promise(resolve => setTimeout(resolve, 250)) + + // Results should include description + // This tests that the dropdown renders correctly + }) + }) +}) diff --git a/test/nuxt/composables/use-facet-selection.spec.ts b/test/nuxt/composables/use-facet-selection.spec.ts index 7d8b2906..845b13de 100644 --- a/test/nuxt/composables/use-facet-selection.spec.ts +++ b/test/nuxt/composables/use-facet-selection.spec.ts @@ -227,4 +227,99 @@ describe('useFacetSelection', () => { expect(isNoneSelected.value).toBe(false) }) }) + + describe('URL param behavior', () => { + it('clears URL param when selecting all defaults', () => { + mockRouteQuery.value = 'downloads,types' + + const { selectAll } = useFacetSelection() + + selectAll() + + // Should clear to empty string when matching defaults + expect(mockRouteQuery.value).toBe('') + }) + + it('sets URL param when selecting subset of facets', () => { + mockRouteQuery.value = '' + + const { selectedFacets } = useFacetSelection() + + selectedFacets.value = ['downloads', 'types'] + + expect(mockRouteQuery.value).toBe('downloads,types') + }) + }) + + describe('allFacets export', () => { + it('exports allFacets array', () => { + const { allFacets } = useFacetSelection() + + expect(Array.isArray(allFacets)).toBe(true) + expect(allFacets.length).toBeGreaterThan(0) + }) + + it('allFacets includes all facets including comingSoon', () => { + const { allFacets } = useFacetSelection() + + expect(allFacets).toContain('totalDependencies') + }) + }) + + describe('whitespace handling', () => { + it('trims whitespace from facet names in query', () => { + mockRouteQuery.value = ' downloads , types , license ' + + const { selectedFacets } = useFacetSelection() + + expect(selectedFacets.value).toContain('downloads') + expect(selectedFacets.value).toContain('types') + expect(selectedFacets.value).toContain('license') + }) + }) + + describe('duplicate handling', () => { + it('handles duplicate facets in query by deduplication via Set', () => { + // When adding facets, the code uses Set for deduplication + mockRouteQuery.value = 'downloads' + + const { selectedFacets, selectCategory } = useFacetSelection() + + // downloads is in health category, selecting health should dedupe + selectCategory('health') + + // Count occurrences of downloads + const downloadsCount = selectedFacets.value.filter(f => f === 'downloads').length + expect(downloadsCount).toBe(1) + }) + }) + + describe('multiple category operations', () => { + it('can select multiple categories', () => { + mockRouteQuery.value = 'downloads' + + const { selectedFacets, selectCategory } = useFacetSelection() + + selectCategory('performance') + selectCategory('security') + + // Should have facets from both categories plus original + expect(selectedFacets.value).toContain('packageSize') + expect(selectedFacets.value).toContain('license') + expect(selectedFacets.value).toContain('downloads') + }) + + it('can deselect multiple categories', () => { + mockRouteQuery.value = '' + + const { selectedFacets, deselectCategory } = useFacetSelection() + + deselectCategory('performance') + deselectCategory('health') + + // Should not have performance or health facets + expect(selectedFacets.value).not.toContain('packageSize') + expect(selectedFacets.value).not.toContain('downloads') + }) + }) }) diff --git a/test/nuxt/composables/use-package-comparison.spec.ts b/test/nuxt/composables/use-package-comparison.spec.ts new file mode 100644 index 00000000..3f4e9ca0 --- /dev/null +++ b/test/nuxt/composables/use-package-comparison.spec.ts @@ -0,0 +1,251 @@ +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { ref, nextTick } from 'vue' + +// Mock $fetch +const mockFetch = vi.fn() +vi.stubGlobal('$fetch', mockFetch) + +// Mock import.meta.client +vi.stubGlobal('import', { meta: { client: true } }) + +describe('usePackageComparison', () => { + beforeEach(() => { + mockFetch.mockReset() + }) + + describe('initial state', () => { + it('returns idle status with empty packages', () => { + const packages = ref([]) + const { status, packagesData } = usePackageComparison(packages) + + expect(status.value).toBe('idle') + expect(packagesData.value).toEqual([]) + }) + }) + + describe('getMetricValues', () => { + it('returns empty array when no packages data', () => { + const packages = ref([]) + const { getMetricValues } = usePackageComparison(packages) + + expect(getMetricValues('downloads')).toEqual([]) + }) + }) + + describe('isFacetLoading', () => { + it('returns false when install size is not loading', () => { + const packages = ref([]) + const { isFacetLoading } = usePackageComparison(packages) + + expect(isFacetLoading('downloads')).toBe(false) + expect(isFacetLoading('installSize')).toBe(false) + }) + }) + + describe('metric computation', () => { + // Test the computeMetricValue logic indirectly through data transformation + + describe('downloads metric', () => { + it('computes downloads with neutral status', () => { + // Test formatting logic + const downloads = 1500000 + const formatted = formatCompactNumber(downloads) + expect(formatted).toBeTruthy() + }) + }) + + describe('packageSize metric', () => { + it('flags large packages (>5MB) as warning', () => { + const size = 6 * 1024 * 1024 + const status = size > 5 * 1024 * 1024 ? 'warning' : 'neutral' + expect(status).toBe('warning') + }) + }) + + describe('installSize metric', () => { + it('flags large install sizes (>50MB) as warning', () => { + const size = 60 * 1024 * 1024 + const status = size > 50 * 1024 * 1024 ? 'warning' : 'neutral' + expect(status).toBe('warning') + }) + }) + + describe('moduleFormat metric', () => { + it('marks ESM as good', () => { + const format = 'esm' + const status = format === 'esm' || format === 'dual' ? 'good' : 'neutral' + expect(status).toBe('good') + }) + + it('marks dual as good', () => { + const format = 'dual' + const status = format === 'esm' || format === 'dual' ? 'good' : 'neutral' + expect(status).toBe('good') + }) + + it('formats dual as ESM + CJS', () => { + const format = 'dual' + const display = format === 'dual' ? 'ESM + CJS' : format.toUpperCase() + expect(display).toBe('ESM + CJS') + }) + }) + + describe('types metric', () => { + it('marks included types as good', () => { + const kind = 'included' + const status = kind === 'included' ? 'good' : kind === '@types' ? 'info' : 'bad' + expect(status).toBe('good') + }) + + it('marks @types as info', () => { + const kind = '@types' + const status = kind === 'included' ? 'good' : kind === '@types' ? 'info' : 'bad' + expect(status).toBe('info') + }) + + it('marks no types as bad', () => { + const kind = 'none' + const status = kind === 'included' ? 'good' : kind === '@types' ? 'info' : 'bad' + expect(status).toBe('bad') + }) + }) + + describe('engines metric', () => { + it('displays Any when no engines specified', () => { + const engines = undefined + const display = !engines ? 'Any' : `Node ${engines}` + expect(display).toBe('Any') + }) + + it('displays Node version when specified', () => { + const engines = '>=18' + const display = !engines ? 'Any' : `Node ${engines}` + expect(display).toBe('Node >=18') + }) + }) + + describe('vulnerabilities metric', () => { + it('marks zero vulnerabilities as good', () => { + const count = 0 + const status = count === 0 ? 'good' : 'warning' + expect(status).toBe('good') + }) + + it('displays None for zero vulnerabilities', () => { + const count = 0 + const display = count === 0 ? 'None' : `${count}` + expect(display).toBe('None') + }) + + it('marks critical vulnerabilities as bad', () => { + const critical = 1 + const high = 0 + const status = critical > 0 || high > 0 ? 'bad' : 'warning' + expect(status).toBe('bad') + }) + + it('formats vulnerability count with severity breakdown', () => { + const count = 5 + const critical = 1 + const high = 2 + const display = `${count} (${critical}C/${high}H)` + expect(display).toBe('5 (1C/2H)') + }) + }) + + describe('lastUpdated metric', () => { + it('marks old packages as stale (>2 years)', () => { + const date = new Date() + date.setFullYear(date.getFullYear() - 3) + const diffYears = (Date.now() - date.getTime()) / (1000 * 60 * 60 * 24 * 365) + const isStale = diffYears > 2 + expect(isStale).toBe(true) + }) + + it('does not mark recent packages as stale', () => { + const date = new Date() + date.setMonth(date.getMonth() - 6) + const diffYears = (Date.now() - date.getTime()) / (1000 * 60 * 60 * 24 * 365) + const isStale = diffYears > 2 + expect(isStale).toBe(false) + }) + + it('returns date type for lastUpdated metric', () => { + // The metric should have type: 'date' for DateTime rendering + const type = 'date' + expect(type).toBe('date') + }) + }) + + describe('license metric', () => { + it('marks unknown license as warning', () => { + const license = null + const status = !license ? 'warning' : 'neutral' + expect(status).toBe('warning') + }) + + it('displays Unknown for missing license', () => { + const license = null + const display = !license ? 'Unknown' : license + expect(display).toBe('Unknown') + }) + }) + + describe('dependencies metric', () => { + it('marks high dependency count (>50) as warning', () => { + const count = 60 + const status = count > 50 ? 'warning' : 'neutral' + expect(status).toBe('warning') + }) + }) + + describe('deprecated metric', () => { + it('marks deprecated packages as bad', () => { + const isDeprecated = true + const status = isDeprecated ? 'bad' : 'good' + expect(status).toBe('bad') + }) + + it('displays Deprecated for deprecated packages', () => { + const isDeprecated = true + const display = isDeprecated ? 'Deprecated' : 'No' + expect(display).toBe('Deprecated') + }) + + it('displays No for non-deprecated packages', () => { + const isDeprecated = false + const display = isDeprecated ? 'Deprecated' : 'No' + expect(display).toBe('No') + }) + }) + }) + + describe('encodePackageName utility', () => { + function encodePackageName(name: string): string { + if (name.startsWith('@')) { + return `@${encodeURIComponent(name.slice(1))}` + } + return encodeURIComponent(name) + } + + it('encodes regular package names', () => { + expect(encodePackageName('lodash')).toBe('lodash') + }) + + it('encodes scoped packages preserving @', () => { + expect(encodePackageName('@vue/core')).toBe('@vue%2Fcore') + }) + + it('handles special characters', () => { + expect(encodePackageName('my-package')).toBe('my-package') + }) + }) +}) + +// Helper for tests (mimics the composable's internal format function) +function formatCompactNumber(num: number): string { + if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)}B` + if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M` + if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K` + return String(num) +} diff --git a/test/nuxt/pages/compare.spec.ts b/test/nuxt/pages/compare.spec.ts new file mode 100644 index 00000000..ddc14bdc --- /dev/null +++ b/test/nuxt/pages/compare.spec.ts @@ -0,0 +1,234 @@ +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { ref } from 'vue' +import { mountSuspended } from '@nuxt/test-utils/runtime' + +// Mock composables +const mockPackagesParam = ref('') +const mockSelectedFacets = ref(['downloads', 'types']) + +vi.mock('@vueuse/router', () => ({ + useRouteQuery: () => mockPackagesParam, +})) + +vi.mock('~/composables/useFacetSelection', () => ({ + useFacetSelection: () => ({ + selectedFacets: mockSelectedFacets, + selectAll: vi.fn(), + deselectAll: vi.fn(), + isAllSelected: ref(false), + isNoneSelected: ref(false), + isFacetSelected: vi.fn(), + toggleFacet: vi.fn(), + selectCategory: vi.fn(), + deselectCategory: vi.fn(), + }), +})) + +vi.mock('~/composables/usePackageComparison', () => ({ + usePackageComparison: () => ({ + packagesData: ref([]), + status: ref('idle'), + getMetricValues: vi.fn(() => []), + isFacetLoading: vi.fn(() => false), + }), +})) + +// Mock useSettings +vi.mock('~/composables/useSettings', () => ({ + useRelativeDates: () => ref(false), + useSettings: () => ({ + settings: ref({ relativeDates: false }), + }), + useAccentColor: () => ({}), + initAccentOnPrehydrate: () => {}, +})) + +describe('compare page', () => { + beforeEach(() => { + mockPackagesParam.value = '' + mockSelectedFacets.value = ['downloads', 'types'] + }) + + describe('URL parsing', () => { + it('parses packages from comma-separated query param', () => { + mockPackagesParam.value = 'lodash,underscore,ramda' + + // Test the parsing logic directly + const packages = mockPackagesParam.value + .split(',') + .map((p: string) => p.trim()) + .filter((p: string) => p.length > 0) + .slice(0, 4) + + expect(packages).toEqual(['lodash', 'underscore', 'ramda']) + }) + + it('limits to 4 packages', () => { + mockPackagesParam.value = 'a,b,c,d,e,f' + + const packages = mockPackagesParam.value + .split(',') + .map((p: string) => p.trim()) + .filter((p: string) => p.length > 0) + .slice(0, 4) + + expect(packages).toHaveLength(4) + expect(packages).toEqual(['a', 'b', 'c', 'd']) + }) + + it('handles empty query param', () => { + mockPackagesParam.value = '' + + const packages = mockPackagesParam.value + ? mockPackagesParam.value + .split(',') + .map((p: string) => p.trim()) + .filter((p: string) => p.length > 0) + .slice(0, 4) + : [] + + expect(packages).toEqual([]) + }) + + it('trims whitespace from package names', () => { + mockPackagesParam.value = ' lodash , underscore , ramda ' + + const packages = mockPackagesParam.value + .split(',') + .map((p: string) => p.trim()) + .filter((p: string) => p.length > 0) + .slice(0, 4) + + expect(packages).toEqual(['lodash', 'underscore', 'ramda']) + }) + + it('filters empty entries', () => { + mockPackagesParam.value = 'lodash,,underscore,' + + const packages = mockPackagesParam.value + .split(',') + .map((p: string) => p.trim()) + .filter((p: string) => p.length > 0) + .slice(0, 4) + + expect(packages).toEqual(['lodash', 'underscore']) + }) + }) + + describe('canCompare computed', () => { + it('returns false with 0 packages', () => { + const packages: string[] = [] + const canCompare = packages.length >= 2 + expect(canCompare).toBe(false) + }) + + it('returns false with 1 package', () => { + const packages = ['lodash'] + const canCompare = packages.length >= 2 + expect(canCompare).toBe(false) + }) + + it('returns true with 2 packages', () => { + const packages = ['lodash', 'underscore'] + const canCompare = packages.length >= 2 + expect(canCompare).toBe(true) + }) + + it('returns true with 4 packages', () => { + const packages = ['a', 'b', 'c', 'd'] + const canCompare = packages.length >= 2 + expect(canCompare).toBe(true) + }) + }) + + describe('gridHeaders computed', () => { + it('returns package names when no data loaded', () => { + const packages = ['lodash', 'underscore'] + const packagesData: null[] = [null, null] + + const gridHeaders = packagesData.map((p, i) => + p ? `${(p as any).package.name}@${(p as any).package.version}` : (packages[i] ?? ''), + ) + + expect(gridHeaders).toEqual(['lodash', 'underscore']) + }) + + it('returns name@version when data loaded', () => { + const packages = ['lodash', 'underscore'] + const packagesData = [ + { package: { name: 'lodash', version: '4.17.21' } }, + { package: { name: 'underscore', version: '1.13.6' } }, + ] + + const gridHeaders = packagesData.map((p, i) => + p ? `${p.package.name}@${p.package.version}` : (packages[i] ?? ''), + ) + + expect(gridHeaders).toEqual(['lodash@4.17.21', 'underscore@1.13.6']) + }) + + it('handles mixed loaded/unloaded data', () => { + const packages = ['lodash', 'unknown-pkg'] + const packagesData = [{ package: { name: 'lodash', version: '4.17.21' } }, null] + + const gridHeaders = packagesData.map((p, i) => + p ? `${(p as any).package.name}@${(p as any).package.version}` : (packages[i] ?? ''), + ) + + expect(gridHeaders).toEqual(['lodash@4.17.21', 'unknown-pkg']) + }) + }) + + describe('SEO meta', () => { + it('generates correct title with packages', () => { + const packages = ['lodash', 'underscore'] + const title = packages.length > 0 ? `Compare ${packages.join(' vs ')}` : 'Compare Packages' + + expect(title).toBe('Compare lodash vs underscore') + }) + + it('generates empty state title without packages', () => { + const packages: string[] = [] + const title = packages.length > 0 ? `Compare ${packages.join(' vs ')}` : 'Compare Packages' + + expect(title).toBe('Compare Packages') + }) + + it('generates correct description with packages', () => { + const packages = ['lodash', 'underscore', 'ramda'] + const description = + packages.length > 0 ? `Compare ${packages.join(', ')} side-by-side` : 'Compare npm packages' + + expect(description).toBe('Compare lodash, underscore, ramda side-by-side') + }) + }) + + describe('empty state', () => { + it('shows empty state when less than 2 packages', () => { + const packages = ['lodash'] + const canCompare = packages.length >= 2 + const showEmptyState = !canCompare + + expect(showEmptyState).toBe(true) + }) + + it('hides empty state when 2+ packages', () => { + const packages = ['lodash', 'underscore'] + const canCompare = packages.length >= 2 + const showEmptyState = !canCompare + + expect(showEmptyState).toBe(false) + }) + }) + + describe('all/none buttons', () => { + it('shows both all and none buttons', () => { + // Both buttons should always be visible + const showAll = true + const showNone = true + + expect(showAll).toBe(true) + expect(showNone).toBe(true) + }) + }) +}) diff --git a/test/unit/comparison-metrics.spec.ts b/test/unit/comparison-metrics.spec.ts new file mode 100644 index 00000000..337298a5 --- /dev/null +++ b/test/unit/comparison-metrics.spec.ts @@ -0,0 +1,302 @@ +import { describe, expect, it } from 'vitest' +import type { ComparisonFacet } from '../../shared/types/comparison' + +// Import the helper functions we want to test +// Since computeMetricValue is not exported, we test the metric computation logic directly +// by testing through the formatBytes and isStale patterns + +describe('comparison metric computation', () => { + describe('formatBytes', () => { + // Replicate the formatBytes logic for testing + function formatBytes(bytes: number): string { + if (bytes < 1024) return `${bytes} B` + if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} kB` + return `${(bytes / (1024 * 1024)).toFixed(1)} MB` + } + + it('formats bytes correctly', () => { + expect(formatBytes(500)).toBe('500 B') + expect(formatBytes(1024)).toBe('1.0 kB') + expect(formatBytes(1536)).toBe('1.5 kB') + expect(formatBytes(1024 * 1024)).toBe('1.0 MB') + expect(formatBytes(5.5 * 1024 * 1024)).toBe('5.5 MB') + }) + + it('handles edge cases', () => { + expect(formatBytes(0)).toBe('0 B') + expect(formatBytes(1)).toBe('1 B') + expect(formatBytes(1023)).toBe('1023 B') + }) + }) + + describe('isStale', () => { + // Replicate the isStale logic for testing + function isStale(date: Date): boolean { + const now = new Date() + const diffMs = now.getTime() - date.getTime() + const diffYears = diffMs / (1000 * 60 * 60 * 24 * 365) + return diffYears > 2 + } + + it('returns false for recent dates', () => { + const recent = new Date() + recent.setMonth(recent.getMonth() - 6) + expect(isStale(recent)).toBe(false) + }) + + it('returns false for dates within 2 years', () => { + const withinLimit = new Date() + withinLimit.setFullYear(withinLimit.getFullYear() - 1) + expect(isStale(withinLimit)).toBe(false) + }) + + it('returns true for dates older than 2 years', () => { + const old = new Date() + old.setFullYear(old.getFullYear() - 3) + expect(isStale(old)).toBe(true) + }) + }) + + describe('metric value status determination', () => { + describe('downloads', () => { + it('always returns neutral status', () => { + // Downloads don't have good/bad judgments + const status = 'neutral' + expect(status).toBe('neutral') + }) + }) + + describe('packageSize', () => { + it('returns warning for packages over 5MB', () => { + const size = 6 * 1024 * 1024 + const status = size > 5 * 1024 * 1024 ? 'warning' : 'neutral' + expect(status).toBe('warning') + }) + + it('returns neutral for packages under 5MB', () => { + const size = 4 * 1024 * 1024 + const status = size > 5 * 1024 * 1024 ? 'warning' : 'neutral' + expect(status).toBe('neutral') + }) + }) + + describe('installSize', () => { + it('returns warning for install size over 50MB', () => { + const size = 60 * 1024 * 1024 + const status = size > 50 * 1024 * 1024 ? 'warning' : 'neutral' + expect(status).toBe('warning') + }) + + it('returns neutral for install size under 50MB', () => { + const size = 40 * 1024 * 1024 + const status = size > 50 * 1024 * 1024 ? 'warning' : 'neutral' + expect(status).toBe('neutral') + }) + }) + + describe('moduleFormat', () => { + it('returns good for esm', () => { + const format = 'esm' + const status = format === 'esm' || format === 'dual' ? 'good' : 'neutral' + expect(status).toBe('good') + }) + + it('returns good for dual', () => { + const format = 'dual' + const status = format === 'esm' || format === 'dual' ? 'good' : 'neutral' + expect(status).toBe('good') + }) + + it('returns neutral for cjs', () => { + const format = 'cjs' + const status = format === 'esm' || format === 'dual' ? 'good' : 'neutral' + expect(status).toBe('neutral') + }) + }) + + describe('types', () => { + it('returns good for included types', () => { + const kind = 'included' + const status = kind === 'included' ? 'good' : kind === '@types' ? 'info' : 'bad' + expect(status).toBe('good') + }) + + it('returns info for @types package', () => { + const kind = '@types' + const status = kind === 'included' ? 'good' : kind === '@types' ? 'info' : 'bad' + expect(status).toBe('info') + }) + + it('returns bad for no types', () => { + const kind = 'none' + const status = kind === 'included' ? 'good' : kind === '@types' ? 'info' : 'bad' + expect(status).toBe('bad') + }) + }) + + describe('vulnerabilities', () => { + it('returns good for no vulnerabilities', () => { + const count = 0 + const status = count === 0 ? 'good' : 'warning' + expect(status).toBe('good') + }) + + it('returns bad for critical vulnerabilities', () => { + const count = 2 + const critical = 1 + const high = 0 + const status = count === 0 ? 'good' : critical > 0 || high > 0 ? 'bad' : 'warning' + expect(status).toBe('bad') + }) + + it('returns bad for high vulnerabilities', () => { + const count = 2 + const critical = 0 + const high = 2 + const status = count === 0 ? 'good' : critical > 0 || high > 0 ? 'bad' : 'warning' + expect(status).toBe('bad') + }) + + it('returns warning for medium/low vulnerabilities only', () => { + const count = 3 + const critical = 0 + const high = 0 + const status = count === 0 ? 'good' : critical > 0 || high > 0 ? 'bad' : 'warning' + expect(status).toBe('warning') + }) + }) + + describe('deprecated', () => { + it('returns bad for deprecated packages', () => { + const isDeprecated = true + const status = isDeprecated ? 'bad' : 'good' + expect(status).toBe('bad') + }) + + it('returns good for non-deprecated packages', () => { + const isDeprecated = false + const status = isDeprecated ? 'bad' : 'good' + expect(status).toBe('good') + }) + }) + + describe('dependencies', () => { + it('returns warning for more than 50 dependencies', () => { + const depCount = 60 + const status = depCount > 50 ? 'warning' : 'neutral' + expect(status).toBe('warning') + }) + + it('returns neutral for 50 or fewer dependencies', () => { + const depCount = 50 + const status = depCount > 50 ? 'warning' : 'neutral' + expect(status).toBe('neutral') + }) + }) + + describe('license', () => { + it('returns warning for unknown license', () => { + const license = null + const status = !license ? 'warning' : 'neutral' + expect(status).toBe('warning') + }) + + it('returns neutral for known license', () => { + const license = 'MIT' + const status = !license ? 'warning' : 'neutral' + expect(status).toBe('neutral') + }) + }) + }) + + describe('module format display', () => { + function formatModuleFormat(format: string): string { + return format === 'dual' ? 'ESM + CJS' : format.toUpperCase() + } + + it('displays ESM + CJS for dual format', () => { + expect(formatModuleFormat('dual')).toBe('ESM + CJS') + }) + + it('displays ESM for esm format', () => { + expect(formatModuleFormat('esm')).toBe('ESM') + }) + + it('displays CJS for cjs format', () => { + expect(formatModuleFormat('cjs')).toBe('CJS') + }) + }) + + describe('types display', () => { + function formatTypes(kind: string): string { + return kind === 'included' ? 'Included' : kind === '@types' ? '@types' : 'None' + } + + it('displays Included for included types', () => { + expect(formatTypes('included')).toBe('Included') + }) + + it('displays @types for @types package', () => { + expect(formatTypes('@types')).toBe('@types') + }) + + it('displays None for no types', () => { + expect(formatTypes('none')).toBe('None') + }) + }) + + describe('vulnerability display', () => { + function formatVulnerabilities( + count: number, + severity: { critical: number; high: number }, + ): string { + return count === 0 ? 'None' : `${count} (${severity.critical}C/${severity.high}H)` + } + + it('displays None for no vulnerabilities', () => { + expect(formatVulnerabilities(0, { critical: 0, high: 0 })).toBe('None') + }) + + it('displays count with severity breakdown', () => { + expect(formatVulnerabilities(5, { critical: 1, high: 2 })).toBe('5 (1C/2H)') + }) + }) + + describe('deprecated display', () => { + function formatDeprecated(isDeprecated: boolean): string { + return isDeprecated ? 'Deprecated' : 'No' + } + + it('displays Deprecated for deprecated packages', () => { + expect(formatDeprecated(true)).toBe('Deprecated') + }) + + it('displays No for non-deprecated packages', () => { + expect(formatDeprecated(false)).toBe('No') + }) + }) + + describe('encodePackageName', () => { + function encodePackageName(name: string): string { + if (name.startsWith('@')) { + return `@${encodeURIComponent(name.slice(1))}` + } + return encodeURIComponent(name) + } + + it('encodes regular package names', () => { + expect(encodePackageName('lodash')).toBe('lodash') + expect(encodePackageName('my-package')).toBe('my-package') + }) + + it('encodes scoped package names correctly', () => { + expect(encodePackageName('@scope/package')).toBe('@scope%2Fpackage') + expect(encodePackageName('@vue/core')).toBe('@vue%2Fcore') + }) + + it('preserves @ symbol for scoped packages', () => { + const encoded = encodePackageName('@nuxt/kit') + expect(encoded.startsWith('@')).toBe(true) + }) + }) +}) From 024bcdd3195de920c7e1ff3dfa2b3862dc98495d Mon Sep 17 00:00:00 2001 From: Philippe Serhal Date: Fri, 30 Jan 2026 17:01:59 -0500 Subject: [PATCH 3/5] fix: try to squeeze 'compare to' somewhere better --- app/pages/[...package].vue | 110 ++++++++++++++++++------------------- i18n/locales/en.json | 3 +- i18n/locales/fr-FR.json | 3 +- 3 files changed, 57 insertions(+), 59 deletions(-) diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue index dd736383..ca25aedb 100644 --- a/app/pages/[...package].vue +++ b/app/pages/[...package].vue @@ -508,6 +508,60 @@ function handleClick(event: MouseEvent) {
    + + +

    - - -

    @@ -786,7 +786,7 @@ function handleClick(event: MouseEvent) { class="link-subtle font-mono text-sm inline-flex items-center gap-1.5" >