diff --git a/app/components/Compare/ComparisonGrid.vue b/app/components/Compare/ComparisonGrid.vue index c468203b48..2bd210b632 100644 --- a/app/components/Compare/ComparisonGrid.vue +++ b/app/components/Compare/ComparisonGrid.vue @@ -17,6 +17,7 @@ const props = defineProps<{ /** Total column count including the optional no-dep column */ const totalColumns = computed(() => props.columns.length + (props.showNoDependency ? 1 : 0)) +const visibleColumns = computed(() => Math.min(totalColumns.value, 4)) /** Compute plain-text tooltip for a replacement column */ function getReplacementTooltip(col: ComparisonGridColumn): string { @@ -30,32 +31,43 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
-
+
-
- +
+
- {{ col.name }} + + {{ col.name }} + + + @{{ col.version }} + + - +
@@ -100,20 +112,13 @@ function getReplacementTooltip(col: ComparisonGridColumn): string { diff --git a/app/pages/compare.vue b/app/pages/compare.vue index e38a34657d..5582274a60 100644 --- a/app/pages/compare.vue +++ b/app/pages/compare.vue @@ -11,6 +11,7 @@ const { locale } = useI18n() const router = useRouter() const canGoBack = useCanGoBack() const { copied, copy } = useClipboard({ copiedDuring: 2000 }) +const maxPackages = 4 // Sync packages with URL query param (stable ref - doesn't change on other query changes) const packagesParam = useRouteQuery('packages', '', { mode: 'replace' }) @@ -23,7 +24,7 @@ const packages = computed({ .split(',') .map(p => p.trim()) .filter(p => p.length > 0) - .slice(0, 4) + .slice(0, maxPackages) }, set(value) { packagesParam.value = value.length > 0 ? value.join(',') : '' @@ -61,12 +62,12 @@ const gridColumns = computed(() => // Whether we can add the no-dep column (not already added and have room) const canAddNoDep = computed( - () => packages.value.length < 4 && !packages.value.includes(NO_DEPENDENCY_ID), + () => packages.value.length < maxPackages && !packages.value.includes(NO_DEPENDENCY_ID), ) // Add "no dependency" column to comparison function addNoDep() { - if (packages.value.length >= 4) return + if (packages.value.length >= maxPackages) return if (packages.value.includes(NO_DEPENDENCY_ID)) return packages.value = [...packages.value, NO_DEPENDENCY_ID] } @@ -191,7 +192,7 @@ useSeoMeta({

{{ $t('compare.packages.section_packages') }}

- +
diff --git a/test/e2e/interactions.spec.ts b/test/e2e/interactions.spec.ts index 2737778ce0..adcefba804 100644 --- a/test/e2e/interactions.spec.ts +++ b/test/e2e/interactions.spec.ts @@ -38,7 +38,7 @@ test.describe('Compare Page', () => { await expect(page).toHaveURL(/packages=vue,nuxt,__no_dependency__/) // Verify column order in the grid: vue, nuxt, then no-dep - const headerLinks = grid.locator('.comparison-cell-header a.truncate') + const headerLinks = grid.locator('.comparison-cell-header a[title]') await expect(headerLinks).toHaveCount(2) await expect(headerLinks.nth(0)).toContainText('vue') await expect(headerLinks.nth(1)).toContainText('nuxt') diff --git a/test/nuxt/components/compare/ComparisonGrid.spec.ts b/test/nuxt/components/compare/ComparisonGrid.spec.ts index b6b18b3fd5..40eda3c44e 100644 --- a/test/nuxt/components/compare/ComparisonGrid.spec.ts +++ b/test/nuxt/components/compare/ComparisonGrid.spec.ts @@ -17,8 +17,10 @@ describe('ComparisonGrid', () => { columns: cols('lodash@4.17.21', 'underscore@1.13.6'), }, }) - expect(component.text()).toContain('lodash@4.17.21') - expect(component.text()).toContain('underscore@1.13.6') + expect(component.text()).toContain('lodash') + expect(component.text()).toContain('@4.17.21') + expect(component.text()).toContain('underscore') + expect(component.text()).toContain('@1.13.6') }) it('renders correct number of header cells', async () => { @@ -43,74 +45,61 @@ describe('ComparisonGrid', () => { expect(component.find('.comparison-cell-nodep').exists()).toBe(true) }) - it('truncates long header text with title attribute', async () => { + it('renders package name and version on separate clamped lines with a full title attribute', async () => { const longName = 'very-long-package-name@1.0.0-beta.1' const component = await mountSuspended(ComparisonGrid, { props: { columns: cols(longName, 'short'), }, }) - const links = component.findAll('a.truncate') - const longLink = links.find(a => a.text() === longName) - expect(longLink?.attributes('title')).toBe(longName) + + const link = component.find(`a[title="${longName}"]`) + expect(link.exists()).toBe(true) + expect(link.attributes('title')).toBe(longName) + expect(link.findAll('.line-clamp-1')).toHaveLength(2) }) }) describe('column layout', () => { - it('applies columns-2 class for 2 columns', async () => { + it('sets --package-count to the number of package columns', async () => { const component = await mountSuspended(ComparisonGrid, { props: { columns: cols('a', 'b'), }, }) - expect(component.find('.columns-2').exists()).toBe(true) + const grid = component.find('.comparison-grid') + expect(grid.attributes('style')).toContain('--package-count: 2') }) - it('applies columns-3 class for 2 packages + no-dep', async () => { + it('includes the no-dependency column in --package-count', async () => { const component = await mountSuspended(ComparisonGrid, { props: { columns: cols('a', 'b'), showNoDependency: true, }, }) - expect(component.find('.columns-3').exists()).toBe(true) - }) - - it('applies columns-4 class for 4 columns', async () => { - const component = await mountSuspended(ComparisonGrid, { - props: { - columns: cols('a', 'b', 'c', 'd'), - }, - }) - expect(component.find('.columns-4').exists()).toBe(true) + const grid = component.find('.comparison-grid') + expect(grid.attributes('style')).toContain('--package-count: 3') }) - it('sets min-width for 4 columns to 800px', async () => { + it('supports four package columns with the generic grid layout', async () => { const component = await mountSuspended(ComparisonGrid, { props: { columns: cols('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: cols('a', 'b'), - }, - }) - expect(component.find('.min-w-\\[600px\\]').exists()).toBe(true) + const grid = component.find('.comparison-grid') + expect(grid.attributes('style')).toContain('--package-count: 4') }) - it('sets --columns CSS variable', async () => { + it('sets --package-count CSS variable', async () => { const component = await mountSuspended(ComparisonGrid, { props: { columns: cols('a', 'b', 'c'), }, }) const grid = component.find('.comparison-grid') - expect(grid.attributes('style')).toContain('--columns: 3') + expect(grid.attributes('style')).toContain('--package-count: 3') }) })