fix: "copy as markdown" button appearing too eagerly (#2506)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Kiwow

app/pages/compare.vue

@@ -75,11 +75,14 @@ function addNoDep() {
 // Get loading state for each column
 const columnLoading = computed(() => packages.value.map((_, i) => isColumnLoading(i)))
 
-// FIXME(serhalp): canCompare only checks package count, not whether data has loaded.
-// Copy-markdown and view-switching commands appear as soon as one package loads, even if
-// other packages are still loading. The UI copy button has the same issue.
+// Makes sense to compare if there's 2 or more packages
 const canCompare = computed(() => packages.value.length >= 2)
 
+// Allow copying only after all data is loaded
+const canCopyTable = computed(
+  () => packagesData.value.length >= 1 && packagesData.value.every(data => data !== null),
+)
+
 const comparisonView = usePermalink<'table' | 'charts'>('view', 'table')
 const hasChartableFacets = computed(() => selectedFacets.value.some(facet => facet.chartable))
 
@@ -173,7 +176,7 @@ useCommandPaletteContextCommands(
       },
     ]
 
-    if (canCompare.value && packagesData.value && packagesData.value.some(p => p !== null)) {
+    if (canCompare.value && canCopyTable.value) {
       commands.push({
         id: 'compare-copy-markdown',
         group: 'actions',
@@ -335,7 +338,7 @@ useSeoMeta({
       <!-- Comparison grid -->
       <section v-if="canCompare" class="mt-10" aria-labelledby="comparison-heading">
         <CopyToClipboardButton
-          v-if="packagesData && packagesData.some(p => p !== null)"
+          v-if="canCopyTable"
           :copied="copied"
           :copy-text="$t('compare.packages.copy_as_markdown')"
           class="mb-4"

test/nuxt/pages/ComparePage.spec.ts

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest'
 import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime'
 import type { PackageComparisonData } from '~/composables/usePackageComparison'
+import CopyToClipboardButtonComponent from '~/components/CopyToClipboardButton.vue'
 
 const mockPackagesData = ref<(PackageComparisonData | null)[]>([])
 const mockStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
@@ -84,3 +85,52 @@ describe('compare page command palette commands', () => {
     wrapper.unmount()
   })
 })
+
+describe('compare page copy-as-markdown button', () => {
+  afterEach(() => {
+    mockPackagesData.value = []
+    mockStatus.value = 'idle'
+    const commandPalette = useCommandPalette()
+    commandPalette.close()
+    commandPalette.contextCommands.value = []
+  })
+
+  it('shows copy-as-markdown button when all packages have loaded data', async () => {
+    mockPackagesData.value = [makePackageData('react'), makePackageData('vue')]
+    mockStatus.value = 'success'
+
+    const wrapper = await mountComparePage('/compare?packages=react,vue')
+
+    expect(wrapper.findComponent(CopyToClipboardButtonComponent).exists()).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('does not show copy-as-markdown button when only some packages have loaded data', async () => {
+    // Simulate a partial-load race: 2 packages in the URL but only the first has data yet.
+    mockPackagesData.value = [makePackageData('react'), null]
+    mockStatus.value = 'pending'
+
+    const wrapper = await mountComparePage('/compare?packages=react,vue')
+
+    // The button must not appear until every requested package has loaded its data.
+    expect(wrapper.findComponent(CopyToClipboardButtonComponent).exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it('does not register copy-markdown command when only some packages have loaded data', async () => {
+    // Same race: 2 packages in the URL but only the first has data yet.
+    mockPackagesData.value = [makePackageData('react'), null]
+    mockStatus.value = 'pending'
+
+    const wrapper = await mountComparePage('/compare?packages=react,vue')
+    const { contextCommands } = useCommandPalette()
+
+    const allCommands = contextCommands.value.flatMap(entry => entry.commands)
+    // The command-palette entry must not appear until every requested package has loaded.
+    expect(allCommands.find(c => c.id === 'compare-copy-markdown')).toBeUndefined()
+
+    wrapper.unmount()
+  })
+})