diff --git a/packages/editor-ui/src/__tests__/data/projects.ts b/packages/editor-ui/src/__tests__/data/projects.ts index 1870803cbf..98878c339b 100644 --- a/packages/editor-ui/src/__tests__/data/projects.ts +++ b/packages/editor-ui/src/__tests__/data/projects.ts @@ -31,7 +31,7 @@ export function createTestProject(data: Partial): 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, diff --git a/packages/editor-ui/src/components/Projects/ProjectHeader.test.ts b/packages/editor-ui/src/components/Projects/ProjectHeader.test.ts index d526e395aa..46b18718bb 100644 --- a/packages/editor-ui/src/components/Projects/ProjectHeader.test.ts +++ b/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; let projectsStore: ReturnType>; 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, + ); + }); }); diff --git a/packages/editor-ui/src/components/Projects/ProjectHeader.vue b/packages/editor-ui/src/components/Projects/ProjectHeader.vue index f702ad1f66..a89a195975 100644 --- a/packages/editor-ui/src/components/Projects/ProjectHeader.vue +++ b/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, );