fix: use approach from #868

Author: gameroman

shared/types/comparison.ts

@@ -110,3 +110,9 @@ export interface ComparisonPackage {
   version: string
   description?: string
 }
+
+// ComingSoon tests run only when FACET_INFO has at least one comingSoon facet
+export const comingSoonFacets = (Object.keys(FACET_INFO) as ComparisonFacet[]).filter(
+  f => FACET_INFO[f].comingSoon,
+)
+export const hasComingSoonFacets = comingSoonFacets.length > 0

test/nuxt/components/compare/FacetSelector.spec.ts

@@ -1,5 +1,11 @@
 import type { ComparisonFacet } from '#shared/types/comparison'
-import { CATEGORY_ORDER, FACET_INFO, FACETS_BY_CATEGORY } from '#shared/types/comparison'
+import {
+  CATEGORY_ORDER,
+  FACET_INFO,
+  FACETS_BY_CATEGORY,
+  comingSoonFacets,
+  hasComingSoonFacets,
+} from '#shared/types/comparison'
 import FacetSelector from '~/components/Compare/FacetSelector.vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
@@ -21,7 +27,7 @@ const facetLabels: Record<ComparisonFacet, { label: string; description: string
   license: { label: 'License', description: 'Package license' },
   dependencies: { label: 'Direct Deps', description: 'Number of direct dependencies' },
   totalDependencies: {
-    label: 'Total Deps',
+    label: 'Total deps',
     description: 'Total number of dependencies including transitive',
   },
   deprecated: { label: 'Deprecated?', description: 'Whether the package is deprecated' },
@@ -34,6 +40,11 @@ const categoryLabels: Record<string, string> = {
   security: 'Security & Compliance',
 }
 
+const comingSoonFacetId = comingSoonFacets[0]
+const comingSoonFacetLabel = hasComingSoonFacets
+  ? (facetLabels[comingSoonFacetId!]?.label ?? comingSoonFacetId)
+  : ''
+
 // Helper to build facet info with labels
 function buildFacetInfo(facet: ComparisonFacet) {
   return {
@@ -174,6 +185,47 @@ describe('FacetSelector', () => {
     })
   })
 
+  describe.runIf(hasComingSoonFacets)('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(comingSoonFacetLabel))
+
+      expect(comingSoonButton?.attributes('disabled')).toBeDefined()
+    })
+
+    it('shows coming soon text for comingSoon facets', async () => {
+      const component = await mountSuspended(FacetSelector)
+
+      expect(component.text().toLowerCase()).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(comingSoonFacetLabel))
+
+      // 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(comingSoonFacetLabel))
+      await comingSoonButton?.trigger('click')
+
+      // toggleFacet should not have been called with totalDependencies
+      expect(mockToggleFacet).not.toHaveBeenCalledWith(comingSoonFacetId)
+    })
+  })
+
   describe('category all/none buttons', () => {
     it('calls selectCategory when all button is clicked', async () => {
       const component = await mountSuspended(FacetSelector)
@@ -237,5 +289,11 @@ describe('FacetSelector', () => {
       // Selected facets have bg-bg-muted class
       expect(component.find('.bg-bg-muted').exists()).toBe(true)
     })
+
+    it.runIf(hasComingSoonFacets)('applies cursor-not-allowed to comingSoon facets', async () => {
+      const component = await mountSuspended(FacetSelector)
+
+      expect(component.find('.cursor-not-allowed').exists()).toBe(true)
+    })
   })
 })

test/nuxt/composables/use-facet-selection.spec.ts

@@ -2,7 +2,12 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { ref } from 'vue'
 import type { ComparisonFacet } from '#shared/types/comparison'
-import { DEFAULT_FACETS, FACETS_BY_CATEGORY } from '#shared/types/comparison'
+import {
+  DEFAULT_FACETS,
+  FACET_INFO,
+  FACETS_BY_CATEGORY,
+  hasComingSoonFacets,
+} from '#shared/types/comparison'
 import type { FacetInfoWithLabels } from '~/composables/useFacetSelection'
 
 // Mock useRouteQuery - needs to be outside of the helper to persist across calls
@@ -113,7 +118,7 @@ describe('useFacetSelection', () => {
     expect(isFacetSelected('types')).toBe(true)
   })
 
-  it('filters out comingSoon facets from query', async () => {
+  it.runIf(hasComingSoonFacets)('filters out comingSoon facets from query', async () => {
     mockRouteQuery.value = 'downloads,totalDependencies,types'
 
     const { isFacetSelected } = await useFacetSelectionInComponent()
@@ -224,6 +229,9 @@ describe('useFacetSelection', () => {
 
       selectCategory('performance')
 
+      const performanceFacets = FACETS_BY_CATEGORY.performance.filter(
+        f => !FACET_INFO[f].comingSoon, // comingSoon facet
+      )
       for (const facet of performanceFacets) {
         expect(isFacetSelected(facet)).toBe(true)
       }
@@ -249,7 +257,7 @@ describe('useFacetSelection', () => {
       deselectCategory('performance')
 
       const nonComingSoonPerformanceFacets = FACETS_BY_CATEGORY.performance.filter(
-        f => f !== 'totalDependencies',
+        f => !FACET_INFO[f].comingSoon,
       )
       for (const facet of nonComingSoonPerformanceFacets) {
         expect(isFacetSelected(facet)).toBe(false)