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();