diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-avif-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-avif-chromium-linux.png index 12e526ce6..0dbcabeda 100644 Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-avif-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-avif-chromium-linux.png differ diff --git a/src/components/dialog/content/manager/ManagerHeader.test.ts b/src/components/dialog/content/manager/ManagerHeader.test.ts new file mode 100644 index 000000000..291020d1f --- /dev/null +++ b/src/components/dialog/content/manager/ManagerHeader.test.ts @@ -0,0 +1,82 @@ +import { mount } from '@vue/test-utils' +import { createPinia } from 'pinia' +import PrimeVue from 'primevue/config' +import Tag from 'primevue/tag' +import Tooltip from 'primevue/tooltip' +import { describe, expect, it } from 'vitest' +import { createI18n } from 'vue-i18n' + +import enMessages from '@/locales/en/main.json' + +import ManagerHeader from './ManagerHeader.vue' + +const i18n = createI18n({ + legacy: false, + locale: 'en', + messages: { + en: enMessages + } +}) + +describe('ManagerHeader', () => { + const createWrapper = () => { + return mount(ManagerHeader, { + global: { + plugins: [createPinia(), PrimeVue, i18n], + directives: { + tooltip: Tooltip + }, + components: { + Tag + } + } + }) + } + + it('renders the component title', () => { + const wrapper = createWrapper() + + expect(wrapper.find('h2').text()).toBe( + enMessages.manager.discoverCommunityContent + ) + }) + + it('displays the legacy manager UI tag', () => { + const wrapper = createWrapper() + + const tag = wrapper.find('[data-pc-name="tag"]') + expect(tag.exists()).toBe(true) + expect(tag.text()).toContain(enMessages.manager.legacyManagerUI) + }) + + it('applies info severity to the tag', () => { + const wrapper = createWrapper() + + const tag = wrapper.find('[data-pc-name="tag"]') + expect(tag.classes()).toContain('p-tag-info') + }) + + it('displays info icon in the tag', () => { + const wrapper = createWrapper() + + const icon = wrapper.find('.pi-info-circle') + expect(icon.exists()).toBe(true) + }) + + it('has cursor-help class on the tag', () => { + const wrapper = createWrapper() + + const tag = wrapper.find('[data-pc-name="tag"]') + expect(tag.classes()).toContain('cursor-help') + }) + + it('has proper structure with flex container', () => { + const wrapper = createWrapper() + + const flexContainer = wrapper.find('.flex.justify-end.ml-auto.pr-4') + expect(flexContainer.exists()).toBe(true) + + const tag = flexContainer.find('[data-pc-name="tag"]') + expect(tag.exists()).toBe(true) + }) +}) diff --git a/src/components/dialog/content/manager/ManagerHeader.vue b/src/components/dialog/content/manager/ManagerHeader.vue index bd438b704..a4fbdfaa3 100644 --- a/src/components/dialog/content/manager/ManagerHeader.vue +++ b/src/components/dialog/content/manager/ManagerHeader.vue @@ -4,16 +4,22 @@