diff --git a/src/components/graph/selectionToolbox/BypassButton.test.ts b/src/components/graph/selectionToolbox/BypassButton.test.ts index f9670226a..8c8ca43b2 100644 --- a/src/components/graph/selectionToolbox/BypassButton.test.ts +++ b/src/components/graph/selectionToolbox/BypassButton.test.ts @@ -3,19 +3,23 @@ import PrimeVue from 'primevue/config' import Tooltip from 'primevue/tooltip' import { beforeEach, describe, expect, test, vi } from 'vitest' import { ref } from 'vue' +import { computed } from 'vue' import { createI18n } from 'vue-i18n' import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue' -import { useSelectionState } from '@/composables/graph/useSelectionState' -import { useCommandStore } from '@/stores/commandStore' -// Mock all dependencies +const commandStore = { + execute: vi.fn() +} +const selectionState = { + hasAnySelection: ref(true) +} vi.mock('@/stores/commandStore', () => ({ - useCommandStore: vi.fn() + useCommandStore: vi.fn(() => commandStore) })) vi.mock('@/composables/graph/useSelectionState', () => ({ - useSelectionState: vi.fn() + useSelectionState: vi.fn(() => selectionState) })) describe('BypassButton', () => { @@ -26,46 +30,17 @@ describe('BypassButton', () => { en: { selectionToolbox: { bypassButton: { - tooltip: 'Bypass/Unbypass Selected Nodes' + tooltip: 'Fake Bypass text' } }, 'commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label': - 'Toggle Bypass Selected Nodes' + 'Fake Toggle Bypass' } } }) - // Mock interfaces - interface MockCommandStore { - execute: ReturnType - } - - interface MockSelectionState { - hasAnySelection: { value: boolean } - } - - // Mock instances - let mockCommandStore: MockCommandStore - let mockSelectionState: MockSelectionState - beforeEach(() => { - vi.clearAllMocks() - - // Setup mock command store - mockCommandStore = { - execute: vi.fn().mockResolvedValue(undefined) - } - vi.mocked(useCommandStore).mockReturnValue( - mockCommandStore as unknown as ReturnType - ) - - // Setup mock selection state - mockSelectionState = { - hasAnySelection: ref(true) - } - vi.mocked(useSelectionState).mockReturnValue( - mockSelectionState as unknown as ReturnType - ) + vi.resetAllMocks() }) const mountComponent = () => { @@ -95,8 +70,7 @@ describe('BypassButton', () => { test('should execute bypass command when clicked', async () => { const wrapper = mountComponent() await wrapper.find('button').trigger('click') - - expect(mockCommandStore.execute).toHaveBeenCalledWith( + expect(commandStore.execute).toHaveBeenCalledWith( 'Comfy.Canvas.ToggleSelectedNodes.Bypass' ) }) @@ -104,11 +78,14 @@ describe('BypassButton', () => { test('should show button when hasAnySelection is true', () => { const wrapper = mountComponent() const button = wrapper.find('button') - expect(button.isVisible()).toBe(true) + expect(button.element.style.display).toBe('') }) - test('should call useSelectionState composable', () => { - mountComponent() - expect(useSelectionState).toHaveBeenCalled() + test('Button should not show when hasAnySelection is false', async () => { + selectionState.hasAnySelection = computed(() => false) + const wrapper = mountComponent() + await wrapper.vm.$nextTick() + const button = wrapper.find('button') + expect(button.element.style.display).toBe('none') }) }) diff --git a/src/components/graph/selectionToolbox/BypassButton.vue b/src/components/graph/selectionToolbox/BypassButton.vue index 68a54708f..59e76cfaf 100644 --- a/src/components/graph/selectionToolbox/BypassButton.vue +++ b/src/components/graph/selectionToolbox/BypassButton.vue @@ -8,11 +8,7 @@ severity="secondary" text data-testid="bypass-button" - :class="{ - 'hover:dark-theme:!bg-[#262729] hover:!bg-[#E7E6E6]': true, - 'dark-theme:[&:not(:active)]:!bg-[#262729] [&:not(:active)]:!bg-[#E7E6E6]': - isBypassed - }" + class="hover:dark-theme:bg-[#262729] hover:bg-[#E7E6E6]" @click="toggleBypass" >