diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue index 1cd2792c9957f..967f08a430701 100644 --- a/packages/design-system/src/components/N8nTabs/Tabs.vue +++ b/packages/design-system/src/components/N8nTabs/Tabs.vue @@ -13,7 +13,7 @@ :key="option.value" :class="{ [$style.alignRight]: option.align === 'right' }" > - + @@ -31,14 +31,14 @@ - {{ option.label }} - +
{{ option.label }}
-
+ diff --git a/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts b/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts index 91c197a794ace..e31e7caeefbfc 100644 --- a/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts +++ b/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts @@ -1,7 +1,8 @@ -import { createComponentRenderer } from '@/__tests__/render'; -import ProjectTabs from '@/components/Projects/ProjectTabs.vue'; +import { createPinia, setActivePinia } from 'pinia'; import { useRoute } from 'vue-router'; +import { createComponentRenderer } from '@/__tests__/render'; import { createTestProject } from '@/__tests__/data/projects'; +import ProjectTabs from '@/components/Projects/ProjectTabs.vue'; import { useProjectsStore } from '@/stores/projects.store'; vi.mock('vue-router', () => { @@ -17,28 +18,25 @@ vi.mock('vue-router', () => { RouterLink: vi.fn(), }; }); - -vi.mock('@/stores/users.store', () => ({ - useUsersStore: vi.fn().mockImplementation(() => ({ - currentUser: {}, - })), -})); - -vi.mock('@/stores/projects.store', () => ({ - useProjectsStore: vi.fn().mockReturnValue({}), -})); - -vi.mock('@/utils/rbac/permissions', () => ({ - hasPermission: vi.fn().mockReturnValue(false), -})); - -const renderComponent = createComponentRenderer(ProjectTabs); +const renderComponent = createComponentRenderer(ProjectTabs, { + global: { + stubs: { + 'router-link': { + template: '
', + }, + }, + }, +}); let route: ReturnType; +let projectsStore: ReturnType; describe('ProjectTabs', () => { beforeEach(() => { + const pinia = createPinia(); + setActivePinia(pinia); route = useRoute(); + projectsStore = useProjectsStore(); }); it('should render home tabs', async () => { @@ -49,16 +47,9 @@ describe('ProjectTabs', () => { expect(queryByText('Project settings')).not.toBeInTheDocument(); }); - it('should render project tabs if use has permissions', () => { + it('should render project tab Settings if user has permissions', () => { route.params.projectId = '123'; - vi.mocked(useProjectsStore).mockImplementationOnce( - () => - ({ - currentProject: createTestProject({ - scopes: ['project:update'], - }), - }) as ReturnType, - ); + projectsStore.setCurrentProject(createTestProject({ scopes: ['project:update'] })); const { getByText } = renderComponent(); expect(getByText('Workflows')).toBeInTheDocument(); @@ -66,16 +57,9 @@ describe('ProjectTabs', () => { expect(getByText('Project settings')).toBeInTheDocument(); }); - it('should render project tabs', () => { + it('should render project tabs without Settings if no permission', () => { route.params.projectId = '123'; - vi.mocked(useProjectsStore).mockImplementationOnce( - () => - ({ - currentProject: createTestProject({ - scopes: ['project:read'], - }), - }) as ReturnType, - ); + projectsStore.setCurrentProject(createTestProject({ scopes: ['project:read'] })); const { queryByText, getByText } = renderComponent(); expect(getByText('Workflows')).toBeInTheDocument();