Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Aug 6, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b67af2
fix(editor): Show initials as uppercased in Avatar design system comp…
cstuncsik Aug 5, 2024
a196786
fix(editor): Update project tabs test
cstuncsik Aug 5, 2024
385b6b6
fix(editor): Rollback avatar component changes
cstuncsik Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/design-system/src/components/N8nTabs/Tabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 }"
Expand All @@ -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>
Expand Down
56 changes: 20 additions & 36 deletions packages/editor-ui/src/components/Projects/ProjectTabs.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand All @@ -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 () => {
Expand All @@ -49,33 +47,19 @@ 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();
expect(getByText('Credentials')).toBeInTheDocument();
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();
Expand Down
Loading