diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue index c2ee26ac64..31908395fa 100644 --- a/app/components/Terminal/Execute.vue +++ b/app/components/Terminal/Execute.vue @@ -4,7 +4,7 @@ import type { PackageManagerId } from '~/utils/install-command' /** * A terminal-style execute command display for binary-only packages. - * Renders all package manager variants with CSS-based visibility. + * Renders the currently selected package manager command. */ const props = defineProps<{ @@ -14,6 +14,7 @@ const props = defineProps<{ }>() const selectedPM = useSelectedPackageManager() +const selectedPackageManager = computed(() => getPackageManagerConfig(selectedPM.value)) // Generate execute command parts for a specific package manager function getExecutePartsForPM(pmId: PackageManagerId) { @@ -52,17 +53,14 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
-
$ {{ i > 0 ? ' ' : '' }}{{ part }} copyExecute(getFullExecuteCommand())
- - diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue index acf9ddda5c..849d71b2bb 100644 --- a/app/components/Terminal/Install.vue +++ b/app/components/Terminal/Install.vue @@ -111,6 +111,7 @@ const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring: const copyCreateCommand = () => copyCreate(getFullCreateCommand()) const { copied: devInstallCopied, copy: copyDevInstall } = useClipboard({ copiedDuring: 2000 }) +const selectedPackageManager = computed(() => getPackageManagerConfig(selectedPM.value)) const copyDevInstallCommand = () => copyDevInstall( getInstallCommand({ @@ -219,17 +220,14 @@ useCommandPaletteContextCommands(
-
$ {{ i > 0 ? ' ' : '' }}{{ part }}
$ {{ i > 0 ? ' ' : '' }}{{ part }} - - diff --git a/app/composables/useInstallCommand.ts b/app/composables/useInstallCommand.ts index 827ac89f46..a2efffd7ab 100644 --- a/app/composables/useInstallCommand.ts +++ b/app/composables/useInstallCommand.ts @@ -53,8 +53,7 @@ export function useInstallCommand( const typesInstallCommandParts = computed(() => { const types = toValue(typesPackageName) if (!types) return [] - const pm = packageManagers.find(p => p.id === selectedPM.value) - if (!pm) return [] + const pm = getPackageManagerConfig(selectedPM.value) const pkgSpec = selectedPM.value === 'deno' ? `npm:${types}` : types @@ -69,8 +68,7 @@ export function useInstallCommand( return installCommand.value } - const pm = packageManagers.find(p => p.id === selectedPM.value) - if (!pm) return installCommand.value + const pm = getPackageManagerConfig(selectedPM.value) const pkgSpec = selectedPM.value === 'deno' ? `npm:${types}` : types diff --git a/app/utils/install-command.ts b/app/utils/install-command.ts index 6c87e30511..90d537c713 100644 --- a/app/utils/install-command.ts +++ b/app/utils/install-command.ts @@ -81,6 +81,20 @@ export const packageManagers = [ export type PackageManagerId = (typeof packageManagers)[number]['id'] +export function getPackageManagerConfig(packageManager: PackageManagerId) { + const selectedPackageManager = packageManagers.find(pm => pm.id === packageManager) + if (selectedPackageManager) { + return selectedPackageManager + } + + const defaultPackageManager = packageManagers.find(pm => pm.id === 'npm') + if (!defaultPackageManager) { + throw new Error('Default package manager configuration is missing.') + } + + return defaultPackageManager +} + export interface InstallCommandOptions { packageName: string packageManager: PackageManagerId diff --git a/test/nuxt/components/Terminal.spec.ts b/test/nuxt/components/Terminal.spec.ts new file mode 100644 index 0000000000..e95b3bf68e --- /dev/null +++ b/test/nuxt/components/Terminal.spec.ts @@ -0,0 +1,53 @@ +import { beforeEach, describe, expect, it } from 'vitest' +import { mountSuspended } from '@nuxt/test-utils/runtime' +import TerminalExecute from '~/components/Terminal/Execute.vue' +import TerminalInstall from '~/components/Terminal/Install.vue' + +describe('Terminal components', () => { + beforeEach(() => { + localStorage.clear() + const selectedPackageManager = useSelectedPackageManager() + selectedPackageManager.value = 'npm' + }) + + it('renders only the selected package manager in TerminalExecute', async () => { + const selectedPackageManager = useSelectedPackageManager() + selectedPackageManager.value = 'nub' + + const component = await mountSuspended(TerminalExecute, { + props: { packageName: 'create-vite' }, + }) + + const renderedCommands = component.findAll('[data-pm-cmd]') + + expect(renderedCommands).toHaveLength(1) + expect(renderedCommands[0]?.attributes('data-pm-cmd')).toBe('nub') + expect(component.text()).toContain('nubx create-vite') + }) + + it('renders only the selected package manager across all TerminalInstall sections', async () => { + const selectedPackageManager = useSelectedPackageManager() + selectedPackageManager.value = 'nub' + + const component = await mountSuspended(TerminalInstall, { + props: { + packageName: 'vue', + typesPackageName: '@types/vue', + devDependencySuggestion: { recommended: true }, + executableInfo: { hasExecutable: true, primaryCommand: 'vue' }, + createPackageInfo: { packageName: 'create-vue' }, + }, + }) + + const renderedCommands = component.findAll('[data-pm-cmd]') + + expect(renderedCommands).toHaveLength(5) + expect(renderedCommands.every(command => command.attributes('data-pm-cmd') === 'nub')).toBe( + true, + ) + expect(component.text()).toContain('nub add vue') + expect(component.text()).toContain('nub add -D @types/vue') + expect(component.text()).toContain('nubx vue') + expect(component.text()).toContain('nub create vue') + }) +})