Skip to content

G
gitlab-ce
Commit 4c458201 authored by Eulyeon Ko's avatar Eulyeon Ko
Browse files
Options

Update iteration dropdowns in sidebars/board list 

- Iteration dates(period) replaces iteration title as the primary display attributes.
- Iteration titles will be made optional and should be displayed in gray.

Changelog: changed
EE: true
parent eeceb35f
Hide whitespace changes
Inline Side-by-side
Showing with 423 additions and 210 deletions
app/assets/javascripts/boards/components/board_content_sidebar.vue
View file @ 4c458201
......@@ -184,29 +184,15 @@ export default {
:issuable-type="issuableType"
data-testid="sidebar-milestones"
/>
<template v-if="!glFeatures.iterationCadences">
<sidebar-dropdown-widget
v-if="iterationFeatureAvailable && !isIncidentSidebar"
:iid="activeBoardItem.iid"
issuable-attribute="iteration"
:workspace-path="projectPathForActiveIssue"
:attr-workspace-path="groupPathForActiveIssue"
:issuable-type="issuableType"
class="gl-mt-5"
data-testid="iteration-edit"
/>
</template>
<template v-else>
<iteration-sidebar-dropdown-widget
v-if="iterationFeatureAvailable && !isIncidentSidebar"
:iid="activeBoardItem.iid"
:workspace-path="projectPathForActiveIssue"
:attr-workspace-path="groupPathForActiveIssue"
:issuable-type="issuableType"
class="gl-mt-5"
data-testid="iteration-edit"
/>
</template>
<iteration-sidebar-dropdown-widget
v-if="iterationFeatureAvailable && !isIncidentSidebar"
:iid="activeBoardItem.iid"
:workspace-path="projectPathForActiveIssue"
:attr-workspace-path="groupPathForActiveIssue"
:issuable-type="issuableType"
class="gl-mt-5"
data-testid="iteration-edit"
/>
</div>
<board-sidebar-time-tracker />
<sidebar-date-widget
......
ee/app/assets/javascripts/boards/components/board_add_new_column.vue
View file @ 4c458201
......@@ -17,8 +17,12 @@ import { ListType } from '~/boards/constants';
import { isScopedLabel } from '~/lib/utils/common_utils';
import { __ } from '~/locale';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { groupByIterationCadences } from 'ee/iterations/utils';
import IterationPeriod from 'ee/iterations/components/iteration_period.vue';
import {
groupByIterationCadences,
getIterationTitle,
getIterationPeriod,
} from 'ee/iterations/utils';
import IterationTitle from 'ee/iterations/components/iteration_title.vue';
export const listTypeInfo = {
[ListType.label]: {
......@@ -66,7 +70,7 @@ export default {
GlFormGroup,
GlFormRadio,
GlFormRadioGroup,
IterationPeriod,
IterationTitle,
},
directives: {
GlTooltip,
......@@ -240,6 +244,9 @@ export default {
this.selectedItem = { ...item };
}
},
getIterationTitle,
getIterationPeriod,
},
};
</script>
......@@ -320,12 +327,14 @@ export default {
</div>
</gl-dropdown-section-header>
<gl-dropdown-text v-for="iteration in cadence.iterations" :key="iteration.id">
<gl-form-radio :value="iteration.id" :aria-describedby="cadence.id">
{{ iteration.title }}
<div class="gl-display-inline-block">
<IterationPeriod data-testid="new-column-iteration-period">{{
iteration.period
}}</IterationPeriod>
<gl-form-radio
:value="iteration.id"
:aria-describedby="cadence.id"
data-testid="new-column-iteration-item"
>
{{ iteration.period }}
<div v-if="getIterationTitle(iteration)" data-testid="new-column-iteration-title">
<iteration-title>{{ getIterationTitle(iteration) }}</iteration-title>
</div>
</gl-form-radio>
</gl-dropdown-text>
......@@ -363,6 +372,16 @@ export default {
:sub-label="`@${item.username}`"
:src="item.avatarUrl"
/>
<div
v-else-if="iterationTypeSelected"
class="gl-display-inline-block"
data-testid="new-column-iteration-item"
>
{{ getIterationPeriod(item) }}
<div v-if="getIterationTitle(item)" data-testid="new-column-iteration-title">
<iteration-title>{{ getIterationTitle(item) }}</iteration-title>
</div>
</div>
<div v-else class="gl-display-inline-block">
{{ item.title }}
</div>
......
ee/app/assets/javascripts/iterations/components/iteration_title.vue 0 → 100644
View file @ 4c458201
<template>
<div class="gl-text-gray-400">
<slot></slot>
</div>
</template>
ee/app/assets/javascripts/iterations/utils.js
View file @ 4c458201
......@@ -13,6 +13,10 @@ export function getIterationPeriod({ startDate, dueDate }) {
return `${start} - ${due}`;
}
export function getIterationTitle(iteration) {
return iteration?.title ? iteration.title : false;
}
/**
* Group a list of iterations by cadence.
*
......
ee/app/assets/javascripts/sidebar/components/iteration_dropdown.vue
View file @ 4c458201
......@@ -8,15 +8,19 @@ import {
GlTooltipDirective,
GlLoadingIcon,
} from '@gitlab/ui';
import IterationPeriod from 'ee/iterations/components/iteration_period.vue';
import { groupByIterationCadences } from 'ee/iterations/utils';
import IterationTitle from 'ee/iterations/components/iteration_title.vue';
import {
groupByIterationCadences,
getIterationPeriod,
getIterationTitle,
} from 'ee/iterations/utils';
import { __ } from '~/locale';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { iterationSelectTextMap, iterationDisplayState } from '../constants';
import groupIterationsQuery from '../queries/iterations.query.graphql';
export default {
noIteration: { title: iterationSelectTextMap.noIteration, id: null },
noIteration: { text: iterationSelectTextMap.noIteration, id: null },
directives: {
GlTooltip: GlTooltipDirective,
},
......@@ -27,7 +31,7 @@ export default {
GlSearchBoxByType,
GlDropdownSectionHeader,
GlLoadingIcon,
IterationPeriod,
IterationTitle,
},
mixins: [glFeatureFlagMixin()],
apollo: {
......@@ -72,8 +76,10 @@ export default {
iterationCadences() {
return groupByIterationCadences(this.iterations);
},
title() {
return this.currentIteration?.title || __('Select iteration');
dropdownSelectedText() {
return this.currentIteration?.period
? this.getIterationPeriod(this.currentIteration)
: __('Select iteration');
},
},
methods: {
......@@ -92,12 +98,14 @@ export default {
onDropdownShow() {
this.shouldFetch = true;
},
getIterationPeriod,
getIterationTitle,
},
};
</script>
<template>
<gl-dropdown :text="title" class="gl-w-full" block @show="onDropdownShow">
<gl-dropdown :text="dropdownSelectedText" class="gl-w-full" block @show="onDropdownShow">
<gl-dropdown-section-header class="gl-display-flex! gl-justify-content-center">{{
__('Assign Iteration')
}}</gl-dropdown-section-header>
......@@ -107,7 +115,7 @@ export default {
:is-checked="isIterationChecked($options.noIteration.id)"
@click="onClick($options.noIteration)"
>
{{ $options.noIteration.title }}
{{ $options.noIteration.text }}
</gl-dropdown-item>
<gl-dropdown-divider />
<gl-loading-icon v-if="$apollo.queries.iterations.loading" size="sm" />
......@@ -118,8 +126,12 @@ export default {
:is-check-item="true"
:is-checked="isIterationChecked(iterationItem.id)"
@click="onClick(iterationItem)"
>{{ iterationItem.title }}</gl-dropdown-item
>
{{ getIterationPeriod(iterationItem) }}
<iteration-title v-if="getIterationTitle(iterationItem)">
{{ getIterationTitle(iterationItem) }}
</iteration-title>
</gl-dropdown-item>
</template>
<template v-else>
<template v-for="(cadence, index) in iterationCadences">
......@@ -134,8 +146,10 @@ export default {
:is-checked="isIterationChecked(iterationItem.id)"
@click="onClick(iterationItem)"
>
{{ iterationItem.title }}
<IterationPeriod>{{ iterationItem.period }}</IterationPeriod>
{{ iterationItem.period }}
<iteration-title v-if="getIterationTitle(iterationItem)">
{{ getIterationTitle(iterationItem) }}
</iteration-title>
</gl-dropdown-item>
</template>
</template>
......
ee/app/assets/javascripts/sidebar/components/iteration_sidebar_dropdown_widget.vue
View file @ 4c458201
......@@ -7,9 +7,14 @@ import {
GlLink,
} from '@gitlab/ui';
import SidebarDropdownWidget from 'ee/sidebar/components/sidebar_dropdown_widget.vue';
import IterationPeriod from 'ee/iterations/components/iteration_period.vue';
import { getIterationPeriod, groupByIterationCadences } from 'ee/iterations/utils';
import IterationTitle from 'ee/iterations/components/iteration_title.vue';
import {
getIterationPeriod,
getIterationTitle,
groupByIterationCadences,
} from 'ee/iterations/utils';
import { IssuableType } from '~/issues/constants';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { IssuableAttributeType } from '../constants';
export default {
......@@ -21,8 +26,9 @@ export default {
GlIcon,
GlLink,
SidebarDropdownWidget,
IterationPeriod,
IterationTitle,
},
mixins: [glFeatureFlagMixin()],
props: {
attrWorkspacePath: {
required: true,
......@@ -48,12 +54,9 @@ export default {
getCadenceTitle(currentIteration) {
return currentIteration?.iterationCadence?.title;
},
getIterationPeriod(iteration) {
return getIterationPeriod({ startDate: iteration?.startDate, dueDate: iteration?.dueDate });
},
groupByIterationCadences(iterations) {
return groupByIterationCadences(iterations);
},
groupByIterationCadences,
getIterationPeriod,
getIterationTitle,
},
};
</script>
......@@ -66,8 +69,8 @@ export default {
:issuable-type="issuableType"
:workspace-path="workspacePath"
>
<template #value="{ attributeTitle, attributeUrl, currentAttribute }">
<p class="gl-font-weight-bold gl-line-height-20 gl-m-0">
<template #value="{ attributeUrl, currentAttribute }">
<p v-if="glFeatures.iterationCadences" class="gl-font-weight-bold gl-line-height-20 gl-m-0">
{{ getCadenceTitle(currentAttribute) }}
</p>
<gl-link
......@@ -77,15 +80,21 @@ export default {
>
<div>
<gl-icon name="iteration" class="gl-mr-1" />
{{ attributeTitle }}
{{ getIterationPeriod(currentAttribute) }}
</div>
<IterationPeriod>{{ getIterationPeriod(currentAttribute) }}</IterationPeriod>
<iteration-title v-if="getIterationTitle(currentAttribute)">{{
getIterationTitle(currentAttribute)
}}</iteration-title>
</gl-link>
</template>
<template #list="{ attributesList = [], isAttributeChecked, updateAttribute }">
<template v-for="(cadence, index) in groupByIterationCadences(attributesList)">
<gl-dropdown-divider v-if="index !== 0" :key="index" />
<gl-dropdown-section-header :key="cadence.title">
<gl-dropdown-divider v-if="index !== 0 && glFeatures.iterationCadences" :key="index" />
<gl-dropdown-section-header
v-if="glFeatures.iterationCadences"
:key="cadence.title"
data-testid="cadence-title"
>
{{ cadence.title }}
</gl-dropdown-section-header>
<gl-dropdown-item
......@@ -96,8 +105,10 @@ export default {
:data-testid="`${$options.issuableAttribute}-items`"
@click="updateAttribute(iteration.id)"
>
{{ iteration.title }}
<IterationPeriod>{{ iteration.period }}</IterationPeriod>
{{ iteration.period }}
<iteration-title v-if="getIterationTitle(iteration)">{{
getIterationTitle(iteration)
}}</iteration-title>
</gl-dropdown-item>
</template>
</template>
......
ee/app/assets/javascripts/sidebar/mount_sidebar.js
View file @ 4c458201
......@@ -128,10 +128,6 @@ function mountIterationSelect() {
const { groupPath, canEdit, projectPath, issueIid } = el.dataset;
const IterationDropdown = gon.features.iterationCadences
? IterationSidebarDropdownWidget
: SidebarDropdownWidget;
return new Vue({
el,
apolloProvider,
......@@ -140,7 +136,7 @@ function mountIterationSelect() {
isClassicSidebar: true,
},
render: (createElement) =>
createElement(IterationDropdown, {
createElement(IterationSidebarDropdownWidget, {
props: {
attrWorkspacePath: groupPath,
workspacePath: projectPath,
......
ee/spec/features/boards/user_adds_lists_to_board_spec.rb
View file @ 4c458201
......@@ -2,7 +2,9 @@
require 'spec_helper'
RSpec.describe 'User adds milestone lists', :js do
RSpec.describe 'User adds milestone/iterations lists', :js do
include IterationHelpers
let_it_be(:group) { create(:group, :nested) }
let_it_be(:project) { create(:project, :public, namespace: group) }
let_it_be(:group_board) { create(:board, group: group) }
......@@ -62,7 +64,7 @@ RSpec.describe 'User adds milestone lists', :js do
end
it 'creates iteration column' do
add_list('Iteration', iteration.title)
add_list('Iteration', iteration_period(iteration))
expect(page).to have_selector('.board', text: iteration.title)
expect(find('.board:nth-child(2) .board-card')).to have_content(issue_with_iteration.title)
......
ee/spec/features/issues/issue_sidebar_spec.rb
View file @ 4c458201
......@@ -4,6 +4,7 @@ require 'spec_helper'
RSpec.describe 'Issue Sidebar' do
include MobileHelpers
include IterationHelpers
let_it_be(:group) { create(:group, :nested) }
let_it_be(:project) { create(:project, :public, namespace: group) }
......@@ -169,6 +170,7 @@ RSpec.describe 'Issue Sidebar' do
within '[data-testid="iteration-edit"]' do
expect(page).not_to have_text(iteration_cadence.title)
expect(page).to have_text(iteration.title)
expect(page).to have_text(iteration_period(iteration))
end
select_iteration(iteration.title)
......@@ -176,6 +178,7 @@ RSpec.describe 'Issue Sidebar' do
within '[data-testid="select-iteration"]' do
expect(page).not_to have_text(iteration_cadence.title)
expect(page).to have_text(iteration.title)
expect(page).to have_text(iteration_period(iteration))
end
find_and_click_edit_iteration
......@@ -297,8 +300,4 @@ RSpec.describe 'Issue Sidebar' do
wait_for_requests
end
end
def iteration_period(iteration)
"#{iteration.start_date.to_s(:medium)} - #{iteration.due_date.to_s(:medium)}"
end
end
ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap
View file @ 4c458201
......@@ -573,14 +573,13 @@ exports[`ee/BoardContentSidebar issue sidebar matches the snapshot 1`] = `
workspacepath="gitlab-org/gitlab-test"
/>
<sidebardropdownwidget-stub
attrworkspacepath="gitlab-org"
<iterationsidebardropdownwidget-stub
attr-workspace-path="gitlab-org"
class="gl-mt-5"
data-testid="iteration-edit"
iid="27"
issuableattribute="iteration"
issuabletype="issue"
workspacepath="gitlab-org/gitlab-test"
issuable-type="issue"
workspace-path="gitlab-org/gitlab-test"
/>
</div>
......
ee/spec/frontend/boards/components/board_add_new_column_spec.js
View file @ 4c458201
......@@ -7,6 +7,7 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import BoardAddNewColumnForm from '~/boards/components/board_add_new_column_form.vue';
import { ListType } from '~/boards/constants';
import defaultState from '~/boards/stores/state';
import { getIterationPeriod } from 'ee/iterations/utils';
import { mockAssignees, mockLists, mockIterations } from '../mock_data';
const mockLabelList = mockLists[1];
......@@ -94,8 +95,7 @@ describe('BoardAddNewColumn', () => {
const findForm = () => wrapper.findComponent(BoardAddNewColumnForm);
const cancelButton = () => wrapper.findByTestId('cancelAddNewColumn');
const submitButton = () => wrapper.findByTestId('addNewColumnButton');
const findLabels = () => wrapper.findComponent(GlDropdown).findAll('label');
const findIterationPeriod = (item) => item.find('[data-testid="new-column-iteration-period"]');
const findIterationItemAt = (i) => wrapper.findAllByTestId('new-column-iteration-item').at(i);
const listTypeSelect = (type) => {
const radio = wrapper
.findAllComponents(GlFormRadio)
......@@ -110,6 +110,18 @@ describe('BoardAddNewColumn', () => {
await nextTick();
};
const testIterationWithTitle = () => {
expect(findIterationItemAt(1).text()).toContain(getIterationPeriod(mockIterations[1]));
expect(findIterationItemAt(1).text()).toContain(mockIterations[1].title);
};
const testIterationWithoutTitle = () => {
expect(findIterationItemAt(0).text()).toContain(getIterationPeriod(mockIterations[0]));
expect(findIterationItemAt(0).find("[data-testid='new-column-iteration-title']").exists()).toBe(
false,
);
};
it('clicking cancel hides the form', () => {
const setAddColumnFormVisibility = jest.fn();
mountComponent({
......@@ -238,16 +250,8 @@ describe('BoardAddNewColumn', () => {
const itemList = wrapper.findComponent(GlDropdown).findAllComponents(GlFormRadio);
expect(itemList).toHaveLength(mockIterations.length);
expect(itemList.at(0).attributes('value')).toBe(mockIterations[0].id);
expect(itemList.at(1).attributes('value')).toBe(mockIterations[1].id);
});
describe('iteration_cadences feature flag is off', () => {
it('does not display iteration period', async () => {
const labels = findLabels();
expect(findIterationPeriod(labels.at(0)).exists()).toBe(false);
expect(findIterationPeriod(labels.at(1)).exists()).toBe(false);
});
testIterationWithoutTitle();
testIterationWithTitle();
});
});
......@@ -280,12 +284,9 @@ describe('BoardAddNewColumn', () => {
expect(cadenceTitles).toEqual(cadenceTitles.map((_, idx) => getCadenceTitleFromMocks(idx)));
});
it('displays iteration period', async () => {
const iterations = wrapper.findAllByTestId('new-column-iteration-period');
expect(iterations.at(0).text()).toContain('Oct 5, 2021 - Oct 10, 2021');
expect(findIterationPeriod(iterations.at(0)).isVisible()).toBe(true);
expect(iterations.at(1).text()).toContain('Oct 12, 2021 - Oct 17, 2021');
expect(findIterationPeriod(iterations.at(1)).isVisible()).toBe(true);
it('displays iteration period optionally with title', async () => {
testIterationWithoutTitle();
testIterationWithTitle();
});
});
});
ee/spec/frontend/boards/components/board_content_sidebar_spec.js
View file @ 4c458201
......@@ -80,6 +80,7 @@ describe('ee/BoardContentSidebar', () => {
SidebarSubscriptionsWidget: true,
SidebarWeightWidget: true,
SidebarDropdownWidget: true,
IterationSidebarDropdownWidget: true,
SidebarTodoWidget: true,
MountingPortal: true,
},
......
ee/spec/frontend/boards/mock_data.js
View file @ 4c458201
......@@ -121,7 +121,7 @@ export const mockMilestones = [
export const mockIterations = [
{
id: 'gid://gitlab/Iteration/1',
title: 'Iteration 1',
title: null,
iterationCadence: {
id: 'gid://gitlab/Iterations::Cadence/1',
title: 'GitLab.org Iterations',
......@@ -131,7 +131,7 @@ export const mockIterations = [
},
{
id: 'gid://gitlab/Iteration/2',
title: 'Iteration 2',
title: 'Some iteration',
iterationCadence: {
id: 'gid://gitlab/Iterations::Cadence/2',
title: 'GitLab.org Iterations: Volume II',
......
ee/spec/frontend/sidebar/components/iteration_dropdown_spec.js
View file @ 4c458201
......@@ -12,6 +12,7 @@ import VueApollo from 'vue-apollo';
import IterationDropdown from 'ee/sidebar/components/iteration_dropdown.vue';
import groupIterationsQuery from 'ee/sidebar/queries/iterations.query.graphql';
import createMockApollo from 'helpers/mock_apollo_helper';
import { getIterationPeriod } from 'ee/iterations/utils';
Vue.use(VueApollo);
......@@ -32,7 +33,7 @@ const TEST_ITERATIONS = [
},
{
id: '22',
title: 'Another Test Title',
title: null,
startDate: '2021-10-06',
dueDate: '2021-10-10',
webUrl: '',
......@@ -44,7 +45,7 @@ const TEST_ITERATIONS = [
},
{
id: '33',
title: 'Yet Another Test Title',
title: null,
startDate: '2021-10-11',
dueDate: '2021-10-15',
webUrl: '',
......@@ -84,14 +85,9 @@ describe('IterationDropdown', () => {
jest.runOnlyPendingTimers();
};
const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
const findDropdownItemsAt = (i) => findDropdownItems().at(i);
const findDropdownItemWithText = (text) =>
findDropdownItems().wrappers.find((x) => x.text() === text);
const findDropdownItemsData = () =>
findDropdownItems().wrappers.map((x) => ({
isCheckItem: x.props('isCheckItem'),
isChecked: x.props('isChecked'),
text: x.text(),
}));
findDropdownItems().wrappers.find((x) => x.text().includes(text));
const selectDropdownItemAndWait = async (text) => {
const item = findDropdownItemWithText(text);
......@@ -173,16 +169,31 @@ describe('IterationDropdown', () => {
expect(isLoading()).toBe(false);
});
it('shows dropdown items', () => {
const result = [IterationDropdown.noIteration].concat(TEST_ITERATIONS);
it('shows checkable dropdown items in unchecked state', () => {
expect(findDropdownItems().wrappers.map((x) => x.props('isCheckItem'))).toEqual([
true,
true,
true,
true,
]);
expect(findDropdownItems().wrappers.map((x) => x.props('isChecked'))).toEqual([
false,
false,
false,
false,
]);
});
expect(findDropdownItemsData()).toEqual(
result.map((x) => ({
isCheckItem: true,
isChecked: false,
text: x.title,
})),
);
it('populates dropdown items with correct names', () => {
// "No iteration" dropdown item
expect(findDropdownItemsAt(0).text()).toContain(IterationDropdown.noIteration.text);
// Iteration with title
expect(findDropdownItemsAt(1).text()).toContain(getIterationPeriod(TEST_ITERATIONS[0]));
expect(findDropdownItemsAt(1).text()).toContain(TEST_ITERATIONS[0].title);
// Iteration without title
expect(findDropdownItemsAt(2).text()).toContain(getIterationPeriod(TEST_ITERATIONS[1]));
});
it('does not re-query if opened again', async () => {
......@@ -192,41 +203,41 @@ describe('IterationDropdown', () => {
expect(groupIterationsSpy).not.toHaveBeenCalled();
});
describe.each([0, 1, 2])('when item %s is selected', (index) => {
const allIterations = [IterationDropdown.noIteration].concat(TEST_ITERATIONS);
const selected = allIterations[index];
const asNotChecked = ({ title }) => ({ isCheckItem: true, isChecked: false, text: title });
describe.each([
{
text: IterationDropdown.noIteration.text,
iteration: IterationDropdown.noIteration,
},
{
text: getIterationPeriod(TEST_ITERATIONS[0]),
iteration: TEST_ITERATIONS[0],
},
{
text: getIterationPeriod(TEST_ITERATIONS[1]),
iteration: TEST_ITERATIONS[1],
},
])("when iteration '%s' is selected", ({ text, iteration }) => {
beforeEach(async () => {
await selectDropdownItemAndWait(selected.title);
await selectDropdownItemAndWait(text);
});
it('shows item as checked', () => {
const prevSelected = allIterations.slice(0, index);
const afterSelected = allIterations.slice(index + 1);
expect(findDropdownItemsData()).toEqual([
...prevSelected.map(asNotChecked),
{
isCheckItem: true,
isChecked: true,
text: selected.title,
},
...afterSelected.map(asNotChecked),
]);
});
it('emits event', () => {
expect(wrapper.emitted('onIterationSelect')).toEqual([[selected]]);
it('shows item as checked and emits event', () => {
expect(findDropdownItemWithText(text).props('isChecked')).toBe(true);
expect(wrapper.emitted('onIterationSelect')).toEqual([[iteration]]);
});
describe('when item is clicked again', () => {
beforeEach(async () => {
await selectDropdownItemAndWait(selected.title);
await selectDropdownItemAndWait(text);
});
it('shows item as unchecked', () => {
expect(findDropdownItemsData()).toEqual(allIterations.map(asNotChecked));
expect(findDropdownItems().wrappers.map((x) => x.props('isChecked'))).toEqual([
false,
false,
false,
false,
]);
});
it('emits event', () => {
......@@ -271,17 +282,17 @@ describe('IterationDropdown', () => {
expect(dropdownItems.at(0).text()).toBe('Assign Iteration');
expect(dropdownItems.at(1).text()).toContain('No iteration');
expect(dropdownItems.at(2).findComponent(GlDropdownDivider).exists()).toBe(true);
expect(dropdownItems.at(3).findComponent(GlDropdownSectionHeader).text()).toBe('My Cadence');
expect(dropdownItems.at(4).text()).toContain('Test Title');
expect(dropdownItems.at(4).text()).toContain('Oct 1, 2021 - Oct 5, 2021');
expect(dropdownItems.at(5).text()).toContain('Yet Another Test Title');
expect(dropdownItems.at(4).text()).toContain('Test Title');
expect(dropdownItems.at(5).text()).toContain('Oct 11, 2021 - Oct 15, 2021');
expect(dropdownItems.at(6).findComponent(GlDropdownDivider).exists()).toBe(true);
expect(dropdownItems.at(7).findComponent(GlDropdownSectionHeader).text()).toBe(
'My Second Cadence',
);
expect(dropdownItems.at(8).text()).toContain('Another Test Title');
expect(dropdownItems.at(8).text()).toContain('Oct 6, 2021 - Oct 10, 2021');
});
});
......
ee/spec/frontend/sidebar/components/iteration_sidebar_dropdown_widget_spec.js
View file @ 4c458201
import { shallowMount } from '@vue/test-utils';
import { mount, createLocalVue } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import IterationSidebarDropdownWidget from 'ee/sidebar/components/iteration_sidebar_dropdown_widget.vue';
import SidebarDropdownWidget from 'ee/sidebar/components/sidebar_dropdown_widget.vue';
import createMockApollo from 'helpers/mock_apollo_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { IssuableType } from '~/issues/constants';
import groupIterationsQuery from 'ee/sidebar/queries/group_iterations.query.graphql';
import projectIssueIterationQuery from 'ee/sidebar/queries/project_issue_iteration.query.graphql';
import { IssuableAttributeType, issuableAttributesQueries } from 'ee/sidebar/constants';
import { getIterationPeriod } from 'ee/iterations/utils';
import {
mockIssue,
mockGroupIterationsResponse,
mockIteration1,
mockIteration2,
mockCurrentIterationResponse1,
mockCurrentIterationResponse2,
} from '../mock_data';
import { waitForApollo, clickEdit, search } from '../helpers';
const localVue = createLocalVue();
describe('IterationSidebarDropdownWidget', () => {
let wrapper;
let mockApollo;
const defaultProps = {
attrWorkspacePath: 'attr/workspace/path',
iid: 'iid',
issuableType: IssuableType.Issue,
workspacePath: 'workspace/path',
};
const findCurrentIterationText = () => wrapper.findByTestId('select-iteration').text();
const findIterationItemsTextAt = (at) => wrapper.findAllByTestId('iteration-items').at(at).text();
const findIterationCadenceTitleAt = (at) =>
wrapper.findAllByTestId('cadence-title').at(at).text();
const createComponent = () =>
shallowMount(IterationSidebarDropdownWidget, {
propsData: defaultProps,
});
const createComponentWithApollo = async ({
iterationCadences = false,
currentIterationResponse = mockCurrentIterationResponse1,
} = {}) => {
localVue.use(VueApollo);
mockApollo = createMockApollo([
[groupIterationsQuery, jest.fn().mockResolvedValue(mockGroupIterationsResponse)],
[projectIssueIterationQuery, jest.fn().mockResolvedValue(currentIterationResponse)],
]);
wrapper = extendedWrapper(
mount(IterationSidebarDropdownWidget, {
localVue,
provide: {
glFeatures: { iterationCadences },
issuableAttributesQueries,
canUpdate: true,
},
apolloProvider: mockApollo,
propsData: {
workspacePath: mockIssue.projectPath,
attrWorkspacePath: mockIssue.groupPath,
iid: mockIssue.iid,
issuableType: IssuableType.Issue,
issuableAttribute: IssuableAttributeType.Iteration,
},
}),
);
await waitForApollo();
};
afterEach(() => {
wrapper.destroy();
});
describe('SidebarDropdownWidget component', () => {
it('renders', () => {
wrapper = createComponent();
describe('iteration_cadences feature flag is off', () => {
describe('when showing the current iteration (dropdown is closed)', () => {
it('renders just iteration period for iteration without title', async () => {
await createComponentWithApollo();
expect(findCurrentIterationText()).toContain(getIterationPeriod(mockIteration1));
});
it('renders iteration period with optional title for iteration with title', async () => {
await createComponentWithApollo({
iterationCadences: false,
currentIterationResponse: mockCurrentIterationResponse2,
});
expect(findCurrentIterationText()).toContain(getIterationPeriod(mockIteration2));
expect(findCurrentIterationText()).toContain(mockIteration2.title);
});
});
describe('when listing iterations in the dropdown', () => {
it('renders iterations', async () => {
await createComponentWithApollo();
await clickEdit(wrapper);
await search(wrapper, 'iteration');
// mockIteration1 has no title
expect(findIterationItemsTextAt(0)).toContain(getIterationPeriod(mockIteration1));
// mockIteration2 has a title
expect(findIterationItemsTextAt(1)).toContain(getIterationPeriod(mockIteration2));
expect(findIterationItemsTextAt(1)).toContain(mockIteration2.title);
});
});
});
describe('iteration_cadences feature flag is on', () => {
describe('when showing the current iteration (dropdown is closed)', () => {
it('renders cadence title', async () => {
await createComponentWithApollo({ iterationCadences: true });
expect(findCurrentIterationText()).toContain(mockIteration1.iterationCadence.title);
});
it('renders just iteration period for iteration without title', async () => {
await createComponentWithApollo({ iterationCadences: true });
expect(findCurrentIterationText()).toContain(getIterationPeriod(mockIteration1));
});
it('renders iteration period with optional title for iteration with title', async () => {
await createComponentWithApollo({
iterationCadences: true,
currentIterationResponse: mockCurrentIterationResponse2,
});
expect(findCurrentIterationText()).toContain(getIterationPeriod(mockIteration2));
expect(findCurrentIterationText()).toContain(mockIteration2.title);
});
});
describe('when listing iterations in the dropdown', () => {
it('renders iterations with cadence names', async () => {
await createComponentWithApollo({ iterationCadences: true });
await clickEdit(wrapper);
await search(wrapper, 'iteration');
// mockIteration1 has no title
expect(findIterationCadenceTitleAt(0)).toContain(mockIteration1.iterationCadence.title);
expect(findIterationItemsTextAt(0)).toContain(getIterationPeriod(mockIteration1));
expect(wrapper.findComponent(SidebarDropdownWidget).props()).toEqual({
...defaultProps,
issuableAttribute: 'iteration',
// mockIteration2 has a title
expect(findIterationCadenceTitleAt(1)).toContain(mockIteration2.iterationCadence.title);
expect(findIterationItemsTextAt(1)).toContain(getIterationPeriod(mockIteration2));
expect(findIterationItemsTextAt(1)).toContain(mockIteration2.title);
});
});
});
......
ee/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
View file @ 4c458201
......@@ -16,10 +16,10 @@ import projectIssueEpicMutation from 'ee/sidebar/queries/project_issue_epic.muta
import projectIssueEpicQuery from 'ee/sidebar/queries/project_issue_epic.query.graphql';
import createMockApollo from 'helpers/mock_apollo_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import createFlash from '~/flash';
import { IssuableType } from '~/issues/constants';
import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
import { waitForDropdown, waitForApollo, clickEdit, search } from '../helpers';
import {
mockIssue,
......@@ -42,39 +42,11 @@ describe('SidebarDropdownWidget', () => {
const findDropdown = () => wrapper.findComponent(GlDropdown);
const findDropdownText = () => wrapper.findComponent(GlDropdownText);
const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
const findDropdownItemWithText = (text) =>
findAllDropdownItems().wrappers.find((x) => x.text() === text);
const findSidebarEditableItem = () => wrapper.findComponent(SidebarEditableItem);
const findEditButton = () => findSidebarEditableItem().find('[data-testid="edit-button"]');
const findSelectedAttribute = () => wrapper.findByTestId('select-epic');
const waitForDropdown = async () => {
// BDropdown first changes its `visible` property
// in a requestAnimationFrame callback.
// It then emits `shown` event in a watcher for `visible`
// Hence we need both of these:
await waitForPromises();
await nextTick();
};
const waitForApollo = async () => {
jest.runOnlyPendingTimers();
await waitForPromises();
};
// Used with createComponentWithApollo which uses 'mount'
const clickEdit = async () => {
await findEditButton().trigger('click');
await waitForDropdown();
// We should wait for attributes list to be fetched.
await waitForApollo();
};
// Used with createComponent which shallow mounts components
const toggleDropdown = async () => {
wrapper.findComponent(SidebarEditableItem).vm.$emit('open');
......@@ -165,9 +137,7 @@ describe('SidebarDropdownWidget', () => {
await toggleDropdown();
findSearchBox().vm.$emit('input', 'non existing epics');
await nextTick();
await search(wrapper, 'non existing epics');
expect(findDropdownText().text()).toBe('No open iteration found');
});
......@@ -192,7 +162,7 @@ describe('SidebarDropdownWidget', () => {
requestHandlers: [[projectIssueEpicMutation, epicMutationSpy]],
});
await clickEdit();
await clickEdit(wrapper);
});
it('renders the dropdown on clicking edit', async () => {
......@@ -231,7 +201,7 @@ describe('SidebarDropdownWidget', () => {
groupEpicsSpy: jest.fn().mockRejectedValue(error),
});
await clickEdit();
await clickEdit(wrapper);
expect(createFlash).toHaveBeenCalledWith({
message: 'Failed to fetch the epic for this issue. Please try again.',
......@@ -246,7 +216,7 @@ describe('SidebarDropdownWidget', () => {
expect(groupEpicsSpy).not.toHaveBeenCalled();
await clickEdit();
await clickEdit(wrapper);
expect(groupEpicsSpy).toHaveBeenNthCalledWith(1, {
fullPath: mockIssue.groupPath,
......@@ -262,15 +232,11 @@ describe('SidebarDropdownWidget', () => {
groupEpicsSpy = jest.fn().mockResolvedValueOnce(emptyGroupEpicsResponse);
await createComponentWithApollo({ groupEpicsSpy });
await clickEdit();
await clickEdit(wrapper);
});
it('sends a groupEpics query with the entered search term "foo" and in TITLE param', async () => {
findSearchBox().vm.$emit('input', mockSearchTerm);
await nextTick();
// Account for debouncing
jest.runAllTimers();
await search(wrapper, mockSearchTerm);
expect(groupEpicsSpy).toHaveBeenNthCalledWith(2, {
fullPath: mockIssue.groupPath,
......@@ -287,7 +253,7 @@ describe('SidebarDropdownWidget', () => {
groupEpicsSpy = jest.fn().mockResolvedValueOnce(emptyGroupEpicsResponse);
await createComponentWithApollo({ groupEpicsSpy });
await clickEdit();
await clickEdit(wrapper);
});
it('sends a groupEpics query with empty title and undefined in param', async () => {
......@@ -304,11 +270,7 @@ describe('SidebarDropdownWidget', () => {
});
it('sends a groupEpics query for an IID with the entered search term "&1"', async () => {
findSearchBox().vm.$emit('input', '&1');
await nextTick();
// Account for debouncing
jest.runAllTimers();
await search(wrapper, '&1');
expect(groupEpicsSpy).toHaveBeenNthCalledWith(2, {
fullPath: mockIssue.groupPath,
......
ee/spec/frontend/sidebar/helpers.js 0 → 100644
View file @ 4c458201
import { nextTick } from 'vue';
import { GlSearchBoxByType } from '@gitlab/ui';
import waitForPromises from 'helpers/wait_for_promises';
import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
const findSidebarEditableItem = (wrapper) => wrapper.findComponent(SidebarEditableItem);
const findEditButton = (wrapper) =>
findSidebarEditableItem(wrapper).find('[data-testid="edit-button"]');
const findSearchBox = (wrapper) => wrapper.findComponent(GlSearchBoxByType);
export const search = async (wrapper, searchTerm) => {
findSearchBox(wrapper).vm.$emit('input', searchTerm);
await nextTick();
jest.runAllTimers(); // Account for debouncing
};
export const waitForDropdown = async () => {
// BDropdown first changes its `visible` property
// in a requestAnimationFrame callback.
// It then emits `shown` event in a watcher for `visible`
// Hence we need both of these:
await waitForPromises();
await nextTick();
};
export const waitForApollo = async () => {
jest.runOnlyPendingTimers();
await waitForPromises();
};
// Used with createComponentWithApollo which uses 'mount'
export const clickEdit = async (wrapper) => {
await findEditButton(wrapper).trigger('click');
await waitForDropdown(wrapper);
// We should wait for attributes list to be fetched.
await waitForApollo();
};
ee/spec/frontend/sidebar/mock_data.js
View file @ 4c458201
......@@ -9,12 +9,25 @@ export const mockIssue = {
export const mockIssueId = 'gid://gitlab/Issue/1';
export const mockCadence1 = {
id: 'gid://gitlab/Iterations::Cadence/1',
title: 'Plan cadence',
};
export const mockCadence2 = {
id: 'gid://gitlab/Iterations::Cadence/2',
title: 'Automatic cadence',
};
export const mockIteration1 = {
__typename: 'Iteration',
id: 'gid://gitlab/Iteration/1',
title: 'Foobar Iteration',
title: null,
webUrl: 'http://gdk.test:3000/groups/gitlab-org/-/iterations/1',
state: 'opened',
startDate: '2021-10-05',
dueDate: '2021-10-10',
iterationCadence: mockCadence1,
};
export const mockIteration2 = {
......@@ -23,6 +36,9 @@ export const mockIteration2 = {
title: 'Awesome Iteration',
webUrl: 'http://gdk.test:3000/groups/gitlab-org/-/iterations/2',
state: 'opened',
startDate: '2021-10-12',
dueDate: '2021-10-17',
iterationCadence: mockCadence2,
};
export const mockEpic1 = {
......@@ -45,7 +61,7 @@ export const mockGroupIterationsResponse = {
data: {
workspace: {
id: '1',
iterations: {
attributes: {
nodes: [mockIteration1, mockIteration2],
},
__typename: 'IterationConnection',
......@@ -93,6 +109,36 @@ export const emptyGroupEpicsResponse = {
},
};
export const mockCurrentIterationResponse1 = {
data: {
errors: [],
workspace: {
id: '1',
issuable: {
id: mockIssueId,
attribute: mockIteration1,
__typename: 'Issue',
},
__typename: 'Project',
},
},
};
export const mockCurrentIterationResponse2 = {
data: {
errors: [],
workspace: {
id: '1',
issuable: {
id: mockIssueId,
attribute: mockIteration2,
__typename: 'Issue',
},
__typename: 'Project',
},
},
};
export const noCurrentIterationResponse = {
data: {
workspace: {
......
spec/support/helpers/iteration_helpers.rb 0 → 100644
View file @ 4c458201
# frozen_string_literal: true
module IterationHelpers
def iteration_period(iteration)
"#{iteration.start_date.to_s(:medium)} - #{iteration.due_date.to_s(:medium)}"
end
end
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7