diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/projects_list/projects_list_item_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/projects_list/projects_list_item_spec.js | 66 |
1 files changed, 65 insertions, 1 deletions
diff --git a/spec/frontend/vue_shared/components/projects_list/projects_list_item_spec.js b/spec/frontend/vue_shared/components/projects_list/projects_list_item_spec.js index a8e3536059e..dc67097d763 100644 --- a/spec/frontend/vue_shared/components/projects_list/projects_list_item_spec.js +++ b/spec/frontend/vue_shared/components/projects_list/projects_list_item_spec.js @@ -1,4 +1,4 @@ -import { GlAvatarLabeled, GlBadge, GlIcon } from '@gitlab/ui'; +import { GlAvatarLabeled, GlBadge, GlIcon, GlPopover } from '@gitlab/ui'; import projects from 'test_fixtures/api/users/projects/get.json'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import ProjectsListItem from '~/vue_shared/components/projects_list/projects_list_item.vue'; @@ -13,6 +13,8 @@ import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge. import { ACCESS_LEVEL_LABELS } from '~/access_level/constants'; import { FEATURABLE_DISABLED, FEATURABLE_ENABLED } from '~/featurable/constants'; +jest.mock('lodash/uniqueId', () => (prefix) => `${prefix}1`); + describe('ProjectsListItem', () => { let wrapper; @@ -32,6 +34,8 @@ describe('ProjectsListItem', () => { const findAvatarLabeled = () => wrapper.findComponent(GlAvatarLabeled); const findIssuesLink = () => wrapper.findByRole('link', { name: ProjectsListItem.i18n.issues }); const findForksLink = () => wrapper.findByRole('link', { name: ProjectsListItem.i18n.forks }); + const findProjectTopics = () => wrapper.findByTestId('project-topics'); + const findPopover = () => findProjectTopics().findComponent(GlPopover); it('renders project avatar', () => { createComponent(); @@ -166,4 +170,64 @@ describe('ProjectsListItem', () => { expect(findForksLink().exists()).toBe(false); }); }); + + describe('if project has topics', () => { + it('renders first three topics', () => { + createComponent(); + + const firstThreeTopics = project.topics.slice(0, 3); + const firstThreeBadges = findProjectTopics().findAllComponents(GlBadge).wrappers.slice(0, 3); + const firstThreeBadgesText = firstThreeBadges.map((badge) => badge.text()); + const firstThreeBadgesHref = firstThreeBadges.map((badge) => badge.attributes('href')); + + expect(firstThreeTopics).toEqual(firstThreeBadgesText); + expect(firstThreeBadgesHref).toEqual( + firstThreeTopics.map((topic) => `/explore/projects/topics/${encodeURIComponent(topic)}`), + ); + }); + + it('renders the rest of the topics in a popover', () => { + createComponent(); + + const topics = project.topics.slice(3); + const badges = findPopover().findAllComponents(GlBadge).wrappers; + const badgesText = badges.map((badge) => badge.text()); + const badgesHref = badges.map((badge) => badge.attributes('href')); + + expect(topics).toEqual(badgesText); + expect(badgesHref).toEqual( + topics.map((topic) => `/explore/projects/topics/${encodeURIComponent(topic)}`), + ); + }); + + it('renders button to open popover', () => { + createComponent(); + + const expectedButtonId = 'project-topics-popover-1'; + + expect(wrapper.findByText('+ 2 more').attributes('id')).toBe(expectedButtonId); + expect(findPopover().props('target')).toBe(expectedButtonId); + }); + + describe('when topic has a name longer than 15 characters', () => { + it('truncates name and shows tooltip with full name', () => { + const topicWithLongName = 'topic with very very very long name'; + + createComponent({ + propsData: { + project: { + ...project, + topics: [topicWithLongName, ...project.topics], + }, + }, + }); + + const firstTopicBadge = findProjectTopics().findComponent(GlBadge); + const tooltip = getBinding(firstTopicBadge.element, 'gl-tooltip'); + + expect(firstTopicBadge.text()).toBe('topic with ver…'); + expect(tooltip.value).toBe(topicWithLongName); + }); + }); + }); }); |