fix(editor): Update project tabs test (no-changelog) (#10300)

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -13,7 +13,7 @@
 				:key="option.value"
 				:class="{ [$style.alignRight]: option.align === 'right' }"
 			>
-				<n8n-tooltip :disabled="!option.tooltip" placement="bottom">
+				<N8nTooltip :disabled="!option.tooltip" placement="bottom">
 					<template #content>
 						<div @click="handleTooltipClick(option.value, $event)" v-html="option.tooltip" />
 					</template>
@@ -31,14 +31,14 @@
 							</span>
 						</div>
 					</a>
-					<RouterLink
+					<router-link
 						v-else-if="option.to"
 						:to="option.to"
 						:class="[$style.tab, { [$style.activeTab]: modelValue === option.value }]"
 					>
 						<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
 						<span v-if="option.label">{{ option.label }}</span>
-					</RouterLink>
+					</router-link>
 					<div
 						v-else
 						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
@@ -48,7 +48,7 @@
 						<N8nIcon v-if="option.icon" :icon="option.icon" size="small" />
 						<span v-if="option.label">{{ option.label }}</span>
 					</div>
-				</n8n-tooltip>
+				</N8nTooltip>
 			</div>
 		</div>
 	</div>

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: '<div><slot /></div>',
+			},
+		},
+	},
+});
 
 let route: ReturnType<typeof useRoute>;
+let projectsStore: ReturnType<typeof useProjectsStore>;
 
 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<typeof useProjectsStore>,
-		);
+		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<typeof useProjectsStore>,
-		);
+		projectsStore.setCurrentProject(createTestProject({ scopes: ['project:read'] }));
 		const { queryByText, getByText } = renderComponent();
 
 		expect(getByText('Workflows')).toBeInTheDocument();