fix(editor): Test project header calling project tabs with the right props

packages/editor-ui/src/__tests__/data/projects.ts

@@ -31,7 +31,7 @@ export function createTestProject(data: Partial<Project>): Project {
 		name: faker.lorem.words({ min: 1, max: 3 }),
 		createdAt: faker.date.past().toISOString(),
 		updatedAt: faker.date.recent().toISOString(),
-		type: 'team',
+		type: ProjectTypes.Team,
 		relations: [],
 		scopes: [],
 		...data,

packages/editor-ui/src/components/Projects/ProjectHeader.test.ts

@@ -1,6 +1,8 @@
 import { createTestingPinia } from '@pinia/testing';
 import { createComponentRenderer } from '@/__tests__/render';
 import { mockedStore } from '@/__tests__/utils';
+import { createTestProject } from '@/__tests__/data/projects';
+import { useRoute } from 'vue-router';
 import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 import { useProjectsStore } from '@/stores/projects.store';
 import type { Project } from '@/types/projects.types';
@@ -8,28 +10,43 @@ import { ProjectTypes } from '@/types/projects.types';
 
 vi.mock('vue-router', async () => {
 	const actual = await vi.importActual('vue-router');
+	const params = {};
+	const location = {};
 	return {
 		...actual,
 		useRoute: () => ({
-			location: {},
+			params,
+			location,
 		}),
 	};
 });
 
+const projectTabsSpy = vi.fn().mockReturnValue({
+	render: vi.fn(),
+});
+
 const renderComponent = createComponentRenderer(ProjectHeader, {
 	global: {
-		stubs: ['ProjectTabs'],
+		stubs: {
+			ProjectTabs: projectTabsSpy,
+		},
 	},
 });
 
+let route: ReturnType<typeof useRoute>;
 let projectsStore: ReturnType<typeof mockedStore<typeof useProjectsStore>>;
 
 describe('ProjectHeader', () => {
 	beforeEach(() => {
 		createTestingPinia();
+		route = useRoute();
 		projectsStore = mockedStore(useProjectsStore);
 	});
 
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
 	it('should render the correct icon', async () => {
 		const { container, rerender } = renderComponent();
 
@@ -59,4 +76,45 @@ describe('ProjectHeader', () => {
 		await rerender({});
 		expect(getByText(projectName)).toBeVisible();
 	});
+
+	it('should render ProjectTabs Settings if project is team project and user has update scope', () => {
+		route.params.projectId = '123';
+		projectsStore.currentProject = createTestProject({ scopes: ['project:update'] });
+		renderComponent();
+
+		expect(projectTabsSpy).toHaveBeenCalledWith(
+			{
+				'show-settings': true,
+			},
+			null,
+		);
+	});
+
+	it('should render ProjectTabs without Settings if no project update permission', () => {
+		route.params.projectId = '123';
+		projectsStore.currentProject = createTestProject({ scopes: ['project:read'] });
+		renderComponent();
+
+		expect(projectTabsSpy).toHaveBeenCalledWith(
+			{
+				'show-settings': false,
+			},
+			null,
+		);
+	});
+
+	it('should render ProjectTabs without Settings if project is not team project', () => {
+		route.params.projectId = '123';
+		projectsStore.currentProject = createTestProject(
+			createTestProject({ type: ProjectTypes.Personal, scopes: ['project:update'] }),
+		);
+		renderComponent();
+
+		expect(projectTabsSpy).toHaveBeenCalledWith(
+			{
+				'show-settings': false,
+			},
+			null,
+		);
+	});
 });

packages/editor-ui/src/components/Projects/ProjectHeader.vue

@@ -38,7 +38,7 @@ const projectPermissions = computed(
 const showSettings = computed(
 	() =>
 		!!route?.params?.projectId &&
-		projectPermissions.value.update &&
+		!!projectPermissions.value.update &&
 		projectsStore.currentProject?.type === ProjectTypes.Team,
 );
 </script>