diff options
Diffstat (limited to 'spec/frontend/sidebar/components')
11 files changed, 332 insertions, 14 deletions
diff --git a/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js b/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js index 03d1ac3ab8d..5a3a152d201 100644 --- a/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js +++ b/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js @@ -1,7 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import { TEST_HOST } from 'helpers/test_constants'; -import AssigneeAvatarLink from '~/sidebar/components/assignees/assignee_avatar_link.vue'; import AssigneeAvatar from '~/sidebar/components/assignees/assignee_avatar.vue'; +import AssigneeAvatarLink from '~/sidebar/components/assignees/assignee_avatar_link.vue'; import userDataMock from '../../user_data_mock'; const TOOLTIP_PLACEMENT = 'bottom'; @@ -79,4 +79,34 @@ describe('AssigneeAvatarLink component', () => { }); }, ); + + describe.each` + tooltipHasName | availability | canMerge | expected + ${true} | ${'Busy'} | ${false} | ${'Root (Busy) (cannot merge)'} + ${true} | ${'Busy'} | ${true} | ${'Root (Busy)'} + ${true} | ${''} | ${false} | ${'Root (cannot merge)'} + ${true} | ${''} | ${true} | ${'Root'} + ${false} | ${'Busy'} | ${false} | ${'Cannot merge'} + ${false} | ${'Busy'} | ${true} | ${''} + ${false} | ${''} | ${false} | ${'Cannot merge'} + ${false} | ${''} | ${true} | ${''} + `( + "with tooltipHasName=$tooltipHasName and availability='$availability' and canMerge=$canMerge", + ({ tooltipHasName, availability, canMerge, expected }) => { + beforeEach(() => { + createComponent({ + tooltipHasName, + user: { + ...userDataMock(), + can_merge: canMerge, + availability, + }, + }); + }); + + it('sets tooltip to $expected', () => { + expect(findTooltipText()).toBe(expected); + }); + }, + ); }); diff --git a/spec/frontend/sidebar/components/assignees/collapsed_assignee_list_spec.js b/spec/frontend/sidebar/components/assignees/collapsed_assignee_list_spec.js index 8e158c99971..5aa8264b98c 100644 --- a/spec/frontend/sidebar/components/assignees/collapsed_assignee_list_spec.js +++ b/spec/frontend/sidebar/components/assignees/collapsed_assignee_list_spec.js @@ -1,8 +1,8 @@ -import { shallowMount } from '@vue/test-utils'; import { GlIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import UsersMockHelper from 'helpers/user_mock_data_helper'; -import CollapsedAssigneeList from '~/sidebar/components/assignees/collapsed_assignee_list.vue'; import CollapsedAssignee from '~/sidebar/components/assignees/collapsed_assignee.vue'; +import CollapsedAssigneeList from '~/sidebar/components/assignees/collapsed_assignee_list.vue'; const DEFAULT_MAX_COUNTER = 99; @@ -187,4 +187,26 @@ describe('CollapsedAssigneeList component', () => { expect(findAvatarCounter().text()).toEqual(`${DEFAULT_MAX_COUNTER}+`); }); }); + + const [busyUser] = UsersMockHelper.createNumberRandomUsers(1); + const [canMergeUser] = UsersMockHelper.createNumberRandomUsers(1); + busyUser.availability = 'busy'; + canMergeUser.can_merge = true; + + describe.each` + users | busy | canMerge | expected + ${[busyUser, canMergeUser]} | ${1} | ${1} | ${`${busyUser.name} (Busy), ${canMergeUser.name} (1/2 can merge)`} + ${[busyUser]} | ${1} | ${0} | ${`${busyUser.name} (Busy) (cannot merge)`} + ${[canMergeUser]} | ${0} | ${1} | ${`${canMergeUser.name}`} + ${[]} | ${0} | ${0} | ${'Assignee(s)'} + `( + 'with $users.length users, $busy is busy and $canMerge that can merge', + ({ users, expected }) => { + it('generates the tooltip text', () => { + createComponent({ users }); + + expect(getTooltipTitle()).toEqual(expected); + }); + }, + ); }); diff --git a/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js b/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js index ee1f8ed8d2b..b49e6255923 100644 --- a/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js +++ b/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js @@ -1,6 +1,7 @@ import { shallowMount } from '@vue/test-utils'; -import CollapsedAssignee from '~/sidebar/components/assignees/collapsed_assignee.vue'; import AssigneeAvatar from '~/sidebar/components/assignees/assignee_avatar.vue'; +import CollapsedAssignee from '~/sidebar/components/assignees/collapsed_assignee.vue'; +import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue'; import userDataMock from '../../user_data_mock'; const TEST_USER = userDataMock(); @@ -18,6 +19,9 @@ describe('CollapsedAssignee assignee component', () => { wrapper = shallowMount(CollapsedAssignee, { propsData, + stubs: { + UserNameWithStatus, + }, }); } diff --git a/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js new file mode 100644 index 00000000000..4ee12838491 --- /dev/null +++ b/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js @@ -0,0 +1,120 @@ +import { GlLoadingIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue'; + +describe('boards sidebar remove issue', () => { + let wrapper; + + const findLoader = () => wrapper.find(GlLoadingIcon); + const findEditButton = () => wrapper.find('[data-testid="edit-button"]'); + const findTitle = () => wrapper.find('[data-testid="title"]'); + const findCollapsed = () => wrapper.find('[data-testid="collapsed-content"]'); + const findExpanded = () => wrapper.find('[data-testid="expanded-content"]'); + + const createComponent = ({ props = {}, slots = {}, canUpdate = false } = {}) => { + wrapper = shallowMount(SidebarEditableItem, { + attachTo: document.body, + provide: { canUpdate }, + propsData: props, + slots, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('template', () => { + it('renders title', () => { + const title = 'Sidebar item title'; + createComponent({ props: { title } }); + + expect(findTitle().text()).toBe(title); + }); + + it('hides edit button, loader and expanded content by default', () => { + createComponent(); + + expect(findEditButton().exists()).toBe(false); + expect(findLoader().exists()).toBe(false); + expect(findExpanded().isVisible()).toBe(false); + }); + + it('shows "None" if empty collapsed slot', () => { + createComponent(); + + expect(findCollapsed().text()).toBe('None'); + }); + + it('renders collapsed content by default', () => { + const slots = { collapsed: '<div>Collapsed content</div>' }; + createComponent({ slots }); + + expect(findCollapsed().text()).toBe('Collapsed content'); + }); + + it('shows edit button if can update', () => { + createComponent({ canUpdate: true }); + + expect(findEditButton().exists()).toBe(true); + }); + + it('shows loading icon if loading', () => { + createComponent({ props: { loading: true } }); + + expect(findLoader().exists()).toBe(true); + }); + + it('shows expanded content and hides collapsed content when clicking edit button', async () => { + const slots = { default: '<div>Select item</div>' }; + createComponent({ canUpdate: true, slots }); + findEditButton().vm.$emit('click'); + + await wrapper.vm.$nextTick; + + expect(findCollapsed().isVisible()).toBe(false); + expect(findExpanded().isVisible()).toBe(true); + }); + }); + + describe('collapsing an item by offclicking', () => { + beforeEach(async () => { + createComponent({ canUpdate: true }); + findEditButton().vm.$emit('click'); + await wrapper.vm.$nextTick(); + }); + + it('hides expanded section and displays collapsed section', async () => { + expect(findExpanded().isVisible()).toBe(true); + document.body.click(); + + await wrapper.vm.$nextTick(); + + expect(findCollapsed().isVisible()).toBe(true); + expect(findExpanded().isVisible()).toBe(false); + }); + }); + + it('emits open when edit button is clicked and edit is initailized to false', async () => { + createComponent({ canUpdate: true }); + + findEditButton().vm.$emit('click'); + + await wrapper.vm.$nextTick(); + + expect(wrapper.emitted().open.length).toBe(1); + }); + + it('does not emits events when collapsing with false `emitEvent`', async () => { + createComponent({ canUpdate: true }); + + findEditButton().vm.$emit('click'); + + await wrapper.vm.$nextTick(); + + wrapper.vm.collapse({ emitEvent: false }); + + expect(wrapper.emitted().close).toBeUndefined(); + }); +}); diff --git a/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js b/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js index da69f56d442..7e81df1d7d2 100644 --- a/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js +++ b/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js @@ -1,8 +1,8 @@ import { mount } from '@vue/test-utils'; import { TEST_HOST } from 'helpers/test_constants'; import UsersMockHelper from 'helpers/user_mock_data_helper'; -import UncollapsedAssigneeList from '~/sidebar/components/assignees/uncollapsed_assignee_list.vue'; import AssigneeAvatarLink from '~/sidebar/components/assignees/assignee_avatar_link.vue'; +import UncollapsedAssigneeList from '~/sidebar/components/assignees/uncollapsed_assignee_list.vue'; import userDataMock from '../../user_data_mock'; const DEFAULT_RENDER_COUNT = 5; diff --git a/spec/frontend/sidebar/components/assignees/user_name_with_status_spec.js b/spec/frontend/sidebar/components/assignees/user_name_with_status_spec.js new file mode 100644 index 00000000000..9483c6624c5 --- /dev/null +++ b/spec/frontend/sidebar/components/assignees/user_name_with_status_spec.js @@ -0,0 +1,51 @@ +import { GlSprintf } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { AVAILABILITY_STATUS } from '~/set_status_modal/utils'; +import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue'; + +const name = 'Goku'; +const containerClasses = 'gl-cool-class gl-over-9000'; + +describe('UserNameWithStatus', () => { + let wrapper; + + function createComponent(props = {}) { + return shallowMount(UserNameWithStatus, { + propsData: { name, containerClasses, ...props }, + stubs: { + GlSprintf, + }, + }); + } + + beforeEach(() => { + wrapper = createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('will render the users name', () => { + expect(wrapper.html()).toContain(name); + }); + + it('will not render "Busy"', () => { + expect(wrapper.html()).not.toContain('Busy'); + }); + + it('will render all relevant containerClasses', () => { + const classes = wrapper.find('span').classes().join(' '); + expect(classes).toBe(containerClasses); + }); + + describe(`with availability="${AVAILABILITY_STATUS.BUSY}"`, () => { + beforeEach(() => { + wrapper = createComponent({ availability: AVAILABILITY_STATUS.BUSY }); + }); + + it('will render "Busy"', () => { + expect(wrapper.html()).toContain('Goku (Busy)'); + }); + }); +}); diff --git a/spec/frontend/sidebar/components/copy_email_to_clipboard_spec.js b/spec/frontend/sidebar/components/copy_email_to_clipboard_spec.js index b9132fa4450..704847f65bf 100644 --- a/spec/frontend/sidebar/components/copy_email_to_clipboard_spec.js +++ b/spec/frontend/sidebar/components/copy_email_to_clipboard_spec.js @@ -1,7 +1,7 @@ -import { mount } from '@vue/test-utils'; import { getByText } from '@testing-library/dom'; -import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import { mount } from '@vue/test-utils'; import CopyEmailToClipboard from '~/sidebar/components/copy_email_to_clipboard.vue'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; describe('CopyEmailToClipboard component', () => { const sampleEmail = 'sample+email@test.com'; diff --git a/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js b/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js new file mode 100644 index 00000000000..7c67149b517 --- /dev/null +++ b/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js @@ -0,0 +1,91 @@ +import { shallowMount } from '@vue/test-utils'; +import { TEST_HOST } from 'helpers/test_constants'; +import ReviewerAvatarLink from '~/sidebar/components/reviewers/reviewer_avatar_link.vue'; +import UncollapsedReviewerList from '~/sidebar/components/reviewers/uncollapsed_reviewer_list.vue'; +import userDataMock from '../../user_data_mock'; + +describe('UncollapsedReviewerList component', () => { + let wrapper; + + function createComponent(props = {}) { + const propsData = { + users: [], + rootPath: TEST_HOST, + ...props, + }; + + wrapper = shallowMount(UncollapsedReviewerList, { + propsData, + }); + } + + afterEach(() => { + wrapper.destroy(); + }); + + describe('single reviewer', () => { + beforeEach(() => { + const user = userDataMock(); + + createComponent({ + users: [user], + }); + }); + + it('only has one user', () => { + expect(wrapper.findAll(ReviewerAvatarLink).length).toBe(1); + }); + + it('shows one user with avatar, username and author name', () => { + expect(wrapper.text()).toContain(`@root`); + }); + + it('renders re-request loading icon', async () => { + await wrapper.setData({ loadingStates: { 1: 'loading' } }); + + expect(wrapper.find('[data-testid="re-request-button"]').props('loading')).toBe(true); + }); + + it('renders re-request success icon', async () => { + await wrapper.setData({ loadingStates: { 1: 'success' } }); + + expect(wrapper.find('[data-testid="re-request-success"]').exists()).toBe(true); + }); + }); + + describe('multiple reviewers', () => { + beforeEach(() => { + const user = userDataMock(); + + createComponent({ + users: [user, { ...user, id: 2, username: 'hello-world' }], + }); + }); + + it('only has one user', () => { + expect(wrapper.findAll(ReviewerAvatarLink).length).toBe(2); + }); + + it('shows one user with avatar, username and author name', () => { + expect(wrapper.text()).toContain(`@root`); + expect(wrapper.text()).toContain(`@hello-world`); + }); + + it('renders re-request loading icon', async () => { + await wrapper.setData({ loadingStates: { 2: 'loading' } }); + + expect(wrapper.findAll('[data-testid="re-request-button"]').length).toBe(2); + expect(wrapper.findAll('[data-testid="re-request-button"]').at(1).props('loading')).toBe( + true, + ); + }); + + it('renders re-request success icon', async () => { + await wrapper.setData({ loadingStates: { 2: 'success' } }); + + expect(wrapper.findAll('[data-testid="re-request-button"]').length).toBe(1); + expect(wrapper.findAll('[data-testid="re-request-success"]').length).toBe(1); + expect(wrapper.find('[data-testid="re-request-success"]').exists()).toBe(true); + }); + }); +}); diff --git a/spec/frontend/sidebar/components/severity/severity_spec.js b/spec/frontend/sidebar/components/severity/severity_spec.js index ba7cea0919c..1e4624e4dcd 100644 --- a/spec/frontend/sidebar/components/severity/severity_spec.js +++ b/spec/frontend/sidebar/components/severity/severity_spec.js @@ -1,7 +1,7 @@ -import { shallowMount } from '@vue/test-utils'; import { GlIcon } from '@gitlab/ui'; -import SeverityToken from '~/sidebar/components/severity/severity.vue'; +import { shallowMount } from '@vue/test-utils'; import { INCIDENT_SEVERITY } from '~/sidebar/components/severity/constants'; +import SeverityToken from '~/sidebar/components/severity/severity.vue'; describe('SeverityToken', () => { let wrapper; diff --git a/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js index fa40d75d4e9..747d370e1cf 100644 --- a/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js +++ b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js @@ -1,11 +1,11 @@ -import { shallowMount } from '@vue/test-utils'; import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlTooltip, GlSprintf } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import waitForPromises from 'helpers/wait_for_promises'; import createFlash from '~/flash'; -import SidebarSeverity from '~/sidebar/components/severity/sidebar_severity.vue'; -import SeverityToken from '~/sidebar/components/severity/severity.vue'; -import updateIssuableSeverity from '~/sidebar/components/severity/graphql/mutations/update_issuable_severity.mutation.graphql'; import { INCIDENT_SEVERITY, ISSUABLE_TYPES } from '~/sidebar/components/severity/constants'; +import updateIssuableSeverity from '~/sidebar/components/severity/graphql/mutations/update_issuable_severity.mutation.graphql'; +import SeverityToken from '~/sidebar/components/severity/severity.vue'; +import SidebarSeverity from '~/sidebar/components/severity/sidebar_severity.vue'; jest.mock('~/flash'); diff --git a/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js b/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js index 0b6a2e6ceb9..4d03aedf1be 100644 --- a/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js +++ b/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js @@ -1,6 +1,6 @@ -import { createMockDirective } from 'helpers/vue_mock_directive'; import { mount } from '@vue/test-utils'; import { stubTransition } from 'helpers/stub_transition'; +import { createMockDirective } from 'helpers/vue_mock_directive'; import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue'; describe('Issuable Time Tracker', () => { |